CSS
3 种引入方式
行内样式
写在元素的
style属性中html<div style="color: white; background-color: #369; text-align: center">行内设置</div>嵌入式
写在
head 中的style标签中html<style> div{ color: white; background-color: #369; text-align: center } </style>链接式
将 css 写在 后缀为
.css 的外部样式表在
head 中使用link 标签的href属性 引入文件html<link rel="stylesheet" href="common.css">
选择器
基本选择器
选择器类型 语法 描述 标签选择器 标签名{...}选中页面中所有指定类型的 HTML 标签 class 选择器 .class_name{...}选中所有拥有指定 class属性值的元素，可复用ID 选择器 #id_name{...}选中页面中唯一拥有指定 id属性值的元素，不可复用通配选择器 *{...}选中页面中所有 HTML 元素，常用于统一初始化样式 组合选择器
选择器类型 语法格式 作用描述 后代选择器 选择器1 选择器2 选择器3{ ... }选中 “选择器 1” 包含的所有后代元素 子选择器 选择器1 > 选择器2 { ... }仅选中 “选择器 1” 的直接子元素 相邻兄弟选择器 选择器1 + 选择器2 { ... }选中 “选择器 1” 紧接在后的第一个兄弟元素 通用兄弟选择器 选择器1 ~ 选择器2 { ... }选中 “选择器 1” 之后所有同级的兄弟元素 并集选择器 选择器1, 选择器2, 选择器3 { ... }同时选中多个选择器各自匹配的所有元素 属性选择器
选择器类型 语法格式 作用描述 存在属性选择器 [attr] { ... }选中所有包含指定属性的元素，无论属性值是什么 精确值属性选择器 [attr="value"] { ... }选中所有指定属性的值完全等于目标值的元素 包含词属性选择器 [attr~="value"] { ... }选中指定属性的值中包含目标值作为独立单词的元素（值之间用空格分隔） 前缀属性选择器 [attr^="value"] { ... }选中指定属性的值以目标值为开头的元素（无论是否为独立单词） 后缀属性选择器 [attr$="value"] { ... }选中指定属性的值以目标值为结尾的元素（无论是否为独立单词） 包含子串属性选择器 [attr*="value"] { ... }选中指定属性的值中包含目标值作为子串的元素（目标值可出现在任意位置） 伪类选择器
伪类类别 伪类语法 作用描述 链接伪类 :link选中所有未被访问过的链接元素 :visited选中所有已被访问过的链接元素 用户行为伪类 :hover选中鼠标指针悬停在上面的元素 :active选中被用户激活（如点击过程中）的元素 :focus选中获得焦点的元素（如表单输入框被选中时） 结构伪类 :first-child选中父元素的第一个子元素 :last-child选中父元素的最后一个子元素 anchor 伪类（链接伪类）：控制链接的显示效果
- 书写顺序：
:link → :visited → :hover → :active
- 书写顺序：
【示例】链接伪类
html<style> a:link{ color: red; } a:visited{ color: coral; } a:hover{ color: blue; } a:active{ color: rebeccapurple; } </style>【示例】
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 p{ color: green; } .c1 p:first-child{ color: red; } .c1 div:last-child{ color: red; } p#i1:after{ content:"hello"; color:red; display: block; } </style> </head> <body> <div class="c1"> <p>item</p> <p>item</p> <div>item</div> <p>item</p> </div> <a class="c1"> <div>item</div> <p>item</p> <div>item</div> </a> <p id="i1">p标签</p> </body> </html>
before / after 伪元素：在元素内插入额外的虚拟子元素
样式继承
| 类别 | 可继承的属性 |
|---|---|
| 文本相关 | color、 font-family、font-size、font-style、font-variant、font-weight、font、 letter-spacing、line-height、 text-align、text-indent、text-transform、 white-space、word-spacing |
| 字体相关 | font-family、font-size、font-style、font-variant、font-weight、font（字体复合属性） |
| 列表相关 | list-style、list-style-image、list-style-position、list-style-type |
| 表格相关 | border-collapse（部分场景）、caption-side |
| 其他 | visibility、cursor、quotes |
【Tip】
- css 的继承权重比普通元素的权重还低
- 一些布局相关的属性不能被继承，如：border, margin, padding, background 等
选择器优先级 （Specificity）
css 优先级
同一来源（选择器权重）：
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性跨来源
- 用户
!important（User !important） - 开发者
!important（Author !important） - 开发者普通样式（Author Normal）
- 用户自定义样式（User）
- 浏览器 UA 样式（User-Agent）
- 用户
同一权重，后者居上
选择器（从高到低）
权重等级（从高到低） 对应选择器类型 权重值（a, b, c, d） 说明 内联样式（行内样式） 元素的 style 属性(1, 0, 0, 0) 直接写在 HTML 元素标签内的样式，权重最高（如 <div style="color: red">）ID 选择器 #id 形式的选择器(0, 1, 0, 0) 每个 ID 选择器贡献 1 个 “b 级权重” 类 / 伪类 / 属性选择器 .class、:hover、[attr](0, 0, 1, 0) 每个类、伪类或属性选择器，各贡献 1 个 “c 级权重” 元素 / 伪元素选择器 div、p、::before 等(0, 0, 0, 1) 每个元素或伪元素选择器，各贡献 1 个 “d 级权重”
属性操作
1）font 字体属性
值 描述 normal 默认值。显示一个标准的字体样式 italic 设置字体样式为斜体，是选择字体库中的斜体字 oblique 设置字体样式为斜体，不是去使用字体库的斜体字 inherit 规定应该从父元素继承字体样式 font-weight（设置文本的粗细）
值 描述 normal 默认值。定义标准的字符，相当于数字值400 bold 定义粗体字符，相当于数字值700 bolder 定义比父级元素字体更粗的字符。 lighter 定义比父级元素字体更细的字符。 number 取值范围：100、200、300、400、500、600、700、800、900。 inherit 规定应该从父元素继承字体的粗细 font-size（字体大小）
值 描述 - xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large
默认值：medium
主流浏览器默认是15像素到16像素smaller 把 font-size 设置为比父元素更小的尺寸 larger 把 font-size 设置为比父元素更大的尺寸 length 把 font-size 设置为一个固定的值 % 把 font-size 设置为基于父元素的一个百分比值 inherit 规定应该从父元素继承字体尺寸 font-family（字体族）：指定元素使用的 字体系列或字体族
font 文本属性color（字体颜色）
- 常用：英文单词，十六进制，RGB 十进制
text-align（文本对齐方式）
值 描述 left 左对齐 right 右对齐 center 居中 justify 两端对齐 inherit 继承 【住】默认值：由浏览器决定
line-height（字体行高）
字体最底端与字体内部顶端之间的距离
行高 = 字体大小 + 上半行距 + 下半行距
值 描述 normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 inherit 继承 vertical-align（设置元素的垂直对齐方式）
text-decoration（设置文本内容的装饰线条）
属性值 描述 text-decoration-line 设置要使用的文本装饰类型（如下划线、上划线、划线） text-decoration-color 设置文字装饰线条的颜色。 text-decoration-style 设置文本装饰线条的样式（如实心、波浪形、点线、虚线、双线） text-decoration-thickness 设置装饰线的粗细。 常用的值有
none，underline，overline，line-through
2）background 背景属性
background-color（背景颜色）htmlbackground-color: transparent / rgb(255,0,0) / #ff0000 / red; 透明 RGB 十六进制 颜色单词
background-image（背景图片）htmlbackground-image: url('图片地址');【Tip】同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上
background-repeat（背景平铺方式）htmlbackground-repeat: repeat/no-repeat/repeat-x/repeat-y; 平铺 / 不平铺 / x 轴平铺 / y 轴平铺
background-position（背景定位）htmlbackground-position: [水平位置] [垂直位置]; x轴坐标 y轴坐标 / left / center / right 【混合使用】： background-position: right 10px center; （靠右，向右偏移 10px，垂直居中）【Tip】若只指定一个值，第二个值默认为
center【Tip】元素背景左上角为原点（0，0）
-
leftcenterright
-
background 背景样式缩写
cssbackground: 背景颜色 背景图片 背景平铺方式 背景定位;【Tip】属性的书写顺序不固定
3）border 边框属性
border-style（边框风格）htmlborder-style：none / hidden / dotted / dashed / solid / double; 没有边框 / 隐藏边框 / 点状边框 / 虚线边框 / 实线边框 / 双实线边框【Tip】
- none（没有边框）系统会忽略 border-color
- hidden（隐藏边框）低版本浏览器不支持
- double（双实线边框）两条单线与其间隔的和等于 border-width 值
border-width（边框厚度）htmlborder-width: medium / thin / thick / length; 默认 / 细的边框 / 粗的边框 / 自定义边框的宽度
border-color（边框颜色）htmlborder-color: red / #ff0000 / rgb(255, 0, 0) / transparent;border 边框样式缩写：
cssborder: 边框宽度 边框样式 边框颜色;【Tip】不需按照顺序进行书写
【Tip】单独指定不同方向：
值：
top、bottom、left、righthtmlborder-style: dotted double; (上、下边框)为点状线、(左、右边框)为双线 border-top-width: 50px; 上边框的宽度为 50px border-left-color: red; 左边框的颜色为红 border-color: red green; 上下边框为红色、右边框为绿色、（左边框本为绿色，但被覆盖为红色）【Tip】缩写时：
- 只有一个值：同时控制上下左右的边框样式
- 只有两个值：分别控制上下、左右的边框样式
- 有三个值：分别控制上、左右、下的边框样式
- 有四个值：分别控制上、右、下、左的边框样式
4）list 列表属性
list-style-type（系统提供的列表项目符号）csslist-style-type: none / disc / circle / square / decimal; 无标记 / 实心圆(默认) / 空心圆 / 实心方块 / 数字 【示例】ul {list-style-type:circle;}
list-style-image（自定义的列表项目符号）csslist-style-image: none / url / initial / inherit; 默认值 / 图像 / 恢复初始样式 / 继承 【示例】ul { list-style-image:url("/i/arrow.gif"); }
list-style-position（设置在何处放置列表项标记）csslist-style-position: inside / outside / inherit; 标记放置在文本以内 / 标记在文本以外(默认值) / 继承 【示例】ul { list-style-position:inside; }
5）dispaly属性
display 指定元素的显示模式
css
display: block / inline / inline-block / none;
块状元素 / 行内元素 / 行内块状元素 / 隐藏- 块状元素：独占一行，可设置宽高，支持所有边距
- 行内元素：同行排列，不可设置宽高，垂直边距受限
- 行内块状元素：兼具行内元素的排列特性和块状元素的尺寸可控性（html原本没有）
6）盒子模型
把HTML页面上的每个元素看成一个个方盒子，这些盒子由元素的四部分组成
content（内容）、padding（内边距）、border（边框）、margin（外边距）
padding 内边距（内补白），页面中元素的边框与内容的距离可设置多个值，也可单独设置
margin 外边距（外补白），页面中元素与元素之间的距离默认为 0，可以是负值
若要让元素居中：
margin: 0 auto;【示例】
css<!DOCTYPE html> <html> <head> <style> /* 盒子模型演示容器 */ .box { /* 内容区：设置宽高 */ width: 200px; height: 150px; /* 内边距：内容与边框之间的距离 */ padding: 20px; /* 边框：围绕内边距和内容的线条 */ border: 5px solid #333; /* 外边距：盒子与其他元素之间的距离 */ margin: 30px; /* 背景色仅作用于内容区和内边距 */ background-color: #f0f0f0; /* 文本样式 */ font-family: Arial, sans-serif; } /* 辅助说明样式 */ .container { border: 1px dashed #999; padding: 10px; } .label { font-size: 12px; color: #666; } </style> </head> <body> <div class="container"> <div class="box"> 内容区 (200px × 150px) <div class="label">padding: 20px（内边距）</div> </div> <div class="label">border: 5px 实线（边框）</div> <div class="label">margin: 30px（外边距）</div> </div> </body> </html>
7）float 属性
浮动模型：元素脱离文档流、文字环绕的机制
- 流动模型：文档流，浏览器默认把元素按从左到右、从上到下的顺序排布
- 流动布局：让页面随着视口或容器宽度“流动”伸缩，而不是写死 px 值
浮动属性
- 用于指定元素脱离常规文档流
- 向左或向右移动，直到其外边缘碰到包含块或另一个浮动元素的边缘。
cssfloat: left / right / none; 向右浮动 / 向左浮动 / 不浮动浮动后的特性
自动被设置为一个行内块状元素
一个浮动元素脱离了文档流，则其之后的元素将占据其原本的位置
一行放不下的浮动元素，将被挤到下一行
字围效果：文字内容会围绕在浮动元素周围。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 500px; height:500px; border: 1px solid red; } img{ float: left; } </style> </head> <body> <div class="c1"> <img src="https://img0.baidu.com/it/u=1379270897,1242083026&fm=26&fmt=auto&gp=0.jpg" alt=""> <span> 道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。 道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 </span> </div> </body> </html>只能浮动至左侧或者右侧
浮动元素只能影响排在其后面元素的布局
清除浮动
cssclser: left / right / both / none;值 描述 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 左右两侧均不允许浮动元素 none 默认值。允许浮动元素出现在两侧。 【Tip】清除浮动解决父级塌陷问题
8）position 属性
层布局模型：把网页中的每一个元素看成是一层一层的，然后通过定位属性
position 和 方位属性 对元素进行定位摆放定位属性
cssposition: static / fixed / relative / absolute; 静态定位(默认) / 固定定位 / 相对定位 / 绝对定位- 固定定位：相对于整个浏览器的窗口
- 相对定位：相对于元素本身原来的位置
- 绝对定位：相对于其最接近的具有定位属性的父级元素（脱离文档流）
方位属性
属性 描述 top：...px相对于指定目标的 顶部 偏移 right：...px相对于指定目标的 右边 偏移 bottom：...px相对于指定目标的 底部 偏移 left：...px相对于指定目标的 左边 偏移 【示例】
cssh2 { position:absolute; left:100px; top:150px; }