html⾥的font和text,CSS字体与⽂本样式详解
学习导航
1、css中的长度与颜⾊
2、css中的⽂字属性
3、css中的⽂本属性
1、⽂字样式属性font-family
⽂字字体
font-size
⽂字⼤⼩
font-color
⽂字颜⾊
font-weight
⽂字粗细
font-style
⽂字样式
font-family 字体属性
作⽤：元素内⽂字以什么字体来显⽰
语法：font-family:[字体1],[字体2],[......];
说明：含空格字体名和中⽂，⽤英⽂引号(")括起；多个字体⽤英⽂逗号隔开；引号嵌套，外使⽤双引号，内使⽤单引号。font-size ⽂字⼤⼩
作⽤：元素内⽂字⼤⼩
语法：font-size：绝对单单位，相相对单位单位
说明
in
英⼨
cm
公分
mm
公⾥
ex
⼩写字母为单位
pt
1pt/72英⼨
pc
1pc/12pt
px
像素(推荐使⽤)
color ⽂字颜⾊
语法：颜⾊名|⼗六进制|RGB
font-weight ⽂字粗细
语法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 细体 | 100-900说明：默认值：normal 400等同于normal,⽽700等同于bold
font-style ⽂字样式
作⽤：为元素内⽂字设置样式
语法：font-style:normal 正常显⽰ | italic ⽂字倾斜 | oblique ⽂字倾斜(基本不⽤) font-variant 字体变形
作⽤：设置元素中⽂本为⼩型⼤写字母
语法：font-variant:normal 正常显⽰| small-caps 将英⽂⼤⼩写字母调成为同宽
font 属性简写
语法：font:font-style font-variant  font-weight font-size/line-height font-family；说明：值之间空格隔开，注意书写顺序。
2、CSS⽂本样式
text-align
作⽤：设置元素内⽂本的⽔平对齐⽅式
语法：tex-align:left 左对齐 | right 右对齐 | center 居中对齐 | justify 两端对齐
注意：该属性对块级元素设置有效
line-height
作⽤：设置元素中⽂本⾏⾼
语法：line-height：长度值 | 百分⽐
说明：⼀⾏⽂字的⾼度，⾏⾼指⽂本⾏的基线间的距离
⽂字基线
注意：基线并不是汉字⽂字的下沿，看图理解⾃⾏理解
⾏⾼和⾏距
⾏⾼：基线到基线的距离
⾏距：底线到顶线的距离
注意：看图⾃⾏理解
⾏框和⾏内框
注意：看图⾃⾏理解
vertical-align
作⽤：设置元素内容的垂直⽅式
语法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分⽐注意：看图⾃⾏理解
text-indent ⾸⾏缩进
3、⽂本样式属性字体属性
说明
word-spaceing
设置元素内单词之间的距离
letter-spaceing
设置元素内字母之间的距离
text-transform
设置元素内字母的⼤⼩写 capitzlize | uppercase | lowercase | none
text-decoration
设置元素内⽂本的装饰 underline | overline | line-through | blink | none
text-transform: capitzlize ⾸字母⼤写 | uppercase 字母⼤写 | lowercase  字母⼩写 | none 正常text-decoration: underline 下划线 | overline 上划线 | line-through 删除线 | none 正常
综合实操案例
CSS⽂本与样式
text-align
左对齐
居中对齐
右对齐
text-decoration
上划线
删除线
下划线
text-transform
renhaibo
renhaibo
RENHAIBO
letter-spacing word-spacing
abcdefg
my name is renhaibo
line-height text-indent
jquery学习在线教程每⽇分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教
程，TinkPHP教程等，望⼤家能以学习为⽬的，每天阅读⼀篇⽂章，了解⾝边的技术。陪有梦想的⼈⼀起成长！
如果您觉得有⽤，记得在下⽅点赞、关注、留⾔，⼩编会定期奉 上更多的惊喜哦，您的打赏⽀持才是⼩编继续努⼒的动⼒，么么哒。
每⽇分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP 教程等，望⼤家能以学习为⽬的，每天阅读⼀篇⽂章，了解⾝边的技术。陪有梦想的⼈⼀起成长！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。