CSS层叠样式表（CascadingStyleSheets）
CSS简介
CSS全称为：层叠样式表（Cascading Style Sheets），主要⽤于定义HTML内容在浏览器内的显⽰样式，如⽂字⼤⼩，颜⾊，字体加粗等。
使⽤CSS样式通过定义某个样式，可以让不同⽹页位置的⽂字有着同⼀的字体效果。
语法：
p{
color:blue;
}
p 选择符⼜称选择位，指明⽹页中应⽤样式规则的元素，其他元素不受影响
{} 声明，在⼤括号内的都是声明
color 属性位
： 属性分隔符
blue 值位
; 多条声明时⽤分号分隔
例：
p{
font-size:12px;
color:red;
font-weight;bold; }
注释
CSS中也有专门的注释语句
格式：
/
*注释内容*/
CSS三种引⼊⽅式
内联式：直接将CSS样式写⼊html标签中。
<p >字体颜⾊为红⾊</p>
嵌⼊式：
嵌⼊式写在代码中的head标签中间，集中对指定范围内的代码进⾏操作。
例：
<style type="text/css">
<>
p{
color:red;
}
</style>
外部式
将CSS写⼀个独⽴的以.css⽂件命名的⽂件，使⽤link标签将css样式⽂件爱你链接到HTML⽂件内。
例：
<link href="base.css" rel="stylesheet"type="text/css" />
优先级：
内联式 > 嵌⼊式 > 外部式
离作⽤代码越近的⽅式优先级越⾼
选择器
选择器⽤来指定样式的作⽤范围。
css构成：
选择器{
样式;
}
标签选择器：
直接以html中的标签作为选择器：
<style tye="text/css">
p{
font-size:12px;
line-height:1.6em;
}
</style>
类选择器：
类选择器在css中⽐较常见，⾸先要在普通标签中设置⼀个类，类名不可为中⽂，然后在 style 标签中添加该类名的样式。 类选择器在选择器前要加⼀个点”.”
例⼦：
<head>
<style type="text/css">
.shasha{
color:red;
font-size:20px;
}
<style>
</head>
<body>
<h1class="shasha">标题</h1>
<p class="shasha">第⼀段</p>
<p> 第⼆段</p>
</body>
样式会作⽤于class类型为shasha的标签内容上，类名可以随便取，别⽤中⽂。
ID选择器
ID选择器与类选择器⼤致相同，不同的是：
ID选择起标签内部指定ID；
ID选择器前⾯不⽤点”.”，⽽⽤井号”#”
ID选择器只能起⼀个ID名；类选择器可以起多个类名。
例⼦：
<head>
<style type="text/css">
#shasha2{
color:red;
font-size:20px;
}
<style>
</head>
<body>
<h1id="shasha2">标题</h1>
<p id="shasha2">第⼀段</p>
<p> 第⼆段</p>
</body>
⼦选择器：
⼩于这个类的⼦标签
例⼦：
.shasha>li{
border:1px solid red;
}
所有后代标签选择器
⼩于号代表第⼀个后代，空格可以指定其所有后代标签
例⼦：
.shasha li{
border:1px solid red;
}
通⽤选择器
通⽤选择器，选择html⽂档中的所有标签。
*{
border:1px solid red;
font-size:20px;
}
伪类选择符
给标签的某⼀个状态设定⼀个类，例如超链接标签可以设置为⿏标停留后显⽰别的颜⾊。 最常⽤的也就是a:hover
a:hover{
color:red;
font-size:20px;
}
分组选择符
选择符中间以逗号隔开，等于同时给多个选择符添加样式
.shasha,#shasha2span{
color:red;
}
总结：
1. 普通标签选择：以html中的标签选择
2. 类选择器：给标签添加⼀个类属性，根据类属性添加样式，可以使⽤多个类名，多次使⽤
3. ID选择器：给标签添加⼀个ID属性，ID必须是要唯⼀的，⼀个⽂档只能使⽤⼀次ID选择器。
4. ⼦选择器：⽤⼩于号分隔，指其选择器中的⼦标签
5. 包含选择器：⽤空格分隔，指其选择器中的所有后代标签
6. 通⽤选择器：对html中所有的标签有效cssclass属性
7. 伪类选择器：给标签的⼀个动作添加⼀个选择器
8. 分组选择器：逗号分隔，同时作⽤给多个标签
CSS的继承，层叠和特殊性
继承：
继承就是指定作⽤的某个标签其⼦标签也会被样式作⽤到。
有些CSS是具有继承性的。
例如：
{color:red;}color就具有继承性
{border:1px solid red;}这个样式就没有继承性
权限：
同时给⼀个元素设置了不同的样式，系统默认会⽤那个样式呢？答：系统会⽤权限最⾼的样式。
标签额权限是相加得出来的：
标签的权限为1，类选择符的权限为10，ID选择符权限最⾼为100
p{color:red;}/*权限为1*/
p span{color:green;}/*权限为 1+1=2*/
.
warning(color:white;)    /*权限为10*/
p span.warning{color:purple;}/*权限为 1+1+10=12*/
# p{color:yellow;}/*权限为100+10+1=111*/
得出的权限越⼤就使⽤这个样式
层叠
如果同⼀个标签使⽤了同样权限的样式，那会使⽤那个呢？答：两个会同时存在，不过后⼀个样式会覆盖掉前⼀个样式。
p{color:red;}
p{color:green;}
重要性 !important
可以给某个样式使⽤配置最⾼权限，!important。
这样它的样式就⾸先使⽤了。
p{color:red!important;}
注意：
!important要在分号“;”前⾯
⽂本样式：
字体
现在⽹页⼤部分⽤的是微软雅⿊，或者宋体。
例：
<style type="text/css">
body{font-family:"Microsoft Yahei"}
body{font-family:"宋体"}
</style>
字号，颜⾊
字号的单位叫做像素，颜⾊可以⽤三原⾊调出不同的颜⾊#000，也可以⽤英⽂单词配⾊例:
<style type="text/css">
body{
font-size:12px;
color:#666;
}
</style>
两个属性中间⽤分号分隔
粗体
p span{font-weight:bold;}
斜体
p a{font-style:italic;}
设置下划线
p a{text-decoration:underline;}
删除线
.oldPrice{text-decoration:line-through;}
缩进
中⽂书写中，每⼀段的要空前两个⽂字位。代码表达如下：
p{text-indent:2em;}
2em标识⽂字的2倍⼤⼩
⾏间距（⾏⾼）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。