8 CSS字体 (font)
font 属性可用于设置文本字体,定义样式,如加粗,大小等,属于复合属性,也叫做简写属性。
简写顺序:
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
注意,font-size 和 font-family 的值是必需的,否则无效。
(1)是绝对或相对大小,可以使用px、em、%和em组合来设置。
- 使用px设置:通过像素设置文本大小是设置的整个页面。
- 使用em设置:1em等于当前的字体尺寸,比如设置的默认字体是12px,因此1em的默认大小就是12px。像素转换em:px/12 = em
- 使用%和em组合设置:在所有浏览器的解决方案中,设置 元素的默认字体大小是 100%,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。
<head>
<style>
body{font-size:100%}
p{font-size:2.5em; } /* 2.5*16=40px */
</style>
</head>
<body>
<p>使用%和em组合设置</p>
</body>
(2)font-style 属性主要用于指定斜体文字。
属性有三个值:
- normal正常显示文本
- italic 定义斜体
- oblique 定义倾斜的文字
9 CSS链接
链接的四种状态是:
a:link - 正常,未访问过的链接。
a:visited - 已访问过的链接。
a:hover - 当鼠标滑动到链接上时。
a:active - 链接被点击的那一刻。
10 CSS列表
作用:1 设置不同的列表项标记 2 设置列表项标记为图像
修改列表项标记使用 list-style-type,使用图像作为标记可以利用 list-style-image 属性完成。
-
无序列表:
无序列表经常用来做导航栏菜单,通常都需要隐藏无序列表项的标记,那么就使用 list-style-type:none,表示无标记。 -
list-style-type 属性的默认值为 disc 实心圆,即小黑点。除了无标记还可以修改标记,例如circle空心圆,square实心方块。
-
有序列表:
有序列表项标记默认使用数字样式显示,即 list-style-type:decimal。 -
图像作为列表项标记
要指定列表项标记的图像,可以使用 list-style-image 属性,只需要简单地设置一个 url() 值,就可以将图像作为标记类型。
列表属性简写:list-style:list-style-type,list-style-position,list-style-image;