03-CSS常用属性

一、文字三属性

文字常用三属性包括：颜色color，字体 font-family ，字号 font-size 。

1. 颜色color

• 作用：给文字设置颜色

• 属性名 k ：color

• 属性值 v ：颜色名、颜色值。

颜色名

颜色名就是使用颜色的英文单词进行表示。

更多的颜色名可以通过W3C中CSS部分颜色的查询手册（网址:https://www.w3school.com.cn/cssref/css_colors.asp）得到：

使用时在颜色手册查找即可。

颜色值

• 颜色值指使用具体颜色的数值表示。

• 包括： rgb 模式和十六进制模式写 两种写法。

rgb模式

• rgb 模式：是根据红绿蓝三原色进行混合而成的颜色模式。

• 每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成 1677多万种颜色，这些颜色基本已经包含了自然界中所有的颜色。

• 书写方法：rgb(红,绿,蓝)

0~255的数值代表颜色的亮度，三种颜色都最暗即都是0代表黑色，三种颜色都最亮代表白色。

十六进制模式

• 十六进制模式：是 rgb 模式的一种简化写法，使用十六进制的数字字符替换十进 制 0~255 的数字。

• 十六进制：逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符（a-f代表10-15） 。

• 书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换 。

• 0→00 255→ff

• 书写方式：使用 # 开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。

• 十六进制颜色值简写模式：如果红、绿、蓝三个原色的色值每一个 都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。例如： 红色 #f00 绿色 #0f0 蓝色 #00f 注意：红、绿、蓝三个都是各自重复才可以化简，这三个之间重复是不可以化简的，类似 #808080 是不能进行简化的

2. 字体 font-family

• 作用：定义元素内文字的字体。

• 属性名 k ：font-family，字体属于 font 综合属性的一个单一属性 。

• 属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之 间用逗号分隔。

如果不设置字体属性，不同的浏览器有自己的默认字体。

注意事项

1 、font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的 依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找 到第一个支持的字体。 2、 浏览器中加载的字体不是浏览器自带的，而是用户机器中自带的，如果用户的电脑中没有设置的字体则 加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字 体作为后路。

C盘→Windows→Fonts即可看到电脑中的字体。自己电脑中有某个字体，但其他用户电脑中不一定有，所以要在最后写一个所有用户电脑中都有的字体作为备用字体，一般将“宋体”和“微软雅黑”作为备用字体。

3、中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响， 建议将英文字体写在属性值最前面，然后中文字体写在后面。如果就是想用中文字体描述英文，那也可以将中文字体写在前面。

示例：

<p style="font-family: 'Arial','宋体';">文字 abc</p>
<p style="font-family: '宋体','Arial';">文字 abc</p>

上面的英文显示Arial字体，中文显示宋体字体；下面的中英文都显示宋体字体（因为中文字体效果可以加载英文）。

实际应用

首选字体需要根据设计图确定，最后需要设置备用字体。

<p style="font-family: 'Candara','Arial','宋体','微软雅黑';">文字 abc</p>

3. 字号 font-size

• 作用：设置文字的大小。

• 属性名 k ：font-size，字号属于 font 综合属性的一个单一属性。

• 属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用 相对长度单位。

单位

注意事项

1 、如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、 IE，默认显示字号为 16px。 2、 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以 最小字号加载，0除外。chrome 浏览器最小加载显示字号为8px（如果设置4px则以8px进行加载），IE 浏览器最小可 以支持1px的字号。

实际应用

• 网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普 遍使用14px+。

• 尽量使用12px、14px、16px等偶数的数字字号，ie6 等老式浏览器支持奇数会有 bug。

• 实际工作中的字号，需要以设计图为准。

示例：

<p style="font-size: 14px;">文字 abc</p>

二、盒子实体化三属性

如果想在浏览器中具体看到一个盒子占有的实际 位置，需要设置盒子可以实体化的三属性。

所谓的实体化，实际就是可以实际查看到它的位置，使用户可以直接在视觉上看到实际位置。

实体化属性

属性名	属性值	说明
width	px单位的数值	定义元素占有的宽度
height	px单位的数值	定义元素占有的高度
background-color	颜色名、颜色值	定义元素的背景颜色

示例：