CSS3文本属性

最新推荐文章于 2024-10-15 15:24:52 发布

时过变倾

最新推荐文章于 2024-10-15 15:24:52 发布

阅读量74

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/SOLDIER_ON/article/details/134346463

版权

本文介绍了CSS中的四个关键特性：text-shadow用于添加文本阴影效果，word-wrap控制长单词换行，@font-face用于自定义字体，text-overflow处理溢出文本的显示。通过实例展示了如何在HTML中应用这些CSS属性。

摘要由CSDN通过智能技术生成

第1关：text-shadow属性

text-shadow属性给文本加上阴影

语法
选择器{text-shadow：h-shadow v-shadow blur color；}

h-shadow:用于设置水平阴影的距离，
v-shadow:用于设置垂直阴影的距离，
blur:用于设置模糊半径，
color:用于设置阴影颜色

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
/**********begin*************/
text-shadow:5px 5px 5px #FF0000;
/**********end*************/
}
</style>
</head>
<body>

<h1>文本阴影效果！</h1>

</body>
</html>

第2关：word-wrap标签的使用

word-wrap属性给长单词或者url地址换行

语法
选择器{word-wrap：属性值；}

属性值取值有两种：

normal：默认值。只在允许的断字点换行 break-word：
在长单词或者url地址内部进行换行

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style>
			p {
				width: 150px;
				height: 300px;
				border: 1px solid red;
				/**********begin****************/
                word-wrap:break-word;   
				/**********end****************/
			}
		</style>
	</head>

	<body>
		<p>
			<span>网上参考视频：</span>

			<span>1、mooc视频：5min  </span> https://www.icourse163.org/learn/HBRJ-1449472161?tid=1452514521#/learn/content?type=detail&id=1222023503&sm=1

			<span>2、传智播客视频：</span> http://tch.ityxb.com/textbook/video/b14262735ba74d8aa47ac1da40c9809b?point=3a32acf5d1b011e68f8b000c29cbfd49
		</p>

	</body>

</html>

第3关：@font-face的使用

@font-face{
font-family:字体名称;
src:字体路径;
}
font-family用于指定该服务器字体的名称，该名称可以随意定义；
src属性用于指定该字体文件的路径。

通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。
使用服务器字体的步骤如下。
（1）下载字体，并存储到相应的文件夹中。
（2）使用@font-face属性定义服务器字体。
（3）对元素应用“font-family”字体样式。

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>服装推广软文</title>
		<style type="text/css">
			     /**引入LTCH.TTF兰亭方正粗黑**/
                 @font-face {
				font-family:LTCH;       /*服务器字体名称*/
		        src:url(font/LTCH.TTF); /*服务器字体名称*/
					}
				
                /**引入FZJZJW.TTF剪纸字体**/
                 @font-face {
               font-family:jianzhi;       /*服务器字体名称*/
		        src:url(font/FZJZJW.TTF); /*服务器字体名称*/
               }
			.one .a {
				/**设置为FZJZJW.TTF剪纸字体**/
				/**************begin****************/
                 font-family:LTCH;
				/**************end****************/
				font-size: 48px;
				color: #333;
			}
			
			.one .b {
				/**设置为LTCH.TTF兰亭方正粗黑**/
				/**************begin****************/
				font-family:jianzhi;
				/**************end****************/
				font-size: 58px;
				color: #4c9372;
			}
		</style>

	</head>

	<body>
		<p class="one"><strong class="a">NO.3</strong><strong class="b">BUTTERFLY</strong></p>

	</body>

</html>

第4关：text-overflow的使用

text-overflow实现溢出文本的处理方式

选择器{text-overflow：属性值；}
在上面的语法格式中，text-overflow属性的常用取值有两个，具体解释如下。
● clip：修剪溢出文本，不显示省略标记“…”。
● ellipsis：用省略标记“…”标示被修剪文本，省略标记插入的位
置是最后一个字符
整体可以得出设置省略标记标示溢出文本的具体步骤如下。
（1）为包含文本的对象定义宽度。
（2）应用“white-space：nowrap；”样式强制文本不能换行。
（3）应用“overflow：hidden；”样式隐藏溢出文本。
（4）应用“text-overflow：ellipsis；”样式显示省略标记。
注意： 这三个样式必须同时使用，缺一不可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>text-overflow的使用</title>
		<style type="text/css">
			p{
				width:200px;
				height: 300px;
				border: 3px solid #FF2200;
				/*****begin***************/
				white-space: nowrap;
                overflow: hidden;
                text-overflow:ellipsis;
				/*****end***************/
			}
		</style>
	</head>
	   <p>国家卫健委：昨日新增确诊45例，其中境外输入44例，本土病例1例</p>
	<body>
	</body>
</html>