在每一个标签都可以设置style属性
background-color
height
...
编写css样式：
1.标签的style属性
2.写在head里的style标签中写样式
1.id选择器（但是id不可以重复，所以标签若都想用该样式就变得比较麻烦）
#i1{
background-color:#2459a2
height:48px
}
2.class选择器(常用)
.c1（class可以重复，当标签的class是c1时可以匹配到该样式）
{
background-color:#2459a2
height:48px
}
<标签 class='名称'></标签>
3.标签选择器
/*匹配所有div标签应用该样式*/
div{
background-color:red;
color:green
}
4.层级选择器（空格分隔，在class="c1","c2"中的div标签应用该样式）
.c1 .c2 div{
}
5.组合选择器（逗号分隔）
#i1,#i2,#i3 div
{
}
6.属性选择器（对选择到的标签再通过属性再进行一次筛选）
1.input[属性]{样式}
input[type="text"]{width:100px}
<input type="text" />
2..class名[属性][样式]
.c1[n='li']{width:20px}
<input class="c1" type="text" n="li" />
PS:
优先级：标签上style优先；编写顺序，就近原则
7.
可以将CSS样式保存到CSS文件中，再用Link标签匹配使用
如：
.c1（class可以重复，当标签的class是c1时可以匹配到该样式）
{
background-color:#2459a2
height:48px
}（保存为Stylesheet文件）
然后在需要应用该样式的网页制作中导入：
<link rel="stylesheet" href="https://zhishitu.com" style="color: #800000;">"commons.css" /> <!--rell的值是类型，href的值是CSS文件>
8.边框
宽度，样式，颜色
border:4px dotted red;
可以指定边框位置如border-left
9.color,height,border,width,font-size,text-align,line-height,font-weight
<div style="color:red;height:80px;width:80%;border:1px solid red;font-size:16px;text-align:center;line-height:48px;font-weight:bold;">样式测试</div>
注意!根据上述样式，text-align是水平居中，而line-height是根据div宽高大小居中,font-weight:bold是加粗的作用
10.float（一个div本身是自占一行，但是如果一个div宽度只是占某一行的百分比时，采用float可以使得两个div靠在一起,此情况适用于两个div占比之和小于或等于100%）
（通俗讲就是块级标签的堆叠）
（记得搭配clear属性使用）
/*因为float可能经常用到，所以单独分开来写*/
.left{
float:left;
}
.right{
float:right;
}
如：
不加float的情况：
<div style="width:20%;background-color:red">1</div>
<div style="width:80%;background-color:black">2</div>
加上float的情况：
<div style="width:20%;background-color:red;float:left;">1</div>
<div style="width:80%;background-color:black;float:left;">2</div>
最后记得在float后的标签加上：<div style="clear:both;"></div> 可以防止父级标签部分边框的丢失
11.display属性
***display:inline;可以将块级标签转为行内标签：<div style="background-color:red;display:inline;">这是一个块级标签</div>
***display:block;可以将行内标签转为块级标签：<span style="background-color:red;display:block;">这是一个行内标签</span>
注意：
行内标签：无法设置高度，宽度，padding，margin
***display:inline-block;使得行内标签既具有行内标签的性质，也具有块级标签的性质
对比：
不加display属性：<span style="background-color:red;height:50px;width:70px"> <!--宽高修改无效-->
增加display属性：<span style="display:inline-block;background-color:red;height:50px;width:70px"> <!--宽高可以修改-->
***display:none;（让标签消失）
12.padding margin(0,auto)
*边距
***padding:内边距（自个div的宽度增减,top,bottom）
***margin:外边距（两个div之间的距离增减，top,bottom）（）
13.取消页边距：
body{
margin:0;
}
14.最小宽度：
width:20%;
/*最小宽度:当20%<200px时，采用200px；如果大于200px；采用20%的宽度*/
min-width: 200px;
15.line-height:xxpx;（上下居中）
此属性应该放置于父级标签中，子级标签的内容将会上下居中
16.text-align:center;（水平居中）
17.border-radius:50%;
将边框圆化，一般用于制作小图标
3.CSS中的注释：/* */
---实例（CSS选择器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1
{
background-color:#2459a2;
height:10px;
}
/*匹配所有div标签应用该样式*/
div{
background-color:red;
color:green
}
/*应用于span标签下的div样式*/
span div {
background-color:red;
color:green
}
</style>
</head>
<body>
<div class="c1">ff</div>
<span class="c1">2
<div>asd</div> <!--span里的div同样能匹配到div的标签选择器
</span>
<div class="c1">3</div>
</body>
</html>
---实例（简单的知识应用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height:38px;
background-color:#dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin:0 auto;"> <!--默认有页边距，写上0去掉页边距-->
<div class="pg-header">
<div style="width:980px;margin:0 auto;"> <!--div中的内容居中，需要搭配宽度使用，即文字内容需要写在孩子标签才能生效-->
<div style="float:left;">收藏本站</div>
<div style="float:right;">
<a>登录</a>
<a>注册</a>
</div>
</div>
</div>
<div style="width:300px;border:1px solid red;"> <!--注意，父级标签中没有自定义Height属性，其值随子标签的height的值而改变-->
<div style="width:96px;height:30px;border:1px solid green;float:left"></div> <!--子级标签总宽度会受到父级标签宽度的限制-->
<div style="width:96px;height:30px;border:1px solid green;float:left"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
知识兔