html零基础必看——CSS的三种样式结构、CSS常见选择器详解
第三章：CSS基础知识
前言
通过前面两章我们学习了html的页面结构和一些常见标签，这些标签来呈现我们的页面内容，那么如何去更好的美化这些页面呢？这就需要用到本章及后续所讲解的CSS知识了！
一、认识CSS
1.1.CSS基本概念
- CSS是：层叠样式表(英文全称：Cascading Style Sheets)。是一种用来表现HTML等文件样式的计算机语言，CSS可以静态地修饰网页。
- HTML是网页骨架，CSS是用来修饰网页的。
1.2.结构
CSS 规则由两个主要的部分构成：选择器，声明块（一条或多条声明）
即：选择器 {属性 ：属性值}
- 选择器：在{}前面的内容就是选择器，选择器通常是你需要改变样式的 HTML 元素。
- 声明块：由{}包裹的内容就是声明块，每条声明由属性和属性值组成；每个声明结束要用分号结尾。
- 属性：是你希望设置的样式属性，每个属性有一个或多个值。属性和值用冒号分开，并以分号结尾。
- 为了让CSS可读性更强，可以每行只描述一个属性。
二、CSS的三种写法
CSS样式可以直接存储于HTML网页中（内部样式和行内样式），或被放置在一个文件扩展名为.css的外部样式单文档中，需要通过引入使用。
2.1.内部样式
- 内部样式写在头部head标签里面，一般是在title标题标签下面紧接着，用style标签包裹着。
- style标签可以加上
type="text/css"这条属性，用于告诉浏览器这里是什么格式的代码，但是在HTML5规范中可以不用写。- CSS样式的注释快捷键和HTML标签的注释一样都是ctrl+/。
<head>
<title>Document</title>
<style>
/*这里写css代码*/
/* CSS的注释也是 ctrl+/ */
</style>
</head>
2.2.行内样式
直接写在标签里面
<body>
<!-- 这是行内样式 -->
<p style="color: brown;">我是段落文字p,我的样式就写在我的标签里面</p>
</body>
2.3.外部样式
单独创建.css后缀的文件，然后通过link标签引入，link通常放置于头部
<head>
<title>外部样式</title>
<link rel="stylesheet" href="rest.css">
</head>
- link: 链接标签
- rel:定义这个你引入这个文件是什么样的格式属性
- stylesheet: 样式表
- href: 相当于你的引入地址 地址
2.4.三种样式的优先级
就近原则：行内样式>内部样式>外部样式
<head>
<title>三种样式写法</title>
<!-- 外部样式，需要link标签引入 -->
<link rel="stylesheet" href="rest.css">
<!-- 内部样式，需要用到style标签包裹 -->
<style>
/*这里写css代码*/
p{
color: yellow
}
</style>
</head>
<body>
<!-- 这是行内样式 -->
<p style="color: red;">我是段落文字p,我的样式就写在我的标签里面</p>
</body>
注意：我们可以发现外部样式和内部样式都是写在头部head标签并且在标题title标签后面。外部样式使用次数较多，需要外部引入，一般规范格式都是外部样式link标签写在内部样式style标签前面。
内部样式和行内样式都给了p标签颜色属性，但是最终文字颜色是red红色的。内部样式写在头部标签里，行内样式直接写在p标签里，因为代码是从上往下加载的，由于就近原则，离p标签最近的属性是行内样式，所以文字最终显示红色。（都给同一个p标签颜色属性，内部样式的属性会被覆盖，就只显示行内样式的红色属性了）
2.5.三种样式的比较
- 行内样式
- 优点：写法简单 容易 (权重高 优先级大)
- 缺点：不利于维护 后期修改代码不方便 不能重复利用
- 使用次数: 很少使用
- 内部样式
- 优点: 方便维护 阅读方便 部分结构和样式分离了
- 缺点: 没有真正的 样式和结构完全分离开
- 使用次数: 较多 (自己写案例时候常用)
- 外部样式
- 优点: 样式和结构分离 代码可以重复利用
- 缺点: 用起来麻烦需要引入
- 使用次数: 开发中使用次数是最多的 (开发规范写法)
三、CSS选择器
3.1.基本选择器
3.1.1.元素选择器（标签名选择器）
通过标签名选择添加样式，如：
<style>
h1 {
color: red;
}
</style>
3.1.2.类名选择器
- 写法：<标签名 class=“类名”>
- 获取样式;以 .类名 作为选择器
- class类名，不是唯一的，单个标签元素可以拥有多个类名；允许不同标签使用相同类名（相当于一个人可以有多个外号和小名；不同的人名字也有重名）
<head>
<title>类名选择器</title>
<style>
/* 用类名p1获取样式 */
.p1{
color: green;
}
</style>
</head>
<body>
<!--给p标签取一个类名为p1 -->
<p class="p1">我是p</p>
</body>
3.1.3.id选择器
- 写法：<标签名 id=“id名”>
- 获取样式：以 #id作为选择器
- id名是唯一的，就如同身份证号，不允许重复，只能用一次
<head>
<title>id选择器</title>
<style>
/* 用id名text获取样式 */
#text{
color: green;
}
</style>
</head>
<body>
<!-- 给p标签取一个id名为text -->
<p id="text">我是p</p>
</body>
3.1.4.通配符选择器
- 获取样式：以 * 作为选择器
- 作用是可用来清除默认样式
<style>
* {
/* 背景颜色;绿色 */
background-color: green;
/* 外边距：0，下章会讲到 */
margin: 0;
}
</style>
3.1.5.群组选择器
将具有相同属性的选择器合并，可用多种不同类型的选择器组合起来，中间用逗号隔开。
<style>
/* 群组选择器：多个不同类型选择器合并起来，设置相同的属性 */
h1,.p1,#text,p,span{
/*多个选择器中间用逗号隔开*/
font: size 17px;;
}
</style>
3.1.6.优先级问题：
对于同一个元素而言，如果设置有多个选择器，那么就会有一个优先级的问题：
1.一般而言，优先级：ID选择器 > 类选择器 > 标签(元素)选择器>通配符
<head>
<title>优先级比较</title>
<style>
*{
color: brown;
}
p{
color: red;
}
.p1{
color: green;
}
#text{
color: blue;
}
</style>
</head>
<body>
<p class="p1" id="text">我是p，谁的优先级最大，我就是谁设置的颜色</p>
</body>
在上述代码中，p标签用多种不同的选择器来设置颜色属性，由于id选择器的优先级最高，所以文字颜色是Id选择器设置的颜色为blue蓝色。
效果图：
2.有行内样式，行内样式的优先级高。
- 如果标签内设置了行内样式的话，行内样式的属性大，因为就近原则。
- 优先级：行内样式>ID选择器 > 类选择器 > 标签(元素)选择器>通配符
<p class="p1" id="text" style="color: darkorange;">我是p，谁的优先级最大，我就是谁设置的颜色</p>
</body>
在上述代码基础上，在p标签内加入了style="color: darkorange行内样式，此时文字颜色应该是darkorange深橘色。
效果图：
3.! imporant 提高指定样式的优先级（最大）
- 用法：在指定选择器属性值后面直接加上 ！important 直接把对应样式的优先级提高到最大。
- 优先级：! imporant>行内样式>ID选择器 > 类选择器 > 标签(元素)选择器>通配符
<style>
*{
/* 加了!important，此时优先级是最大的 */
color: brown !important;
}
</style>
在上述代码基础上，在通配符样式中，属性值后面加上了! imporant，把它的样式优先级提到了最大，此时此时文字颜色应该是brown 棕色。
效果图：
3.2层次选择器
层次选择器 通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。
3.2.1后代选择器
选择后代中所有的元素，范围比较大
3.2.2子代选择器
选择后代中的元素中某一个子元素，范围比较小
<head>
<title>后代、子代选择器</title>
<style>
/* 后代选择器：选择ul标签后代中所有的li标签 */
ul li{
color: yellow;
}
/* 子代选择器：选择ol后代中类名为li1的这个子元素 */
ol > .li1{
color: red;
}
/* 子代选择器：选择ol后代中类名为li3的这个子元素 */
ol > .li3{
color: hotpink;
}
</style>
</head>
<body>
<div>
<ul>
<li class="li1">11</li>
<li>22</li>
<li class="li3">33</li>
</ul>
<ol>
<li class="li1">11</li>
<li>22</li>
<li class="li3">33</li>
</ol>
</div>
</body>
效果图：
3.2.3相邻兄弟选择器
在同一个父级下，一个元素的下一个相邻的同级兄弟元素
3.2.4后续兄弟选择器
在同一个父级下，一个元素后续所有的同级兄弟元素
<head>
<title>Document</title>
<style>
/* 相邻兄弟选择器：h1和p在同一个父级中，h1元素之后紧接着的元素p */
h1+p {
color: red;
}
/* 后续兄弟选择器：span和p在同一个父级中，span元素后面，所有的p元素 */
span~p {
color: goldenrod;
}
</style>
</head>
<body>
<div>
<div class="div1">
<h1>哈哈哈</h1>
<p class="p1">111</p>
<p>222</p>
<p class="p3">333</p>
</div>
<div class="div2">
<span>我是span</span>
<p class="p1">111</p>
<p>222</p>
<p class="p3">333</p>
</div>
</div>
</body>
效果图：
3.3结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。
可动态选择具体元素位置，如第一个，最后一个，奇数个，偶数个等
<head>
<title>Document</title>
<style>
/* 选择ul中后代第一个li子元素 */
ul li:first-child{
color: red;
}
/* 选择ul中后代最后一个li子元素 */
ul li:last-child{
color: green;
}
/* 奇数行选择器 */
ol li:nth-child(odd) {
color: yellow;
}
/* 偶数行选择器 */
ol li:nth-child(even) {
color: blue;
}
/* 和上面一样分别是奇数、偶数行选择器 */
/* ol li:nth-child(2n) {
color: yellow;
}
ol li:nth-child(2n+1) {
color: blue;
} */
</style>
</head>
<body>
<ul>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ul>
<ol>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
</body>
效果图：
总结
上述是小编为大家整理的一些CSS的初步认识、结构、三种样式的写法、以及常用到的一些选择器，具体案例及使用场景做了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。