本文详细介绍了CSS的基础概念、语法格式，包括行内样式、内嵌样式和单独文件的使用方法，以及各种选择器（如元素选择器、类选择器、ID选择器等）的用法。还讨论了样式层叠、继承机制和样式优先级，包括添加顺序、优先级规则和不同选择器类型的对比。
目录
4.3.10.1 :first-child 和:last-child
4.3.10.2 :first-of-type and :last-of-type
4.3.10.4 :nth-child and :nth-last-child
4.3.11.2 ::first-letter and ::first-line
4 CSS语法
<style>标签，字体动画背景图等
4.1 概述
CSS背景
4.1.1 CSS基本概念
CSS可以在网页文件中，也可以在单独保存在扩展名为.css的样式表文件中。
4.1.2 CSS语法格式
运用style然后对各个标签进行细节修改
选择器{
属性名：属性值；
属性名：属性值；
......
}
冒号和分号都要是英文符号
4.2 CSS添加方式
style标签
4.2.1 行内样式
不用style标签，直接在标签上设置，我个人其实比较喜欢这样子设置，比较方便。不过这样子结构可能会比较乱看起来。
<标签 style=“属性名：属性值；属性名：属性值；......”>
4.2.2 内嵌样式
style标签将样式添加到header去，这样子针对的全局变量。
<head> ... <style> 选择器{ 属性名：属性值； 属性名：属性值； ... } </style> </head>
4.2.3 单独文件
引用文件，好处是一次设置，多个页面可以进行引用。
4.2.3.1 创建样式表文件
创造一个文本，然后引用
创建一个文本，然后保存文件扩展名为.css
4.2.3.2 引用样式表文件
在head标签内使用link直接引用这个文件
<link rel="stylesheet" href="样式表文件位置+文件名+.css" type="text/css"/>
4.3 CSS选择器
4.3.1 元素选择器
标签选择器，例如：
p{
font-family:黑体;
font-size:16px;
...
}
4.3.2 类选择器
4.3.2.1 基本使用方法
以.开头，在元素中用class属性引用
.big{
font-size:20px;
}
HTML引用：
<p class="big"></p>
4.3.2.2 类选择器与元素选择器配合使用
p.big{
font-size:20px;
}
HTML引用:
<p class="big"></p>
p和class标签一起用，两个标签条件都要满足
4.3.2.3 多类选择器
多类选择器会形成多个类选择器定义样式的并集。
.big{
font-size:20px;
}
.red{
color:red;
}
.big.red{
background-color:#ccc;
}
<p class="big red">HTML</p>
4.3.3 ID选择器
ID以#开头，元素用id属性引用。
#center{
text-align:center;
}
HTML引用样式
<div id="center"></div>
类选择器可以多次使用，ID选择器在当前页面具有唯一性。
4.3.4 选择器分组
逗号隔开选择器名称，具有相同的样式。
h1,p{
color:blue;
}
4.3.5 后代选择器
用空格隔开选择器名称，表示“......内的......”
p strong{
color:blue;
}
4.3.6 子元素选择器
用>连接两个元素
p>strong{
color:blue;
}
html
<p><strong></strong></p>
4.3.7 相邻兄弟选择器
+号连接两个兄弟元素
h2+p{
font-weight:bold;
}
h2标题后的第一个段落文字为粗体
4.3.8 属性选择器
img[src*="user_fig"]{
......
}
我个人觉得对于量比较大的来说可能有用，量小我觉得可以直接自己独特设定一个
4.3.9 全局选择器
*作用于全部元素
*{
......
}
4.3.10 伪类
选择特定状态的元素
4.3.10.1 :first-child 和:last-child
选择一组元素中的首位元素
例如：
,content:first-child{
background-color:blue;
}
<article>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
<p class="content"></p>
</article>
此时第一个p元素会被改变，lastchild一样的。
4.3.10.2 :first-of-type and :last-of-type
与4.3.10.2差不多，区别是child匹配该元素的所有兄弟元素的第一个，type先按类型匹配，选择指定元素的第一个元素。
4.3.10.3 :not
.content:not(.not-cont){
background-color:blue;
}
<article>
<p class="content not-cont"></p>
<p class="content "></p>
<p class="content "></p>
<p class="content "></p>
</article>
除了not-cont的都变蓝色
4.3.10.4 :nth-child and :nth-last-child
nth-child从前向后的顺序匹配
last-child从后向前的顺序匹配
例如：
:nth-child(3)当前元素的兄弟元素，第三个 括号里面还可以加odd等甚至还能an+b，a和b最好是具体数字
4.3.10.5 用户行为伪类
.content:hover{
background-color:blue;
}
用户进行选择的时候，可以处于某种状态下
4.3.11 伪元素
前缀是两个冒号
4.3.11.1 ::before和::after
li::before{
content:url("video.png")
}
li::after{
content:"hot";
}
4.3.11.2 ::first-letter and ::first-line
::first-letter选择元素第一个字母，
::first-line选择元素的第一行。
例如：
p::first-letter{
font-size:2em;
color:red;
}
4.4 CSS层叠
父元素传递给子元素
<div>
<p>
</p>
</div>
p会继承div的一些特性
4.4.1 继承
父元素一些元素默认给子元素
-
文字属性：font,font-family,font-size,font-style,font-weight
-
文本属性：color,letter-spacing,line-height,text-decoration
-
列表属性:list-style,list-style-type,list-style-position,list-style-image
有非继承属性：与盒子相关的属性不会被继承
4.4.2 样式优先级
4.4.2.1 添加顺序
先添加的样式会被后面的覆盖
4.4.2.2 添加方式
行内样式>内嵌样式>样式表样式>默认样式
4.4.2.3 选择器类型
style属性>ID选择器>类选择器
扫一扫
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
