CSS详解：样式表的使用与选择器应用-优快云博客

本文链接：https://blog.youkuaiyun.com/Xstruggle/article/details/124241125

本文详细介绍了CSS的使用，包括内联、内嵌和外部样式表的引入方式。深入探讨了选择器，如通用、标签、类、ID选择器以及各种组合选择器，并讲解了层级选择器的用法。此外，还涵盖了伪类选择器、属性选择器和常用样式，如背景、文本、列表样式等。同时，文章也讨论了盒子模型、文档流、浮动和定位的概念，以及透明度的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS(cascading style sheets) 层叠样式表

用于页面外观美化，布局和定位

使用

内联

直接在HTML标签使用CSS样式表

<style="CSS样式">

<p style="color: red;font-size: 30px;">文字</p>

弊端：只对当前元素作用

内嵌

在HTML的head标签使用style标签，声明CSS代码域

<style type="text/css">
    p{
        color: red;
        font-size: 30px;
    }
</style>

特点：达到一定程度的复用（限本页面）

外部样式表

1、HTML文件外建CSS文件，在head标签中通过link标签引入

<link rel="stylesheet" type="text/css" href="CSS文件路径"/>

2、@import 指令导入CSS文件

<style>
    @import "CSS文件路径";
    @import url(CSS文件路径);
</style>

选择器

!important最高优先级

找对应元素作用效果

基础选择器

通用选择器

对页面所有元素作用

*{样式名:样式值；}

标签选择器

对所有相关标签作用

标签名{样式名:样式值；}

类选择器

使用自定义名称， . 作前缀

通过标签class属性调用

.标签名{样式名:样式值；}

ID选择器

使用自定义名称， # 作前缀

通过标签id属性调用

#标签名{

样式名:样式值；

}

组合选择器

多个选择器共用一个样式

选择器1，选择器2{

样式名:样式值；

}

层级选择器

子选择器

作用在选择器1下一层符合选择器2条件的标签

选择器1>选择器2

后代选择器

作用在选择器1所有层符合选择器2条件的标签

选择器1 选择器2

兄弟选择器

作用在选择器同级下所有符合选择器2条件的标签

选择器1~选择器2

相邻兄弟选择器

作用在选择器同级下一个相邻且符合选择器2条件的标签

选择器1+选择器2

nth-child()选择器

父选择器中找符合要求的子选择器

index：指定子选择器下标 ([1,+∞))

父选择器子选择器：nth-child(index)

写法	作用
first-child	第一个
last-child	最后一个
odd	奇数
even	偶数
nth-child(n)	n(0~+∞)

nth-child

前x个：nth-child(-n+x)
x个后：nth-child(n+x)

伪类选择器

设定交互效果状态

选择器 : 效果

效果	作用
选择器：hover	鼠标悬停效果
选择器：active	鼠标下压效果
选择器：link（作用在`<a>`）	未访问链接
选择器：visited（作用在`<a>`）	已访问链接

属性选择器

选择器[属性名]

选择器[属性名=值]

选择器[属性名*=值]

选择器[属性名][属性名]

常用样式

背景样式

名称	作用
background-color	背景颜色
background-image:url(图片地址)	背景图片
background-repeat	重复方式

background-repeat

repeat-x x方向平铺

repeat-y y方向平铺

no-repeat 不平铺

inherit 继承父类特性

文本样式

名称	作用
font-size	大小(16px)
font-weight	粗细
color	颜色
font-style	正斜
font-family	字体
line-height	行高（等于父元素垂直居中）
text-decoration	文本修饰
text-align	水平对齐方式
vertical-align	垂直对齐方式