共计 2482 个字符，预计需要花费 7 分钟才能阅读完成。
CSS
CSS（英文全称：Cascading Style Sheets）层叠样式表, 是一种用来体现 HTML（规范通用标记语言的一个利用）或 XML（规范通用标记语言的一个子集）等文件款式的计算机语言。
CSS 目前最新版本为 CSS3，是可能真正做到网页体现与内容拆散的一种款式设计语言。绝对于传统 HTML 的体现而言，CSS 可能对网页中的对象的地位排版进行像素级的准确管制，反对简直所有的字体字号款式，领有对网页对象和模型款式编辑的能力，并可能进行初步交互设计，是目前基于文本展现最优良的体现设计语言。CSS 可能依据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
CSS 是用来丑化网页用的，没有网页则 CSS 毫无用处，所以 CSS 须要依赖 HTML 展现其性能。
CSS 的根本应用
CSS 根本语法
CSS 款式由选择器和一条或多条以分号隔开的款式申明组成。每条申明的款式蕴含着一个 CSS 属性和属性值。[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-FmNcbENy-1605579325994)(/QQ 截图 20200205160701.png)]
选择器名 {
属性 : 属性值;
......
} div {background-color : red;} 留神：
- css 申明要以分号; 完结，申明以 {} 括起来
- 倡议一行书写一个属性
- 若值为若干单词，则要给值加引号，如 font-family:“agency fb”;
正文
多行正文：
/* 这里的内容就是正文 */ CSS 的应用
1. 行内式
行内款式将款式定义在具体 html 元素的 style 属性中。以行内式写的 CSS 耦合度高，只实用于以后元素，在设定某个元素的款式时比拟罕用。
<p style="color:red;font-size:50px;"> 这是一段文本 </p> 在以后元素应用 style 属性的申明形式。
style 是行内款式属性；
color 是色彩属性；red 是色彩属性值；
font-size 是字体大小属性；50px 是字体大小属性值
2. 嵌入式
嵌入式通过在 html 页面内容开拓一段属于 css 的代码区域，通常做法为在 < head> 标签中嵌套
<style type="text/css">p {color: blue;font-size: 40px;}</style> 3. 引入外联款式文件
在理论开发当中，很多时候都应用引入外联款式文件，这种模式能够使 html 页面更加清晰，而且能够达到更好的重用成果。
style.css
p {color: green;font-size: 30px;} test.html
<link rel="stylesheet" type="text/css" href="style.css"> rel:rel 属性规定以后文档与被链接文档之间的关系。
stylesheet: 文档的内部样式表。
很多时候，大量的 HTML 页面应用了同一个 CSS。那么就能够将这些 CSS 款式保留在一个独自的.css 文件中，而后通过元素去引入它。
留神：当有多重款式时，记住前提规定，越准确越优先。
CSS 选择器
在 CSS 中，选择器是一种模式，用于抉择须要增加款式的元素。
CSS 选择器有很多，把握罕用的即可；
根本选择器
通用选择器
抉择所有 *
* {......} * {color: orange;} 元素选择器
抉择指定标签
元素名称 {......} p {
color: red;
font-size: 20px;
} ID 选择器
抉择设置过指定 id 属性值的元素 #
#id 属性值 {......} #p1 {font-weight: bold;} 类选择器
抉择设置过指定 class 属性值的元素 .
.class 属性值 {......} .hidden {display: none;} 分组选择器
当几个元素款式属性一样时，能够独特调用一个申明，元素之间用逗号分隔
选择器 1, 选择器 2,... {......} h2 , #pre1 {
color: orange;
font-style: italic;
} CSS 款式的优先级，是依据选择器的精确度 / 权重来决定的，常见的权重如下，权重越大，优先级越高
元素选择器：1
类选择器：10
id 选择器：100
内联款式：1000
组合选择器
CSS 组合选择器阐明了两个选择器间接的关系。CSS 组合选择符包含各种简略选择符的组合形式。
在 CSS 中蕴含了四种组合形式: 后辈选取器(以空格分隔)，子元素选择器(以大于号分隔），相邻兄弟选择器（以加号分隔），一般兄弟选择器（以波浪线分隔）。
后辈选择器（派生选择器）
用于抉择指定标签元素下的后辈元素，以空格分隔
选择器 1 选择器 2 {......} .food li {border: 1px solid red;} <h1> 食物 </h1>
<ul class="food">
<li> 水果
<ul>
<li> 香蕉 </li>
<li> 苹果 </li>
<li> 梨 </li>
</ul>
</li>
<li> 蔬菜
<ul>
<li> 白菜 </li>
<li> 油菜 </li>
<li> 卷心菜 </li>
</ul>
</li>
</ul> 子元素选择器
用于抉择指定标签元素的所有第一代子元素，以大于号分隔
选择器 1 + 选择器 2 {......} #d + div {border: 1px solid red;} html 代码同上 相邻兄弟选择器
可抉择紧接在另一元素后的元素，且二者有雷同父元素。以加号分隔
选择器 1 + 选择器 2 {......} #d + div {border: 1px solid red;} <div id="d">
相邻兄弟选择器 1
<ul>
<li> 开心麻花 </li>
<li> 贾玲 </li>
<li> 宋小宝 </li>
</ul>
</div>
<div>
相邻兄弟选择器 2
</div> 一般兄弟选择器
抉择紧接在另一个元素后的所有元素，而且二者有雷同的父元素，以波浪线分隔
选择器 1 ~ 选择器 2 {......} li ~ li {background-color : yellow;} <div>
一般兄弟选择器 1
<ul>
<li> 开心麻花 </li>
<li> 贾玲 </li>
<li> 宋小宝 </li>
<li> 沈腾 </li>
<li> 王宁 </li>
</ul>
</div>