CSS------文本属性

makabaka12138

于 2022-06-05 14:47:48 发布

阅读量184

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/makabaka12138/article/details/125131658

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

如上图所示，就是文本的属性啊，接下来一一为大家仔细讲解。会有代码展示的呢，亲。

font-size:设置字体的大小，单位是px,图上面也说了默认16px.

font-family:是设置字体啊，比如宋体啊，微软雅黑啊，如果要使用多个字体，中间用逗号连接

color:设置颜色，大家应该都会啊

font-weight:加粗字体,取值范围100-900，常用100(lighter)，400(normal)，700(bolder)

font-style:倾斜啊，italic(斜体字)，oblique(倾斜的文字)，normal(正常)

text-align:left(左对齐),right(右对齐),centre(居中),justify(水平两端对齐)

word-spacing:设置英文单词的间距

line-height：设置文字行高，把行高设置到高度有惊喜哦

text-indent:首行缩进，只对第一行有作用，建议设置成2em

letter-spacing:设置汉字字间距

text-transform:capitalize(字母首字母大写),lowercase(全部小写),uppercase(全部大写);

font使用顺序：font-style->font-weight->font-size/font-height->font-family.

案例：

<!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>案例</title>
    <style>
        .al{
            width: 200px;
            height:50px;
            font-size:16px;
            background-color: aqua;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color:rgb(55,66,77);
            font-weight:bold;
            text-align:center;
            line-height:50px;
        }
        #1{
            text-indent: 2em;
            text-align:justify;
        }
        .sp{
            font-weight: bolder;
            color:chartreuse;
        }
    </style>
</head>
<body>
    <div class = al>案例</div>
    <p id = 1>从前有座山，山上有座庙，<span class = sp>庙里有两个和尚</span>，老和尚再和小和尚讲故事</p>
</body>
</html>

makabaka12138

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS------文本属性

如上图所示，就是文本的属性啊，接下来一一为大家仔细讲解。会有代码展示的呢，亲。font-size:设置字体的大小，单位是px,图上面也说了默认16px.font-family:是设置字体啊，比如宋体啊，微软雅黑啊，如果要使用多个字体，中间用逗号连接color:设置颜色，大家应该都会啊font-weight:加粗字体,取值范围100-900，常用100(lighter)，400(normal)，700(bolder)font-style:倾斜啊，italic(斜体字)，oblique(倾斜的文字)，norma
复制链接

扫一扫

专栏目录