CSS修饰页面指南——字体文本篇

小圆2023090237

已于 2024-11-04 18:36:20 修改

阅读量2k

点赞数 46

分类专栏： wed前端文章标签： html5 学习前端 html css

于 2024-11-04 18:16:00 首次发布

本文链接：https://blog.csdn.net/Wjunnn/article/details/143488968

版权

wed前端专栏收录该内容

8 篇文章

订阅专栏

使用CSS修饰页面外观

设置字体样式
设置文本样式

设置字体样式

CSS网页排版功能非常强大，不仅可以控制及文本大小、颜色、对齐方式、字体，还可以控制行高、首行缩进、字母间距和字符间距等。在学习HTML时，通常也会使用HTML对文本字体进行简单的样式设置，而使用CSS对字体样式进行设置远比使用HTML灵活、精确得多，同时可以达到网页内容结构与外观分离的目的。
字体常用属性如下

属性	说明
font-family	设置字体的类型
font-size	设置字体的大小
font-weight	设置字体的粗细
font-style	设置字体的倾斜

字体类型

字体具有两方面的作用，一是传递语义功能，二是美学效应。由于不同的字体给人都来不同的风格感受，所以对于网页设计人员来说，首先需要考虑的问题就是准确地选择字体。
通常，访问者的计算机中不会安装诸如“方正综艺简体“和“方正水柱简体”等特珠字体，如果网页设计者使用这些字体，极有可能使得访问者看到的页面效果与设计者的本意存在很大差异。
为了避免这种情况的发生，一般使用系统默认的宋体、仿宋体、黑体、楷体、Arial、Verdana 和 Times New Roman 等常规字体。
CSS 提供 font-family 属性来控制文本的字体类型。

在设计页面时，通常使用不同大小的字体来区分需要突出表现的主题和普通内容。在CSS 样式中，使用 font-size 属性设置字体的大小，其值可以是绝对值也可以是相对值。當见的有 px（绝对单位）、p（绝对单位）、em（相对单位）和％（相对单位）等。
绝对字体尺寸是根据对象字体进行调节的，包括 xx-small、 x-small.small、mediuom,large. x large 利xx-large7种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者 em，以相对父元素大小的方式来设置字体尺寸。

字体粗细

CSS样式中使用 font-weight 属性设置字体的粗细，它包含 normal（默认字体）、bold（粗体）, bolder（粗体再加粗）、lighter（比默认字体还细）、100、200、300、400、500、600、700、800 和900多个属性值【100~900 共分为9个层次（100、200-900），数字越小字体越细、数字越大字体越粗，数字值 400 相当于关键字 normal,700 等价于 bold】。

字体倾斜

CSS 中的 font-style 属性用来设置字体的倾斜。
normal 为“正常”（默认值），italic 为“斜体”，oblique 为“倾斜体”。

<head>
<style>
 #font1{
            font-size: 30px;
            font-family: 楷体;
            font-style: italic;
           font-weight: 2px;
        }
</style>
</head>
<body>
    <p class="font" id="font1">字体</p>
    </body>

页面展示效果：

设置文本样式

网页的排版离不开对文本的设置。常用的文本样式包括文本水平对齐方式、行高、文本的修饰、段落首行缩进、首字下沉、文本的截断、文本的颜色及文本的背景颜色。
字体样式主要涉及文字本身的效果，而文本样式主要涉及多个文字（段落）的排版效果。
所以CSS 在命名属性时，特意使用了 font 前缀和 text 前缀来区分两类不同性质的属性。CSS 样式中有关文本样式的常用属性如下表：

属性	说明
text-align	设置文本的水平对齐方式
line-height	设置行高
text-decoration	设置文本修饰效果
text-indent	设置段落首行缩进
first-letter	设置首字下沉
text-overflow	设置文本截断
text-transform	设置英文文本大小写
color	设置文本颜色
background-color	设置文本的背景颜色

文本水平对齐方式

使用 text-align 属性可以设置元素中文本的水平对齐方式。
left 为左对齐，right 为右对齐，center 为居中，justify 为两端对齐。

行高

段落中两行文本之间垂直的距离称为行高。在 HTML中是无法控制行高的。在CSS样式中，使用 line-height 属性控制行与行之间的垂直间距。
length 为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normal为獸认行高。

文本的修饰

使用CSS 样式可以对文本进行简单的修饰。text 属性所提供的 text-decoration 属性，主要实现文本加下划线，顶线、删除线及文本闪烁等效果。
underline 为下划线，blink 为闪烁，overline 为上划线，line-through 为贯穿线，none 为无装饰。
说明：设置对象中文本的修饰。对象（标签）<a>、<u>、<ins> 的文本修饰默认值为 underline.
对象（标签）<strike>、<s>、<del> 的默认值是 line-through。如果应用的对象不是文本，则此属性不起作用。

段落首行缩进

首行缩进是指段落的第一行从左向右缩进一定的距离，而首行以外的其他行保持不变，其目的是为了便于阅读和区分文章整体结构。
在Web 页面中，将段落的第一行进行缩进，同样是一种最常用的文本格式化效果。在CSS 样式中 text-indent 属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent，但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距或外边距创造这种效果。
length 为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。

首字下沉

在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉指的是设置段落的第一行第一个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。
在CSS 样式中，伪对象“：first-letter”可以实现对象内第一个字符的样式控制。
说明：如果不使用伪对象“：first-letter”来实现首字下沉的效果，就要对段落中第一个文字添加<span＞标签，然后定义<span>标签的样式。但是这样做的后果是每个段落都要对第一个文字添加<span＞标签，非常烦琐。因此，使用伪对象“：first-letter”来实现首字下沉，提高了网页排版的效率。

文本的截断

在 CSS样式中，text-overflow 属性可以实现文本的截断效果，该属性包含 clip 和ellipsis两个属性值。前者表示简单的裁切，不显示省略标记（…）；后者表示当文本溢出时显示省略标记（…）。
说明：要实现溢出文本显示省略号的效果，除了使用 text-overflow 属性以外，还必须配合 white-space:nowrap（white-space 属性指定元素内的空白怎样处理，nowrap 属性值规定了段落中的文本不进行换行）和 overflow：hidden（溢出内容为隐藏）同时使用才能实现。

英文文本大小写

在CSS样式中用 text-transform属性可以控制英文文本的大小写显示。

属性	说明
capitalize	首字母大写
uppercase	所有字母大写
lowercase	所有字母小写

文本的颜色和背景颜色

在CSS样式中，对文本增加颜色修饰十分简单，只需添加color属性即可。
这里颜色值可以使用多种书写方式;

color:red;             /*规定颜色值为颜色名称的颜色*/
color:#000000;         /*规定颜色值为十六进制值的颜色*/
color:rgb(0,0,255);    /*规定颜色值为rgb代码的颜色*/
color:rgb(0%,0%,80%);  /*规定颜色值为rgb百分数的颜色*/

在HTML 中，可以使用标签的bgcolor属性设置网页的背景颜色，而在CSS 里，不仅可以用 background-color 属性来设置网页背景颜色，还可以设置文本的背景颜色。
color 指定颜色，transparent 表示透明的意思，也是浏览器的默认值。
说明：background-color 不能继承，默认值是 transparent，如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才能看见。
最后放一个代码供大家参考：

<head>
 <style>
        .class{
            color: red;
            font-size: 30px;
            font-family: 楷体;
            font-style: italic;
        }
        #font2{
            width: 480ox;
            height: 60px;
            background-color: grey;
            color: white;
            font-size: 30px;
            font-family: 楷体;
            font-style: italic;
            font-weight: 2px;
            text-align: center;
            text-decoration: overline;
        }
        #font3{
            width: 480ox;
            height: 60px;
            background-color: grey;
            color: white;
            font-size: 30px;
            font-family: 楷体;
            font-style: italic;
            font-weight: 2px;
            /* 块内位置 */
            text-align: center
            text-decoration:underline;
            /* capitalize首字母大写 uppercase所有字母大写 lowercase 所有字母小写 */
            text-transform: capitalize;
            text-indent: 50px;
        }
    </style>
</head>
<body>
    <p class="font">字体属性（默认）</p>
    <p class="font" id="font2">字体</p>
    <p class="font" id="font3">hello world</p>
</body>