CSS学习Day4之字体属性和文本属性

最新推荐文章于 2024-07-24 11:39:30 发布

Ishaq Li

最新推荐文章于 2024-07-24 11:39:30 发布

阅读量181

点赞数

分类专栏： CSS学习文章标签： css

本文链接：https://blog.csdn.net/m0_50847715/article/details/111563641

版权

CSS学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

字体属性

font-family（字体类型）

<!DOCTYPE html>
<html>
<head>
	<title>字体属性</title>
	<style type="text/css">
		body{
			font-family:"微软雅黑","Arial","Hoefler Text";
		}
	</style>
</head>
<body>
	LXG
</body>
</html>

注意：用户要想能显示出此字体，首先要有安装此字体，如果没有，我们可以设置备用字体（可用“，”隔开）

font-size（字体大小）
```
<!DOCTYPE html>
<html>
<head>
	<title>字体属性</title>
	<style type="text/css">
		body{
			font-size:20px;
		}
	</style>  
</head>
<body>
	LXG
</body>
</html>
```
注意：
- 浏览器默认16px
- 像素单位：
  - px：是一个绝对单位。一旦设置了值，不管网页怎么变化，都始终如一
  - emx：是一个相对单位。当前某块区域的字体大小，比如给p标签设置了字体大小20px，那么1em = 20px
  - rem：是一个相对单位。主要应用于移动端

color（字体颜色）

<!DOCTYPE html>
<html>
<head>
	<title>字体属性</title>
	<style type="text/css">
		body{
            /*1.单词表示法：
            red,green,yellow,purple*/
			/*2.rgb取值范围：0~255
			color:rgb(255,0,255);*/
			/*3.rgba：
            a指alpha,即透明度，取值范围：0~1
			color: rgba(255,0,0,0.4);*/
			/*4.十六进制表示法：
			color:#FF6700;
            FF转换为十进制为255
            67转换为十进制为103
            0转换为十进制为0
            即转换为了rgb*/
		}
	</style>  
</head>
<body>
	LXG
</body>
</html>

font-style（字体样式）

<!DOCTYPE html>
<html>
<head>
	<title>字体属性</title>
	<style type="text/css">
		body{
			font-style:italic;
		}
	</style>
</head>
<body>
	LXG
</body>
</html>

注意：

normal表示默认的字体
italic表示斜体

font-weight（字体粗细）

<!DOCTYPE html>
<html>
<head>
	<title>字体属性</title>
	<style type="text/css">
		body{
			font-weight:bold;
		}
	</style>
</head>
<body>
	LXG
</body>
</html>

注意：

bold：表示加粗
可以取数值：100~900，默认为400，小于400为更细，大于400为更粗

文本属性

text-decoration（文本修饰）

<!DOCTYPE html>
<html>
<head>
	<title>文本属性</title>
	<style type="text/css">
		body{
			text-decoration:none;
		}
	</style>
</head>
<body>
	LXG
</body>
</html>

注意：

text-decoration:
- none：无线，可清除a标签的下划线
- underline：下划线
- overline：上划线
- line-through：删除线
- 制作淘宝满减男鞋示例效果:

<!DOCTYPE html>
<html>
<head>
	<title>文本属性：制作淘宝满减男鞋示例效果</title> 
	<style type="text/css">
		a{
			text-decoration: none;
			color: #333;
			font-size: 14px;
		}
		a:hover{
			color:#FD8308;
			text-decoration: underline;
		}
		a:active{
			color:purple;
		}
		.box p span{
			text-decoration: line-through;
		}
	</style>
</head>
<body>
	<div class="box">
		<a href="https://detail.tmall.com/item.htm?spm=a230r.1.14.41.1a5772cdqALbLN&id=625808800744&ns=1&abbucket=1">
			阿迪达斯官网 三叶草 ZX 2K BOOST男子经典运动鞋
		</a>
		<p>￥<span>1199.00</span></p>
		<span>￥1079.00</span>
	</div>
</body>
</html>

text-indent（首行缩进）

<!DOCTYPE html>
<html>
<head>
	<title>文本属性</title> 
	<style type="text/css">
		p{
			text-indent: 32px;
		}
	</style>
</head>
<body>
	<p>
		狮子（daolion)是唯一的一种雌雄两态的猫科动物，是地球上力量强大的猫科动物之一，狮子生存的环境里，其他猫科都处于劣势。漂亮的外形、威武的身姿、王者般的力量和梦幻般的速度完美结合，赢得了“万兽之王”的美誉。
	</p>
</body>
</html>

注意：当字体大小发生变化后，首行缩进需要跟随字体大小来设置，因此建议使用em

line-height（行高）

<!DOCTYPE html>
<html>
<head>
	<title>文本属性</title> 
	<style type="text/css">
		p{
			line-height:32px;
		}
        div{
            line-height:32px;
            background-color:red;
        }
	</style>
</head>
<body>
	<p>
		狮子（daolion)是唯一的一种雌雄两态的猫科动物，是地球上力量强大的猫科动物之一，狮子生存的环境里，其他猫科都处于劣势。漂亮的外形、威武的身姿、王者般的力量和梦幻般的速度完美结合，赢得了“万兽之王”的美誉。
	</p>
    <div>
        狮子生存的环境里，其他猫科都处于劣势。
    </div>
</body>
</html>

注意：

可以用背景色来查看行高
一般，字体大小不能超过行高，超过会发生溢出

letter-spacing（中文字间距）

<!DOCTYPE html>
<html>
<head>
	<title>文本属性</title> 
	<style type="text/css">
		p{
            text-indent:42px;
			line-height:32px;
            letter-spacing:5px;
		}
	</style>
</head>
<body>
	<p>
		狮子（daolion)是唯一的一种雌雄两态的猫科动物，是地球上力量强大的猫科动物之一，狮子生存的环境里，其他猫科都处于劣势。漂亮的外形、威武的身姿、王者般的力量和梦幻般的速度完美结合，赢得了“万兽之王”的美誉。
	</p>
</body>
</html>

注意：

设置首行缩进的时候要考虑文字间距
只对中文起作用

word-spacing（单词间距）

<!DOCTYPE html>
<html>
<head>
	<title>文本属性</title> 
	<style type="text/css">
		p{
            word-spacing:10px;
		}
	</style>
</head>
<body>
	<p>
        Hello World
	</p>
</body>
</html>

注意：只对单词起作用

text-align（文本对齐方式）

<!DOCTYPE html>
<html>
<head>
	<title>文本属性</title>
	<style type="text/css">
        div{
            text-align:center;
        }
	</style>
</head>
<body>
	<div>
        狮子（daolion)是唯一的一种雌雄两态的猫科动物，是地球上力量强大的猫科动物之一，狮子生存的环境里，其他猫科都处于劣势。漂亮的外形、威武的身姿、王者般的力量和梦幻般的速度完美结合，赢得了“万兽之王”的美誉。
    </div>
</body>
</html>

注意：

text-align:
- center：文字水平居中显示（使用最多）
- right：文字右对齐
- left：文字左对齐

font（综合属性）

<!DOCTYPE html>
<html>
<head>
	<title>文本属性</title>
	<style type="text/css">
        div{
            font:20px/3 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB",Heiti SC","WenQuanYi Micro Hei",sans-serif;
        }
	</style>
</head>
<body>
	<div>
        狮子（daolion)是唯一的一种雌雄两态的猫科动物，是地球上力量强大的猫科动物之一，狮子生存的环境里，其他猫科都处于劣势。漂亮的外形、威武的身姿、王者般的力量和梦幻般的速度完美结合，赢得了“万兽之王”的美誉。
    </div>
</body>
</html>

注意：

20px：字体大小
3：行高和字体大小之比
接着是字体类型

Ishaq Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习Day4之字体属性和文本属性

字体属性font-family（字体类型）<!DOCTYPE html><html><head> <title>字体属性</title> <style type="text/css"> body{ font-family:"微软雅黑","Arial","Hoefler Text"; } </style></head><body> LXG</body>
复制链接

扫一扫

专栏目录