【CSS学习笔记四】字体和链接

最新推荐文章于 2024-09-04 20:50:01 发布

思索与猫

最新推荐文章于 2024-09-04 20:50:01 发布

阅读量415

点赞数

分类专栏： CSS学习文章标签： CSS 字体链接

本文链接：https://blog.youkuaiyun.com/qq_28997735/article/details/98157305

版权

CSS学习专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何使用CSS设置字体样式，包括字体系列、样式、大小，以及如何为链接应用不同状态的样式，如颜色、下划线和背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.字体

1.字形

有两种类型的字体名称

通用字体系列：拥有相似外观的字体系统组合(如：Serif,字符在行的末端拥有额外的装饰)
特点字体系列：一个特定的字体系列(如 “Times” 或 “Courier”)

使用font-family属性设置文本的字体系列
参考值应该使用多个用作后备，如果浏览器不支持第一种字体，将尝试第二种
语法：

p{font-family:"宋体", Times, serif;}

注意： 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。多个字体系列是用一个逗号分隔指明。

2.字体样式

使用font-style属性设置字体样式
参考值：

normal：正常
italic：斜体
oblique：文字朝一边倾斜

p.normal{font-style:normal;}
p.italic{font-style:italic;}
p.oblique{font-style:oblique;}

3.字体大小

使用font-size属性设置，参考值为像素

例如：

p{font-size:12px;}

也可以使用em来设置
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
1em的大小与默认相等，也就是1em = 16px

可以通过下面这个公式将像素转换为em：px/16=em
例如：

h1 {font-size:2.5em;}			 /* 40px/16=2.5em */
h2 {font-size:1.875em;} 		 /* 30px/16=1.875em */
p {font-size:0.875em;} 			 /* 14px/16=0.875em */

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			h1{font-size:2.5em;}
			h2{font-size:1.875em;}
			p
			{
				font-family:"Times New Roman", Times, serif;
				font-size:12px;
			} 
			p.normal{font-style:normal;}
			p.italic{font-style:italic;}
			p.oblique{font-style:oblique;}
		</style>
		<meta charset = "utf-8"/>
		<title>字体</title>
	</head>
	<body>
		<h1>我是最大标题</h1>
		<h2>我是第二大标题</h2>
		<p>我很普通</p>
		<p class = "normal">我也很普通</p>
		<p class = "italic">我歪了</p>
		<p class = "oblique">我也歪了</p>
	</body>
</html>

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

链接

1.链接的样式

链接的样式，可以用任何CSS属性(如颜色，字体，背景等)。
可以根据链接的状态显示不同的样式

a:link - 正常，还未被访问的链接
a:visited - 已被访问的链接
a:hover - 鼠标移在链接时
a:active - 鼠标点击链接的那一刻

注意： 顺序不能错误

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
顺序记忆：L(link)OV(visited)E and H(hover)A(active)TE,爱和恨

2.文本修饰

text-decoration主要用于删除下划线

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

3.背景颜色

同样，background-color主要用于指定链接颜色

a:link {background-color:yellow;}
a:visited {background-color:red;}
a:hover {background-color:green;}
a:active {background-color:black;}

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			a:link
			{
				color:blue;
				text-decoration:none;
				background-color:yellow;
			}
			a:visited
			{
				color:red;
				text-decoration:none;
				background-color:blue;
			}
			a:hover
			{
				color:green;
				text-decoration:underline;
				background-color:red;
			}
			a:active
			{
				color:black;
				text-decoration:underline;
				background-color:white;
			}
		</style>
		<meta charset = "utf-8"/>
		<title>链接</title>
	</head>
	<body>
		<a href = "https://blog.youkuaiyun.com/qq_28997735" target = "_blank" rel = "noopener noreferrer">前往我的博客</a>
	</body>
</html>

结果：

1.link状态
在这里插入图片描述
2.visited状态

3.hover状态

4.active状态