可 取 值
描 述
font
font-style、font-variant、font-weight、font-size（或 line-height）、font-family
在一个声明中设置所有的字体属性
font-family
字体名称、inherit
设置字体类型
font-size
xx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit
设置字体大小
font-weight
normal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）
设置字体粗细
font-style
normal、italic、oblique、inherit
设置字体风格
例子，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> h3 { font-size: 20px; font-family: 隶书; line-height: 28px; } span { font: italic 16px 华文彩云; } </style> </head> <body> <h3>Web 前端技能</h3> <span >在当今社会中，Web 已经成为网络信息共享和发布的紧张形式。要想开拓 Web 运用 系统，就必须节制 Web 前端技能。</span > </body></html>
显示为，
（2）CSS 中链接标签可用的伪类：
a:linka:hovera:activea:visitedCSS 中，伪类是添加到选择器的关键字，给指定元素设置一些分外状态，我们以 : 开头。
链接有以下四个状态。这四种状态也称之为超链接的伪类。
状态
效果
a:link
普通的、未被访问的链接。
a:hover
鼠标指针位于链接的上方。
a:active
链接被单击的时候。
a:visited
用户已访问的链接。
针对超链接的上述四种状态设置样式规则，能起到美化超链接的浸染。例如，为了完成下对超链接的显示哀求，编写的 CSS 样式代码如下。
状 态
颜 色
背 景 色
文 本 修 饰
未访问
蓝色
无
无下画线
鼠标移到
玄色
#DDDDDD
下画线
正单击
赤色
#AAAAAA
删除线
已访问
绿色
无
无下画线
对付超链接的伪类，我们推举的利用顺序是：:link - :visited - :hover - :active。
例子，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> { text-decoration: none; } a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; } </style> </head> <body> <a href="#">这是一个链接</a> </body></html>
显示为，
为什么要按照这样的顺序来利用呢？ 调度几个伪类的顺序，看看会发生什么。
我们把 a:link 放到末了，效果如下：
从图中可以创造个中的样式属性都被覆盖了。
（3）列表干系的样式属性：
list-style 属性list-style-image 属性list-style-position 属性list-style-type 属性属 性
可 取 值
描 述
list-style
list-style-type、list-style-position、list-style-image
在一个声明中设置所有的列表属性
list-style-image
URL、none
设置图像为列表项标志
list-style-position
inside、outside、inherit
设置列表中列表项标志的位置
list-style-type
disc（默认）、circle、square、decimal 等
设置列表项标志的类型
例子，
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> ul { list-style-position: inside; list-style-image: url(list.gif); } </style> </head> <body> <ul> <li>喵喵咪爱哦</li> </ul> </body></html>
