03-CSS常用属性
一、文字三属性
文字常用三属性包括:颜色color,字体 font-family ,字号 font-size 。
颜色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 | 颜色名、颜色值 | 定义元素的背景颜色 |
示例:
胡米: 很用心,应该看了尚硅谷