CSS-CSS应用方式和选择器
CSS应用方式和选择器
CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。
应用方式
标签属性上编写
标签属性上编写，适用范围：指定一个标签。【不推荐，多标签无法复用样式】
<div style="color:green;">Alex</div>
head标签中定义
head标签中定义，适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<style>
/*给所有的div设置样式*/
div {
color: green;
}
</style>
</head>
在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页面中指定标签，便于以后给他应用样式。
标签选择器
找到所有a标签附加样式
a {
color: green;
}
id选择器
HTML中ID属性唯一，找到id为i1的标签
#i1 {
color: green;
}
class选择器
HTML中class属性不唯一，可以多个不同标签的class属性一样，找到class为head的所有标签
.head {
color: green;
}
属性选择器
对单个属性进行选取
/* 找到class=head并且name=oldboy的标签 */
.head[name="oldboy"] {
color: green;
}
后代选择器
根据父子关系找到指定标签。
.head ul .hat {
color: green;
}
<div class="head">
<a class="hat">北京</a>
<ul>
<li>沙河</li>
<li>
<a class="hat">沙河高晓松Alex</a>
</li>
<li>
<a>沙河大烧饼Alex</a>
</li>
</ul>
</div>
选择器分组
将多个选择器选中的标签应用同一个样式
麻烦而且啰嗦的写法，不推荐
h1 {
color: green;
}
.head h2{
color: green;
}
h3{
color: green;
}
h4{
color: green;
}
使用选择器分组：
h1, .head h2, h3, h4 {
color: green;
}
