前端学生教你学习CSS文本属性

最新推荐文章于 2024-04-03 22:32:50 发布

ZY854756957

最新推荐文章于 2024-04-03 22:32:50 发布

阅读量247

点赞数

本文链接：https://blog.csdn.net/ZY854756957/article/details/104999074

版权

学习css的文本属性，我们就得初步了解下css的语法结构。
选择符{属性：属性值;}
css文本属性就是通过选择符设置在style标签内，放置在head中。
css文本共有11个属性：

1、文本大小属性：font-size:

语法：font-size:数值px/em/pt;

1>:为了消除系统之间显示差异，规定：16px 为标准字体大小。
2>:文本大小设置，设置为偶数。
3>:PC端项目，设置值最小尽量别低于12px ;
4>:从ps中获取文本大小，汉字量取文本高度。
5>:文本单位： px \ em \ pt(磅)【常用在印刷领域】
12px == 9pt
em ( 相对大小单位，相对于父元素的font-size值而定 )
(默认情况下， 1em == 16px)

2、文本颜色属性：color:

语法：color:#ff0000/RGB(255,0,0);

表示方法：1>十六进制表示颜色值：(需要添加#号)
16进制数字：0 - 9 a - f
eg:颜色值： #ff0000
6个数字中：
前两位红色
中间两位绿色
最后两位蓝色
2>RGB(255,0,0) 数值表示颜色

3、文字类型属性：font-family:

语法：font-family:字体1,字体2,字体3,…;（当系统无法识别字体1时，再去识别字体2，依次往后）

系统默认的字体类型：
汉字： “微软雅黑” （中文字体需要放在引号中）
英文字体： Arial （英文字体是由多个单词组成也要放在引号里面）
当字体中出现中文字体和英文字体搭配出现时：先写英文字体，再写中文字体

4、文字加粗属性：font-weight:

语法：font-weight：bold/bolder/normal/数值100~900;

bold 加粗
bolder 加粗(加粗程度更高)
normal 清除加粗，恢复成常规文本（即未加粗文本）
100 - 900 100 - 500:不加粗
600 - 900:加粗的状态

[html中加粗的标签为：文本 文本]
注：font-weight:normal可以清除b标签和strong标签的加粗效果。

5、文字倾斜属性：font-style:

语法：font-style:italic/oblique/normal;

italic 倾斜
oblique 倾斜（倾斜幅度更大，但是一般不会有明显变化）
normal 恢复常规文本（即未倾斜文本）
[html中倾斜的标签为：文本 文本 ]
注：font-style:normal可以清除i标签和em标签的倾斜效果。

6、文本行高属性:line-height:

语法：line-height:数值px；

行高：即两行文字顶线之间的距离

注：多行文字才有行高
单行文字在容器中上下居中对齐时，此时的行高为容器的高度。

7、文本对齐属性：

垂直对齐属性：设置行高为容器的高度，即可实现上下居中对齐
水平对齐属性：text-align:

语法：text-align：center/left/right/justify;

center 居中对齐
left 左对齐
right 右对齐
justify 两端对齐

8、文本修饰属性（文本添加线条属性）：text-decoration:

语法：text-decoration:none/underline/overline/line-through;

none 清除下划线
underline 添加下划线
overline 添加上划线
line-through 添加删除线
[html中存在默认样式有下划线的标签为：< a href="">文本< /a> 文本]
[html中添加删除线的标签为：< del>文本< /del>]
注：text-decoration:none可以清除a标签和u标签的默认下划线。