CSS HTML 不同一种码语言，所以自然语法书写的形式也差异。比如下面一段标准的 CSS 码，作用指 h1 标签内色。
一段 CSS 码中通常包含两样东 —— 选择器、声明。选择器就面所写的 h1，它需控制样式的对象，每条声明则声明了一则 CSS 的具体样式调整，通过一对花括纳。
如上面案例，声明了对颜色的修改，但每条声明中，还包含了属性和值。同，对一个标签要做多种样式类的修改，那么我们就可添多条声明，如：
上面我们添了条声明，每条声明的结尾由 「;」分号分隔，一定要记得如果分号的话，那么这条声明就没有结束，后续的容都会无效。
而光看上面样的写法，肯定得特别乱，阅读来很难受，所以通用的 CSS 代码书写方式，是类似下面样的，将每条声明独立成一行：
还有一个细节，就是一条声明中，以为一个属设置种值。比我们在设置字的时，使用 font 属以同时声明字、大小、字重等参数，用空将值分隔开，也以把它们拆开来声明。
在面的细节说明中讲到，暂且道有么一回即。
完语法，并不是直接就以开始写 CSS 代码并产生用，需要学 HTML 何引用 CSS，换句讲，就是 CSS 代码要写在什么地方。主要有三种形式：
- 外样式表
- 内部样式表
- 内式
1. 外样式表
外样式表，就是我们在这个 HTML 档之外，创建一个 CSS 档，专门来存放 CSS 代码。创建它的方式和 HTML 一样，通过创建一个记事本，然后将名称改成 「档英名.css」 即可。
而我们要这两个独立的档之间产生联，就需要在 HTML 中引这个 CSS 样式表。通，引样式表的代码会写在 head 标签中，如：
这种做法的好处是，多个 HTML 档可共同读取一个样式表，这样当我们定义一个 CSS 件后，整个的页面都可共同遵守这个规则，而是每个 HTML 档定义一套单独的样式。
和我们在 Sketch、Figma 中使用的外部用样式文档的原理是一样的。
2. 内部样式表
除独立一个 CSS 文件外，我们也以单独在 HTML 文档内添加 CSS 代码块，就是在页面内添加 style 标签，来开辟一个门写 CSS 的地方。通常，我们将内部样式表写在 head 标签内：
在我们的学习程中主要采取个方式来添加 CSS 代码，它的处是添加来在同一个文档内方便，但是每次只用一个 HTML 文档，不能重复应用。
3. 内联样式
内联样式，也叫行内样式，是一个将样式直接写进 HTML 标签中的做法，用来比针对的控某个标签的样式。
使用的方法是在标签中添加 style 属性，然后在面添加声：
4. 声明的优先级顺序
提前一个概念，三种引用方法，以单独使用，也以共同使用，而在共同使用的时，它们的优先级是有区别的。
内式 > 内部式表 > 外部式表
也是你在三模下都声明了 h1 标签不颜色，那么最后显示以内联样为准。优先级在实操作有很要地位，在后续操作里也会有说明。
选择是让 CSS 定位到具体某个或某些元素，来改它们样，是我们开始编写具体样代码前要优先确保正确地，常见选择含：
- 标签选择器
- Class、id 选择
- 伪类、伪元素
1. 标签选择器
前面案例中应用的选择器，都是以标签为对象的，假把选择器定义成 p 标签，那整个页面中所有的 p 标签都会共同受响。
2. Class、Id选择器
当不想同一标签式完全保持一致的候，于是就用了 Class 和 id 选择器。别是，class 「类选择器」是复数选择器，可以作用在多个标签上，而 id 则是数选择器，只作用在一个标签上，学习中主要采用 class 选择器。
使用是首先在标签添加class属性，然后在样表使用这个选择，并声明样即可：
在 class 内值 「iam_class 」是它名，这个名由我们自己定义，需要了解几个主要限制：
- 只能使用英文数字
- 首符不能是数
- 不能HTML标签重复
- 除了划线_要使他符号
我们还可以指特的标签实类的功能，即 「标签」 + 「.」 + 「类」，即可完选择，家可以输入下方案例查看效果：
同时标签中的 class，也可以添加多命，通过空格分隔，那么它就可以应用两 css 中类的样式了。
具体的应用原因方法后续的案例中机会我们也会行明的。
3. 伪类/元素
除了普通的类作选择器，CSS 中还类本身提供了一特殊的概念 —— 「伪类/元素」，简单起，就将对象不同的状态直接通过伪类行选择。
如，一个正的链接，它包含了种状态：未访问 link、已访问 visited、鼠标悬停 hover、点击 active ，我们就可通过伪类来控制。
在下方案例，链接默认是黑，鼠标悬停到上方的时，就切换成 「red」 颜：
伪类/元素，就是 CSS 中默认帮我们确定的一标签的状态，或者内部元素的一范围，我们无需写一个 class 命名出来，直接使用伪类/元素即。
最常使用的就是对链不同状的声，如果想要了解还有什其它可以使用的内容，可以参考 CSS 册。
CSS 的盒模型 （box model），是实现素排版布局的核心概念，下图就是盒模型的标准示图：
面标注的英文都是 CSS 可以声的属性，别解释一下：
- Margin：外边距，以撑开元素和其它元素的距离
- Border：描边，约等于计软件中的描边边框
- Padding：内边距，从描边到元素制定空白区域
光这大家肯定会觉得难理解，拿个 UI 中的案例举例：
做个类似的简卡片，包含描边，然后标记右侧的外边距、内边距、描边
接下来，我们可以添加下列代码，看看三个属性应使用情况，其为了便于大家理解，将内容区域背景设成灰色，并应用 flot 左齐声明（确保 margin 生效，后再介绍这个属性）：
1. margin 属
Margin 属是外边距，以通设置具像素数来指定外边距的距离，但是，外边距也以针对上下左右独立进行定义，它包含四个下级属：margin-top、margin-right、marign-bottom、margin-left，对应上右下左。
可以独使用这些属性来做声，但是更简便的方法是，可以在 margin 一个属性中置 4 个数值来完成不同外边距的置，比如下面：
这四个数字就依次对应上、右、下、左四个方向，如果只置个数字，则对应上下、左右，大家可以在前面的代码中尝一下，就不体演示了。
是，margin 除了设数值以，有个很要值，是 「auto」，它是让浏览自己计算边距数值，也自适应布局里常要参数，我们会在后续演示讲解。
2. border 属性
border 属性，除了性设4个以，也可以过 border-top / right / bottom / left 四个进独立控制。
但同学们应该发了，它不止设置数字已，因它还三可以独立设置的属性：
- border-color：描边色，可以用特殊色英文名也可以用16进制色。
- border-width：描的宽度，可以用数字素单表示。
- border-style：描边的格，的有 solid（实线）、dotted（点）、dashed（虚线）。
我们只将三分别填入属性内就可以出义，如果单独设置一列表底部的分割虚线：
3. padding属性
padding 作为内距，定义起来和 margin 是完全样，括上右下左定义。
它常效果下 margin 效果非常接近，我们需注意的元素的实际实过程中尽根据实际的形使用，不无差别对待 margin padding。
接下，我们就讲讲关页面展示中，宽高的义方式了。 CSS 属性中，提供了 wight、height 两属性的，用义标签的宽高尺寸。
如我们可定义一个 div 的宽都是 100px，属性 width 和 height 表示：
这是我们手设置的一个 「固定尺寸」，但是，在 HTML 页面布中，还有一个重要的概念 —— 「自适应尺寸」。即一开始我们没办法确定它的宽或是多，于是采取根据容进行伸缩的操作。
比，在新闻详情页面的正文区域，不同文章的高度是不一样的，我们不能一开始直接指定一个固定的高，所以，我们将高度设置成 auto，么个标签的高度就根据内容进行拉伸，比：
如这案例，p标签固定宽为200，为auto，那么p标签的实际就会根据换行后产生的来计算
在个基础上，果我们设置padding为10，border为5，么增加的数值计到个元素身的尺寸以内，p际的尺寸就变为：
- 宽 = 默认宽+ padding左/右 + border左/右
- 高 = 文字总高 + padding左/右+border左/右
而 magrin，只是元素外的间距，无论我们设置了么数值，它都对元素本身的尺寸没有影响。
通内部元素的大小影响标签的际尺寸，影响标签的父级尺寸，是 CSS 排版局中的常用方式，也是主要难点之一。
还有个抽象的概念，就是 CSS 的宽和高， 只对有 「块」 化的素产生作用，比如 a 标签就无法直通过 height、width 置尺寸，这是一个难简解释清楚的问题。
所以，为了解决尺寸没有根据我们预想展示出来，我们可以用个比较用，是过添加 「 display:block; 」 这段声明，将标签固定转化成块。这可以帮助我们在实操作避免常多不必要误。
为了加快学习效率，我们在这章并没有选择用很缓慢速度讲 CSS 属性和相关案例，而是接把我们需要学习要基础性说完，希望大家不会被这些逻辑绕晕。而具体应用，我们会留在后进演示，帮助大家巩固这些知识。
欢迎关注作者的微信公众：「超人的电话亭」
浙公网安备33011002017549号