字体样式属性
1.font-size:字号大小
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位,具体如下表所示:
相对长度单位 | 说明 |
em | 倍率,相对于当前对象内文本的字体尺寸 |
px | 像素,最常用 |
绝对长度单位 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
2.font-family:字体
font-family属性用于设置字体,格式如下面代码所示:
p{font-family:“微软雅黑”;}
可以同时指定多个字体,中间以英文逗号隔开如果浏览器不支持第一个字体,则会尝试后面的字体,如以下代码所示:
body{font-family:“华文彩云”,“宋体”,“黑体”;}
当指定的字体都没有安装时,就会使用浏览器默认字体。
使用font-family需要注意以下几点:
- 各种字体之间必须使用英文逗号隔开。
- 中文字体需要加英文引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体必须位于中文字体名之前。
- 如果字体名中包含空格、#、¥等符号,则该字体必须加英文单引号或双引号。
- 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
3.font-weight:字体粗细
font-weight用于定义字体的粗细,具体如下所示:
- normal:默认值。定义标准的字符
- bold:定义粗体字符
- bolder:定义更粗的字符
- lighter:定义更细的字符
- 100~900(100的整数倍):定义由细到粗的字符。其中400等同于normal,700等同于bold,值越大字体越粗
4.font-style:字体风格
常用的font-weight的属性值为normal和bold,用于定义正常或加粗显示的字体。
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
- normal:默认值,浏览器会显示标准的字体样式。
- italic:浏览器会显示斜体的字体样式。
- oblique:浏览器会显示倾斜的字体样式。
其中italic和oblique都用于定义斜体,两者在显示效果上并没有本质区别,但实际工作中常使用italic。
5.font:综合设置字体样式
font属性用于对字体样式进行综合设置,其基本语法格式为:
选择器{font:font-style font-variant font-weight font-size/line-height font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开。其中line-height指的是行高,例如:
p{
font-family:“宋体”;
font-size:30px;
font-style:italic;
font-weight:bold;
font-variant:small-caps;
line-height:40px;
}
等价于:
p{font:italic small-caps bold 30px/40px “宋体”;}
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
下面通过font属性对字体样式进行综合设置:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font属性</title> <style type="text/css"> .one{ font: italic 18px/30px "隶书";} .two{ font: italic 18px/30px;} </style> </head> <body> <p class="one">段落1:使用font属性综合设置段落文本的字体风格、字号、行高和字体。</p> <p class="two">段落2:使用font属性综合设置段落文本的字体风格、字号、行高和字体。由于省略了字体属性font-family, 这时font属性不起作用。</p> </body> </html>
运行效果如图所示:
6.@font-face属性
@font-face属性是CSS3新增的属性,用于定义服务器字体。通过@font-face属性,开发者可以在计算机未安装字体时,仍然能使用任何喜欢的字体。使用@font-face属性定义服务器字体的基本语法格式如下:
@font-face{
font-family:字体名称; /*用于指定该服务器字体名称,可随意定义*/
src:字体路径;/*用于指定该字体文件路径*/
}
可以得出使用服务器字体的步骤如下:
- 下载字体并存储到相应的文件夹中。
- 使用@font-face属性定义服务器字体。
- 对元素应用“font-family”字体样式。
7.word-wrap属性
word-wrap属性用于实现长单词和URL地址的自动换行,其基本语法格式如下:
选择器{word-warp:属性值;}
在上面的语法格式中,word-warp属性的取值有2种:
- normal:只在允许断字点换行(浏览器默认处理)
- break-word:在长单词或URL地址内部进行换行
下面通过一个URL地址换行的案例演示word-warp属性的用法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>word-warp属性</title> <style type="text/css"> p{ width: 100px; height: 100px; border: 1px solid #000; } .break_word{word-wrap: break-word;} /*网址在段落内部换行*/ </style> </head> <body> <span>word-warp:normal;</span> <p>网页平面UI设计学院http://icd.itcast.cn/</p> <span>word-warp:break-word;</span> <p class="break_word">网页平面UI设计学院http://icd.itcast.cn/</p> </body> </html>
运行效果如图所示:
当浏览器处理时段落文本中的URL地址会溢出边框;当设置word-wrap属性值为break-word时,URL地址会沿边框自动换行。
文本外观属性
1.color:文本颜色
color属性用于定义文本颜色,其取值方式有如下3种:
- 预定义的颜色值,如red、green、blue等
- 十六进制,实际工作中,十六进制是最常用的
- RGB代码,如红色可以表示rgb(255,0,0)或rgb(100%,0%,0%)
注意:如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。
十六进制颜色值中,当3个分量的2位十六进制都各自相同时,可使用CSS缩写,如#FF6600可缩写为#F60。
2.letter-spacing:字间距
letter属性用于定义字间距,所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值,允许使用负值,默认为normal。
3.word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距,对中文字符无效。和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距,而word-spacing定义的为英文单词之间的间距。
下面通过一个案例来演示word-spacing和letter-spacing的不同:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>word-spacing和letter-spacing</title> <style type="text/css"> .letter{letter-spacing: 20px;} .word{word-spacing: 20px;} </style> </head> <body> <p class="letter">letter spacing(字母间距)</p> <p class="word">word spacing word spacing(单词间距)</p> </body> </html>
运行效果如图所示:
4.line-height:行间距
line-height属性用于设置行间距。所谓行间距就是行与行之间的距离,即字符垂直间距,一般称为行高。该属性常用的属性值单位有3种,分别为像素(最常用)、相对值和百分比。
下面通过一个案例来学习line-height属性的使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行高line-height的使用</title> <style type="text/css"> .one{ font-size: 16px; line-height: 18px; } .two{ font-size: 12px; line-height: 2em; } .three{ font-size: 14px; line-height: 150%; } </style> </head> <body> <p class="one">段落1:使用像素px设置line-height。该段落字体大小为16px,line-height属性值为18px。</p> <p class="two">段落2:使用像素em设置line-height。该段落字体大小为12px,line-height属性值为2em。</p> <p class="three">段落3:使用像素%设置line-height。该段落字体大小为14px,line-height属性值为150%。</p> </body> </html>
运行效果如图所示:
5.text-transform:文本转换
text-transform属性用于转换英文字符的大小写,其可用属性值如下:
- none:不转换(默认值)
- capitalize:首字母大写
- uppercase:全部字符转换为大写
- lowercase:全部字符转换为小写
6.text-decoration:文本装饰
text-decoration属性用于设置文本的下划线、上划线、删除线等装饰效果,其可用属性值如下:
- none:没有装饰(默认)
- underline:下划线
- overline:上划线
- line-through:删除线
text-decoration后可以赋多个值,用于给文本添加多种显示效果。例如希望文字同时有下划线和删除线效果,就可以将underline和line-through同时赋给text-decoration。
下面通过一个案例来演示text-decoration各个属性值的显示效果:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本装饰text-decoration</title> <style type="text/css"> .one{text-decoration: underline;} .two{text-decoration: overline;} .three{text-decoration: line-through;} .four{text-decoration: underline line-through;} </style> </head> <body> <p class="one">设置下划线(underline)</p> <p class="two">设置上划线(overline)</p> <p class="three">设置删除线(line-through)</p> <p class="four">同时设置下划线和删除线(underline line-through)</p> </body> </html>
运行效果如图所示:
7.text-align:水平对齐方式
- left:左对齐(默认)
- tight:右对齐
- center:居中对齐
注意:text-align属性仅适用于块级元素。对行内元素无效
8.text-indent:首行缩进
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数,或相对于浏览器窗口宽度的百分比%,允许使用负值。建议使用em作为设置单位。
下面通过一个案例来学习text-indent的使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首行缩进text-indent</title> <style type="text/css"> p{font-size: 14px;} .one{text-indent: 2em;} .two{text-indent: 50px;} </style> </head> <body> <p class="one">这是段落1中的文本,text-indent属性可以对段落文本设置首行缩进效果,段落1使用text-indent:2em</p> <p class="two">这是段落2中的文本,text-indent属性可以对段落文本设置首行缩进效果,段落2使用text-indent:50px</p> </body> </html>
运行效果如图所示:
9.white-space:空白符处理
使用HTML5制作网页时,不论源代码中有多少空格,在浏览器中会显示一个字符的空白。在CSS3中,使用white-space属性可设置空白符的处理方式,其属性值如下:
- normal:常规(默认值),文本中的空格、空行无效,满行后自动换行。
- pre:预格式化,按文档的书写格式保留空格、空行原样显示。
- nowrap:空格、空行无效,强制文本不能换行,除非遇到换行标记<br />。内容超出元素的边界也不换行,若超出浏览器页面则会增加滚动条。
下面通过一个案例来演示white-space各个属性值的效果:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>空白符处理white-space</title> <style type="text/css"> .one{white-space: normal;} .two{white-space: pre;} .three{white-space: nowrap;} </style> </head> <body> <p class="one">这个 段落 有很多 空格。此段落应用white-space:normal;。</p> <p class="two">这个 段落 有很多 空格。此段落应用white-space:pre;。</p> <p class="three">此段落应用white-space:nowrap;。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。 这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长 的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。</p> </body> </html>
运行效果如图所示:
10.text-shadow:阴影效果
在CSS中,使用text-shadow属性可以为页面中的文本添加阴影效果。其基本语法为:
选择器{text-shadow:h-shadow v-shadow blur color;}
在上面的语法格式中,h-shadow用于设置水平阴影的距离,v-shadow用于设置垂直阴影的距离,blur用于设置模糊半径,color用于设置阴影颜色。
下面通过一个案例来演示text-shadow属性的用法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-shadow属性</title> <style type="text/css"> p{ font-size: 50px; text-shadow: 10px 10px 10px red; /*设置文字阴影的距离、模糊半径和颜色*/ } </style> </head> <body> <p>Hello CSS3</p> </body> </html>
运行效果如图所示:
注意:当设置水平距离参数或垂直距离参数为负值时,可以改变阴影的投射方向。阴影模糊的半径参数只能设置为正值,并且数值越大阴影向外模糊的范围也就越大。
设置阴影叠加效果
可以使用text-shadow属性给文字添加多个阴影,从而产生阴影叠加的效果,方法为设置多组阴影参数,中间用英文逗号隔开。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-shadow属性</title> <style type="text/css"> p{ font-size: 50px; text-shadow: 10px 10px 10px red, 20px 20px 20px blue; } </style> </head> <body> <p>Hello CSS3</p> </body> </html>
运行效果如图所示:
11.text-overflow:标示对象内溢出文本
在CSS3中,text-overflow属性用于标示对象内溢出的文本,其基本语法格式为:
选择器{text-overflow:属性值;}
在上面的语法格式中,text-overflow属性的常用取值有2个,具体解释如下:
- clip:修剪溢出文本,不显示省略标记“...”
- ellipsis:用省略标记“...”标示被修剪文本,省略标记插入的位置是最后一个字符
下面通过一个案例来演示text-overflow属性的用法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-overflow属性</title> <style type="text/css"> p{ width: 200px; height: 100px; border: 1px solid #000; white-space: nowrap; /*强制文本不能换行*/ overflow: hidden; /*修剪溢出文本*/ text-overflow: ellipsis; /*用省略标记标示被修剪的文本*/ } </style> </head> <body> <p>把很长的一段文本中溢出的内容隐藏,出现省略号</p> </body> </html>
运行效果如图所示:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战