CSS基础-CSS常见属性

CSS 常见属性

文字属性

font-style

• 作用：规定文字样式
• 格式：font-style: italic;

取值：

• normal：正常的，默认就是正常的
• italic：倾斜的

快捷键：

• fs font-style: italic;
• fsn font-style: normal;

font-weight

• 作用：规定文字粗细
• 格式：font-weight: bold;

取值，单词取值：

• bold：加粗
• bolder：比加粗还要粗
• lighter：细线， 默认就是细线

数字取值：

• 100-900 之间整百的数字

快捷键：

• fw font-weight;
• fwb font-weight: bold;
• fwbr font-weight: bolder;

font-size

• 作用：规定文字的大小
• 格式：font-size: 30px;
• 取值：px(像素 pixel)

快捷键：

• fz font-size;
• fz30 font-size: 30px;

font-family

• 作用：规定文字的字体
• 格式：font-family:"楷体";

取值：各种字体名称

快捷键：

• ff font-family;

注意点：

• 如果取值是中文，需要用 双引号 或者 单引号 括起来
• 设置的字体必须是用户电脑里面已经安装的字体

字体属性补充

• 如果设置的字体不存在, 那么系统会使用默认的字体来显示
• 默认一般使用宋体

如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?

• 可以给字体设置备选方案
• 格式：font-family："字体1", "备选方案1", ...;

如果想给中文和英文分别单独设置字体, 怎么办?

• 但凡是中文字体, 里面都包含了英文
• 但凡是英文字体, 里面都没有包含中文
• 也就是说中文字体可以处理英文, 而英文字体不能处理中文

注意点：如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

补充在企业开发中最常见的字体有以下几个

• 中文：宋体 / 黑体 / 微软雅黑
• 英文："Times New Roman" / Arial

还需要知道一点, 就是并不是名称是英文就一定是英文字体, 因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文

• 宋体：SimSun
• 黑体：SimHei
• 微软雅黑：Microsoft YaHei

文字属性缩写

• 缩写格式：

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：什么都没有, 最常见的用途就是用于去掉超链接的下划线

快捷键：

• td text-decoration：none;
• tdu text-decoration：underline;
• tdl text-decoration：line-through;
• tdo text-decoration：overline;

text-align

• 作用：设置文本水平对齐方式
• 格式：text-align: center;

取值：

• left：左
• right：右
• center：中

快捷键：

• ta text-align: left;
• tar text-align: right;
• tac text-align: center;

text-indent

• 作用：设置文本缩进
• 格式：text-indent: 2em;
• 取值：2em, 其中 em 是单位, 一个 em 代表缩进一个文字的宽度

快捷键：

• ti text-indent:;
• ti2e text-indent: 2em;

颜色属性

在 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

什么是十六进制?

• 十六进制和十进制一样都是一种计数的方式
• 在十进制中取值范围 0-9, 逢十进一
• 在十六进制中取值范围 0-F, 逢十六进一

十进制 0 1 2 3 4 5 6 7 8 9
十六进制 0 1 2 3 4 5 6 7 8 9 a b c d e f

• 十六进制和十进制转换的公式
• 用十六进制的第一位 *16 + 十六进制的第二位 = 十进制

15 == 1 * 16 + 5 = 21
12 == 1 * 16 + 2 = 18
FF == F * 16 + F == 15 * 16 + 15 == 240 + 15 = 255
00 == 0 * 16 + 0 = 0

十六进制缩写

在 CSS 中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位

例如：#FFEE00 == #FE0

注意点：

如果当前颜色对应的两位数字不一样, 那么就不能简写

#123456;

如果两位相同的数字不是属于同一个颜色的, 也不能简写

#122334