CSS字体文本美化样式【超详细】

您所在的位置：网站首页 › HTML字体样式属性 › CSS字体文本美化样式【超详细】

CSS字体文本美化样式【超详细】

2024-07-03 10:37| 来源: 网络整理| 查看: 265

目录一、为什么使用CSS二、span标签的作用三、字体样式：3.1 字体类型 font-family属性：3.2 字体大小 font-size属性3.3 字体风格 font-style 属性3.4 font-weight属性四、文本样式4.1 color属性：4.2 text-align属性:4.3 text-decoration属性4.4 vertical-algin：设置元素垂直对齐的方式4.5 text-shadow 文本阴影：

一、为什么使用CSS

有效的传递页面信息

使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容具有良好的用户体验

二、span标签的作用

行内元素能让某几个文字或者某个词语凸显出来

三、字体样式：属性名含义举例font-family设置字体类型font-family:"楷体"font-size设置字体大小font-size：18pxfont-style 设置字体风格font-style:italic;font-weight 设置字体的粗细font-weight:boldfont在一个声明中设置所有字体属性font:italic bold 36px "宋体"; 3.1 字体类型 font-family属性：

语法：

font-family: 字体1,字体2,字体3,...,字体N;

font-family可以指定多个字体，中间用逗号隔开。

字体名称英文名称Unicode 编码宋体SimSun\5B8B\4F53新宋体NSimSun\65B0\5B8B\4F53黑体SimHei\9ED1\4F53微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312隶书LiSu\96B6\4E66幼园YouYuan\5E7C\5706华文细黑STXihei\534E\6587\7EC6\9ED1细明体MingLiU\7EC6\660E\4F53新细明体PMingLiU\65B0\7EC6\660E\4F53

代码演示：

宋体 Unicode 编码(隶书) MingLiU(明细体)

效果图在这里插入图片描述

3.2 字体大小 font-size属性

单位： px（像素） em、rem、cm、mm、pt、pc

示例：在这里插入图片描述

3.3 字体风格 font-style 属性

语法：

font-style: 值;

属性值：

属性值说明normal默认值，正常italic斜体oblique斜体代码演示 DOCTYPE html> Title h1{ font-style: italic; } p{ font-style: oblique; } .p2{ font-style: normal; /*p2内容原来是斜体现在是默认*/ } 清平乐年年雪里，常插梅花醉，授尽梅花无好意，赢得满衣清泪! 今年海角天涯，萧萧两墨生华。看取晚来风势，故应难看梅花

效果：

在这里插入图片描述

3.4 font-weight属性

语法：

font-weight: 值; 属性值说明normal标准字体，默认值，与400等值bold粗体字体，与700等值bolder更粗大字体，大多数中文字体不支持lighter更细的字体，大多数中文字体不支持100-900的数值值越大越粗，400等同于normal，700等同于bold

font 综合属性简写字体属性的顺序：字体风格→字体粗细→字体大小→字体类型示例：

选择器{ font:oblique bold 12px "楷体"; } 四、文本样式属性名含义举例color设置文本颜色 color:#00C; text-align 设置元素水平对齐方式 text-align:right; text-indent 设置首行文本的缩进 text-indent:20px; line-height 设置文本的行高 line-height:25px; text-decoration 设置文本的装饰 text-decoration:underline; 4.1 color属性：关键字，如：red、green、blue等。十六进制RGB，如：#FF0000、#00FF00、#0000FFRGB：十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量正整数的取值为0～255 例：rgb(255,0,0)RGBA：在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1 rbga(110,0,0,.5)

使用语法：

选择器{ color: 颜色值 } 文本内容

css常用色：

英文中文十六进制颜色值RGB颜色值red红色#FF0000rgb(255,0,0)blue蓝色#0000FFrgb(0,0,255)green绿色#008000rgb(0,128,0)yellow黄色#FFFF00rgb(255,255,0)black黑色#000000rgb(0,0,0)white白色#FFFFFFrgb(255,255,255)gray灰色#808080rgb(128,128,128)orange橙色#FFA500rgb(255,165,0)purple紫色#800080rgb(128,0,128)pink粉色#FFC0CBrgb(255,192,203)brown棕色#A52A2Argb(165,42,42)transparent透明色rgba(0,0,0,0) 4.2 text-align属性:

text-align 是 HTML 中的一个属性，用于设置文本的水平对齐方式。它有以下几个值：

属性值说明left文本左对齐right文本右对齐center文本居中对齐justify文本两端对齐initial默认值，根据浏览器的默认样式设置inherit继承父元素的样式代码演示： DOCTYPE html> text-align 这是一个左对齐的文本。这是一个右对齐的文本。这是一个居中对齐的文本。这是一个两端对齐的文本。

效果图：在这里插入图片描述

4.3 text-decoration属性属性值说明none无装饰效果，默认值underline下划线overline上划线line-through删除线blink闪烁效果（仅适用于非交互式元素） inherit继承父元素的样式代码演示： DOCTYPE html> text-decoration 默认的文本无装饰效果(a标签默认是有下划线的用none清除它) 这是有下划线的文本。这是有上划线的文本这是有删除线的文本这是有闪烁效果的文本,但浏览器不会显示

效果：在这里插入图片描述

4.4 vertical-algin：设置元素垂直对齐的方式

vertical-align是一个CSS属性，用于指定行内元素或表格单元格中内容的垂直对齐方式。它可以应用于行内元素、表格单元格或表格单元格中的内容。

下面是一些常见的vertical-align的取值：

属性值说明baseline基线对齐，默认值top顶部对齐bottom底部对齐middle居中对齐代码演示： DOCTYPE html> vertical-algin .div1 img{ vertical-align: baseline; /*默认对齐*/ } .div2 img{ vertical-align: top; /*顶部对齐*/ } .div3 img{ vertical-align: bottom; /*底部对齐*/ } .div4 img{ vertical-align: middle; /*居中对齐*/ } 图片与文本默认对齐图片与文本顶部对齐图片与文本底部对齐图片与文本居中对齐

效果：在这里插入图片描述

4.5 text-shadow 文本阴影：

语法：

text-shadow : color x-offset y-offset blur-radius; /* 阴影颜色 X轴位移 Y轴位移阴影模糊半径*/

说明：

x-offset参数：阴影水平偏移距离，单位可以是px、em、百分比。 y-offset参数：阴影垂直偏移距离。 blur-radius参数：模糊距离，单位可以是px、em、百分比。 color参数：阴影颜色。

代码演示：

DOCTYPE html> vertical-algin h1{ color: #fff; text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 40px #ff00de, 0 0 70px #ff00de; /* 阴影颜色 X轴位移 Y轴位移阴影模糊半径*/ } h2{ color: black; } 文本阴影默认文本

效果：在这里插入图片描述

在这篇文章中，我们详细介绍了如何使用CSS来美化字体文本。从基本的字体属性设置，到更复杂的文本效果，如阴影、文字间距、行高等，我们都一一进行了讲解。希望这些内容能帮助你提升网页的视觉效果，让你的设计更加出色。谢谢观看

【本文地址】

公司简介

联系我们