层叠:通过CSS的属性等把页面层叠起来
样式:设置页面每一块的样式
selector {declaration1; declaration2; ... declarationN }
基本选择器
选择器通常是需要改变样式的HTML元素,每条声明有一个属性和一个值组成,属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
selector {property: value}
属性选择器
将h1标签的文字颜色改为红色,同时将体大小设置为 14 像素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 在style中修改h1标签,body的h1标签都会被修改--> <style> h1 { color: red;
font-size: 14px; } </style> </head> <body> <h1>我是一级标签</h1> </body> </html>
id选择器
标签选择器:通过标签名直接就可以选择到标签,页面中所有符合条件的标签都会被选择
id选择器:id选择器可以为标有特定id的HTML元素指定特定的样式,id选择器以"#"来定义,id名不能以数字开头
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 在style中修改h1标签,body的h1标签都会被修改--> <style> h1 { color: red; font-size: 14px; } #box { width: 100px; height: 20px; background: red; } </style> </head> <body> <div id="box"></div> </body> </html>
得到一个宽100px,高20px,背景颜色为红色的块儿级标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 在style中修改h1标签,body的h1标签都会被修改--> <style> .class { text-align: center; } </style> </head> <body> <h2 class="class">我是h2</h2> </body> </html>
其他选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> 后代选择器 body li { color: red; } /* 子代选择器 */ body ul >p { color: green; } /* 毗邻选择器*/ h1+h2 { color: lawngreen; } 组合选择器 h1~h2,li,h1{ color:firebrick ; } </style> </head> <body> <h1>你好</h1> <h2>世界</h2> <div> <ul> <li>对三</li> <li>王炸</li> <p>苍老师</p> <li>一个三</li> <p>小泽老师</p> <li>四个二</li> </ul> </div> <h1>你好</h1> </body> </html>