CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。
一、应用方式
css的样式有很多种，当如果想要把css样式应用到特定标签上有三种方式：
1.1 标签中填写
适用范围：指定一个标签。【不推荐，多标签无法复用样式】
<div style="color:green;">KOBE</div>
1.2 head标签中定义
适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /*给所有的div设置样式*/ div { color: green; } </style> </head> <body> <div>Alex</div> <div>mjj</div> </body> </html>
1.3 在css文件中定义，适用范围：所有引入css文件的页面。
适用范围：所有引入css文件的页面。【推荐，多页面、多个标签均可复用样式】
- 创建css文件，如：common.css
div {
color: green;
}
- 创建html文件，如：index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <link rel="stylesheet" href="common.css"> </head> <body> <div>Alex</div> <div>老男孩</div> </body> </html>
以后在企业中写应用css样式时，写单页面时会把样式写在head头部；写多页面时，会把样式写入css文件，然后再在要应用的html页面引入css即可。
二、选择器
学习选择器的目的就是选中html页面中指定标签，便于以后给他应用样式。
2.1 标签选择器
在body中找到所有指定标签，例如：找到所有a标签，让他们颜色变绿。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> a { color: green; } </style> </head> <body> <div>周杰伦</div> <a href="https://www.oldboyedu.com">Alex</a> <p>Alex</p> <ul> <li> <a href="#">朗朗</a> </li> </ul> </body> </html>
2.2 id选择器
在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码），例如：找到id等于i1的标签，让他颜色变绿。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /*找到所有a标签，并应用内部数据*/ #i1 { color: green; } </style> </head> <body> <div>老男孩</div> <div> <span id="i1">师范</span> </div> <p>南京</p> </body> </html>
2.3 class选择器
在body中找到所有class属性值匹配的标签。例如：找到所有class等于head的标签，让他绿了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> .head { color: green; } </style> </head> <body> <div class="head">老男孩</div> <div> <a href="http://www.sb.com">李杰</a> </div> <p class="head">武沛齐</p> </body> </html>
2.4 属性选择器
在body中找到所以class属性值匹配的标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /* 找到class=head并且name=boy的标签 */ .head[name="boy"] { color: green; } </style> </head> <body> <div class="head" name="boy" >老男孩</div> <div> <a href="http://www.sb.com">李杰</a> </div> <p class="head" name="hanshuo" >韩烁</p> </body> </html>
2.5 后代选择器
在body标签中根据父子关系找到指定标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> .head ul .hat { color: green; } </style> </head> <body> <a href="#">老男孩</a> <div class="head"> <a class="hat">北京</a> <ul> <li>沙河</li> <li> <a class="hat">沙河高晓松Alex</a> </li> <li> <a>沙河大烧饼Alex</a> </li> </ul> </div> <div class="head"> <a href="#">武沛齐</a> </div> </body> </html>
2.6 选择器分组
对选择器进行分组，无需重复编写。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /* 不推荐写法 */ /* h1 { color: green; } .head h2{ color: green; } h3{ color: green; } h4{ color: green; } */ h1, .head h2, h3, h4 { color: green; } </style> </head> <body> <h1>kobe</h1> <div class="head"> <h2>lebron</h2> </div> <h3>curry</h3> <h4>james</h4> </body> </html>