使用 CSS 关键字设置字体大小
CSS 的 font-size 属性可以使用绝对和相对关键字来设置。这可以根据需要缩放文本。
语法
CSS font-size 属性的语法如下:
Selector { font-size: /*value*/ }
下表列出了 CSS 中使用的标准关键字:
序号 | 值和描述 |
---|---|
1 | medium 将字体大小设置为中等大小。这是默认值 |
2 | xx-small 将字体大小设置为 xx-small 大小 |
3 | x-small 将字体大小设置为 extra small 大小 |
4 | small 将字体大小设置为小号大小 |
5 | large 将字体大小设置为大号大小 |
6 | x-large 将字体大小设置为 extra-large 大小 |
7 | xx-large 将字体大小设置为 xx-large 大小 |
8 | smaller 将字体大小设置为小于父元素的大小 |
9 | larger 将字体大小设置为大于父元素的大小 |
以下示例说明了如何使用关键字设置 CSS font-size 属性。
示例
<!DOCTYPE html> <html> <head> <style> h1{ font-size: larger; } #demo { font-size: medium; text-align: center; background-color: floralwhite; } p { font-size: xx-large; } </style> </head> <body> <h1>Demo Heading</h1> <p id="demo">This is demo text.</p> <p>This is another demo text.</p> </body> </html>
输出
这将产生以下输出:
示例
<!DOCTYPE html> <html> <head> <style> div { margin: auto; padding: 5px; width: 30%; border: 1px solid; border-radius: 29%; text-align: center; font-size: xx-small; } p { font-size: xx-large; } </style> </head> <body> <div> <div>One</div> <p>Two</p> </div> </body> </html>
输出
这将产生以下输出:
广告