css的使用

css三种使用方式

1.行内式

kashfvbjdhfihkdalkjgjhd

2.内嵌式

<style>

p {

width:300px;

padding:400px;

border: 2px solid #099;

}

</style>

3.外联式

css的注释

/*p {

width:300px;

padding:400px;

border: 2px solid #099;

}*/

css长度单位

px像素，em字体大小的倍数，%百分比

颜色设置方式

1使用颜色名

2rgb方式表示颜色 rgb(100,200,230)0~255

3hex十六进制方式表示颜色#367836十六进制两个表示一个元色

}

css选择器

标签选择器:标签名{}

类名选择器：.class名{}

id选择器：#id名{}

全局选择器：*{}

权重：id选择器>class选择器>标签选择器>全局选择器

显示模式

默认显示模式：

块级元素block:在页面上是一个快，能够独占一行，可以设置宽和高

排版标签：h1~h6，p,pre,he,div;

列表标签：ul,ol,li；

表单标签：form,option

行内元素inline:显示在一行内，不能独占一行，无法显示高和宽

文本标签：em,strong,del,ins,sub,sup,span

超链接：a

表单标签：label

行内块元素inlin-block：显示在一行但是可以设置宽和高

图片标签：img

表单标签：input,button,textare,select

框架标签：iframe

修改显示模式：

使用css属性中的display属性：block,inline,inline-block

字体样式

font-size字体大小长度

font-weith字体粗细：normal,lighter,bold,100~900数字

font-style斜体字nomal,italic

font-family字体族科

字体列表：font-family: "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", Verdana, Roboto, Noto, "Helvetica Neue", sans-serif !important;

serif:非衬线，san-serif衬线

font复合属性：最少两个字体大小和字体名称用空格隔开（一般不用）

复合属性在子属性后面复合属性生效，子属性在复合属性的前面相应的子属性生效

文字样式

letter-spacing 字间距

word-spacing 词间距

text-decoration 文本修饰线属性值：none,underline,overline,line-throught

text-indent 首行缩进

text-align 文本水平对齐方式属性值：left,right,center

vertical-align 文本垂直对齐方式属性值：baseline：基线对齐。 top：顶线对齐。 middle：中线对齐。 bottom：底线对齐。 sub：下标字。 super：上标字。 长度：元素底部与基线的距离 |

line-height | 行高 | 长度

背景样式

属性名 | 作用 | 属性值 |

| background-color | 背景颜色 | 颜色 |

| background-image | 设置背景图像地址 | url(地址) |

| background-repeat | 设置背景图像重复方式 | repeat：重复。 repeat-x：横向重复。 repeat-y：纵向重复。 no-repeat：不重复。 |

| background-position | 设置背景图像位置 | 关键字。 两个长度表示的坐标。 百分比

| background-attachment | 背景图像固定 | scroll：随元素滚动，默认值。 fixed：固定。

| background | 背景复合属性 | 多个值使用空格分隔

列表样式

| 属性名 | 作用 | 属性值 |

| ------------------- | ------------------ | ----------------------------------------- |

| list-style-type | 设置列表项图标 | none：无 |

| list-style-position | 设置列表项图标位置 | outside：在li外面。 inside：在li里面。 |

| list-style-image | 自定义列表项图标 | url(图片地址) |

| list-style | 复合属性 | 多个值使用空格分隔 |

> **注意：** 只有 ul、ol、li 这些标签设置列表样式才有效果！

表格样式

属性名 | 作用 | 属性值 |

| --------------- | ---------------------------- | ------------------------------------ |

| table-layout | 设置列宽固定 | auto：默认值。 fixed：固定。 |

| border-spacing | 设置单元格之间的距离 | 长度 |

| border-collapse | 合并单元格边框 | separate：默认值。 collapse：合并 |

| caption-side | 标题位置 | top：表格上面。 bottom：表格下面 |

| empty-cells | 没有内容的单元格显示还是隐藏 | show：显示，默认值。 hide：隐藏 |

> **注意：** 表格相关的属性只能设置到 table 标签上才生效！

组合选择器

#### ① 后代元素选择器

```css

选择器1 选择器2 {}

```

#### ② 子元素选择器

```css

选择器1 > 选择器2 {}

```

#### ③ 交集选择器

```css

选择器1选择器2 {}

.item.active {}

.active.item {}

div.item {}

```

#### ④ 并集选择器

```css

选择器1, 选择器2 {}

```

伪类选择器

```

:link 选择未访问过的超链接

:visited 选择已访问过的超链接

:hover 鼠标悬停在元素上

:active 鼠标悬停在元素上且鼠标按键按下不抬起

```

多个伪类选择器一起使用，请按照 :link、:visited、:hover、:active 顺序书写 (love hate 记忆法)

```

选择器权重（优先级）

#### ① 单个选择器之间的权重

```

ID选择器 > 类选择器、伪类选择器 > 标签名选择器 > 全局选择器

```

#### ② 组合选择器优先级比较规则

```

1. 两个组合选择器，先比较ID的数量，数量多者权重高，比较结束

2. ID数量无法分胜负，比较类、伪类的数量，数量多者权重高，比较结束

3. 类、伪类的数量无法分胜负，比较标签名的数量，数量多者权重高，比较结束

4. 两个选择器权重一致，后面覆盖前面

```

> **组合： ** 并集选择器的组合，各自计算各自的权重，不会放在一起计算。