02_MDN前端基础学习_CSS-简单使用/选择器/字体文本的样式调整

1）CSS

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：

p {
	 color: red;
}

2）使用一下

3）CSS讲解

整个结构称为 规则集（通常简称“规则”），各部分释义如下：

选择器（Selector）：
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）：
一个单独的规则。如 color: red; 用来指定添加样式元素的属性。

属性（Properties）：
改变 HTML 元素样式的途径。（本例中 color 就是

元素的属性。）CSS 编写人员决定修改哪个属性以改变规则。

属性的值（Property value）：
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

1，每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
2，在每个声明里要用冒号（:）将属性与属性值分隔开。
3，在每个规则集里要用分号（;）将各个声明分隔开。

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

不同类型的选择器：

更多：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors

4）字体和文本

译注：再一次说明，中文字体文件较大，不适合直接用于 Web Font

5）盒子模型

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

padding：即内边距，围绕着内容（比如段落）的空间。
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。

这里还使用了：

width ：元素的宽度
background-color ：元素内容和内边距底下的颜色
color ：元素内容（通常是文本）的颜色
text-shadow ：为元素内的文本设置阴影
display ：设置元素的显示模式（暂略）

这些边距设置参数时的规则：

1）只有一个  值时，这个值会被指定给全部的 四个边.

2）两个 值时，第一个值被匹配给 上和下, 第二个值被匹配给 左和右.

3）三个 值时，第一个值被匹配给 上, 第二个值被匹配给 左和右, 第三个值被匹配给 下.

4）四个 值时，会依次按 上、右、下、左 的顺序匹配 (即顺时针顺序).

5）auto
	浏览器会自动选择一个合适的margin来应用。它可以用于将一个块居中。
	比如，div { width:50%;  margin:0 auto; } 会把这个div容器水平居中。

6）定位页面主题

这里使用了一个 text-shadow 属性，它可以为元素中的文本提供阴影。四个值含义如下：

第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。

第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。

第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。

第四个值设置阴影的基色。