Hello WEB ! CSS是装修吗？！（二）--字体和文本-CSDN博客

本文链接：https://blog.csdn.net/weixin_45160152/article/details/119355054

网盘资料链接：https://pan.baidu.com/s/1qFRLUOS-d3Ns3_avzXRrhw
提取码：echo

字体和文本

1.字体：
style{
font-family 字体(字体，字体，字体)
【按顺序选择字体，前置位不存在或者报错则顺延到下一个字体响应】
font-size 字体大小
【xx-small 用函数写好的绝对字体尺寸最小
x-small 用函数写好的绝对字体尺寸较小
small 用函数写好的绝对字体尺寸小
medium 用函数写好的绝对字体尺寸正常
large 用函数写好的绝对字体尺寸大
x-large 用函数写好的绝对字体尺寸较大
xx-large 用函数写好的绝对字体尺寸最大】
font-style 字体样式
【normal 默认
italic 斜体
oblique 偏斜体】
font-weight 字体粗细
【normal 默认
bold 偏粗
bolder 特粗
lighter 特细】
font-variant 字体大小写
【normal 默认
small-caps 小转大】
font 复合样式(style variant weight size/height family)
}

2.文本
taxt-align 对齐方式：
【left：左
right：右
center：居中
justify：实现两端对齐的文本效果
inherit：从父类继承对齐方式】

text-indent 首行缩进：
【px : 像素
em : 中文字位数】

text-decoration 文本线：
【none 默认
underline 文本下的一条线
overline 文本上的一条线
line-thtough 穿过文本的一条线
blink 闪烁的文本
inherit 从父类继承对齐方式】

letter-spacing 字距：
【增加和减少字与字之间的空白可以为负数】

word-spacing 词距：
【词是英文词组】

line-hrihgt 行高：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体文本</title>

    <style>
        /*类选择器*/
        .p2{font-family: 宋体;
            font-size: 20px;
            font-style: italic;
            font-weight: lighter;
            font-variant: small-caps;}

        .p3{font: italic small-caps lighter 20px 宋体;}

        #id1{text-align: center}
        #id2{text-align: left}

        #id3{text-indent: 30px}
        #id4{text-indent: 2em}

        #id5{text-decoration: underline}
        #id6{text-decoration: overline}
        #id7{text-decoration: line-through}

        #id8{letter-spacing: 1em}
        #id9{word-spacing: 20px}

        #id10{line-height: 30px}


    </style>
</head>
<body>

<!--字体的常用样式-->
<p> 测试字体1</p>
<p class="p2"> 测试字体2</p>
<p class="p3"> 测试字体3</p>
<p> 测试字体4</p>

<!--文本常用样式-->
<p id="id1">段落</p>
<p id="id4">首行缩进，内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
    段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容</p>
<p id="id5">段落内容下划线</p>

<p id="id8">文字间的间距</p>
<p id="id9">I am Chinese</p>

<p id="id10">行高，容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
    段落内容段落内容段落内容段落内容内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
    段落内容段落内容段落内容段落内容段落内容段落内容段落内容内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
    段落内容段落内容段落内容段落内容段落内容段落内容段落内容内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
    段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容</p>

</body>
</html>