<day05>字体和文本样式

2022/7/13 23:24:31

本文主要是介绍<day05>字体和文本样式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

字体大小
浏览器默认文字大小是16px,单位一定要设置,否则无效
font-size: 16px;
字体粗细
bold    加粗;lighter 变细;纯数字:100-900整百数
font-weight: lighter;
字体样式
italic 倾斜;normal(默认值) 正常
font-style: italic;
字体
font-family: '楷体';
​
如果有多个字体,中间用逗号隔开
​
font-family: '楷体', '黑体';
以第一个字体为准,如果电脑没有这个字体,就显示下一个
(网络开发时,尽量使用系统常见自带的字体,保证不同用户浏览器都能正常显示)
复合写法
语法
font:style weight size famliy
​
例如
font: italic bold 20px '楷体';
(只能省略前两个,省略了相当于设置了默认值)
同时设置单写和连写形式
要把单写的样式写在连写的下面,否则连写样式会覆盖单写样式
如:
font-style: italic;
font: 20px '楷体';
连写样式中虽然没有设置font-style,但不写即为默认值,会覆盖上面的样式
文本缩进
①数字+px
②数字+em
(1em=当前标签的font-size的大小)
text-indent: 32px;
推荐使用:
text-indent: 2em;
(如当前标签的字体大小是16px,那么2em就是2x16=32px)
文本水平居中
如果需要让文本水平居中,text-align给文本所在的标签设置()文本父元素
left 居左
center 居中
right 居右
text-align:right;
文本修饰
text-decoration:none;
​
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(最常用)
none经常用于清除a标签默认的下划线
行高
line-height:20px;
取值:数字+px    倍数(当前标签font-size的倍数)
line-height:2;
让单行文本垂直居中   line-height:文本父元素的高度

 

样式的层叠问题

同一个标签设置了相同的样式,如何渲染?

样式会层叠(覆盖),写在最下面的会生效

css 层叠样式表

层叠就是叠加的的意思,样式可以一层一层的叠加

p {
    color: pink;
    color: red;
}
最终显示是red


这篇关于<day05>字体和文本样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程