2.css字体文本属性

最新推荐文章于 2022-03-20 18:27:13 发布

浮晓梦

最新推荐文章于 2022-03-20 18:27:13 发布

阅读量133

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44123667/article/details/110858441

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、字体风格

font-family 字体(比如宋体，微软雅黑)
font-size 字体大小
font-weight 字体粗细(700加粗，400正常)
font-style 字体风格(normal正常，italic倾斜)
符合属性：必须要有大小和字体，其余可有可无
font: 风格粗细大小/间距字体

   <style>
        body {
            font-size: 20px;
        }
        h1 {
            font-family: 'Microsoft YaHei', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 40px;
            font-weight: 700;
        }
        .ziti {
            font-weight: 700;
        }
        em {
            font-style: normal;
        }
    </style>
<body>
    <h1>40像素,标题标签是特殊的，不会受到body的改变</h1>
    <p>20像素</p>
    <p class="ziti">加粗=700 正常=400</p>
    <em>em标签本身是倾斜的，用font-style: normal变成正常的</em>
</body>

在这里插入图片描述

二、文本属性

颜色color: red/ #FF000/ rgb(255,0,0) 红色
对齐方式text-align: left/ center/ right 文字左 /居 /右中对齐
装饰文本text-decoration：none/ underline/ overline/ line-through 没装饰下划线上划线 ~~删除线~~
首行缩进text-indent: 2em（两个当前文字大小）
行间距line-height: 26px（字+上下间距一起26）

<style>
        h1 {
            text-align: center;
        }
        p {
            color: #337eaf;
            text-decoration: readline;
            text-indent: 2em;
            line-height: 25px;
        }
    </style>
    <h1>文本属性</h1>
    <p>颜色color: red/ #FF000/ rgb(255,0,0) 红色</p>
    <p>对齐方式text-align: left/ center/ right 文字左 /居 /右中对齐</p>
    <p>装饰文本text-decoration：none/ underline/ overline/ line-through 没装饰 下划线 上划线 删除线</p>
    <p>首行缩进text-indent: 2em（两个当前文字大小）</p>
    <p>行间距line-height: 26px（字+上下间距一起26）</p>