CSS
css（cascading style sheets），层叠样式表，就是美化网页的。
css的优点
- 省时
- 页面加载更快
- 易维护
- 多兼容
css语法规则
/*css样式*/
p{
color:red;
font-size:20px;
}
css注释 ：/* */
css样式：由选择符和声明构成，声明是由属性名和属性值构成
引入方式
内联式（行内式）
<p style="color:red;fontSize:20px;">我是一个段落</p>
嵌入式
<head>
<style>
p{
color:red;
font-size:20px;
}
</style>
</head>
外部式
<link rel="stylesheet" type="text/css" href="index.css">
index.css文件如下
p{
color:red;
font-size:20px;
}
三种方式的优先级
内联式>嵌入式>外部式（嵌入式与外部式要看设置顺序)
常用选择器
基础选择器
- 标签(元素)选择器
- 类选择器
- id选择器
高级选择器
- 后代选择器
- 子代选择器
- 组合选择器
- 交集选择器
- 伪类选择器
基础选择器
<head>
<style>
/*标签选择器*/
p{
color:red;
}
/*类选择器*/
.text{
font-size:20px;
}
/*id选择器*/
#text{
background-color:green;
}
</style>
</head>
<body>
<p class="text" id="text">
我是一个段落
</p>
<p class="text">
我是另一个段落
</p>
</body>
太简单，没啥要讲的。
高级选择器
<head>
<style>
p{
color:red;
}
.text{
font-size:20px;
}
#text{
background-color:green;
}
/*后代选择器
针对div内的span设置*/
div span{
font-weight:bold;
}
/*子代选择器
针对div的儿子a设置*/
div>a{
color:yellow;
}
/*组合选择器
放在一起设置*/
span,a{
color:blue;
}
/*伪类选择器
针对a标签的爱恨准则*/
a:link{
color:black;
}
a:visited{
color:red;
}
/*hover可用于任何元素*/
a:hover{
color:yellow;
}
a:active{
color:blue
}
</style>
</head>
<body>
<div>
<a href="#">点这里</a>
<p class="text" id="text">
我是<span>一个</span>段落
<a href="#">哈哈</a>
</p>
<span>文字区</span>
<p class="text">
我是另一个段落
</p>
</div>
<p>
我是<span>一个</span>段落
</p>
</body>
css继承性
可以继承的属性
- color
- font-size
选择器权重
选择器存在权重，权重决定了优先级
| 选择器 | 权值 |
|---|---|
| 标签 | 1 |
| 类 | 10 |
| id | 100 |
| 内联样式 | 1000 |
计算权重
可以数各类型选择器的数量：id/类/标签
注意：
- 权重计算永不进位
- 继承来的权重近乎为0
/*101*/
#div p{
color:red;
}
/*011*/
.div p{
color:blue
}
!important
会破坏权重规则，慎用
#div #text a{
color:red;
}
a{
color:blue !important;
}
