Web前端开发笔记——第三章 CSS语言第三节文本字体背景超链接样式属性

Posted 2021-09-15 晚风(●•σ )

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端开发笔记——第三章 CSS语言第三节文本字体背景超链接样式属性相关的知识，希望对你有一定的参考价值。

一、CSS文本属性

以下是一些常用的文本属性，比如设置文本颜色、行高、字号等等。
color用于描述文本的颜色，后跟颜色；
letter-spacing用于描述字符间距，后跟px；
line-height用于描述行高，后跟px、em或百分比；
text-align用于描述文本的对齐，后跟center、left、right、justify；
text-indent用于描述文本的首行缩进，后跟em；
text-decoration用于对文本进行装饰线，后跟overline、line-through、underline、none分别表示处于文字上方、中部、下方和去除超链接下划线，其中line-through也可以作为删除线。
例如，下列代码中，设置文本颜色为紫色、行高为2em、字符间距为2px、首行缩进2em：
css文件代码：

p{
	color: purple;
	line-height: 2em;
	letter-spacing: 2px;
	text-indent: 2em;
}

html文件代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
		<p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
	</body>

</html>

运行结果如下：

二、CSS字体属性

（一）常用文本字体样式属性

以下是一些常用的文本字体样式设置，比如设置文本的字号、字体等等。
font用于设置所有字体属性，后跟bold表示加粗、italic表示斜体、px或字体类型；
font-size用于描述文本的字号，后跟px或百分比；
font-family用于描述文本的字体样式，后跟字体类型；
font-style用于描述文本斜体样式，后跟italic；
font-weight用于描述文本的粗体样式，后跟bold。

（二）设置整体font属性

当然也可以将所有的字体设置放在一个font属性内，这样方便简化字体设置。
例如，下列代码，设置文本为斜体加粗，字号大小为20px，行高为2em，字体类型为幼圆：
css文件代码：

p{
	font: italic bold 20px/2em '幼圆';
}

html文件代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
		<p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
	</body>

</html>

运行结果如下：

三、CSS背景属性

CSS背景属性代码用于定义HTML标签的背景，例如定义背景颜色、背景图片等等。

（一）背景颜色

通过background-color属性设置背景的颜色，可以通过颜色的英文名称、RGB或十六进制来表示颜色。
例如，下列代码，设置文本为斜体加粗，字号大小为20px，行高为2em，字体类型为幼圆：
css文件代码：

p {
	font: italic bold 20px/2em '幼圆';
	background-color: aquamarine;
}

#title_color {
	background-color: red;
}

html文件代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<h2 id="title_color">CSS</h2>
		<p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
		<p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
	</body>

</html>

运行结果如下：

（二）背景图片

通过background-image属性设置背景图片，它表示为background-image:url("")，url内部填写图片的相对路径，默认下图片是以平铺的方式重复显示，例如下图：
若除了设置了背景颜色，还设置了背景图片，则图片会覆盖背景颜色。
例如，下列代码，设置页面背景颜色为黑色以及背景图片，背景图片覆盖了背景颜色：
css文件代码：

body {
	background-color: black;
	background-image: url("../image/mountain.jpg")
}

html文件代码：

<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<h1>雪山</h1>
	</body>

</html>

运行结果如下：

（三）图片平铺方式

通过background-repeat属性设置背景图片的平铺方式，后跟repeat-x表示水平x轴方向平铺；
repeat-y表示纵向y轴方向平铺；
若不想使图片背景设置平铺，只展示图片正常大小，即使用no-repeat。
例如，下列代码，水平方向x轴方向平铺图片：
css文件代码：

body {
	background-image: url("../image/酒柜.png");
	background-repeat: repeat-x;
}

运行结果如下：
设置background-repeat: repeat-y，使图片纵向y轴方向平铺，如下：
css文件代码：

body {
	background-image: url("../image/酒柜.png");
	background-repeat: repeat-y;
}

运行结果如下：
设置background-repeat: no-repeat，不使用平铺，如下：
css文件代码：

body {
	background-image: url("../image/酒柜.png");
	background-repeat: no-repeat;
}

运行结果如下：

（四）图片位置

通过background-position属性设置图片在背景的位置情况，例如，下列代码，设置图片位于背景的右上角，即background-position: right top;：
css文件代码：

body {
	background-image: url("../image/酒柜.png");
	background-repeat: no-repeat;
	background-position: right top;
}

运行结果如下：

（五）设置整体背景属性

可以将所有的背景设置放在一个background内，这样方便设置整体背景属性，表示为background : 颜色图片相对路径填充方式。
例如，下列代码，设置整体背景属性：
css文件代码：

body {
	background: orangered url("../image/酒柜.png") no-repeat;
}

运行结果如下：

四、CSS伪类

伪类，简单的来说，就是对特定的HTML元素加上状态和属性。

（一）CSS超链接

在CSS中，超链接有四种状态，如下：
a:link表示未被访问的超链接；
a:visited表示已访问的超链接；
a:hover表示当鼠标停留在超链接上；
a:active表示当超链接被点击时；
像这种由a标签开头，冒号隔开，后面接状态的这种选择器称为伪类选择器。
要注意这四个的顺序，a:hover 必须放在 a:link 和 a:visited 之后，才是有效的，而a:active 必须放在 a:hover 之后，才是有效的。
例如，下列代码，设置不同的超链接点击效果：
css文件代码：

a.title1:link {
	color: aqua;
}

a.title2:visited {
	color: aqua;
}

a.title3:hover {
	color: aqua;
}

a.title4:active {
	color: aqua;
}

html文件代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<h2>文章栏目</h2>
		<p><a class="title1" href="#">计算机网络</a></p>
		<p><a class="title2" href="#">数据库原理与应用</a></p>
		<p><a class="title3" href="#">C++</a></p>
		<p><a class="title4" href="#">JAVA</a></p>
	</body>

</html>

运行结果如下：
当鼠标滑过设置的a:hover伪类选择器，即“C++”时，会有以下显示：
当鼠标点击设置的a:active伪类选择器，即“JAVA”时，会有以下显示：

（二）创建不同样式的伪类选择器

可以通过伪类选择器，进行一些不同样式的伪类选择器设置，比如可以设置当鼠标停留在超链接上时，其字号放大和颜色更改、改变背景颜色、改变字体类型、对文字进行修饰等等。
例如，下列代码，当鼠标停留在超链接上，文字放大且变为橘色：
css文件代码：

a {
	font-size: 15px;
	text-decoration: none;
}

a:hover {
	font-size: 20px;
	color: orange;
}

html文件代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<h2>文章栏目</h2>
		<p><a href="#">计算机网络</a></p>
		<p><a href="#">数据库原理与应用</a></p>
		<p><a href="#">C++</a></p>
		<p><a href="#">JAVA</a></p>
	</body>

</html>