HTML + CSS - 1.CSS 字体样式和文本属性

最新推荐文章于 2022-10-19 08:37:46 发布

凡小多

最新推荐文章于 2022-10-19 08:37:46 发布

阅读量1k

点赞数 1

分类专栏： HTML+CSS 文章标签： css

HTML+CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

一、CSS 样式规则

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
在这里插入图片描述

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 内部。

① 属性值前面，冒号后面，保留一个空格
② 选择器（标签）和大括号中间保留空格

<head>
	<style>
		h4 {
			color: blue;
			font-size: 100px;
		}
	</style>
</head>

二、CSS 字体样式属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

1. font-size: 字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

在这里插入图片描述

1.1 以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小：

h1 {
  font-size: 40px;
}

px（像素）大小是我们网页的最常用的单位
现在网页普遍字号大小14+px, 谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

1.2 em 设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

1.3 使用百分比和 Em 的组合

在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

1.4 响应式字体大小 vw

文本大小将遵循浏览器窗口的大小

视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

h1 {
	font-size:10vw;
}

2. font-family: 字体

font-family属性用于设置字体。

网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p {
	font-family: "微软雅黑";
}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

div {
	font-family: Arial, "Microsoft Yahei", "微软雅黑";
}

常用技巧：

各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。
当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下5单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

3. font-weight: 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p { 
 font-weight: bold;
}

在这里插入图片描述

学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细

4. font-style: 字体风格

CSS 使用 font-style 属性设置文本的风格

p { 
 font-style: normal;
}

在这里插入图片描述

注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

5. font-variant: 字体变体

属性指定是否以 small-caps 字体（小型大写字母）显示文本

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

6. 字体复合属性

选择器{
font: font-style  font-weight  font-size/line-height  font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

6. 字体总结

在这里插入图片描述
谷歌字体：https://blog.csdn.net/iteye_5904/article/details/81863873
Google Fonts API
Google Font Directory

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

三、 CSS 文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

1. 文本颜色

color 属性用于定义文本的颜色。

div { 
 color: red;
}

color属性用于定义文本的颜色，其取值方式有如下3种：

预定义的颜色值，如red，green，blue等。
十六进制，如#FF0001(不可缩写)，#FF6600(可以缩写为：#F60)，#29D794等。开发中最常用的方式是十六进制
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

文本颜色和背景颜色

<!DOCTYPE html>
<html>
<head>
<style>


h1 {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h1>此标题是带黑色背景的白色文本</h1>

</body>
</html>

效果图:
在这里插入图片描述

2. line-height:行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

当 line-height = height 时, 文字垂直居中

3. 文本对齐

3.1 文本水平对齐

text-align 属性用于设置元素内文本内容的水平对齐方式。
在这里插入图片描述
当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的
text-align: justify; 对最后一行无效，若想单行设置或者多行最后一行有效可以添加伪类

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>text-align测试</title>
		<style>
			.clear {
				clear: both;
				overflow: hidden;
			}

			span {
				width: 100px;
				text-align: justify;
				float: left;
			}
			/* 使 text-align: justify; 单行有效 */
			span:after {
				display: inline-block;
				content: '';
				width: 100%;
				height: 0;
				overflow: hidden;
			}

			input {
				width: 150px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="clear">
				<span>姓名</span>：<input type="text">
			</div>
			<div class="clear">
				<span>曾用名</span>：<input type="text">
			</div>
			<div class="clear">
				<span>电话号码</span>：<input type="tel">
			</div>
		</div>
	</body>
</html>

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

3.2 文本方向（了解）

p {
	// 类似右对齐
	direction: rtl;
	// 文字逆序
	unicode-bidi: bidi-override;
}

3.3 垂直对齐

vertical-align 属性设置元素的垂直对齐方式。
在这里插入图片描述
作用: 清除图片下方的间隙

4. 装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
在这里插入图片描述

5. 文字间距

5.1 文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

p { 
 text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

5.2 字母间距（了解）

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

<!DOCTYPE html>
<html>
	<head>
		<style>
			.one {
				letter-spacing: 10px;
			}

			.two {
				letter-spacing: -3px;
			}
		</style>
	</head>
	<body>
		<p class="one">This is heading</p>
		<p>This is heading</p>
		<p class="two">This is heading</p>

	</body>
</html>

在这里插入图片描述

5.3 字间距（了解）

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

<!DOCTYPE html>
<html>
	<head>
		<style>
			.one {
				word-spacing: 10px;
			}

			.two {
				word-spacing: -3px;
			}
		</style>
	</head>
	<body>
		<p class="one">This is heading</p>
		<p>This is heading</p>
		<p class="two">This is heading</p>

	</body>
</html>

在这里插入图片描述

6. 颜色半透明（CSS3）

color: rgba(r, g, b, a);  /* a 0~1 之间  4个参数 不能省略 */

color: rgba(255, 0, 0, .3);

7. 文字阴影

text-shadow: 水平位置垂直位置模糊距离阴影颜色;

在这里插入图片描述

文字凹凸效果

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: #ccc;
			}

			div {
				color: #ccc;
				font: 700 80px "微软雅黑";
			}

			.one {
				/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
				text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
			}

			.two {
				/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
				text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
			}
		</style>
	</head>
	<body>
		<div class="one">我是凸起的文字</div>
		<div class="two">我是凹下的文字</div>
	</body>
</html>