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>
发表回复