Web基础：CSS中的文本修饰(字体样式篇）

最新推荐文章于 2023-10-15 13:34:11 发布

孤心_AUTO

最新推荐文章于 2023-10-15 13:34:11 发布

阅读量394

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_73058235/article/details/130210934

版权

字体样式：

在css中，我们使用font-****来修饰字体

1.font-family：

在CSS中，我们使用font-family来定义字体类型，例如：

font-family:name;

name表示字体名称，例如：宋体黑体

2.font-size：

在CSS中，我们使用font-size来定义字体大小，用法如下：

font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length

注：“|”为分界线

larger|smaller 表示相对字体

length 表示百分数浮点数但不可为负值

3.color：

参数color可以表示颜色值，可以为颜色名字十六进制 RGB颜色，例如：

color：color；

设计案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size:0.75em;
        }
        #header h1{
            font-size:1.333em;
        }
        #main h2{
            font-size:1.167;
        }
        #nav li{
            font-size:1.08em;
        }
        #footer p{
            font-size:0.917em;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1>网页标题</h1>
        </div>
        <ul id="nav">
            <li>菜单</li>
        </ul>
    </div>    
    <div id="main">
        <h2>栏目标题</h2>
        <p>网页正文</p>
    </div>
    <div id="footer">
        <p>版权信息</p>
    </div> 
</body>
</html>

4.font-weight:

在CSS中，我们使用font-weight定义字体粗细，用法如下：

font-weight:normal|bold|bolder|lighter|100|200|   |900

注:normal为默认值 =400

bold表示粗体=700

100~900表示粗细级别

5. font-style:

在CSS中，我们使用font-size来定义字体的倾斜效果，用法如下：

font-style:normal|italic|oblique

6.font-variant:

在CSS中，我们使用font-variant定义字体变体效果，用法如下：

font-variant:normal|small-caps

拓：text-transform属性也可以定义大小效果，用法如下：

text-transform:none|capitalize|uppercase|lowercase

capitalize:每个单词首字母变成大写

uppercase:所有字母变成大写

lowercase:所有字母变成小写

设计案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .capitalize{
            text-transform: capitalize;
        }
        .uppercase{
            text-transform: uppercase;
        }
        .lowercase{
            text-transform: lowercase;
        }
        </style>
</head>
<body>
    <p class="capitalize">111111111</p>
    <p class="uppercase">222222222</p>
    <p class="lowercase">333333333</p>
</body>
</html>