CSS层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
CSS属性的结构
内联样式
<p style="color:#fff">内联样式</p>
内部样式
写在head标签内
<html>
<head>
...
<style>
p{
color:#fff;
}
</style>
</head>
<body>
...
</body>
</html>
外部样式
写在单独的CSS文件里，并在head内引入外部样式表文件
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="style.css"> //引入style.css样式表文件
</head>
<body>
...
</body>
</html>
行内元素和块状元素
优先级：内联式 > 嵌入式 > 外部式
继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
p{
color:red;
border:1px solid red;
}
<p>三年级时，我还是一个<span>胆小如鼠<span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
color属性会被子元素span继承，而border则不会。
有关属性继承可以看这篇博文。
CSS样式表继承详解
选择器的权值
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?
规定：
- 标签的权值为1
- 类选择符的权值为10
- ID选择符的权值为100
- 内联样式的权值1000(最高)
- 继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
- 在同一组属性设置中标有“!important”规则的优先级最大,!important写在属性值的后面，分号之前
p{
color:red; /*权值为1*/
}
.first{
color:green; /*权值为10*/
}
#second{
color:black; /*权值为100*/
}
span{
color:pink; /*权值为1*/
}
p span{
color:purple; /*权值为1+1=2*/
}
.first span{
color:blue; /*权值为10+1=11*/
}
#second span{
color:yellow; /*权值为100+1=101*/
}
h1+.first span{
color:white; /*权值为1+10+1=12*/
}
还有一个问题:同一个元素有多个样式，且这多个样式的权值相同怎么办？
css中使用层叠来解决这个问题，及这几个样式中不同的属性的都会被应用，相同的属性，取最后一个应用
p{
color:red;
border:1px solid red;
}
p{
color:green;
background:black;
}
<p>小时候成绩不好，经常挨骂</p>
可以看到color属性应用了后一种，为green颜色
border和background属性都被应用了
缩写
在CSS中有一些常见的缩写形式，如果不知道会对初学者造成许多困扰
盒模型代码简写
在盒子模型中margin、padding、border都有top、right、bottom、left四个方向的属性，有关这四个属性的值有如下几个的缩写方法：
1、如果top、right、bottom、left的值相同，如下面代码：margin:10px 10px 10px 10px;可缩写为：margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：margin:10px 20px 10px 20px;可缩写为：margin:10px 20px;
3、如果left和right的值相同，如下面代码：margin:10px 20px 30px 20px;可缩写为：margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
颜色缩写
当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
例如：p{color: #336699;}可以缩写为：p{color: #369;}
p{color:#EEFFDD;}可以缩写为：p{color: #EFD;}
Comments | NOTHING