CSS4 | 青训营笔记

157 阅读2分钟

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;