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

最新推荐文章于 2024-08-21 14:25:06 发布

2301_80263923

最新推荐文章于 2024-08-21 14:25:06 发布

阅读量2.9k

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_80263923/article/details/135217692

版权

一、为什么使用CSS

有效的传递页面信息

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

二、span标签的作用

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

三、字体样式：

属性名	含义	举例
font-family	设置字体类型	font-family:"楷体"
font-size	设置字体大小	font-size：18px
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold
font	在一个声明中设置所有字体属性	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
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

代码演示：

<span style="font-family: 宋体">宋体</span><br>
<span style="font-family: \96B6\4E66">Unicode 编码(隶书)</span><br>
<span style="font-family: MingLiU">MingLiU(明细体)</span>

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

3.2 字体大小 font-size属性

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

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

3.3 字体风格 font-style 属性

语法：

font-style: 值;

属性值：

属性值	说明
normal	默认值，正常
italic	斜体
oblique	斜体

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            font-style: italic;
        }
        p{
            font-style: oblique;
        }
        .p2{
            font-style: normal;  /*p2内容原来是斜体 现在是默认*/
        }

    </style>
</head>
<body>
<h1>清平乐</h1>
<p class="p1">年年雪里，常插梅花醉，授尽梅花无好意，赢得满衣清泪! </p>
<p class="p2">今年海角天涯，萧萧两墨生华。看取晚来风势，故应难看梅花</p>
</body>
</html>

效果：

在这里插入图片描述

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、#0000FF
RGB：十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量正整数的取值为0～255 例：rgb(255,0,0)
RGBA：在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1 rbga(110,0,0,.5)

使用语法：

<!--行外：-->
选择器{
color: 颜色值
}
<!--行内：-->
<标签 style="color:颜色值">文本内容 </标签>

css常用色：

英文	中文	十六进制颜色值	RGB颜色值
red	红色	#FF0000	rgb(255,0,0)
blue	蓝色	#0000FF	rgb(0,0,255)
green	绿色	#008000	rgb(0,128,0)
yellow	黄色	#FFFF00	rgb(255,255,0)
black	黑色	#000000	rgb(0,0,0)
white	白色	#FFFFFF	rgb(255,255,255)
gray	灰色	#808080	rgb(128,128,128)
orange	橙色	#FFA500	rgb(255,165,0)
purple	紫色	#800080	rgb(128,0,128)
pink	粉色	#FFC0CB	rgb(255,192,203)
brown	棕色	#A52A2A	rgb(165,42,42)
transparent	透明色		rgba(0,0,0,0)

4.2 text-align属性:

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

属性值	说明
left	文本左对齐
right	文本右对齐
center	文本居中对齐
justify	文本两端对齐
initial	默认值，根据浏览器的默认样式设置
inherit	继承父元素的样式

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-align</title>
</head>
<body style="height: 200px;width: 300px"> <!-给网页设置宽高--->
<p>这是一个左对齐的文本。</p>
<p style="text-align: right;">这是一个右对齐的文本。</p>
<p style="text-align: center;">这是一个居中对齐的文本。</p>
<p style="text-align: justify;">这是一个两端对齐的文本。</p>
</body>
</html>

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

4.3 text-decoration属性

属性值	说明
none	无装饰效果，默认值
underline	下划线
overline	上划线
line-through	删除线
blink	闪烁效果（仅适用于非交互式元素）
inherit	继承父元素的样式

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-decoration</title>
</head>
<body style="height: 200px;width: 300px"> <!-给网页设置宽高--->
<p ><a href="#" style="text-decoration: none">默认的文本无装饰效果(a标签默认是有下划线的 用none清除它)</a></p>
<p style="text-decoration: underline;">这是有下划线的文本。</p>
<p style="text-decoration: overline">这是有上划线的文本</p>
<p style="text-decoration: line-through">这是有删除线的文本</p>
<p style="text-decoration: blink ">这是有闪烁效果的文本,但浏览器不会显示</p>
</body>
</html>

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

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

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

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

属性值	说明
baseline	基线对齐，默认值
top	顶部对齐
bottom	底部对齐
middle	居中对齐

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertical-algin</title>
    <style>

        .div1 img{
            vertical-align: baseline;   /*默认对齐*/
        }
        .div2 img{
            vertical-align: top;         /*顶部对齐*/
        }
        .div3 img{
            vertical-align: bottom;       /*底部对齐*/
        }
        .div4 img{
            vertical-align: middle;       /*居中对齐*/
        }
    </style>
</head>
<body>
<div class="div1"><img src="../image/1.jpg" alt="未知图片"  height="108px"width="108px">图片与文本默认对齐</div>
<div class="div2"><img src="../image/1.jpg" alt="未知图片"  height="108px"width="108px">图片与文本顶部对齐</div>
<div class="div3"><img src="../image/1.jpg" alt="未知图片"  height="108px"width="108px">图片与文本底部对齐</div>
<div class="div4"><img src="../image/1.jpg" alt="未知图片"  height="108px"width="108px">图片与文本居中对齐</div>
</body>
</html>

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

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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertical-algin</title>
    <style>
        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;
        }
    </style>
</head>
<body>
<h1>文本阴影</h1>
<h2>默认文本</h2>
</body>
</html>