CSS常见属性
文字属性
font-style
- 作用：规定文字样式
- 格式：font-style: italic;
- 取值：
- normal：正常的，默认就是正常的
- italic：倾斜的
font-weight
- 作用：规定文字粗细
- 格式：font-weight: bold;
- 单词取值：
- bold 加粗
- bolder 比加粗还要粗
- lighter 细线， 默认就是细线
- 数字取值：
- 100 - 900之间整百的数字
font-size
- 作用：规定文字大小
- 格式：font-size: 30px;
- 取值：px（像素 pixel）
font-family
- 作用：规定文字字体
- 格式：font-family: "楷体";
- 取值：各种字体名称
- 注意点：
- 如果取值是中文， 需要用双引号或者单引号括起来
- 设置的字体是用户电脑里面已经安装的字体
字体属性补充
- 如果设置的字体不存在，那么系统会使用默认的字体来显示
- 默认一般使用宋体
- 如果设置的字体不存在，而我们又不想用默认的字体来显示，可以给字体设置备选方案
- 格式：font-family: "字体1", "备选方案1", ... ;
- 如果想给中文和英文分别单独设置字体，怎么办？
- 但凡是中文字体，里面都包含了英文
- 但凡是英文字体，里面都没有包含中文
- 也就是说中文字体可以处理英文，而英文字体不能处理中文
- 注意点：如果想给界面中的英文单独设置字体，那么英文的字体必须写在中文的前面
文字属性缩写
-
缩写格式：
font: style weight size family; -
例如：
font: italic bold 10px "楷体"; -
注意点：
- 在这种缩写格式中有的属性值可以省略，sytle 可以省略，weight 可以省略
- 在这种缩写格式中 style 和 weight 的位置可以交换
- 在这种缩写格式中有的属性值是不可以省略的，size 不能省略，family 不能省略
- size 和 family 的位置是不能顺便乱放的，size 一定要写在 family 的前面，而且 size 和 family 必须写在所有属性的最后
文本属性
text-decoration
- 作用：给文本添加装饰
- 格式：text-decoration: underline;
- 取值：
- underline 下划线
- line-through 删除线
- overline 上划线
- none 什么都没有，最常见的用途就是用于去掉超链接的下划线
text-align
- 作用：设置文本水平对齐方式
- 格式：text-align: center;
- 取值：
- left 左
- right 右
- center 中
text-indent
- 作用：设置文本缩进
- 格式：text-indent: 2em;
- 取值：2em，其中em是单位，一个 em 代表缩进一个文字的宽度
颜色属性
在 CSS 中通过 color 属性来修改文字颜色
格式：color: 值;
-
取值：
颜色英文单词（一般情况下常见的颜色都有对应的英文单词，但是英文单词能够表达的颜色是有限制的，也就是说不是所有的颜色都能够通过英文单词来表达）
-
rgb（rgb其实就是三原色，其中 r (red 红色) 、g (green 绿色)、b (blue 蓝色)）
- 格式：rgb(0, 0, 0)
- 三个数字分别代表三原色的红色、绿色、蓝色显示的亮度
- 这其中的每一个数字它的取值是 0-255，0代表不发光，255代表发光，值越大就越亮
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
灰色: rgb(200,200,200);
只要让红色/绿色/蓝色的值都一样就是灰色 -
rgba
rgba 中的 rgb 和前面讲解的一样，只不过多了一个 a
a 代表透明度，取值是 0-1，取值越小就越透明
-
例如：
color: rgba(255, 0, 0, 0.2);
-
十六进制
- 通过十六进制来表示颜色其实本质就是RGB
- 十六进制中是通过每两位表示一个颜色
- 例如：#FFEE00，FF表示R，EE表示G，00表示B
- 在 CSS中 只要十六进制的颜色每两位的值都是一样的，那么就可以简写为一位，例如：
#FFEE00 相当于 #FE0