CSS - 扫盲

1. 前言

上文我们简单 将 HTML 过了一遍 ， 知道了 HTML 知识表示页面的结构和内容 ，这里就和 人的骨头一样 。
 

下面就来学习一下 CSS ， CSS 就相当于 东方四大邪术中的化妆术
 
如 ：

 

CSS 的作用 ： CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离

 

2. CSS

 
下面来看看 CSS 的基本 语法规则 :
 
这里的语法规则非常简单 就是 选择器 + 若干属性声明 .

 

举例 ：

 
关于写 CSS 的方式 除了 上面这种 ，还存在 其他两种 ， 下面来学习一下

 

2.1 css 的引入方式

 
1. 内部样式 ： 使用 style 标签 ， 直接把 CSS 写到 html 文件中

 
此时 style 标签 可以放到 任意位置 ， 一般建议 放到 head 标签里 (这种方式 就是上面举例)

 
2. 内联样式 ： 使用 style 属性 ，针对 指定的元素设置样式 , (此时不需要写选择器 ， 直接写属性键值对) ， 这个时候只是针对当前元素生效

 
3. 外部样式 ：把 css 单独作为一个 .css 文件 再通过 link 属性 让 html 引入 改 css 文件

 
在实际开发中 ，一般使用外部样式来写 CSS ， 让html 和 css 分离开， 相互不影响 ， 也让 html 不那么混乱 ， 更好的维护.

 
本文主要是对 css 进行扫盲 ， 如何简单如何来， 下面都会 采用 内部样式来举例 （这里 内容样式 和 外部样式 都一样只不过一个写在 html 里面 一个单独写在一个 .css 文件中）.

 

2.2 选择器

 
这里选择器 除了上面写的 选择器 还有很多的 ，这里就将它们都说一下 .

 
1.标签选择器 (元素选择器) : 在 { 前面写 标签的名字 ，此时 意味着 会选中 当前页面中所有的指定标签 !!! （就是上面演示的选择器）

 
演示 ：

 
在我们的页面上， 往往 一个标签 他的样式 是不同的 ，使用上面这个选择器 就会导致 大片 一样的标签 表现出来的样式 都是一样的， 这样就很难做到 一个标签 出现不同的效果 ， 这里就需要借助 其他的 选择器了 .

 
2. 类 选择器 ： 可以创建 CSS 类 ，手动指定那些元素应用这个类

 
注意 : 这里说的类 和 java 中的面向对象的类无关 . （只是名字 也是 class , class 所谓的 “类” 就是把一组 css属性起了个名字 ，方便别的地方引用）

 
演示 ：

 
除了 类选择器 ，下面再来看一下 ID 选择器

 
3. ID 选择器 ： html 页面中的每个元素，都是可以设置一个唯一的 id 的 , 给 元素 安排 id 之后， 就可以通过 id 来选中对应的元素了

 
上面三个选择器 ， 都属于，简单的基础选择器 ， 除此之外 ， CSS 还支持 一些更复杂一点的 “复合选择器” ， 复合选择器 就是把 前面的 基础选择器组合一下 .

 
下面就来说几个比较简单的 复合选择器

 
4. 后代选择器 ： 把多个简单的基础选择器，组合一下 (可以是标签， 类 id 选择器的任意组合)

 
举例 ：

 
后代选择器 看完了 ，下面来看看 子选择器

 
5. 子选择器 ： 也是把多个简单的基础选择器组合 （ 标签 ， 类 ， id 选择器任意组合）

 
这里与后代选择器 的区别是 ： 子选择器 只是找匹配的子元素 ，不找孙子元素之类的 .

 
子选择器 看完 ， 下面来看一下 另外一个常见的选择器

 
6. 并集选择器

 
7. 伪类选择器

 
到此 ，这里我们的选择器 就看完了 ， 关于 选择器 的一些细节可以看文档 ： CSS 教程 (w3school.com.cn)

 

2.3 CSS 常用属性

 
这里 CSS 样式 涵盖很多方面的 内容 ，包括不限于 ，大小 ，位置 ， 颜色 ，形状 ， 边距 ， 边框 ， 特殊滤镜 ，过滤效果 ， 动画 …

 
和样式相关的属性是非常多的 ， 我们 是不可能全部记住 , 这里 只需要知道一些常用的， 其他的需要再去查就行了.

 

2.3.1 字体属性

 
1.设置字体

 
2. 设置字体大小

 
3. 字体的粗细

 
常见粗细值名称和数值对应

 
有了 这些字体属性 我们就可以将 div 设置 成 h1 的效果 （又大又粗） ， 也可以将 h1 设置和 div 一样 .

 
4. 文字样式 :

 
注意 ： 上面的例子中 ，将 em 和 div 标签 写到了 body 标签的外面， 但是页面还是显示出了效果 ， 这也就是 之前说过的 鲁棒性 .

 

2.3.2 文本属性

 
1. 文字颜色 : color

 
2. 文本对齐 ：

 
4. 文本装饰

 
5.文本缩进

 
6. 文本行高

 

2.3.3 背景属性

 
这里关于背景属性 主要研究两个 ， 1. 背景颜色 ， 2. 背景图片

 
1. 背景颜色

2. 背景图片

 
图一 ：

 
图二 ：

 
3.背景尺寸

 

2.4 圆角矩形

 
关于 圆角矩形 ， 应该不陌生 ， 因为我们的手机 应用 就是 ， 好像是近几年 火的 .

 
我们的 html 元素默认都是一个个的矩形 ， 这里想要表示 “带圆角的矩形” 就可以通过border-radius来设置

 
关于这个圆角矩形 ， 其实还有很多玩法， 这里我们仅可以控制 四个角 ，其实还可以 针对 四个角分别设置 ，本文 只是对 CSS 进行 扫盲

， 所以 感兴趣的可以去文档看看 .

 

推荐文档 :　border-radius - CSS：层叠样式表 | MDN (mozilla.org)

 

2.5 元素的显示模式

 

2.6 盒子模型

 
图一 ：

 
图二 ：

 
图三 ：

 
总结 ：

 
边框 border : 粗细 效果 颜色 分四个方向分别设置

 
内边距 : padding 分四个方向分别设置

 

外边距 margin 分四个方向分别设置

 
通过这几个属性 就可以控制元素之间 / 元素和内容之间 相对位置了 .

 

2.7 弹性布局

 
弹性布局 ： 用来实现页面布局的

 
了解 ：

几种布局方式 :

1. 基于表格布局
2. 基于浮动布局 ，主要是解决 “水平方向排列” 问题 , 为啥不用解决 垂直呢 ？ 因为 块级元素默认就是垂直方向排列的 (独占一行)
3. 弹性布局 ，主要解决 “水平方向排列” 问题 (比浮动更简单 ， 也没那么多坑)
4. 网格布局 , 二维的布局 ， 相当于更高级版本的 “表格布局” (网络布局诞生的时间还不够长) 导致市面上还存在一些不支持网络布局的老浏览器 .

 
图一 ：

 
图二 ：

 
到此 CSS 的扫盲就结束了 ，下文就来了解一下 JavaScript