CSS学习笔记 —— 文本相关常用样式

最新推荐文章于 2022-08-23 21:37:13 发布

Libra0809

最新推荐文章于 2022-08-23 21:37:13 发布

阅读量158

点赞数

分类专栏：前端学习笔记文章标签： css

本文链接：https://blog.csdn.net/bobbi001/article/details/117648306

版权

前端学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文是作者本人学习过程中的笔记总结，如若文中有不正确，或需要补充的地方，欢迎在评论区中留言。

1. 字体颜色

1.1. 概述

color，给文字设置颜色
格式：k：v

HTML代码：

<style>
    p {
        color: green;
    }
</style>

<p>这是一段文字</p>

显示效果：

1.2 设置模式

（1）rgb模式

是根据红绿蓝三原色混合而成的颜色模式
每个原色的取值范围是0-255，一共256个数值
书写方式： color: rgb(红，绿，蓝);

<style>
    p {
        color: rgb(0, 255, 0);
    }
</style>

<p>这是一段文字</p>

（2）十六进制模式

是rgb模式的一种简化写法，使用十六进制的数字代替0-255的十进制数字
例如：rgb(0, 255, 0)，可简写成 #00ff00, 还可进一步简化为 #0f0

<style>
    p {
        color: #0f0;
    }
</style>

<p>这是一段文字</p>

2. 字体类型

font-family，定义元素内文字的字体
常用中文字体：宋体（SimSun）、微软雅黑（Microsoft Yahei）
常用英文字体：Arial、consolas

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        .one {
            font-family: '宋体';
        }
        .two {
            font-family: "微软雅黑";
        }
        .three {
            font-family: Arial;
        }
        .four {
            font-family: consolas;
        }
    </style>
</head> 
<body>
    <p class="one">这是宋体格式</p>
    <p class="two">这是微软雅黑格式</p>
    <p class="three">This is arial style</p>
    <p class="four">This is consolas style</p>
</body>
</html>

显示效果：

注意事项

font-family 可以设置多个字体名称，在实际加载时只会选择一种加载
选择的依据是按书写顺序进行的，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体
浏览器中加载的字体是用户电脑中自带的，存放于 C:\Windows\Fonts 目录下
如果用户电脑中没有设置的字体，则会加载失败
因此，必须在最后设置一个所有电脑都具备的通用字体作为后路
中文字体中一般带有英文可以加载的字体效果，为了避免对英文字体的影响，建议将英文字体写在最前面。

3. 字体大小

font-size，设置文字大小
每个浏览器都有自己的默认字体大小，大部分为16px，可点击该链接了解详情

HTML代码：

<style>
    .userset {
        font-size: 20px;
    }
</style>

<p>这是默认大小</p>
<p class="userset">这是自己设置的大小</p>

显示效果：

常用单位：

4. 字体粗细

font-weight，设置文字是否加粗显示
属性值有两种方式：单词类型、数字类型

（1）单词类型

（2）数字类型

100 - 900之间的整百数字
数字越大，文字显示就越粗
其中，400等价于 normal, 700等价于 bold

HTML代码：

<style>
    .word {
        font-weight: bold;
    }
    .number {
        font-weight: 400;
    }
</style>

<p class="word">通过单词类型设置</p>
<p class="number">通过数字类型设置</p>

显示效果：

5. 字体风格

font-style，设置文字是否斜体显示

属性值：

HTML代码：

<style>
    .one {
        font-style: normal;
    }
    .two {
        font-style: italic;
    }
    .three {
        font-style: oblique;
    }
</style>

<p class="one">这是正常风格</p>
<p class="two">This is italic style.</p>
<p class="three">这是倾斜的文字</p>

显示效果：

6. 行高

line-height，设置的是一行文字实际占有的高度，文字在自己所在行中是垂直居中的
所以，若想让一个容器中的文字居中显示，可以设置行高等于该容器的高度，文字就会垂直居中

HTML代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        height: 200px;
        border: 2px solid pink;
    }
    p {
        line-height: 200px;
    }
</style>

<div class="box">
    <p>这是div中的段落</p>
</div>

显示效果：

7. font综合属性

写法1：font属性进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后
写法2：font属性经常对字体、字号、行高进行合写，顺序必须是字号、行高、字体，字号和行高之间必须用 “/” 进行分隔
写法3：如果需要设置加粗和斜体，两个属性只能写在最前面，这两个值之间可以互换位置

HTML代码：

<style>
    .one {
        font: 20px "宋体";
    }
    .two {
        font: 20px/30px "微软雅黑";
    }
    .three {
        font: italic bold 16px/20px "楷体";
    }
</style>

<p class="one">字号在前，字体在后</p>
<p class="two">字号、行高、字体合写</p>
<p class="three">加粗和斜体写在最前面</p>

显示效果：

8. 文字水平对齐

text-align，设置文本水平方向的对齐
在盒子中，无论是单行还是多行，都会向对应方向对齐

属性值：

HTML代码：

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 2px solid pink;
    }
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>

<div class="box">
    <p class="one">向左对齐</p>
    <p class="two">水平居中</p>
    <p class="three">向右对齐</p>
</div>

显示效果：

9. 文本修饰

text-decoration，设置文本整体是否有线条的修饰效果

属性值：

HTML代码：

<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: overline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: underline;
    }
</style>

<p class="one">没有修饰</p>
<p class="two">上划线</p>
<p class="three">删除线</p>
<p class="four">下划线</p>

显示效果：

10. 文本缩进

text-indent，设置段落首行是否进行缩进
实际工作中，常采用的是以em为单位的这种缩进方式

属性值：

HTML代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        height: 100px;
        border: 2px solid pink;
    }
    .one {
        text-indent: 20px;
    }
    .two {
        text-indent: 2em;
    }
    .three {
        text-indent: 5%;
    }
</style>

<div class="box">
    <p class="one">缩进20个像素</p>
    <p>正常显示</p>
    <p class="two">缩进两个字符</p>
    <p class="three">缩进5%</p>
</div>

显示效果：