HTML5基础（day5）

最新推荐文章于 2024-08-30 15:33:13 发布

澈如冬雪^

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量73

点赞数 1

文章标签： html5 css html

本文链接：https://blog.csdn.net/m0_52372037/article/details/128516866

版权

一、css字体属性

在这里插入图片描述

1.font-family设置字体系列

示例

 <title>css字体属性之字体系列</title>
    <style>
        h2 {
            font-family: 'Microsoft YaHei','Times New Roman', Times, serif;
        }
        p {
            font-family: '微软雅黑';
        }
    </style>
</head>
<body>
    font-family: '微软雅黑';
    <h2>红日</h2>
    <p>命运就算颠沛流离</p>
    <p>命运就算曲折离奇</p>
    <p>命运就算恐吓着你</p>
    <p>做人没趣味</p>
    <p>别流泪心酸</p>
    <p>更不应舍弃</p>
    <p>我愿能一生永远陪伴你</p>
</body>

2.font-size字体大小

在这里插入图片描述

示例

<title>css字体属性之字体大小</title>
     <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
     </style>
</head>
<body>
    <h2>红日</h2>
    <p>命运就算颠沛流离</p>
    <p>命运就算曲折离奇</p>
    <p>命运就算恐吓着你</p>
    <p>做人没趣味</p>
    <p>别流泪心酸</p>
    <p>更不应舍弃</p>
    <p>我愿能一生永远陪伴你</p>
</body>

3.font-weight字体粗细

在这里插入图片描述

 <title>css字体属性之字体粗细</title>
    <style>
    .bold {
        font-weight: bold;
    } 
    .bold2 {
        /* 这个700的后面不要跟单位 等价于bold 都是加粗的效果 */
        /* 实际开发中，我们更提倡使用数字 来加粗或者变细 */
        font-weight: 700;
    }
    h2 {
        font-weight: 400;
        /* font-weight: normal; */
    }
    </style>
</head>
<body>
    <h2>红日</h2>
    <p>命运就算颠沛流离</p>
    <p>命运就算曲折离奇</p>
    <p>命运就算恐吓着你</p>
    <p>做人没趣味</p>
    <p class="bold2">别流泪心酸</p>
    <p><strong>更不应舍弃</strong></p>
    <p class="bold">我愿能一生永远陪伴你</p>
</body>

4.font-style字体样式

在这里插入图片描述

<title>css字体属性之字体样式(风格)</title>
    <style>
      p {
        font-style: italic;
      }
      em {
        /* 让倾斜的字体不再倾斜 */
        font-style: normal;
      }
    </style>
</head>
<body>
   <p>如雪如山</p> 
   <em>我的年少有你，你的青春有我</em>
</body>

5. 字体复合属性

在这里插入图片描述

示例

<title>css字体属性之复合属性</title>
    <style>
        /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
    div {
         /* font-style: italic;
         font-weight: 700;
         font-size: 16px;
         font-family: Microsoft YaHei; */
         /* 复合属性: 简写的方式 节约代码 必须按照它的语法规范 不能颠倒顺序*/
         /* font: font-style font-weight font-size/line-height font-family; */
         /* font: italic 700 16px Microsoft YaHei; */
         /* 必须保留font-size font-family 属性 */
         font: 20px Microsoft Yahei;
        }       
    </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>
</body>

6.字体属性总结

在这里插入图片描述

二、css文本属性

在这里插入图片描述

1.文本颜色color

在这里插入图片描述

示例

 <title>css文本外观属性之颜色</title>
    <style>
        div {
            /* color: skyblue; */
            /* color: #ff0000; */
            color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <div>我们在春风秋雨里无话不说，却在春去秋来里失去了联络</div>
</body>

2.文本对齐text-align

在这里插入图片描述

示例

<title>css文本外观之文本对齐</title>
     <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: center; */
            text-align: right;
        }
     </style>
</head>
<body>
    <h1>偏离</h1>
</body>

3.文本装饰text-decoration

在这里插入图片描述
注意：如何添加下划线，如何删除下划线

示例

<title>css文本外观之装饰文本</title>
    <style>
        div {
            /* 下划线 */
            /* text-decoration: underline; */
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            text-decoration: overline;
        }
        a {
             /* 取消a默认的下划线 */
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <div>沧海已换了千万回面目，怎会恰恰好在我身上变成桑田？</div>
    <a href="#">青春</a>
</body>

4.文本缩进text-indent

在这里插入图片描述

示例

 <title>css文本外观之文本缩进</title>
    <style>
        p {
            /* 文本的首行缩进多少距离 可正可负 */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进了当前元素两个文字的距离 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>爱意是显而易见的，不需要确认。当你一遍又一遍向对方确认是不是爱你的时候，爱就已经不在了，爱从来不需要确认，不爱才需要。</p>
    <p>我总是会习惯性说服自己“明天再调整作息”、“明天再开始学习”、“明天再去锻炼身体”，但实际上这个明天只是拖延最完美的借口罢了，因为总会有明天。拖延是最容易压垮一个人斗志的东西，如果不停止这个念头行动起来，只会把自己的人生拖垮，错过很多本该属于我们的风景。</p>
    <p>人的善良，大抵就是看出了你的为难，便不难为你。</p>
</body>

5.行间距line-height

在这里插入图片描述

示例

 <title>css文本外观之行间距</title>
    <style>
        div {
            line-height: 77px;
        }
        p {
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>烟火</div>
    <p>我所认为最深沉的爱，莫过于分开以后，我将自己，活成了你的样子。
    </p>
    <p>大多数引起人的不幸、痛苦、绝望、羞辱、逆境的真正原因并非是人性中的恶，而是简单的惰性。</p>
    <p>当我们还是孩子的时候，我们曾以为，等我们长大，我们就会不再脆弱。然而长大就是一个接纳脆弱的过程。活着本身就是一种脆弱。</p>
</body>

工具

在这里插入图片描述

6.css文本属性总结

在这里插入图片描述

澈如冬雪^

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础（day5）

title > css文本外观属性之颜色 < style > div {} < body > < div > 我们在春风秋雨里无话不说，却在春去秋来里失去了联络 css文本外观属性之颜色 < style > div {
复制链接

扫一扫