Css 定义
层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)
Css 引入方式
内部样式表：
CSS 代码写在 style 标签里面
外部样式表: 开发使用
CSS 代码写在单独的 CSS 文件中(.css)
在 HTML 使用 link 标签引入
<link rel="stylesheet" href="./my.css">
行内样式:配合 JavaScript 使用
CSS 写在标签的 style 属性值里
<div style="color: red; font-size:20px;">这是 div 标签</div>
选择器
作用:查找标签,设置样式。
基础选择器
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
标签选择器
标签选择器:使用标签名作为选择器 → 选中同名标签设置相同的样式。
<style>
p {
color: red;
}
</style>
注意:标签选择器无法差异化同名标签的显示效果。
类选择器
作用:
查找标签,差异化设置标签的显示效果。
<style>
/* 定义类选择器 */
.red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
注意：
- 类名自定义，不要用纯数字或中文，尽量用英文命名
- 一个类选择器可以供多个标签使用
- 一个标签只可以使用一个class 但是可以使用多个类名，类名之间用空格隔开
Id选择器
作用:
查找标签,差异化设置标签的显示效果。
场景：
id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式
<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>
规则
同一个 id 选择器在一个页面只能使用一次
通配符选择器
作用:
查找页面所有标签,设置相同样式。
通配符选择器: *,不需要调用,浏览器自动查找页面所有标签,设置相同的样式
* {
color: red;
}
经验:
通配符选择器可以用于清除标签的默认样式,例如:标签默认的外边距、内边距
复合选择器
后代选择器
<style>
div span {
color: red;
}
</style>
** 后代选择器，选中所有后代，包含儿子、孙子、重孙子… **
子代选择器
<style>
div > span {
color: red;
}
</style>
并集选择器
<style>
div,
p,
span {
color: red;
}
</style>
交集选择器–了解
<style>/* 既又的关系：既是 p 标签，又是有 box 类 */p.box {color: red;}</style>
伪类选择器
<style>
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style>
伪类-超链接（扩展）
结构伪类选择器
作用： 根据元素的结构关系查找元素
<style>第一个 li:first-child {background-color: green;} 最后一个 li:last-child {background-color: green;} 任意个 li:nth-child(3) {background-color: green;} li:nth-child(1) {background-color: green;}</style>
伪元素选择器
作用： 创建虚拟元素（伪元素），用来摆放装饰性的内容
| 选择器 | 说明 |
|---|---|
| E::before | 在E元素里面最前面添加一个伪元素 |
| E:after | 在E元素里面最后面添加一个伪元素 |
注意点：
- 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
文字控制属性
字体大小
<style>/* 经验：谷歌浏览器文字有默认大小 16px */p {/* font-size 属性必须有单位，否则属性不生效 */font-size: 30px;}</style>
字体粗细
<style>h3 {font-weight: 400;}div {font-weight: 700;}</style>
字体样式（是否倾斜）
<style>em {font-style: normal;}div {font-style: italic;}</style>
行高
<style>p {font-size: 20px;/* line-height: 30px; *//* 行高值是数字，表示是当前标签字体大小的倍数 */line-height: 2;}</style>
行高-垂直居中
文字垂直居中： 行高属性值等于盒子高度属性值
注意： 该技巧适用于单行文字垂直居中效果
<style>div {height: 100px;/* 注意：只能是单行文字垂直居中 */line-height: 100px;}</style>
子体族
了解
font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
文字复合属性
使用场景：设置网页文字公共样式
文本缩进
<style>p {text-indent: 2em;font-size: 30px;}</style>
文本对齐方式
<style>h1 {/* 本质：居中的是文字内容，不是标签 *//* text-align: left; */text-align: center;/* text-align: right; */}</style>
水平对齐方式 – 图片
text-align本质是控制内容的对齐方式，属性要设置给内容的父级。
<style>
div {
text-align: center;
}
</style>
<div>
<img src="./images/1.jpg" alt="">
</div>
文本修饰线
color 文字颜色
属性名 color
属性值
调试工具
谷歌浏览器
作用： 检查、调试代码；帮助程序员发现代码问题、解决问题
使用：
- 打开浏览器 按f12
- 使用调试工具
PxCook
PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
- 开发面板（自动智能识别）
- 设计面板（手动测量尺寸和颜色）
使用步骤
创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿
CSS 三大特性
继承性
继承性：
子级默认继承父级的文字控制属性
注意：
如果标签有默认文字样式会继承失败。
层叠性
注意：
选择器类型相同则遵循层叠性，否则按选择器优先级判断
优先级
优先级：
也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
规则：
选择器优先级高的样式生效。
公式：
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
（选中标签的范围越大，优先级越低）
优先级 – 叠加计算规则
叠加计算：
如果是复合选择器，则需要权重叠加计算
公式：（每一级之间不存在进位）
规则：
- 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
- !important 权重最高
- 继承权重最低
Emmet 写法
Emmet写法：
代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。
背景属性
背景色
background-color
背景图
<style>/* 盒子是 400 * 400 */div {width: 400px;height: 400px;/* 背景图默认是平铺（复制）的效果 */background-image: url(./images/1.png);}</style>
背景图平铺方式
属性名： background-repeat（bgr）
属性值：
<style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);/* 不平铺：盒子的左上角显示一张背景图 */background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */}</style>
背景图位置
属性名：
background-position（bgp）
属性值：
水平方向位置 垂直方向位置
- 关键字
-
- 坐标 （数字+px，正负都可以）
水平：正数向右；负数向左
垂直：正数向下；负数向上
注意：
- 关键字取值方式写法，可以颠倒取值顺
- 可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
<style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;左上角 background-position: 0 0; background-position: left top; 右下角background-position: right bottom;水平：正数向右，负数向左 background-position: 50px 0; background-position: -50px 0; 垂直：正数向下，负数向上 background-position: 0 100px; background-position: 0 -100px; 特殊写法 background-position: bottom left; 关键字可以只写一个，另一个方向居中 background-position: bottom; 只写一个数字表示水平方向，垂直方向居中 background-position: 50px;}</style>
背景图缩放
作用： 设置背景图大小
属性名： background-size（bgz）
常用属性值：
- 关键字
cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白 - 百分比：根据盒子尺寸计算图片大小
- 数字 + 单位（例如：px）
<style>div {width: 500px;height: 300px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;contain：如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有露白 background-size: contain; cover：图片完全覆盖盒子，可能导致图片显示不全 background-size: cover; /100% 图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放 background-size: 100%;}</style>
背景图固定
作用： 背景不会随着元素的内容滚动。
属性名： background-attachment（bga）
属性值： fixed
<style>body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;}</style>
背景复合属性
属性名： background（bg）
属性值： 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
<style>div {width: 400px;height: 400px;/* background: pink url(./images/1.png) no-repeat center bottom/cover; */background: pink url(./images/1.png) no-repeat center bottom/contain;}</style>
显示模式
块级元素
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
行内元素
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
行内块元素
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
转换显示模式
属性名： display
属性值：
