css--属性总结记录

1. CSS特性

CSS特性：化简代码 / 定位问题，并解决问题

1. 继承性

继承性：子级默认继承父级的文字控制属性。

注意：如果标签有默认文字样式会继承失败。

例如：a 标签的颜色、标题的字体大小。

2.层叠性

特点：

相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性

不同的属性会叠加：不同的 CSS 属性都生效

注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断

3.优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

（选中标签的范围越大，优先级越低）

叠加计算：如果是复合选择器，则需要权重叠加计算。

公式：（每一级之间不存在进位）

 （行内样式, id选择器个数, 类选择器个数, 标签选择器个数）

规则：

1. 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
2. !important 权重最高
3. 继承权重最低

• 文字控制属性

        1.字体大小 font-size

属性值：文字尺寸，PC 端网页最常用的单位 px

经验：谷歌浏览器默认字号是16px

        2 .字体粗细 font-weight

属性值

数字（开发使用）:正常(400)     加粗(700)

关键字:正常(normal)        加粗(bold)

        3.字体样式（是否倾斜） font-style

作用：清除文字默认的倾斜效果

属性值: 正常（不倾斜）：normal        |           倾斜：italic

        4.行高 line-height

作用：设置多行文本的间距

属性值:   数字 + px       |          数字（当前标签font-size属性值的倍数）

        5.字体族  font-family

属性值：字体名1, 字体名2…., 字体族名（可以只写一个字体名）

执行顺序：从左向右依次查找

经验：

1. font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
2. font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体
3. font 复合属性

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

        6.文本缩进 text-indent

属性值：

1. 数字 + px
2. 数字 + em（推荐：1em = 当前标签的字号大小）

​​​​        7.文本(水平)对齐方式  text-align

        8.文本修饰线  text-decoration

​​​​​​​

        9.文字颜色  color

颜色显示方式:1.关键字;2.rgb表示法;3.rgna表示法;4.十六进制表示法

提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。

1. 背景属性

​​​​​​​

        背景图

网页中，使用背景图实现装饰性的图片效果。

属性名：background-image（bgi）

属性值：url(背景图 URL)

eg.background-image: url(./images/1.png);

​​​​​​​​​​​​​​        背景图平铺方式

1. 属性名：background-repeat（bgr）
2. 属性值

​​​​​​​

        背景图位置

1. 属性名：background-position（bgp）
2. 属性值：水平方向位置 垂直方向位置
3. 关键字
   1. 坐标（数字 + px，正负都可以）
   2. 水平：正数向右；负数向左
   3. 垂直：正数向下；负数向上

提示：

关键字取值方式写法，可以颠倒取值顺序

只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

​​​​​​​​​​​​​​        背景图缩放

1. 作用：设置背景图大小
2. 属性名：background-size（bgz）
3. 常用属性值：
   1. 关键字
      1.  cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
      2. contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
   2. 百分比：根据盒子尺寸计算图片大小
   3. 数字 + 单位（例如：px）

提示：工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。

​​​​​​​​​​​​​​        背景图固定

1. 作用：背景不会随着元素的内容滚动。
2. 属性名：background-attachment（bga）
3. 属性值：
   1. scroll：背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。
   2. fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的。
   3. local：这是CSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动。

         背景复合属性

属性名：background（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定

（空格隔开各个属性值，不区分顺序）

1. CSS修饰属性
   1. 垂直对齐方式 vertical-align

过渡 transition

1. 作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
2. 属性值：过渡的属性 花费时间 (s)

提示：

1. 过渡的属性可以是具体的 CSS 属性
2. 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
3. transition 设置给元素本身

透明度 opacity

1. 作用：设置整个元素的透明度（包含背景和内容）
2. 属性值：0 – 1
   1. 0：完全透明（元素不可见）
   2. 1：不透明
   3. 0-1之间小数：半透明

光标类型 cursor

作用：鼠标悬停在元素上时指针显示样式