层叠样式表，为了使网页元素的样式更加丰富，内容与样式拆分开来。
HTML负责结构与内容，表现形式交给CSS。
CSS注释
/**/ 来注释
选择器{属性:值; 属性:值;}
选择器：将样式与页面元素关联起来的名称。
<style> div{ width:200px; height:200px; background-color:yellow; } </style> 通过link标签，链接到相应的CSS文件，写在head标签中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的使用</title> <!--外链式，通过link标签引入css文件，head标签中引入--> <link rel="stylesheet" href="Day3.css"> </head> <body> <div></div> </body> </html> Day3.css 内容如下：
div{ width:200px; height:200px; background-color:red; } 嵌入式是通过 style标签来写CSS ，也要写在head标签中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的使用</title> <!--2 嵌入式是通过 style标签来写CSS ，也要写在head标签中--> <style> div{ width:200px; height:200px; background-color:yellow; } </style> </head> <body> <div></div> </body> </html> 内链式，同样使用Style属性来设置CSS样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的使用</title> </head> <body> <!--3 内链式，同Style属性来设置CSS样式--> <div style="width:200px; height:200px; background-color:black"></div> </body> </html> 在CSS的三种使用方式中存在优先级的问题,页面从上到下加载，离元素越近相应的优先级越高。
标签选择器，通过标签来设置元素样式 影响范围最大。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的三种基本选择器</title> <style> /*标签选择器，通过标签来设置元素样式 影响范围最大*/ div{ width:100px; height:100px; background-color:green; } </style> </head> <body> <div></div> <div></div> </body> </html> 类选择器，通过class类名来设置元素的样式,class是可以重名的，影响范围可控制相对较小，
一个类可应用于多个选择器，一个元素可以使用多个类。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的三种基本选择器</title> <style> /*类选择器，通过class类名来设置元素的样式,class是可以重名的，影响范围可控制，相对较小*/ .item1{ width:200px; height:200px; background-color:red; } .item2{ width:300px; height:300px; background-color:black; } </style> </head> <body> <div class="item1"></div> <div class="item2"></div> </body> </html> 通过id选择元素，元素的id的值不可以重复
#id选择器，通过id属性值来设定元素的样式,影响范围最小
id在html中具有唯一性，不能重名，JS中获取会有问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的三种基本选择器</title> <style> /*标签选择器，通过标签来设置元素样式 影响范围最大*/ div{ width:100px; height:100px; background-color:green; } /* .类选择器，通过class类名来设置元素的样式,class是可以重名的，影响范围可控制，相对较小*/ .item1{ width:200px; height:200px; background-color:red; } .item2{ width:300px; height:300px; background-color:black; } /* #id选择器，通过id属性值来设定元素的样式,影响范围最小*/ /* id在html中具有唯一性，不能重名，JS中获取会有问题*/ #box1{ width:400px; height:400px; background-color:blue; } #box2{ width:500px; height:500px; border:1px solid red; } </style> </head> <body> <div class="item1"></div> <div class="item2"></div> <div id="box1"></div> <div id="box2"></div> </body> </html> 影响范围越大优先级越小，即：
id>class>元素选择器
推荐使用class选择器
通过父级元素来设置子集元素，设置子元素的子集样式
还可以设置子元素的自己的样式，可以与多个选择器混合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级选择器</title> <style> /*通过父级元素来设置子集元素，设置子元素的子集样式*/ /*还可以设置子元素的自己的样式，可以与多个选择器混合使用*/ .wrap{ width:400px; height:400px; background-color:blue; } .wrap div{ width:200px; height:200px; background-color:red; } .wrap .in{ width:200px; height:200px; background-color:black; } </style> </head> <body> <div class="wrap"> <div class="in"></div> <div></div> </div> </body> </html> 要求以下元素的宽度与高度均为200px，box1的背景色为红，box2为绿色，box3为蓝色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>并列选择器</title> <style> .box1,.box2,.box3{ width:200px; height:200px; } .box1{ background-color:red; } .box2{ background-color:green; } .box3{ background-color:blue; } </style> </head> <body> <!--要求以下元素的宽度与高度均为200px，box1的背景色为红，box2为绿色，box3为蓝色--> <div class="box1"></div> <p class="box2"></p> <div class="box3"></div> </body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /*hover设置鼠标悬停在元素上时候的状态*/ .box{ width:400px; height:400px; background-color:blue; } .box:hover{ /*鼠标悬停之后的样式*/ width:500px; height:500px; background-color:red; } /*after 元素的尾部插入内容*/ .box:after{ content:" me"; } /*before 元素的头部插入内容*/ .box:before{ content:"Do U "; } </style> </head> <body> <div class="box">love</div> </body> </html>