很多朋友对于CSS：深入解析层叠样式表（层叠样式表全称解析）和不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
组成：
选择器{
属性：值；宣言
}
注释/** **/
分类：三种
内联式css样式表就是直接在现有的HTML标签中编写css代码
嵌入式您可以在标签之间编写css样式代码。
一般情况下，内嵌的css样式都是写在之间的。
外部式css 代码写入单独的外部文件中。该css 样式文件的扩展名为“.css”。
使用“head”内的link标签（而不是style标签内）将css样式文件链接到HTML文件，如以下代码所示：
优先级: 在相同重量的情况下，内嵌、嵌入式、外置；
嵌入外部样式有一个前提：嵌入的css样式的位置必须在外部样式的后面。
其实总结起来，就是就近原则（离被设置的元素越近，优先级越高）。
不同选择器：
1.标签选择器
html 代码中的标签。
2.类选择器
.类选择器{}
使用class="类选择器名称" 为标签设置类
3.id选择器
方法：#Selector { } 为标签设置id="ID name"
class 和 id 选择器的区别相似性：可以应用于任何元素
差异：
1. ID选择器在文档中只能使用一次。与类选择器不同，ID 选择器只能在HTML 文档中使用一次。
而且只有一次。类选择器可以多次使用。
2. 可以使用类选择器词列表方法同时为一个元素设置多种样式。
我们可以同时为一个元素设置多种样式，但这只能使用类选择器来实现。不允许使用ID 选择器（不能使用ID 单词列表）。例如：
（跨度）
4.子选择器
大于符号()，用于选择指定标签元素的第一代子元素
.第一个跨度{color:red;}
5.包含(后代)选择器
表示添加空格，用于选择指定标签元素下的后代元素。如：first span{color:red;}
比较子选择器仅指其直接后代，也可以将其理解为作用于子元素的第一代后代。
后代选择器作用于所有子后代元素。后代选择器使用空格进行选择，而子选择器使用“”进行选择。
总结：作用于元素的第一代后代，空格作用于元素的所有后代。
5.通用选择器
通用选择器是最强大的选择器。它用(*) 符号指定。它的作用是匹配HTML中的所有标签元素。
6.伪类选择符
允许为html中不存在的标签设置样式（标签的某种状态）
链接未访问（默认） -- 悬停鼠标悬停（鼠标划过） -- 活动链接激活（鼠标按下） -- 访问后访问（点击后）
序列：链接已访问、悬停处于活动状态
a:hover{color:red;}
7.分组选择符
为多个标签元素设置相同样式时，可以使用组选择器（,）
h1，跨度{color:red;}
特性：
1.继承
继承了一些CSS 样式；继承是一种规则，允许样式不仅应用于特定的html 标签元素，还应用于其后代元素。
2.特殊性：
有时我们会为同一个元素设置不同的CSS样式代码，那么该元素会启用哪种CSS样式呢？
以下是权重规则：
标签的权重为1，类选择器的权重为10，ID选择器的权重最大为100。
注意：还有一个特殊的权重——继承也有权重，但是很低。有文献提出只有0.1，因此可以理解为继承权重最低。
3.层叠：
如果html文件中同一个元素可以有多个css样式并且这些多个css样式具有相同的权重值怎么办？
级联意味着html 文件中的同一元素可以存在多种css 样式。当存在相同重量的款式时，
会根据这些css样式的顺序来确定，最后面的css样式会被应用。
因此，内联样式表（标签内部）嵌入样式表（在当前文件中）外部样式表（在外部文件中）。
4.重要性：
我们在制作网页代码的时候，有一些特殊的情况，需要给某些样式设置最高的权重。我们应该做什么？
这时候我们可以使用!important来解决。
p{color:red!important;} //注意：important要写在分号前面
格式化排版
1.字体
字体系列；
颜色
font-weight:bold;//粗体
字体样式：斜体； //斜体
text-decoration:underline;//下划线
text-decoration:line-through;//删除行
2.段落排版
text-indent:2em;//缩进--注：2em表示文字大小的两倍。
行高：1.5em； //行距--(行高)
letter-spacing://汉字间距和字母间距设置；字母和字母
word-spacing://字间距设置
文本对齐； //结盟
元素分类
块元素设置display:block是将元素显示为块级元素。
块级元素特性：
1、每个块级元素另起一行，后续元素也另起一行。 （真是霸道，一个块级元素占一行）
2、可以设置元素的高度、宽度、行高、上下边距。
3. 未设置时，元素的宽度为其父容器的100%（与父元素的宽度相同），除非设置了宽度。
内联元素块元素也可以通过代码display:inline设置为内联元素。
行内元素的特点：
1、与其他元素在同一行；
2、元素的高度、宽度、上下边距无法设置；
3. 元素的宽度是其包含的文本或图像的宽度，不能更改。
内联块元素行内块元素（inline-block）兼有行内元素和块元素的特性。代码display:inline-block 将元素设置为内联块元素。
内联块元素的特点：
1、与其他元素在同一行；
2、可以设置元素的高度、宽度、行高、上下边距。
element.png
盒模型
什么是盒子模型
打个比方：中秋节寄包装好的月饼，里面的每个月饼相当于一个div，月饼与包装之间的距离称为padding，月饼之间的距离称为margin ，月饼包装称为包边；
笔记：
内部填充、边距和边框都有四个方向。
边框
盒模型的边框是围绕内容和填充物的线。你可以设置这条线的粗细、样式和颜色（边框的三个属性）。
写法div{
border:2px 纯红色；
}
或者
div{
边框宽度：2px；
边框样式：solid；
边框颜色：红色；
}
提供下边框单边设置
注意：
1. Border-style（边框样式）常见的样式有：
虚线|点|坚硬的。
2、border-color中的颜色可以设置为十六进制颜色，如：
border-color:#888;//别忘了前面的井号。
3、border-width（边框宽度）中的宽度还可以设置为：
薄|中等|厚（但不是很常用），像素（px）是最常用的。
宽度和高度
盒模型的宽度和高度与我们通常理解的物体的宽度和高度不同。 CSS中定义的宽度和高度是指padding内的内容范围。
因此，元素的实际宽度（盒子的宽度）=左边框+左边框+左内边距+内容宽度+右内边距+右边框+右边框。元素的高度也是如此。
css-width.png
填充
可以设置元素内容与边框的距离，称为“填充”；
填充还可分为上、右、下、左（顺时针方向）。
边界
元素与其他元素之间的距离可以使用边距设置。边界也可分为上、右、下、左。
div{margin:20px 10px 15px 30px;}
也可以单独写：
div{
边距顶部：20px；
边距-right:10px；
边距底部：15px；
边距-left:30px；
}
如果上、右、下、左边框均为10px；你可以写：
div{ margin:10px;}
如果上下边框同为10px，左右边框同为20px，则可以这样写：
div{ margin:10px 20px;}
布局模型
布局模型是基于盒模型的，与我们常说的CSS布局样式或CSS布局模板不同。如果说布局模型是基础，那么CSS布局模板就是末端，是外在的表达。
CSS包含三种基本布局模型，英文概括为：Flow、Layer和Float。
在网页中，元素的布局模型有以下三种：
1.流动模型（Flow）Flow 是默认的网页布局模式。也就是说，默认状态下网页的HTML网页元素按照流模型来分配网页内容。
第一点是块元素会在包含元素内按照从上到下的顺序垂直延伸，因为默认情况下块元素的宽度是100%。事实上，块元素都是以行的形式占据位置的。
第二点，在流模型下，内联元素会在包含元素内从左到右水平显示。 （行内元素不像块元素那么霸气，单独占一行）
2.浮动模型 (Float)允许两个块元素并排显示；默认情况下任何元素都不能浮动，但可以使用CSS 定义为浮动
float:向左或向右；
3、层模型（Layer）图层布局模型就像图像软件PhotoShop中非常流行的图层编辑功能。每一层都可以精确定位和操作。然而，在网页设计领域，由于网页尺寸的流动性，图层布局无法流行。然而，在网页本地使用图层布局仍然有一些优点。
层模型有三种形式：
1.绝对定位（位置：绝对）
设置position:absolute（表示绝对定位）；该语句的作用是将元素拖出文档流，然后使用left、right、top、bottom属性相对于其最接近的具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则它是相对于body元素的，即相对于浏览器窗口的。
2.相对定位（位置：相对）
通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位的过程是先生成一个静态（浮动）模式的元素（并且元素像一层一样浮动），然后相对于前一个位置移动。移动的方向和幅度由左、右、上、下属性决定。偏移前的位置保留不动。
3.固定定位（位置：固定）
fixed：表示固定定位，与绝对定位类型类似，但其相对移动坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随着浏览器窗口的滚动条的滚动而改变，除非你移动浏览器窗口在屏幕上的屏幕位置，或者改变浏览器窗口的显示大小，所以固定定位的元素会始终处于浏览器窗口内视图的某个位置，不会受到文档流的影响。这与background-attachment:fixed具有相同的功能；属性。
缩写
盒模型代码简写
在盒模型中设置margin、padding、border时，上、下、左、右四个方向的margin按顺时针方向设置：上、右、下、左。
box-abb.png
颜色缩写
CSS样式的颜色也可以缩写。当您设置的颜色为十六进制颜色值时，如果每两位的值相同，则可以将其缩写为一半。
字体缩写
字体-abb.png
注意：1. 要使用此缩写，您必须至少指定font-size 和font-family 属性。如果未指定，其他属性（例如font-weight、font-style、font-varient、line-height）将自动使用。默认值。
2、缩写时，在font-size和line-height之间对角添加“/”。
一般来说，由于中文网站的英文还比较少，所以比较常用的是以下缩写代码：
身体{
font:12px/1.5em "宋体",sans-serif;
}
只有字体大小、行距、中文字体、英文字体设置。
单位与值
颜色
网页中的颜色设置非常重要，包括字体颜色（color）、背景颜色（background-color）、边框颜色（border）等。设置颜色的方法也有很多种：
1.英文命令color p{color:red;}
2. RGB颜色p{color:rgb(133,45,200);}
3、十六进制颜色的原理其实就是RGB设置，只是每一项的值从0-255变成了十六进制的00-ff。 p{color:#00ffff;}
长度值
1.像素2.em该元素给出字体的字体大小值。如果元素的font-size是14px，那么1em=14px；如果字体大小为18px，则1em=18px。
请注意以下特殊情况：
但当font-size的单位设置为em时，计算标准是根据p的父元素的font-size。
3、百分比p{字体大小：12px;行高：130%}
将行高（行距）设置为字体的130% (12 * 1.3=15.6px)。
技巧
水平居中
1.行内元素如果set元素是文本、图片等行内元素，则通过给父元素设置text-align:center来实现水平居中。
2.块状定宽元素满足固定宽度和块两个条件的元素可以通过将“左右边距”值设置为“自动”来居中。
3.块状不定宽元素可变宽度块元素居中的方法有3种（这三种方法目前都用得很多）：
3.1加入 table 标签原理：利用table标签的长度适应性---即不定义其长度，不默认父元素体的长度（table的长度根据到其内部文本的长度），因此可以将其视为定宽块元素，然后使用定宽块居中边距方法使其水平居中。
步骤：第一步：在需要设置的居中元素外面添加表格标签（包括，）。
第二步：设置这个表格的“左右边距中心”（这个和定宽块元素的方法是一样的）。
3.2设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置将块级元素的显示类型改为inline（设置为内联元素显示），然后使用text-align:center实现居中效果。
存在一些问题：它将块元素的显示类型更改为内联，将其变成内联元素，因此失去了一些功能，例如设置长度值。
3.3设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的通过给父元素设置float，然后给父元素设置position:relative和left:50%，给子元素设置position:relative和left: -50%来实现水平居中。
理解：假设ul层的父层（即下例中的div层）中间有一条平分线，将ul层的父层（div层）分成两部分。 ul层的css代码就是将ul层的最后一部分进行划分。左端与ul层的父层（div层）的平分线对齐；而li层的css代码将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现了center的li层。
垂直居中
1.父元素高度确定的单行文本由父元素的高度决定的单行文本的垂直居中方法是通过设置父元素的height和line-height一致来实现的。 （height: 元素的高度，line-height: 顾名思义，行高（行距）是指文本中行与行之间基线之间的距离）。
line-height 和font-size 的计算值之间的差异在CSS 中称为“行距”。将其分成两半并将它们添加到一行文本的顶部和底部。
这种一致的文本行高和块高带来了一个缺点：当文本内容的长度大于块的宽度时，内容会脱离块。
2.父元素高度确定的多行文本。2.1使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。CSS中有一个属性vertical-align，用于垂直居中。当父元素设置此样式时，它将对所有内联块类型的子元素有用。
隐式改变display
当为元素设置以下2句之一时（无论之前的元素类型如何，除了display:none）：
位置： 绝对
【CSS：深入解析层叠样式表（层叠样式表全称解析）】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
我开始学前端就接触了CSS。
有18位网友表示赞同！
CSS真是让网页看起来更美观的魔法！
有6位网友表示赞同！
以前没有学过CSS，只会用HTML写页面。现在想学习一下CSS提升我的网站设计水平。
有13位网友表示赞同！
原来CSS是“层叠样式表”啊，这个名字倒好理解。
有16位网友表示赞同！
要设计一个美轮美奂的网页，CSS可是必不可少的呀！
有5位网友表示赞同！
学C S S真难！各种属性参数那么多，经常一头雾水。
有7位网友表示赞同！
有没有简单易懂的CSS学习资源推荐？
有13位网友表示赞同！
用CSS可以实现非常多酷炫的网页特效。
有12位网友表示赞同！
听说现在流行一些前端框架，会不会更方便使用CSS?
有5位网友表示赞同！
我有一个网站想要改版，想学习一下CSS来达到理想的效果。
有5位网友表示赞同！
css真的是网页设计师的利器！
有7位网友表示赞同！
之前用文字文档写页面，后来学了HTML和CSS，感觉真是打开了新世界！
有6位网友表示赞同！
在设计网站的时候，CSS发挥着至关重要的作用。
有11位网友表示赞同！
想学习好CSS就要多实践。练习做一些简单的网页可以很好的提升熟练度。
有8位网友表示赞同！
最近也在学习前端开发，今天终于理解了CSS是什么意思！
有18位网友表示赞同！
css能够灵活控制网站的样式和排版，真是太棒了！
有9位网友表示赞同！
学习CSS需要仔细理解它的语法规则。
有6位网友表示赞同！
现在很多在线工具可以帮助我们快速生成CSS代码，是不是很方便？
有19位网友表示赞同！
学好HTML和CSS是前端开发的基础。
有17位网友表示赞同！
用CSS可以制作非常逼真的动画效果。
有9位网友表示赞同！