第一讲 css语法、文本（02）

一、css选择器

css修饰html标签的基础就是选择符，即可以通过多种选择符来选择要修饰的html标签

权重：可理解为优先级，优先级高则会覆盖优先级低的样式。

1、通配选择器

通配选择器即所有的标签

语法：*{规则}

例如：

通配选择器的权重非常小

2、类型（标签）选择器

类选择器就是使用标签的名字作为选择符

也可称之为标签选择器

语法：

.类名{规则 }

例如：

3、ID选择器

每个html标签的id都是不一样的，因此ID选择器的权重比较大。切记id的值是唯一的，不能重复！

语法：#id{规则}

例如：

 4、类（class）选择器

语法：.classname{规则}

注意：

类的值可以重复，不像ID选择器的值是唯一的。

例如：

 5.包含选择器

通过标签的嵌套选择标签，只要包含就行

语法：选择符a 选择符b{规则}

注意：选择符之间用空格隔开，即选择符a标签内的所有选择符b标签

例如：

6.分组选择器

不同选择器或是选择器与标签有相同部分用起来比较方便

语法：选择器,选择器{规则}        或：选择器 标签{规则}

例如：

 三种选择器用的最多的是class（类选择器） 其优点是类的名称可以重复 

 二、选择器的权重

上文已经提及过权重相当于优先级，接下来让我们一起看一下吧。

选择器	权重
通配符选择器	0.5
标签选择器	1
类选择器	10
ID选择器	100

 当div（标签选择器）、id（id选择器）和class（类选择器）同时使用，相同部分的优先级从高到低以此类推  id（id选择器）class（类选择器）div（标签选择器）

 三、css中的长度单位

px和em

px像素

根据显示器分辨率的不同，像素的大小也是不同的

em，以当前字符的高度为基准

如果当前字体的高度是12px，那么1em就是12px。

注意：一般以font-size为准，如果没有定义font-size，则以浏览器默认大小（16px）为准。

 cm/mm/pt/pc

主要用在非显示器输出上，如打印

如果网页在显示器上显示，则这些单位将转换为一定的像素显示，即长度也是依靠显示器分辨率的

四、css中的颜色表达

网页中颜色采用RGB模式显示（显示器）

RGB颜色在css中的表达方式

1.直接使用颜色的英语单词：如blue；

注意：很多浏览器不支持颜色的单词表示

2.使用三色的数值，如rgb（200,100,20）

注意：三色的数值在0~255之间

使用三色的百分比（10%，20%，30%）

3.使用三色数值的十六进制，如：#ff8c00

注意：十六进制值前加#

我们一般推荐使用三色数值的十六进制

五、 css中字体相关样式

1.字体大小

语法：font-size

例：

 2.字体系列

语法：font-family

注意：字体系列多个字体间用逗号隔开，英文字体名称中间有空格。最后用引号引起来

在设置字体时注意优先级问题。

例：

 3.字体风格

语法：font-style

1》normal        正常

2》italic        斜体

3》oblique        斜体

例：

 4.字体加粗

语法：font-weight

1》normal        正常

2》bold        粗体

3》bolder        粗体

4》100~900        9个层次      数值越大字体越粗

100~300细体        400~500正常        600~900粗体

5》lighter        细体

例：

 5.行高

语法：line-height

单位：px        若无单位，表示倍数

例：

 6.字体样式的缩写

语法：font:font-style值  font-weight值  font-size值/line-height值  font-family值;

font 省略时粗细和倾斜在前，字号行高在中间，字体在最后

例：