前端三件套-css

zhenryx

已于 2025-03-06 22:06:55 修改

阅读量1.3k

点赞数 32

分类专栏：前端（三件套以及框架）文章标签：前端 css

于 2024-11-07 12:14:20 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63324578/article/details/143583424

版权

一、元素选择器

元素选择器：利用标签名称。p,h1-h6......

行内样式（内联样式）：例如<p style="color:red;font-size:50px">

id选择器：针对某一个特定的标签来使用。以#定义。

class（类）选择器：可以被多种标签使用，同一个标签可以使用多个类选择器，用空格隔开。

合并选择器：选择器1,选择器2,.....{}

选择器优先级：内联样式＞id选择器＞类选择器＞元素选择器

同优先级多次定义会执行覆盖（最后定义的为最终效果）

①后代选择器 A B{ } 选择器A下的所有B元素

例如：

<style>

ul li{

color: blue;

}

</style>

</head>

<body>

<ul>

<li>后面的后代标签都会生效</li>

<li>1</li>

<div>

<ol>

<li>也会生效</li>

</ol>

</div>

</ul>

</body>

②子代选择器 A>B{ } 父元素为A的B元素

例如上面的选择器则只有第一个包括的li起效后面div包括的是孙代会失效。

③相邻选择器 A+B{ } 紧接在A选择器下的所有B元素

只有相邻的第一个元素生效，只能是往下选择。

④通用选择器 A~B{ }

向下的所有元素都起效。

伪元素和伪类

伪元素和伪类的根据区别就是：前者是创建出了一个新元素，而后者是一个已存在但你不能直接看到的元素。

伪元素

伪元素本身不存在在DOM文档中，它需要人为的去创建它。且就算你创建了伪元素，它也只是逻辑上存在，实际上也并不存在DOM文档中，也就是说你无法使用JS去获取改变它。

伪类

伪类它存在于DOM文档中，但如果你没有特别的去声明它，你就看不到它。

二、属性

1、字体属性

(1)color颜色

四种形式：

①color:red

②color:#ff0000 //十六进制形式(常用)

③color:rgb((255,0,0)

④color:rgba(255,0,0,.5) //第四个参数：0透明 1不透明 0.5半透明

(2)font-weight 字体粗细

①bold 粗体字符

②bolder 更粗的字符

③lighter 更细的字符

④400-900 细到粗 400为默认 700等同bolder

(3)font-style 字体样式

①normal 默认值

②italic 斜体字

(4)font-family 字体效果

例如：<h3 style="font-family: 黑体;">黑体：SimHei</h3>

<h3 style="font-family: 微软雅黑体;">Microsoft YaHei</h3>（默认）

2、背景属性

(1) background-color 背景颜色

（2）background-image 背景图像

（图像不够大会垂直和水平平铺）

background-image:url("");

（3）background-repeat 背景内容平铺方式

①repeat 默认

②repeat-x 水平方向平铺

③repeat-y 垂直方向平铺

④no-repeat 不平铺

默认情况例如：

（4）background-size 背景图像大小

①background-size:200px 300px;

②background-size:100% 100%; //百分比方式

③background-size:cover;//完全覆盖容器（放大裁剪）

④background-size:contain;//缩放到对于容器合适即可（自适应）

（5）background-position 背景图像位置

①自行匹配：left right top bottom center

例如 background-position:left top;//左上角

②百分比和像素方式

3、图片属性

（1）object-fit

4、文本属性

(1)text-decoration 文本属性

①下划线：underline

②上划线：overline

③删除线：line-through

(2)text-transform 文本大小写

①首字母大写：captialize

②全部大写：uppercase

③全部小写：lowercase

(3)text-indent 首行文本缩进

text-indent：？px

(4)letter-spacing 文字间隔

(5)text-overfolw

定义如何向用户表示存在被隐藏的溢出内容。

值	行为描述	适用场景	必要条件
`clip`	直接截断溢出的文本，不显示任何标记（默认值）。	简单截断，无需提示	`overflow: hidden` + `white-space: nowrap`
`ellipsis`	在溢出位置显示省略号（`...`），表示文本被截断。	明确提示文本被截断（如表格、卡片）	`overflow: hidden` + `white-space: nowrap`
`fade`	在溢出位置渐隐文本（实验性值，需配合 `mask` 或浏览器前缀）。	平滑过渡的截断效果	`mask` 或浏览器兼容性支持（如 `-webkit-text-overflow: fade`）

(6)white-space

控制元素内文本如何处理空格、换行符和缩进的 CSS 属性。

值	空格处理	换行符处理	自动换行	行尾空格处理	适用场景
`normal`	合并	合并为空格	✅ 允许	删除	默认文本处理
`nowrap`	合并	合并为空格	❌ 禁止	删除	单行文本（如导航栏）
`pre`	保留	保留（强制换行）	❌ 禁止	保留	代码块、保留格式（类似 `<pre>`）
`pre-wrap`	保留	保留（强制换行）	✅ 允许	保留	保留格

最低0.47元/天解锁文章