当前位置: 首页 > Web前端 > HTML

CSS文字样式和字体样式

时间:2023-03-28 16:19:37 HTML

本节介绍常用的CSS字体样式和文字样式fontstyle:1.控制字体粗细的font-weight2.字体样式font-style3.行高line-height4.和font综合字体文字样式:5.水平对齐text-align6.文字修饰text-decoration7.文字缩进text-indent1.font-weight字体粗细功能:设置文字是否显示为粗体,一般用于关键内容属性name:font-weight属性值:字型,数字型字型:normal,bold,bolder,lighter数字类型:100-900整百数字属性值函数normaldefault(400)boldbold(700)boldermoreBoldlighterthin主体代码演示:p{font-weight:bold;}a{字体粗细:700;}点击试试2.字体样式font-style函数:设置文本是否显示斜体属性名:font-style属性值:normal,italic,oblique属性值函数normaldefaultfontitalic设置斜体text,主要针对英文显示在字体oblique的斜体样式中设置斜体文字,仅将文字斜体显示,与字体无关代码演示:.italic{font-style:italic;}.oblique{字体样式:倾斜;}点击试试3.行高line-height函数:设置一行文字的实际高度,文字的字号在行高中垂直居中属性名:line-height属性值:number,Length,百分比、关键字(正常)注意:无单位数字乘以元素的字体大小。计算值与指定值相同。在大多数情况下,这是设置行高的推荐方法!!!代码演示:p{line-height:2;}a{行高:20px;}点击试试4.和字体合成字体概念:字体合成中有五个单一的属性,分别是:字体(family)、字体大小(size)、行高(inline-height)、粗体(weight)、斜体(style)).只能使用两个或多个属性值,并且必须按顺序用空格隔开。写法一:字号和字号必须参与字体的综合写法。写的时候顺序必须是字号/行高,字体,字号和行高必须用/隔开代码演示:p{font:14px/2"宋体";}写法三:必须写依次为:斜体、粗细、字号/行高、字体书写、斜体、粗细不分先后,但代码演示必须在字号前面:p{font:italicbolder14px/2"宋体";}点击试试5.水平对齐text-align函数:水平对齐文本类,即x轴。在框中,无论文字是单行还是多行,都会按相应的方向对齐。属性值:left、center、right属性值用于left向左对齐,默认值为center向中心对齐。更常用的右对齐是右对齐。代码演示:.center{text-align:center;}.left{text-align:left;}.right{text-align:right;}点击试试6、文字装饰text-decoration功能:设置是否对整个文字进行线条装饰效果属性值:无、上划线、穿线、下划线属性值功能none不修饰,默认值一般用于清除a标签的默认值,overline,line-through,用作删除线,与del标签的默认值一致,underline下划线,和一个标签。代码演示:.none{text-decoration:none;}.overline{text-decoration:overline;}.line{text-decoration:line-through;}.underline{text-decoration:underline;}点击试试7.textindenttext-indent函数:设置首行方向缩进,leftnegativerightpositive区分Directionalindentation属性值:px,em,percentage属性值函数px单位表示首行缩进多少pxem单位首行缩进多少汉字位置百分比首行缩进父标签宽度百分比代码演示:p{text-indent:2em;}点击试用