id选择器

#### id选择器

- 语法

- HTML中通过id属性定义

如：

```html

<div class="box"></div>

```

- css中以点进行标识:#

```css

#id名称 {

样式声明;

}

```

- 作用:选择所有带有指定类名的元素

- 实例演示:

```css

#box{

background-color:red;

}

<div id="box">div1</div>

```

**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。

#### 类与id的命名规则

- 见词知义，尽量用英文

- 始终建议以字母开头，可以包含数字、字母、下划线等

- 不要以数字开头

- 多个单词可以以驼峰式（newsCont）、中划线连接（news_cont）、下划线连接（news-cont）等

#### 总结

- 总结使用频率

- 基础选择器中最常用是类选择器

- id用于页面中唯一模块

- 元素名称选择器定义的全局样式，单独使用要慎重

- *号通常用于重置样式【最不常用】

- 总结id与类的区别

- 基础选择器的优先级

- 对比

- 渗透调试工具的使用

>- F12/右键-检查

>- 左边是 HTML 元素结构，右边是 CSS 样式

>- Ctrl+滚轮 可以放大、缩小开发者工具代码大小

>- Ctrl + 0 复原浏览器大小

>- 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色

>- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误

>- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误

>- 如果有样式，但是样式被中划线贯穿，说明可能存在书写顺序 或优先级问题

- 结论

>最终排序：id（身份证号是XX的学生）> 类（名叫王小帅的学生） >元素名称（所有男生） > *(所有学生)

>选择范围越精确，优先级越高

## CSS字体 ，文本属性

### 1、css字体

#### 1.1 font-family

- 作用：设置文本的字体系列

- 语法：font-family:字体名称；

- 常用值：

- 一个字体名称或系列名称（介绍常用字体名称、字体系列）

- 微软雅黑 Microsoft YaHei

- 宋体 SimSun

- 黑体 HeiTi

- 楷体 KaiTi

- 多个字体名称

- 逗号分开

如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

```css

.box{

/*font-family:"微软雅黑","宋体";*/

/*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同，谁在前使用哪一个*/

font-family:"微软雅黑abc","宋体";

/*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*/

}

```

- 注意:如果字体名称包含空格、汉字、特殊字符，必须加引号!

```css

.box{font-family: "Microsoft YaHei";}

```

#### 1.2 font-size

- 作用：设置字体的大小

- 语法：font-size:值；

- 常用值：

- 长度值（通常是像素px）

- 百分比（相对于父元素计算）

- em相对单位

如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号

- 大多数浏览器的默认值字号：16px

#### 1.3 font-style

- 作用：设置字体的大小

- 语法：font-style:值；

- 常用值：

- normal默认值

- italic斜体显示

#### 1.4 font-weight

- 作用：设置字体粗细

- 语法：font-weight:值；

- 常用值：

- normal默认值

- bold加粗

- 100-900九级字重，400相当于normal，700相当于bold

- **注意**：不是所有字体都内置了九级字重

#### 1.5 line-height

- 作用：设置行高（效果是产生文本行间距）

- 语法：line-height:值；

- 特性：实现单行文本的垂直居中

- 测量：文字高+行间距

- 常用值

- normal默认。设置合理的行间距。

- px 设置固定的行间距。

- number设置数字，此数值会与当前的字号相乘来设置行间距。

- 百分比:相对于font-size计算 

```css

.box{

/*line-height:2;*/

line-height:200%; /*产生的效果一致都是字号的两倍*/

}

```

#### 1.6 font简写

- 作用：设置所有字体属性

- 语法：

font: 字体风格 字体加粗 字号/行高 字体；

- 总结：

只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简代码

```css

.box2{

/* font:italic bold 20px "宋体"; */

font:20px "宋体";

}

```

### 2、css文本

#### 2.1 text-align

- 作用：设置文本的水平对齐方式

- 语法：text-align:值；

- 常用值

- left居左对齐 [默认值]

- right居右对齐

- center居中对齐

- justify两端对齐

- 注意：适用于块状元素

#### 2.2 text-decoration

- 作用：设置文本装饰

- 语法：text-decoration:值；

- 常用值

- none 默认。定义标准的文本。 【常用】

- underline 定义文本下的一条线 【常用】

- line-through 定义穿过文本的一条线。【比较常用】

- overline 定义文本上的一条线。 【不常用】

#### 2.3 text-indent

- 作用：设置文本块首行的缩进

- 语法：line-height:值；

- 常用值

- 默认值：0

- 长度值，px,em(更方便)

- 百分比: 相对于元素内容宽进行计算

- 允许负值

#### 2.4 color

- 作用：设置文字的颜色

- 语法：color:颜色值；

- 常用值

- 颜色的常用表式方法

- 颜色名称：如red、blue等

- 十六进制颜色表示方法

- 语法：如#ff0000

- 说明：#rrggbb

r,g,b取值范围为00-ff

- r red 红色

- g green 绿色

- b blue 蓝色

- 认识常见颜色的写法

- 白色（#ffffff）、黑色（#000000）

红色（#ff0000）、绿色(#00ff00)、蓝色(#0000ff)

- rgb颜色表示方法

- 语法：rgb(255,0,0)

- 说明：rgb(r,g,b)

r,g,b取值范围为0-255

- 认识常见颜色的写法

- 白色： rgb(255,255,255) 、黑色 : rgb(0,0,0)

红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)

### 3、文本属性继承性

简单渗透:字体文本属性大多具有继承性。

>可继承的属性

>font-size

>font-family

>font-style

>font-weight

>font

>line-height

>text-align

>text-indent

>color

>

>不可继承

>text-decoration(穿透性)