【19】CSS基础（4）——常用样式（文字/盒模型）

★文章内容学习来源：拉勾教育大前端就业集训营

【19】CSS基础（4）——常用样式（文字/盒模型）

---

上篇刚刚讲了cascading层叠式，这部分来讲style样式。
常用样式。

---

---

一、文字三属性

（一）颜色 color

1.作用∶

给文字设置颜色；

2.语法：

属性名k∶color
属性值v∶颜色名、颜色值

color: red;

（1）颜色名

使用颜色的英文单词进行表示。需要记忆一些最常用的颜色名，更多的颜色可以通过W3Cschool手册查询。

（2）颜色值

指使用具体颜色的数值表示。 包括: rgb 模式和十六进制模式。
①rgb 模式∶
是根据红绿蓝三原色进行混合而成的颜色模式。
☆每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成
1677多万种颜色；
☆书写方法∶rgb（红，绿，蓝）
常用颜色的rgb色值∶

颜色名	rgb
红色	rgb(255,0,0)
绿色	rgb(0,255,0)
蓝色	rgb(0,0,255)
黑色	rgb(0,0,0)
白色	rgb(255,255,255)
灰色	rgb(128,128,128)

②十六进制模式
☆十六进制模式∶是rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进
制的 0–255 的数字。
☆十六进制∶逢十六进一，每个数位上只能出现0-9，a-f 之间的字符。
☆书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。
0→00
255→ff
☆书写方式∶使用#开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。

颜色名	十六进制
红色	#ff0000
绿色	#00ff00
蓝色	#0000ff
黑色	#00000
白色	#ffffff
灰色	#808080

☆简写方法：（如果红、绿、蓝三个原色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写)

颜色	十六进制简写
红色	#f00
绿色	#0f0
蓝色	#00f
白色	#fff

类似灰色#808080是不能进行简化的。
-------------------------–---------–-------------------

（二）字体属性font-family

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

1.作用：

定义元素内文字的字体。

2.语法

（1）属性名 k ：font-family
属性值v: 字体名称
（2）字体属于 font 综合属性的一个单一属性；
（3）属性值 v 必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔；
（4）如果不设置字体属性，不同的浏览器有自己的默认字体。

常用字体：

英文	中文
Arial	宋体SimSun
consolas	微软雅黑 Microsoft Yahei

3.注意事项

（1）font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找 到第一个支持的字体；
（2） 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路；（3）中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响， 建议将英文字体写在属性值最前面。（只是建议，还是要看设计师要求）

<p style="font-family: 'arial','微软雅黑','宋体';">看文字字体是什么?abcp>

-------------------------–---------–-------------------

(三）字号font-size

1.作用∶

设置文字的大小

2.语法：

（1）属性名k∶font-size，字号属于font 综合属性的一个单一属性；
(2) 属性值v∶ 可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位；

<p style="font-size: 24px;">看看第一段文字字号p>
<p style="font-size: 14px;">看看第二段文字字号p>

3.注意事项

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

4.实际应用

（1）网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普
遍使用14px+。
（2）尽量使用12px、14px、16px等偶数的数字字号，IE6 等老式浏览器支持奇数会有
bug。
(3)实际工作中的字号，需要以设计图为准。
-------------------------–---------–-------------------

---

二、盒模型三属性

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

属性名	属性值	说明
width	px单位的数值	定义盒模型占有的宽度
height	px单位的数值	定义盒模型占有的高度
background-color	颜色名或颜色值	定义盒模型的背景颜色

<div style="width:100px; height:100px; background-color:red;">
div>

---

css基础篇完结。