CSS的文本属性

CSS文本属性

1、font-size: 控制文本大小

​ a、规定，默认是16px，为标准字体大小；

​ b、文本字体大小设置为偶数；

​ c、PC端项目，设置大小尽量不低于12px；

​ d、从PS获取文本大小，汉字量取文本高度；

另：文本单位除像素px外，还有pt (一般不用) 9pt = 12px 12pt =16px

​默认情况下，1em=16px 但是不同情况下em表示的意义是不同的，比如子元素如果使用em单位，会是父元素px的倍数；

例如：

这里父元素是20px，子元素2em表示的是20px的2倍，就是40px，而非2*16px=32px；

2、color ：控制文本的颜色

• ​除常见的英文red、blue、green、gray外；
• ​还可以用颜色值表示：十六进制：000000-ffffff；
• 每两个一对，分别表示红、绿、蓝；
• ​如果一样可以简写：例如：#ff0000表示大红，简写为：f00;

颜色值要加#；

​ 拓展rgba(255,0,0,0.5) 最后一个参数0-1表示透明度，0表示全透明；

3、font-family 字体的样式；

​ 默认的字体样式为 “微软雅黑”

​ 系统能支持的字体：web安全字体：微软雅黑、宋体、楷体···

​ 英文默认字体：Arial

​ 语法：

​ font-family:字体1，字体2，字体3···;

​ a、当字体是中文时，必须加引号如"宋体"、“微软雅黑”，多单词的英文字体也必须加如：“Times New Roman”

​ 一个单词的字体，不需要加引号，例：font-family:Arial;

​ b、先写英文字体，后写中文字体。

4、font-weight:控制文本是否加粗；

​ font-weight：的属性值有normal(无变化)，bold(变粗)

​ 后面也可以跟数字（100-900），100-500等价于normal，600-900是加粗的状态，700相当于bold

5、font-style 控制文本是否倾斜；

​ italic 倾斜

​ oblique 倾斜（幅度更大，但效果不明显）

​ normal 正常

6、line-height 控制文本的行高；

​ a：从PS设计图上后，从第一行的顶端量到第二行的顶端，就得到行高line-height

​ 对于单行文本，当行高line-height等于容器高度时，当前文本垂直居中显示

效果：

font的简写语法----->font：font-style font-weight font-size/line-height font-family;

​ 简写时，font-size和line-height必须用/ 组成一个值，不能分开写。

​ 这个顺序不能改变，而且font-size和font-family不能省略，其他值可以省去，省去则为默认值。

7、text-align: 文本的水平对齐方式

​ left/right/center justify–>两端对齐

8、text-decoration 文本的修饰

​ none–去文本的除下划线（常用）

​ underline–添加下划线

​ overline–添加上划线

​ line-through–删除线

9、text-indent 首行缩进

​ 例：text-indent:2; 首行缩进2

​ text-indent=2em; （这里的2em用到text-indent里面的时候是当前字体大小的2倍，而不是父元素字体大小的2倍）

​ text-indent可以为负值，文字往左走，形成悬挂式缩进。

10、字间距、词间距；

​ letter-spacing: 4px; 词间距 (英文单词间距–有空格，浏览器就认为是词)

​ word-spacing:10px; 字间距 （没有空格，浏览器认为是字）

11、text-transform: 控制文本大小写；

​ 仅英文。属性值： upercase 大写

​ lowercase 小写

​ capitalize 首字母大写

文本的属性基本都具有继承性，即，子元素的文本会跟随父元素中设置的样式。