CSS字体样式文本样式 - 心如止水微笑人生

顺晟科技

2022-09-14 11:02:51

296

2、font-family

字体颜色：

字间距：

中文一个汉字代表一个字符

英文一个字母代表一个字符

对中文没有影响

文本样式：

line-height 行高

行高的练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
        }
        .div1
        {
            background-color : green;
            font:16px "黑体";
        }
        .div1 p
        {
            background-color : red;
            /*行高是20*1.5=30px*/
            font:20px/1.5em "宋体";
        }
    </style>
</head>
<body>
    <p class="p1">好好学习</p>
    <div class="div1">
       <p>天天向上</p>
    </div>
</body>
</html>

text-align设置文本对其方式

取值：left right center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p
        {
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>

    <p>好好学习</p><br>
    <p>天天向上</p><br>
    <p>励精图治</p>
   
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div
        {
             background-color: grey;
             height:200px;
             width: 200px;
        }
        .nowrap
        {
            white-space: nowrap;
        }
        .pre
        {
            white-space: pre;
        }
    </style>
</head>
<body>
    
    <div class="normal">
        好好学习天天向上励精图治自强不息
    </div>
    <div class="nowrap">
        好好学习天天向上励精图治自强不息
    </div>
    <div class="pre">
public void show{}
{
    System.out.print("好好学习");
}
    </div>
</body>
</html>

上一篇：CSS的字体样式下一篇：CSS之常见文字样式整理

网站建设

Css

CSS字体样式文本样式 - 心如止水微笑人生

Css

CSS字体样式 文本样式 - 心如止水微笑人生

CSS字体样式文本样式 - 心如止水微笑人生