本文将讲解如何利用 background 系列属性,巧妙的实现一些花式的文字效果。通过本文,你将可以学到:通过 background-size 与 background-position 实现酷炫的文
顺晟科技
2022-09-13 14:06:11
97
一、文字排版——字体
Eg:
body{font-family:"宋体";}
body{font-family:"Microsoft Yahei";}//微软雅黑
注:
不要设置不常用的字体,如果用户本地电脑上没有安装所设置的字体,就会显示浏览器默认的字体。
二、文字排版——字号、颜色
Eg:
设置网页文字字号12像素,字体颜色设置为#666(灰色):
body{
font-size:12px;
color:#666;
}
三、文字排版——粗体
Eg:
p span{font-weight:bold;}
四、文字排版——斜体
Eg:
p a{font-style:italic;}
五、文字排版——下划线
Eg:
p a{text-decoration:underline;}
六、文字排版——删除线
七、段落排版——缩进
中文文字段前空两个文字的空白。
2em的意思就是文字的2倍大小。
八、段落排版——行间距(行高)
Eg:
p{line-height:1.5em;}
九、段落排版——中文字间距、字母间距
如果想在网页排版中设置文字间隔或者字母间隔就可以使用letter-spacing来实现。
Eg:
h1{
letter-spacing:50px;
}
注:这个样式使用在英文单词时,是设置字母与字母之间的间距。
单词间距设置(word-spacing):
Eg:
h1{
word-spacing:50px;
}
十、段落排版——对齐
为块元素中的文本、图片设置居中样式等,可以使用text-align
居中
h1{
text-align:center;
}
居左
h1{
text-align:left;
}
居右
h1{
text-align:right;
}
15
2022-09
14
2022-09
14
2022-09
14
2022-09
14
2022-09
14
2022-09