在每一个标签都可以设置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"]{100px} <input type="text" /> 2..class名[属性][样式] .c1[n='li']{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="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;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="20%;background-color:red">1</div> <div style="80%;background-color:black">2</div> 加上float的情况： <div style="20%;background-color:red;float:left;">1</div> <div style="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;70px"> <!--宽高修改无效--> 增加display属性：<span style="display:inline-block;background-color:red;height:50px;70px"> <!--宽高可以修改--> ***display:none;（让标签消失） 12.padding margin(0,auto) *边距 ***padding:内边距（自个div的宽度增减,top,bottom） ***margin:外边距（两个div之间的距离增减，top,bottom）（） 13.取消页边距： body{ margin:0; } 14.最小宽度： 20%; /*最小宽度:当20%<200px时，采用200px；如果大于200px；采用20%的宽度*/ min- 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="980px;margin:0 auto;"> <!--div中的内容居中，需要搭配宽度使用，即文字内容需要写在孩子标签才能生效--> <div style="float:left;">收藏本站</div> <div style="float:right;"> <a>登录</a> <a>注册</a> </div> </div> </div> <div style="300px;border:1px solid red;"> <!--注意，父级标签中没有自定义Height属性，其值随子标签的height的值而改变--> <div style="96px;height:30px;border:1px solid green;float:left"></div> <!--子级标签总宽度会受到父级标签宽度的限制--> <div style="96px;height:30px;border:1px solid green;float:left"></div> <div style="96px;height:30px;border:1px solid green;float:left"></div> <div style="clear:both;"></div> </div> </body> </html>