CSS初识(三)：CSS字体文本相关属性

最新推荐文章于 2024-07-25 01:36:12 发布

平安不死街

最新推荐文章于 2024-07-25 01:36:12 发布

阅读量170

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44344236/article/details/114987623

版权

属性

CSS属性有很多，不过常用的并不多，大概30个左右。请注意区别CSS属性和HTML属性。
按照功能大致分为以下几类：

字体有关属性

font-size: 设置字体大小，单位是px（像素）；一些不常用的大小：small medium large x-large……，字体大小默认16px

font-style: 设置字体的样式，是否倾斜，normal正常，italic倾斜，oblique更加倾斜……

font-weight: 设置字体是否加粗，normal正常，bold加粗，lighter更瘦更细……

font-family: 设置字体的格式，设置字体格式，微软雅黑，宋体，黑体……注意：用户会看到什么样的字体，取决于用户的设备上安装的是什么字体，有的字体仅支持某种语言，可以设置多个字体，如果第一个字体没用，那么就用第二个……如果不设置字体，则是默认宋体。

注意：针对中文字体进行设置，需要加引号，针对英文的（单个单词），不需要加引号。如果英文是多个单词，那也需要加引号

font-family可以自定义字体，在style中使用@font-face，比如UI设计师给的字体，或者去网上找字体。

font，这个是集成了上面样式(font-style)、粗细(font-weight)、大小(font-size)、格式(font-family)的一个属性，一般这个比较常用。

注意：样式style和粗细weight，二者可以换位置，也可以不写，但是大小size和格式family必须写，且不能换位置

<style>
    @font-face{
        /* 给自定义的字体起一个名字 */
        font-family: "appleFont";
        /* 自定义字体的路径 */
        src: url("font/PingFang\ Medium.ttf");
    }
    p{
        /* 使用这个自定义字体 */
        font: normal normal 24px "appleFont";
    }
</style>
<body>
    <p>这是一个尝试</p>
</body>

文本有关属性

text-decoration，overline（上划线），underline（下划线），line-through（删除线），none（文本默认，没有线）。

注意：上中下三条线可以同时使用，这样一段文字三条线都有了。

注意2：超链接 a 下面默认有underline，这时可以使用none来消除掉下划线。

注意3：color改变文字颜色的同时，也会改变线的颜色。

<style>
    .p1 {
        text-decoration: overline;
    }
    .p2 {
        text-decoration: line-through;
    }
    .p3 {
        text-decoration: underline;
    }
    .p4 {
        text-decoration: underline overline line-through;
    }
    .p5 {
        text-decoration: line-through;
        color: red;
    }
</style>
<body>
    <p class="p1">这是上划线</p>
    <p class="p2">这是下划线</p>
    <p class="p3">这是删除线</p>
    <p class="p4">这是三线全有</p>
    <p class="p5">这是红色删除线</p>
</body>

text-align ，对齐，有right、left、center三种对齐方式，一般情况下用于块级元素。因为行级元素没效果。

对齐操作是针对于这个元素内所有子元素而言的，也就是将可以进行对齐操作的子元素整体对齐。

注意，使用对齐，必须保证有富余空间，比如span就不行，因为span只有其内容大小的空间，这样就没有对齐效果了。

vertical-align: middle;这是竖直居中，只适用于行级元素。

text-indent，文本缩进，可以使用px，还可以使用em等。

经典应用(1)：text-indent:2em，就是首行缩进2个字符，em是代表着字体大小的单位，2em就是两个文字的大小。

经典应用(2)：text-indent:-99999px，就是向前缩进99999px，这就相当于跑到屏幕外边了。

line-height

主要是对块级元素内的内容来进行行高设置(其实主要是p标签)，设置每行的高度。

经典应用1：使用line-height将一行文本竖直居中。

经典应用2：line-height配合vertical-middle可以实现图片竖直居中。前提是line-height高度大于等于图片高度。

<!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>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            background-color: gray;
            text-align: center;
            height: 300px;
            line-height: 300px;
        }
        img{
            vertical-align: middle;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <img src="img/2017-08-30_122538_03.jpg" alt="">
    </div>
</body>
</html>

litter-spacing，每个字符中间的间距。对中英文都有效。

word-spacing，每个单词之间的间隔。只对英文有效。

text-shadow，文本阴影。text-shadow：水平阴影位置垂直阴影位置模糊程度阴影颜色。

text-shadow 中可以有很多个阴影，中间用逗号隔开，每个阴影都有上面的那4个属性值可以写。

注意1：水平阴影位置和数值阴影位置可以为负数，这样就有了上下方之分，可以制造凹凸效果

注意2：如果一个shadow后面有多个阴影的话，那么这个阴影是按照从前往后的顺序依次刷出来。

CSS的继承性

继承性就是对父元素设置的一些属性，子元素会继承这些属性。关于字体相关的设置、关于文本相关的设置都有继承性。

经典应用1：给body设置一个字体相关、或者文本相关的属性，子元素会继承。

注意：对于 a 标签来讲，color没法继承，必须对 a 进行单独设置

CSS的层叠性(优先级)

什么是层叠性？

对同一个元素，通过不同途径，设置了多种样式，哪一种样式有作用。

如果一个元素有id、class，那么优先级排序 id > class > 标签。如果一个元素有多种样式设置方案，那就看使用选择器的时候，用到的id、class、标签的数量，id数量多的优先，id一样看class，class数量多的优先，class也一样的话，那就看标签。可以将他们的id的值看作100，class看作10，标签为1，然后根据数量相加，计算大小。

在这里插入图片描述

对于不同的CSS引入方式，优先级排序是，行内样式 > 内部样式 = 外部样式，内部和外部优先级相同，代码自上而下执行，下方的样式(之后执行的CSS样式)，会覆盖之前的样式，也就是就近原则。

如果使用谷歌浏览器，那么在网页上按F12，会弹出调试窗口（别的浏览器也有类似的功能），在这里可以看到，对于一个元素来说，他的样式分为三块——1、继承父元素的；2、默认样式。3、开发者写的样式。这三块样式的优先级是3>2>1。

平安不死街

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS初识(三)：CSS字体文本相关属性

属性CSS属性有很多，不过常用的并不多，大概30个左右。请注意区别CSS属性和HTML属性。按照功能大致分为以下几类：字体有关属性font-size: 设置字体大小，单位是px（像素）；一些不常用的大小：small medium large x-large……，字体大小默认16pxfont-style: 设置字体的样式，是否倾斜，normal正常，italic倾斜，oblique更加倾斜……font-weight: 设置字体是否加粗，normal正常，bold加粗，lighter
复制链接

扫一扫