初始css
css简介：
css是一个层叠样式表
css能够把款式和htm拆散
css简略实用：
css三种样式表
1. 第一种：内联样式表: 在标签中，把CSS值写在Style属性中。此种做法不举荐！不举荐的起因：①多个雷同的Style就要写多遍，代码量大 ② 没有实现标签和CSS拆散，前期维护性差
2. 第二种：内嵌样式表：把CSS款式写在head标签中. 实现CSS复用， 还是没有实现HTML标签和CSS文件级别的拆散
3. 第三种：内部样式表：把CSS存在独自的CSS文件中，在HTML中Link 相应的CSS文件即可
div标签：
div默认是一个矩形容器。
div对网页经行布局。
width：宽度
height：高度
background-color ：背景色
css根本语法：
选择器 {
款式}
id选择器：#id名称
class选择器：.class名称
标签选择器： div（间接写标签）
css设置容器和字体大小：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
font-size:20px;
}
body{
background-color:red;
}
div {
width:1200px;
height: 200px;
background-color: navy;
font-size: 40px;
}
div>div{
float:left; /*所有的子div横向排列*/
}
div>.one{
width:50%;
height: 90%;
background-color:indianred;
font-size:50px;/*div外面字体大小*/
}
div>.two{
width:30%;
height: 90%;
background-color:yellow;
font-size:0.5em;
}
div>.three{
width:20%;
height: 90%;
background-color:magenta;
font-size:1.2rem;
}
#div01{
width:800px;
height: 200px;
background-color:rgba(0,0,128,.5);
/*color:#778899; 能够简写为：color:#789*/
color:rgb(78,190,22);
color:#333333
}
</style>
</head>
<body>
<div>
<div class="one">div01</div>
<div class="two">div02</div>
<div class="three">div03</div>
</div>
<div id="div01">
Web前端课程之CSS
</div>
</body>
</html>
发表回复