文本属性与文本样式

搬砖老金牛

于 2022-03-28 15:39:09 发布

阅读量296

点赞数

CC 4.0 BY-SA版权

分类专栏： html和css 文章标签： html5 css

本文链接：https://blog.youkuaiyun.com/qq_48968230/article/details/123794849

html和css 专栏收录该内容

12 篇文章

订阅专栏

一、文本属性与样式

1、字体颜色

color:#333;

2、文字大小

font-size:20px;

3、字体

font-family: "宋体";

4、字重

font-weight: 100-500(常规字体)/600-900（字体加粗）；

normal(常规字体)/bold/bolder(比较级强调作用)

5、字体样式

font-style: oblique; 文本倾斜

font-style:normal; 正常（不倾斜）

6、行高

line-height:1.5em; 1.5倍行间距

7、首行缩进

text-indent: 32px;

8、文本修饰

text-decoration： overline; （上划线）

text-decoration：line-through （删除线）

text-decoration：underline（下划线）

text-decoration：none（没有文本修饰）

9、字间距：控制英文字母与英文字母，汉字与汉字之间的间距

letter-spacing：10px;

控制英文单词与英文单词之间的间距

word-spacing：10px；

10、控制英文的输出

text-transform：capitalize；（首字母大写）

text-transform：uppercase；（全部大写）

text-transform：lowercase；（全部小写）

11、文字排版

text-align：center；（文本居中）

text-align：left；（文本居左）

text-align：right；（文本居右）

实操：

test2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本声明</title>
		<!-- 链接css样式 -->
		<link rel="stylesheet" type="text/css" href="css/test2.css"/>
	</head>
	<body>
		<div class="box">
			<h3>纳兰性德</h3>
			<p>
				人生若只如初见，何必秋风悲画扇。
			</p>
			<p class="p2">
				等闲变却故人心，却道故人心易变。
			</p>
			<p>
				海内存知己，天涯若比邻。
			</p>
			<p>
				知否知否，应是绿肥红瘦。
			</p>
			<p>
				I love you!
			</p>
			<a href="#">百度</a>
		</div>
		
	</body>
</html>

test2.css

*{
	padding:0;
	margin:0;
}

.box{
	width:400px;
	height:500px;
	border:5px solid #ccc;
	margin:0 auto;  /* 元素居中 */
}

.box p{
	/* 字体颜色 */
	color:#333;
	/* 文字大小 */
	font-size:20px;
	/* 字体 */
	font-family: "宋体";
	/* 字重 */
	/* font-weight: 100-500(常规字体)/600-900（字体加粗）；normal(常规字体)/bold/bolder(比较级强调作用) */
	font-weight:800;
	/* 字体样式 */
	font-style: oblique;   /* 倾斜 */
	/* 行高 */
	line-height:1.5em;   /* 1.5倍1.5倍行间距 */
	/* 首行缩进 */
	text-indent: 32px;
	/* 文本修饰 */
	/* text-decoration: overline (上划线)
	line-through(删除线) underline（下划线） none(没有文本修饰) */
	text-decoration: underline;
	/* 字间距 */
	letter-spacing: 10px;   /* 汉字与英文字母 */
	word-spacing: 10px;       /* 英文单词 */
	/* 控制英文的输出 */
	/* text-transform: 首字母大写capitalize, 全部大写uppercase,全部小写lowercase */
	text-transform: capitalize;
}



.box h3{
	font-weight:300;  /* 字体取消加粗 */
	/* 文字排版 left right center */
	text-align: center; /* 文本居中 */
}

.box .p2{
	font-style: normal;   /* 取消倾斜 */
}

.box a{
	text-decoration: none;   /* 取消链接的下划线 */
}

.box a:hover{
	text-decoration: underline;  /* 鼠标划过出现下划线 */
}

运行效果：

二、练习

homework.html （完善前面的练习，html中未作修改）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大练习</title>
		<link rel="stylesheet" type="text/css" href="css/homework.css"/>
	</head>
	<body>
		<div class="qyyf_box">
			<div class="yftx_item">
				<h3>研发体系</h3>
				<img src="img/巨星科技_03.png" alt="">
				<p>巨星的核心竞争力之一就是创新能力，公司目前研发部门主要有：手工具开发部、电动工具开发部、产品造型部、模具中心、加工中心、产品快速成型中心、检测和实验中心。</p>
				<a href="#">查看更多</a>
			</div>
			
			<div class="yftx_item">
				<h3>研发体系</h3>
				<img src="img/巨星科技_03.png" alt="">
				<p>巨星的核心竞争力之一就是创新能力，公司目前研发部门主要有：手工具开发部、电动工具开发部、产品造型部、模具中心、加工中心、产品快速成型中心、检测和实验中心。</p>
				<a href="#">查看更多</a>
			</div>
			
			<div class="yftx_item">
				<h3>研发体系</h3>
				<img src="img/巨星科技_03.png" alt="">
				<p>巨星的核心竞争力之一就是创新能力，公司目前研发部门主要有：手工具开发部、电动工具开发部、产品造型部、模具中心、加工中心、产品快速成型中心、检测和实验中心。</p>
				<a href="#">查看更多</a>
			</div>
		</div>
	</body>
</html>

homework.css（对文本样式做了修改）

*{
	padding:0;
	margin:0;
}

.qyyf_box{
	width:1200px;  /* 必须首先给父元素盒子一个宽度，而后才可以命令盒子自适应水平居中 */
	margin: 0 auto;
}

.yftx_item{
	width:300px;
	/* 浮动:让元素在画面中进行水平排版 */
	float: left;  
	background-color:#4a98ef;
	margin-left:30px;
	padding:20px 30px;/* 内边距:上下 左右; */
}

.yftx_item h3{
	/* 对"研发体系"加上边框 */
	border-bottom: 2px solid #fff;
	margin-bottom: 20px;
	color:#fff;   /* 文字颜色 */
}

.yftx_item img{
	display: block;  /* 行元素转为块元素 */
	width:100%;
}

.yftx_item p{
	color:#fff;  /* 文字颜色 */
	font-size:14px;  /* 文字大小 */
	line-height:1.5em;  /* 行高 */
	margin-top:10px;   /* p标签外边距(上方) */
	text-indent: 20px;  /* 首行缩进 */
}

.yftx_item a{
	color:#cee0f5;
	font-size: 14px;
	float:right;  /* 向右浮动 */
	text-decoration: none;  /* 去掉下划线 */
	margin-top:20px;
}

运行效果：