CSS选择器
1、id选择器 2、class选择器 3、标签选择器 4、层级选择器（空格） 5、组合选择器（逗号） 6、属性选择器（中括号） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* id选择器 --> */ #i1{ height: 48px; background-color: red; } /* class选择器 最常用 */ .div{ height: 48px; background-color: aqua; } /* 标签选择器 */ span{ color: red; background-color: blue; } ??/* 层级选择器 组合选择器 ?span标签下面所有div标签颜色改变 层级通过空格*/ span div{ color: aqua; background-color: red; } ??/* class 层级选择器 层级通过空格*/ .c1 div{ background-color: #336699; height: 48px; } ??/* id 层级选择器 层级通过空格*/ #i2 div{ background-color: black; height: 48px; } ??/* 组合选择器 id z1 z2 z3 共用一套css样式 组合 通过逗号*/ #z1,#z2,#z3{ background-color: chocolate; height: 48px; } ??/* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/ .s1,.s2,.s3{ background-color: darkmagenta; height:48px; } ??/* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/ div[s=‘dsx‘]{ background-color: darkred; height: 48px; } </style> </head> <body> <!-- css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class--> <div style="height: 48px;</div> <div style="height: 48px;background-color: #6699CC"></div> <div style="height: 48px;background-color: #6699CC"></div> ??<!-- css class引用--> <div id="i1"></div> <div class="div"></div> <div class="div"></div> ??<!-- 全局标签选择器 --> <span>标签选择器</span> ??<!-- 层级选择器 组合标签选择器 --> <span> <div>组合标签选择器</div> </span> ??<!--层级选择器 class选择器下的div标签 --> <div class="c1"> <div></div> </div> ??<!--层级选择器 id选择器下的div标签--> <div id="i2"> <div></div> </div> ??<!-- id组合选择器 --> <div id="z1"></div> <div id="z2"></div> <div id="z3"></div> ??<!-- class组合选择器 --> <div class="s1"></div> <div class="s2"></div> <div class="s3"></div> ??<!-- 属性选择器 --> <div s="dsx"></div> <div name="nn"></div> </body> </html>CSS优先级
标签中style优先级最高，其次在代码中就近找，也就是重下往上找
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ??/* css 优先级 */ .c1{ background-color: darkred; height: 48px; } .c2{ background-color: black; height: 48px; } ??</style> </head> <body> <div class="c1 c2" style="</div> </body> </html> 引入CSS文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入css样式 --> <link rel="stylesheet" href="tmp.css"> </head> <body> <div class="c1 c2" style="background-color: aqua"></div> </body> </html>CSS属性
height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="margin: 0;"> <!-- 边框 border：宽度 实线还是虚线 颜色--> <div style="height: 48px;border: 1px solid red"></div> <!-- 边框 border 上下左右边框 都可单独配置 --> <div style="height: 48px;border-left: 1px dotted red"></div> ??<!-- height：高 width：宽 --> <div style="height: 48px;width: 48px;border: 1px solid red"></div> <!-- 宽高的设定可以是指定的像素 也可以百分比 --> <div style="height: 48px;width: 80%;border: 1px solid red"></div> ??<!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold--> <div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div> ??<!-- 平行方向左右居中 text-align: center --> <div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center">大师兄</div> ??<!-- 垂直方向居中 line-height：垂直方向要根据标签高度--> <div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">大师兄</div> ??<!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行--> <div style="width: 20%;float: left">1</div> <div style="background-color: red;width: 20%;float:left;">2</div> <div style="background-color: black;width: 20%;float:right;">3</div> ??<!-- 块及标签的占满100%是相对来说，相对与他外层的div --> <div style="width: 400px;height: 400px;border: 1px solid black;"> <div style="width: 100px;height: 40px;background-color: red;float:left;"></div> <div style="width: 100px;height: 40px;background-color: blue;float:left;"></div> <div style="width: 100px;height: 40px;background-color: red;float:left;"></div> <div style="width: 100px;height: 40px;background-color: blue;float:left;"></div> <div style="width: 100px;height: 40px;background-color: red;float:left;"></div> </div> ??<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签--> <div style="height: 100px;background-color: black;display: inline">外联标签</div> <!-- display：block 内联标签转换为块及标签--> <span style="height: 100px;background-color: red;display: block;">内联标签</span> <!-- 行内标签：无法设置高度、宽度、padding、margin--> <!-- 块级标签：无法设置高度、宽度、padding、margin--> <span style="background-color: blue;width: 100px;height: 100px;">大师兄</span> <!-- 通过display:inline-block 可以完美的解决这个问题 他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性--> <span style="background-color: blue;width: 100px;height: 100px;display: inline-block;">大师兄</span> <!-- 让标签消失 display：none--> <span style="background-color: #336699;display: none">我不显示的</span> ??<!-- 外边距 margin 内边距 padding--> <!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 --> <div style="border: 1px solid red;height: 100px"> <div style="background-color: blue;height: 70px;margin-top: 30px"></div> </div> <!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 --> <div style="border: 1px solid red;height: 100px"> <div style="background-color: blue;height: 70px;padding: 10px">内边距增加</div> </div> ??</body> </html>
例子
各个网站的header
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="margin: 0;"> <div class="p-header" style="width: 100%;"> <div style="width: 980px;margin: 0 auto"> <div style="height: 48px;line-height: 48px;float: left">收藏本站</div> <div style="height: 48px;line-height: 48px;float: right">登录</div> <div style="height: 48px;line-height: 48px;float: right">注册</div> <!-- clear:both 清除浮动，将内层div拉下来从而撑开外层div--> <div style="clear: both"></div> </div> </div> </body> </html>
HTML基础之CSS
原文地址：https://www.cnblogs.com/feng0815/p/8179215.html