CSS - 前端 | Mi Manchi = yuan = Whatever is worth doing at all is worth doing well

# CSS

# 基本概念

CSS (Cascading Style Sheets) 即层叠样式表，它是一种用来为结构化文档（例如 HTML 文档或 XML 应用）添加样式的计算机语言，目前由 W3C 定义和维护。

在前端网页开发中，我们使用 CSS 来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。

所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。

基本的 CSS 语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<style type="text/css">
	body {
	background-color: teal;
	}
	h1 {
	color:white;
	font-size: 36px;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<h1>CSS让网页样式更丰富</h1>
	</body>
	</html>

我们在 HTML 文档的 <head> 元素中，加入了 <style> 元素，设置其属性 type 为 text/css，表示此处内容为 CSS。

我们在此 CSS 代码中，指定了：

body 背景颜色为蓝绿色 (teal)；
h1 标题的字体颜色为白色 (white)，字体大小为 36px 并且在网页中居中对齐。

# 基础语法

由上面的实例，我们可以看出 CSS 语法主要包括两部分：选择器和声明。

基本格式如下： 选择器 {声明1}

# 选择器

选择器用于指定我们要修改的 HTML 元素。例如，在上述实例中，body 和 h1 就是选择器。

# 声明

通过声明，我们定义要改变的元素样式。声明由属性和值构成，包含在花括号中，基本格式如下： {属性: 值;}

例如，在上述实例中：

{background-color: teal;}

这一声明，指定了 body 元素的背景颜色为蓝绿色 (teal)。

同样的，我们对 h1 添加了多行声明：

	{
	/* 声明代表`h1`的字体颜色设置为白色*/
	color: white;
	/* 字体大小(font-size)为36px */
	font-size: 36px;
	/* 文字居中方式(text-align)为居中 */
	text-align: center;
	}

在平时开发网站时，建议每个声明通常单独列为一行，有助于阅读。当网站发布时，可以使用工具压缩，将多行声明写在一行，使得 CSS 文件大小更小，加载速度更快。

提示：

语句最后的分号可以不写。如果多个声明写在一行，就必须书写。一般情况下，建议都书写。

# 样式引入方式

内部样式表：如同之前实例中所示，在文档头部中引入；

外部样式表：通过外部文件引入；

内联样式：直接在特定元素中引入。

# 内部样式表

首先，对于内部样式表，书写的方式是直接在 HTML 文件的头部，添加 <style type="text/css"> </style> 元素。

具体举例如下：

	<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<style type="text/css">
	/* 样式添加在这里 */
	</style>
	</head>

# 外部样式表

第二种方式，是将 CSS 单独书写在文件后缀名为.css 的文件中。然后在 HTML 的 <head> 中添加 CSS 文件链接。

	<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	/* 引入外部的CSS文件 */
	<link rel="stylesheet" href="style.css" />
	</head>

属性 rel 的值 stylesheet 代表样式表，通常不变。href 属性值，代表文件的位置。与图像路径的链接方式类似，href 属性值的书写方式要根据具体的 CSS 文件位置。

从上面的标签中可以看出，标签的属性直接用空格分隔；而属性名、等号和值之间没有空格

在实际的项目中，推荐将样式表统一放在 CSS 文件夹中，使得项目结构更清晰，资源管理更容易。

# 内联样式

内联样式是指直接在标签内添加样式属性。

举例如下：

<p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p>

样式的各个属性之间用逗号分隔。

显示如下：

通用的书写格式：

	<tag style="样式表">
	<tag style="样式表"></tag>

# 使用哪一种样式表？

在实际开发过程中，通常建议使用第二种外联样式表的方式。

主要优点如下：

内容与样式分离；

易于开发和维护样式。

样式易于复用；

可在多个 HTML 文件中引入相同的样式文件。

加载更快。

如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取，而不再需要再一次访问服务器资源。

# 样式的优先级顺序

三种样式引入的优先级顺序是：

外部样式 < 内部样式 < 内联样式

也就是说，如果同时有三种样式的方式作用于同一元素，会优先的使用内联样式。

# 选择器

# 元素选择器

最常见和易理解的 CSS 选择器是元素选择器，又称为类型选择器。也就是将 HTML 文档中的元素，直接作为选择器使用。

例如对于 HTML 页面：

	<body>
	<h1>标题1</h1>
	<h2>标题2</h2>
	<p>普通段落中<a href="#">删除的引用。</a></p>
	</body>

使用元素选择器添加元素样式：

	<style type="text/css">
	html {color:black;}
	h1 {color:darkcyan;}
	h2 {color:lightSeaGreen;}
	p {color:grey;}
	a {text-decoration:line-through;}
	</style>

当我们指定一个元素，并设置样式属性之后，文档中该元素便会应用样式。例如，我们设置 p 元素的颜色为灰色 (grey)，在没有其他样式覆盖的情况下，文档中所有的 p 元素都将为灰色。

如果想要多种元素应用同一样式，可以直接使用组合元素选择器。将多个要应用样式的元素用逗号隔开，例如：

例如对于 HTML 页面：

	<body>
	<h1>组合选择器</h1>
	<p>组合选择器，可以将样式同时运用于多个元素。</p>
	</body>
	</html>

使用元素选择器添加元素样式：

	<style type="text/css">
	/* 组合元素选择器 */
	/* 将 `h1`、`p` 元素的颜色同时设置为灰色 */
	h1,p {color:grey;}
	</style>

注意：

多个元素之间的逗号是必不可少的，如果缺失了逗号将表示其他含义。

** 语法 **

	/单个元素选择器/
	元素 {样式声明}

	/组合元素选择器/
	元素1，元素2 {样式声明}

# 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。

例如，对于 HTML 页面:

	<body>
	<div class="main">
	<article class="news">
	<h1>地震自救指南</h1>
	<p>大的晃动时间约为1分钟左右。这时首先应顾及的是您自己与家人的人身安全。首先，在重心较低、且结实牢固的桌子下面躲避，并紧紧抓牢桌子腿。在没有桌子等可供藏身的场合，无论如何，也要用坐垫等物保护好头部。</p>
	</article>
	</div>
	</body>

在该页面中，我们将第一个 div 元素的 class 设置为 main，article 元素的 class 值设置为 news。通常设置 class 名字时，不要设置已有元素名，例如 p、articel。

之后，添加页面样式:

	<style type="text/css">
	.main {
	background-color: ivory;
	margin: 10px;
	}
	.news {
	padding: 10px;
	color: black;
	font-weight: bold;
	}
	p {
	color: grey;
	}
	</style>

与元素选择器不同，对同一类的元素应用样式，需要在类名前加上一个点号（ . ），然后书写相应的样式声明。

最后，样式应用的效果如图：

1658674924132

** 语法 **

所以，我们可以看出，类选择器的语法规则如下：

首先，将 html 中想要应用类样式的元素，指定类名；

	<元素名 class="指定的类名"></元素名>
	<元素名 class="指定的类名">

然后，书写相应类的样式；

.指定的类名 {样式声明}

# id 选择器

在使用 id 选择器时，使用的是关键字 id。对于上面类选择器的例子，用 id 选择器书写：

	<body>
	<h1 id="important">温馨提示</h1>
	<p>少一串脚印，多一份绿意。</p>
	</body>

在样式表中，指定对应 id 名元素的样式，使用 #符号，也称为棋盘号或井号。

	#important {
	color: red;
	font-weight: bold;
	}

** 语法 **

同理，我们可以看出，id 选择器的语法规则如下：

首先，将 html 中想要应用类样式的元素，指定 id 名。

	<元素名 id="指定的类名"></元素名>
	<元素名 id="指定的类名">

然后，书写相应类的样式。

#指定的类名 {样式声明}

# 类选择器与 id 选择器的区别

类选择器与 id 选择器类似，那么它们的区别是什么呢？什么情况下应该使用哪一种选择器呢？

它们最大的区别在于，在一个 HTML 文档中，可以为任意多个元素指定类，但 id 选择器只能使用一次，一个 id 只能运用于一个元素。

一般情况下，都推荐使用类选择器。而在一些特定情况下，我们才会建议使用 id 选择器。例如，通过 id 选择器在页面中定义锚，在编写 JavaScript 为指定的页面元素应用特殊行为时。

	/选择menu元素下的li子元素/
	#menu li {
	float: left;
	width: 70px;
	font-size: 1.2em;
	font-weight: lighter;
	}

# 字体颜色、类型和大小

一般而言，用于文本的 CSS 属性可以分为如下两类：

字体样式：用于字体的属性，包含字体类型、大小、粗细等；

文本布局风格：用于设置文本的间距以及其他布局功能的属性，包含设置字与字之间的空间，文本如何对齐等等。

在本关卡中，我们首先学习第一种字体样式属性。

# 字体颜色 color

字体最直观的属性之一即前景内容的颜色，我们通过 color 属性指定字体的颜色。例如：

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>字体颜色</title>
	<style type="text/css">
	p {font-size: 25px;}
	.main {color:lightslategray}
	.error {color: brown}
	.info {color:mediumseagreen}
	</style>
	</head>
	<body>
	<p class="main">这是一行段落。</p>
	<p class="error">这是一行段落。</p>
	<p class="info">这是一行段落。</p>
	</body>
	</html>

# 字体类型 font-family

如同印刷世界，网页中的字体类型也是丰富多样的，我们可以使用 font-family 属性定义文本的字体系列。

# 字体系列

CSS 中，有两种类型的字体系列：

通用字体系列 - 有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）；

特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）。

通过设置 HTML 表格中不同格的字体属性，页面表格直观展示了字体类型：

表格 HTML

	<body>
	<table>
	<thead>
	<tr>
	<th>通用字体系列</th>
	<th>字体系列</th>
	<th>描述</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td rowspan=2>Serif</td>
	<td class="times">This is Times New Roman font.</td>
	<td class="times">Serif字体中字符在行的末端拥有额外的装饰</td>
	</tr>
	<tr>
	<td class="georgia">This is Georgia font.</td>
	<td class="georgia">Serif字体中字符在行的末端拥有额外的装饰</td>
	</tr>
	<tr class="arial">
	<td>Sans-serif</td>
	<td>Arial Verdana</td>
	<td>Sans字体在末端没有额外的装饰</td>
	</tr>
	<tr>
	<td rowspan=2>Monospace</td>
	<td class="courier">This is Courier New font.</td>
	<td class="courier">所有的等宽字符具有相同的宽度</td>
	</tr>
	<tr>
	<td class="lucida">This is Lucida Console font.</td>
	<td class="lucida">所有的等宽字符具有相同的宽度</td>
	</tr>
	</tbody>
	</table>

使用 CSS 设置字体属性：

	.times {
	font-family: "Times New Roman";
	}
	.georgia {
	font-family: "Georgia";
	}
	.arial {
	font-family: "Arial";
	}
	.courier {
	font-family: "Courier New";
	}
	.lucida {
	font-family: "Lucida Console";
	}

不同类型字体的效果如下：

字体栈
在指定不同的字体类型时，通常情况下无法保证你想在你的网页上使用的字体都是可用的。所以，我们使用字体栈 (font stack) 给浏览器提供多种选择。例如：

font-family: "Trebuchet MS", Verdana, sans-serif;

使用字体栈时，浏览器从列表的第一个开始检查，该字体在当前计算机浏览器中是否可用。如果可用，就应用该字体。如果不可用，它就移到列表中的下一个字体，然后再检查。指定的字体都不可用时，便会使用浏览器的默认字体。

# 字体大小 font-size

在 CSS 中，我们通过 font-size 属性设置文本的大小。通常文字的大小应该协调一致。

设置方式
我们可以使用绝对和相对两种方式设置字体的大小，两种设置不同在于：

绝对大小：
- 将文本设置为指定的字体大小；
- 用户不能在不同的浏览器中改变文本大小；
- 绝对大小在确定用户设备大小时很有用。
相对大小：
- 相对于周围的元素来设置大小；
- 允许用户在不同的浏览器中改变文本大小。

** 常用单位 **
设置字体大小时，会使用到不同的单位。

** 像素 **
像素即 px ，将像素赋值给文本大小。它是一个绝对单位，所以在不同大小设备上，页面上的文本所计算出来的像素值都是一样的。

例如，
HTML:

	<body>
	<h1>一级标题通常最大</h1>
	<h2>二级标题次之</h2>
	<p>段落文字大小适中</p>
	</body>

CSS:

	h1 {
	font-size: 40px;
	}
	h2 {
	font-size: 30px;
	}
	p {
	font-size: 18px;
	}

这种方式可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。但是，这种调整是整个页面，而不仅仅是文本。

** em **
em 的方式可以解决在部分 Internet Explorer 中无法调整文本。

浏览器中默认的文字大小是 16 px，1 em 代表与当前字体大小相等。

em 单位与像素转换公式为：

px/16=em
所以刚才同样的大小，通过 em 的方式设置为：

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

百分比结合 em
为 body 元素设置默认大小时，可以使用百分百，同样是相对于 16px：

	body {
	font-size:100%;
	}

# 字体粗细与风格

# 字体粗细 font-weight

我们使用 font-weight 属性设置文本的粗细。印刷世界中，根据内容的需要会设置不同的字体粗细，同样的在网页中也要更具内容设置。

font-weight 设置的数值在 100~900 之间，分为 9 级加粗度。有些字体会内置加粗的级别。例如 100 对应最细的字体，900 对应最粗的字体； 400 对应 normal・，而 700 则等价于 bold。

另外，设置值为 lighter, bolder 代表将当前元素的粗体设置为比其父元素粗体更细或更粗一步。

例如，对于如下实例：

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>字体粗细</title>
	<style type="text/css">
	#normal {
	font-weight: 400;
	}
	#light {
	font-weight: 100;
	}
	</style>
	</head>
	<body>
	<h1>Blod: 温馨提示 </h1>
	<p id="normal">Normal: 少一串脚印，多一份绿意。</p>
	<p id="light">Light: 保护环境，从我做起。light</p>
	</body>
	</html>

# 字体风格 font-style

我们在设置斜体文本时使用 font-style 属性。

它属性有三个值：

normal - 文本正常显示；
italic - 文本斜体显示；
oblique - 文本倾斜显示。

例如：

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>字体风格</title>
	<style type="text/css">
	p {font-size: 25px;}
	.normal {font-style:normal}
	.italic {font-style:italic}
	.oblique {font-style:oblique}
	</style>
	</head>
	<body>
	<p class="normal">This is a normal paragraph.</p>
	<p class="italic">This is a italic paragraph.</p>
	<p class="oblique">This is a oblique paragraph.</p>
	</body>
	</html>

你可能注意到本实例使用英文作为内容，在中文中，是不推荐使用斜体的，换句话说，中文是没有斜体的。虽然可以使用样式倾斜，但不利于阅读。

提示：

在使用时选择 normal 的情况很好判断，但是如何在 italic 和 oblique 中进行选择呢？
其实，一般情况下，italic 和 oblique 文本在网页中看起来完全一样。斜体（italic）是一种简单的字体风格。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

# 文本装饰与文本布局

** 文本装饰 text-decoration **
我们使用 text-decoration 设置字体上的文本装饰。

其可用值有：

none: 取消已经存在的任何文本装饰；
underline: 文本下划线；
overline: 文本上划线；
line-through: 贯穿文本的线；
blink：闪烁文本。

使用时，可以根据需求，同时添加多个装饰值。

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>文本装饰</title>
	<style type="text/css">
	a {
	text-decoration: none;
	}
	p {
	text-orientation: line-through;
	color: gray;
	}
	</style>
	</head>
	<body>
	<p>你好，欢迎学习educoder平台的<a href="#">CSS实训课程</a>。</p>
	</body>
	</html>

使用此方法在设置链接时可以设置取消链接上的默认下划线。

** 文本布局 **
接下来，我们来看用来影响文本布局的属性。

文本对齐 text-align
我们使用 text-align 来改变一个元素中的文本行互相之间的对齐方式。

其可用值有：

left: 左对齐文本；
right: 右对齐文本；
center: 居中文字；
justify: 水平对齐，改变单词之间的差距，使所有文本行的宽度相同。

不同的语言中默认的对齐方式不同，大部分西方语言都是从左向右读，text-align 的默认值是 left。而对于希伯来语和阿拉伯语之类的的语言，阅读时从右向左读，text-align 则默认为 right。

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<head>
	<meta charset="UTF-8">
	<title>CSS text-align</title>
	<style>
	h1 {
	text-align: center;
	}
	p.from {
	text-align: right;
	}
	p.main {
	text-align: justify;
	}
	</style>
	</head>
	<body>
	<h1>端午节</h1>
	<p class="from"><a href="https://zh.wikipedia.org/zh-sg/端午节">维基百科</a></p>
	<p class="main">端午节是东亚文化圈的重要传统节日，定在每年农历五月初五，别称端阳节、端日节、午日节、粽子节、天中节、五月节、五日节、艾节、端五、重午、重五、午日、夏节、菖蒲节，本来是夏季的一个送离五瘟神，驱除瘟疫的节日。后来楚国的爱国诗人屈原于端午节投江自尽，后在中国演化为端午节，以纪念屈原，有人称其为诗人节（有些地方是纪念吴国忠臣伍子胥的忌日），是华人四大节日之一，与新年、中秋等节日同属东亚文化圈的中国大陆、香港、澳门、台湾、琉球、日本、朝鲜半岛、越南的重要传统节日。</p>
	<p>
	<b>注意：</b> 重置浏览器窗口大小可查看 "justify" 的实际效果。</p>
	</body>
	</html>

** 行高 line-height **
我们使用 line-height 属性来设置行高。

注意：行高属性值不能为负。

其可用值有：

normal：默认。设置合理的行间距；
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距；
length：设置固定的行间距；
%：基于当前字体尺寸的百分比行间距；
inherit：从父元素继承 line-height 属性的值。

例如：

	<html>
	<head>
	<style type="text/css">
	p.small {
	line-height: 90%
	}
	p.big {
	line-height: 200%
	}
	</style>
	</head>
	<body>
	<p>
	标准行高的段落。在大多数浏览器中默认行高大约是 110% 到 120%。标准行高的段落。标准行高的段落。标准行高的段落。标准行高的段落。标准行高的段落。
	</p>
	<p class="small">
	本段落拥有更小的行高。本段落拥有更小的行高。本段落拥有更小的行高。本段落拥有更小的行高。本段落拥有更小的行高。本段落拥有更小的行高。本段落拥有更小的行高。
	</p>
	<p class="big">
	本段落拥有更大的行高。本段落拥有更大的行高。本段落拥有更大的行高。本段落拥有更大的行高。本段落拥有更大的行高。本段落拥有更大的行高。本段落拥有更大的行高。
	</p>
	</body>
	</html>

本实例中使用百分比设置行高，同样的，我们有可以使用像素值设置行高：

	p.small {
	line-height: 10px
	}
	p.big {
	line-height: 30px
	}

或者使用数字：

	p.small {
	line-height: 0.5
	}
	p.big {
	line-height: 2
	}

** 字符间距和字间距 letter-spacing word-spacing **
letter-spacing 属性用于控制字符间的间隔多少；

其可用值有：

normal：默认值，字符间没有额外的间隔；
length：定义字符间的固定间隔（可以为负值）；
inherit：从父元素继承 letter-spacing 属性的值。

同样的，word-spacing 属性用于控制字与字的间隔多少。

其可用值有：

normal：默认；
length：定义字之间的固定间隔；
inherit：从父元素继承 word-spacing 属性的值

举例如下：

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>letter & word spacing</title>
	<style>
	h1 {
	letter-spacing: 2px;
	}
	h2 {
	letter-spacing: -3px;
	}
	p {
	word-spacing: 30px;
	}
	</style>
	</head>
	<body>
	<h1> 这是标题一 This is heading 1</h1>
	<h2> 这是标题二 This is heading 2</h2>
	<p>这是一些文本。This is some text.</p>
	</body>
	</html>

# 背景样式

# 背景颜色

背景色
我们可以使用 background-color 为元素设置背景色，通常属性值为颜色名称或颜色编码。

因为 HTML 文档中 body 元素包含了 HTML 文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置 body 元素的 background-color 属性。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<style type="text/css">
	body {
	background-color: lightyellow;
	}
	h1 {
	color: gray;
	background-color: palegreen;
	}
	p {
	background-color: lightgray;
	}
	</style>
	</head>
	<body>
	<div>
	<h1>CSS让网页样式更丰富</h1>
	<p>这是一个段落</p>
	</div>
	</body>
	</html>

# 背景图片

我们可以使用 background-image 属性设置元素的背景属性，常见的网页背景图就是这样设置的。其中，属性值通过 url 指定图片链接。

书写格式：

background-image: url("图片链接")

	<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<style type="text/css">
	body {
	/* 设置背景图片 */
	background-image: url("./Assert/memphis-colorful.png")
	}
	div {
	width:90%;
	height: 100%;
	margin: auto;
	background-color: #FCFDF8;
	}
	</style>
	</head>

平铺背景图像
指定了背景图像之后，默认背景图是平铺重复显示。如果想要设置图像在水平方向、垂直方向平铺或其他方式，可以设置 background-repeat 属性。

# 背景定位与背景关联

背景定位
当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用 background-position 属性改变图像在背景中的位置:

举例如下：

	body {
	/设置背景图片/
	background-image: url("https://www.educoder.net/attachments/download/211104");
	background-repeat: no-repeat;
	background-position: right top;
	}

显示效果如图：

本例中，设置 right top 代表放置在元素内边距区的右上角。

对于具体位置，大家可以使用如下关键字的组合：

	top left
	top center
	top right
	center left
	center center
	center right
	bottom left
	bottom center
	bottom right

背景关联
当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用 background-attachment 属性，将其值设置为 fixed。

	body {
	background-image: url("https://www.educoder.net/attachments/download/211104");
	background-repeat: no-repeat;
	background-attachment: fixed;
	}

简写背景
从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。

例如：

	body {
	background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
	}

使用简写属性时，属性值的顺序为：

background-color；
background-image；
background-repeat；
background-attachment；
background-position。

以上属性无需全部使用，大家可以按照页面设置使用。

# 表格样式

# 表格边框

下面网页代码的表格：

HTML 页面：

	<body>
	<table width="400">
	<!-- 表标题 -->
	<caption>通讯录</caption>
	<!-- 表头 -->
	<tr>
	<th scope="col">姓名</th>
	<th scope="col">电话</th>
	<th scope="col">备注</th>
	</tr>
	<tr>
	<td>李雯</td>
	<td>18012311234</td>
	<td>家人</td>
	</tr>
	<tr>
	<td>王谦</td>
	<td>17812311234</td>
	<td>同事</td>
	</tr>
	<tr>
	<td>周佳</td>
	<td>17413511234</td>
	<td>高中同学</td>
	</tr>
	</table>
	</body>

表格边框
我们使用 border 属性为表格添加边框，这样 HTML 表格才会看起来更符合我们平时使用的表格。border 属性值可以按顺序设置的属性为：border-width、border-style 和 border-color。一般情况下会省略属性名，直接设置属性值。

其中，border-style 可以取如下四种值：

dotted: 点状；
solid: 实线；
double: 双线；
dashed: 虚线。

例如，对上面的通讯录表格应用如下样式：

	th,
	td {
	border: 1px solid #000; /设置边框1px粗的黑色实线/
	}

折叠边框
但是，这样设置的通讯录表格有双边框。这是因为表格与 th/td 元素都有独立的边界。

所以，我们可以使用 border-collapse 属性设置折叠边框。折叠边框代表边框是否被折叠为一个单一的边框或相互隔开。

同样的，对上面的通讯录表格应用如下样式：

	table {
	border-collapse: collapse; /设置折叠边框/
	}
	th,
	td {
	padding: .5em .75em;
	border: 1px solid black; /设置边框1px粗的黑色实线/
	}

显示效果如下：

# 表格颜色、文字与大小

表格颜色
表格颜色设置十分简便，与设置文字颜色的方式相同。在对应的表格元素标签中，使用 color 属性设置表格中的文字颜色，使用 background 属性可以设置表格元素的背景色。

例如，对于如下含表格的 HTML 页面：

	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8" />
	<title>HTML – 简单表格</title>
	</head>
	<body>
	<table width="400">
	<caption>运动会跑步成绩</caption>
	<thead>
	<!-- 表格头部 -->
	<tr>
	<th scope="col">长度</th>
	<th scope="col">李雯</th>
	<th scope="col">王谦</th>
	<th scope="col">周佳</th>
	</tr>
	</thead>
	<tbody>
	<!-- 表格主体 -->
	<tr>
	<th scope="row">100米</th>
	<td>14s</td>
	<td>16s</td>
	<td>13s</td>
	</tr>
	<tr>
	<th scope="row">200米</th>
	<td>26s</td>
	<td>23s</td>
	<td>25s</td>
	</tr>
	<tr>
	<th scope="row">400米</th>
	<td>70s</td>
	<td>73s</td>
	<td>69s</td>
	</tr>
	</tbody>
	<tfoot>
	<!-- 表格尾部 -->
	<tr>
	<th scope="row">总用时</th>
	<td>110s</td>
	<td>112s</td>
	<td>107s</td>
	</tr>
	</tfoot>
	</table>
	</body>
	</html>

	我们设置其CSS样式如下：
	```html

	table {
	border-collapse: collapse;
	}
	th,
	td {
	border: 2px solid black;
	}
	th
	{
	background-color:lightblue; /表格头部背景颜色/
	color:white; /表格头部字体颜色/
	}

显示效果如图：

表格文字对齐与文字粗细
表格单元格默认为左对齐。在实际情况中，我们可以根据需求设置表格对齐方式。设置表格中文字对齐的方式，与设置段落文字对齐的方式相同，都是使用 text-align 属性。

同样的，设置表格文字粗细与设置段落文字粗细相同，都是使用 font-weight 属性。

例如，对于运动会成绩表格，设置其 CSS 如下：

	table {
	border-collapse: collapse;
	}
	caption {
	font-weight: bold; /表格标题文字加粗/
	}
	th,
	td {
	border: 2px solid black;
	}
	th {
	text-align: center; /表格头部居中对齐/
	background-color:lightblue; /表格头部背景颜色/
	color:white; /表格头部字体颜色/
	}
	td {
	text-align: right; /表格主体右对齐/
	}
	tfoot {
	font-weight: bold; /表格尾部文字加粗/
	}

表格宽度和高度
在表格元素中使用 width 和 height 属性设置表格的宽度与高度。

例如，对于运动会成绩表格，设置其 CSS 如下：

	table {
	width: 98%; /表格整体宽度/
	border-collapse: collapse;
	}
	caption {
	height: 30px;
	font-weight: bold; /表格标题文字加粗/
	}
	th,
	td {
	height: 35px; /表格高度/
	border: 2px solid black;
	}
	th {
	text-align: center; /表格头部居中对齐/
	background-color:lightblue; /表格头部背景颜色/
	color:white; /表格头部字体颜色/
	}
	td {
	text-align: center; /表格主体居中对齐/
	}
	tfoot {
	font-weight: bold; /表格尾部文字加粗/
	}

其中表格宽度设置为 98%，如图我们之前在 CSS 课程中所学，表格宽度始终保持页面的 98% 大小：

# 定位

position 属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute
sticky

# 使用 HTML/CSS 实现 Educoder 顶部导航栏

使用 flex 布局实现左右分开布局的方式有多种：

使用 flex 布局 justify-content: space-between 属性

使用 flex 布局 flex:1 权重布局

# 使用 flex 布局 justify-content: space-between 属性

首先我们来看第一种实现方式：

	<div class="parent-wrap">
	<div style="background: #1cbbb4;">左边容器</div>
	<div style="background: #8dc63f;">右边容器</div>
	</div>
	.parent-wrap{
	height: 60px;
	display: flex;
	justify-content: space-between;
	}

使用 flex 布局 flex:1 权重布局
接下来看第二种实现方式，同样使用 flex 布局：

	<div class="parent-wrap">
	<div class="left-wrap" style="background: #1cbbb4;">左边容器</div>
	<div style="background: #8dc63f;">右边容器</div>
	</div>
	.parent-wrap{
	height: 60px;
	display: flex;
	}
	.left-wrap{
	flex:1
	}

效果图：

第二种效果可能很多同学会问，为什么不直接让两个 div 都使用 flex:1 属性，这个很好解释，只有左侧使用 flex:1 属性的情况下，右侧容器宽度是根据内容来的，这样的话内容多长，右侧容器就有多长，如果两者都使用 flex:1 属性，右侧容器需要使用内容右对齐属性。

CSS

# CSS

# 基本概念

# 基础语法

# 选择器

# 声明

# 样式引入方式

# 内部样式表

# 外部样式表

# 内联样式

# 使用哪一种样式表？

# 样式的优先级顺序

# 选择器

# 元素选择器

# 类选择器

# id 选择器

# 类选择器与 id 选择器的区别

# 字体颜色、类型和大小

# 字体颜色 color

# 字体类型 font-family

# 字体系列

# 字体大小 font-size

# 字体粗细与风格

# 字体粗细 font-weight

# 字体风格 font-style

# 文本装饰与文本布局

# 背景样式

# 背景颜色

# 背景图片

# 背景定位与背景关联

# 表格样式

# 表格边框

# 表格颜色、文字与大小

# 定位

# 使用 HTML/CSS 实现 Educoder 顶部导航栏

# 使用 flex 布局 justify-content: space-between 属性

MongoDB

数组-JavaScript