在简单学习了 HTML 之后，我们可以得到一个简单的静态网页，但是为了让网页呈现更加丰富的样式，一个明智的做法把样式信息和文本信息分离开，文本信息对应 HTML，样式信息对应 CSS，完成一个网页的组织分离，接下来是 CSS 的简单学习，参考教程：https://developer.mozilla.org

  • HTML 定义了网页的内容
  • CSS 描述了网页的布局
  • JavaScript 控制了网页的行为

CSS

1. 在 HTML 中使用样式

我们最终的目标是把 CSS 文件和 HTML 文件结合起来，但是在此之前，还有一些方法可以直接在 HTML 文件中使用简单的样式：

style 属性

例如添加背景色 background-color，

可以直接使用元素的style属性定义的样式

源代码如下：

1
<p style="background-color: #00BFFF">可以直接使用元素的style属性定义的样式</p>

嵌入 CSS 语句

我们使用如下简单的 html 文件，在头部使用<style type="text/css"> </style>包含一段 CSS 文件，缺点是只能在当前文件中使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>静夜思</title>
    <style type="text/css">
      #author {
        color: rgb(0, 255, 64);
      }
    </style>
  </head>

  <body>
    <h1>静夜思</h1>
    <br />
    <span id="author">李白</span>
    <p>
      床前明月光，疑是地上霜。<br />
      举头望明月，低头思故乡。
    </p>
  </body>
</html>

效果如下，只修改了作者的颜色，其余均为默认样式。

链接 CSS 文件

在 HTML 头部使用<link>元素，其中

  • href 是 CSS 文件的 URL；
  • type 是链接文档的类型，选择"text/css"即可；
  • rel 定义链接外部文件的关联类型，让浏览器明白需要按照样式表进行渲染，选择"stylesheet"即可。

可以链接多个 CSS 文件，这种方式是网站使用最多的方式，可以把 HTML 文件和 CSS 文件完全分离，CSS 可以同上作用于多个 HTML 文件中。

源代码如下，其中 CSS 文件略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>静夜思</title>
    <link href="lianjie.css" type="text/css" rel="stylesheet" />
    <link href="lianjie2.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <h1>静夜思</h1>
    <br />
    <span id="author">李白</span>
    <p>
      床前明月光，疑是地上霜。<br />
      举头望明月，低头思故乡。
    </p>
  </body>
</html>

还有一种@import的语法，似乎类似于 C 语言的 include，可以在头部的 style 元素内首先使用，也可以在 CSS 文件中首先使用，略。

2. CSS 语法

一个简单的 CSS 语句如下：

1
h1,li { color: red; font-size: 5em; }

语句的作用是选择所有的 h1 元素和列表项元素，设置文字的颜色和大小。

  • 首先需要包括一个选择器明确这个语句作用的范围；
  • 然后是大括号，大括号的内部使用键值对的形式设置样式属性，以分号分隔各个属性，不同语句块之间不需要以分号分隔，可以用空行区分显得更加直观；
  • 属性值通常不需要使用引号，属性值和单位之间不要使用空格，属性值如果是多个词组成，需要用空格区分；
  • CSS 支持简单的注释，使用/*comment*/，注释可以多行，注意不支持 C 语言风格的//，注释不支持嵌套。

选择器

我们首先关注的是选择器，如何筛选处一些元素，对它们赋予专门的样式？这部分语法看起来有点奇怪。

描述 选择器 示例 结果
全选 * * 选择所有元素
按照 id 选择 #id #firstname 选择 id="firstname"的元素
按照元素选择 element p 选择<p>元素
按照类名选择 .class .intro 选择 class="intro"的元素
按照元素和类名混合选择 element.class p.intro 选择<p>中 class="intro"的元素
按照继承关系选择 element1 element2 div p 选择包含在<div>中的<p>元素(不要求 div 是 p 的直接上一层)
按照直接继承关系选择 element1>element2 div>p 选择上一层的父元素为<div>的<p>元素
按照同层前方邻居选择 element1+element2 div+p 选择同一层的前方邻居为<div>的<p>元素(选的是 p)
按照状态选择 :status a:link 选择状态为未点击的所有超链接元素
按照属性选择 [attr] [target] 选择含有 target 属性的元素
按照属性的值选择 [attr=value] [target=-blank] 选择 target="-blank"的元素
使用逗号并列选择 p,div 选择所有的<p>和<div>元素

例如下面的代码选择的是在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为 special 的元素。

1
2
3
4
5
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

注意：对于英式英语和美式英语中拼写不同的，以美式为准，典型的是 color；

语法冲突

关于 CSS 的语法冲突，有以下的规则：

  • 如果选择器无效，或者使用的属性无效，或者有语法错误，则整个语句块会被忽略；
  • 如果有相同级别的样式属性设置作用到同一个元素，则后面的设置会覆盖前面的设置；
  • 如果有不同级别的样式属性设置作用到同一个元素，则更具体的选择器有更高的优先级；

常见的优先级：元素的 style 属性>id 选择器>类选择器>元素选择器，文件内的样式表>外部样式表，其实还有很复杂的优先级定义关系，略。

如果不清楚这些优先级，还有一个!important声明，可以附在属性值后，则相对于把当前属性设置提升到了最高优先级。 (这里的最高优先级也不是绝对的，因为还可以套娃——在后面用一个相同选择器的属性设置加上!important声明覆盖掉它)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 语法正确 */
h1 {
  color: blue !important; /* !important 声明 */
}

/* 选择器语法错误 语法块无效 */
..special {
  color: blue;
}

/* 其中一个选择器语法错误 语法块无效 */
h1,
..special {
  color: blue;
}

继承

众多的 HTML 元素形成了树型架构，或者说层级架构，父元素的样式属性有的会被子元素继承下来(自然继承)，有的不会被继承，典型的关于空间的布局属性不会被继承，例如: width,margins,padding,和 borders 等。(否则空间布局会非常麻烦)

我们可以明确控制一个样式属性是否继承自它的父元素，有三个值可以达到控制继承的效果：

  • inherit 开启继承，明确要求继承自它的父元素；
  • initial 遵从浏览器的默认设置，如果浏览器没有设置并且应该是自然继承的，那么会继承；
  • unset 如果属性应该是自然继承的，则继承；否则遵从浏览器的设置。

例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  color: green;
}

.my-class-1 a {
  color: inherit;
}

.my-class-2 a {
  color: initial;
}

.my-class-3 a {
  color: unset;
}
1
2
3
4
5
6
<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
  <li class="my-class-2">Reset the <a href="#">link</a> color</li>
  <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

效果如下，呈现了好几种颜色：

3. Box 模型

在 CSS 的样式中，所有的元素都被一个个盒子 Box 包裹着，包括两类盒子：块级盒子和内联盒子。(和 HTML 的块级元素以及内联元素没有必然的对应关系)

标准的盒子模型如下：

盒子示例

  • Margin(外边距)：清除边框外的区域，外边距是透明的；
  • Border(边框)：围绕在内边距和内容外的边框；(图中的黑线)
  • Padding(内边距)：清除内容周围的区域，内边距是透明的；
  • Content(内容)：盒子的内容，显示文本和图像。

例如：

1
2
3
4
5
6
7
div {
  width: 350px; /*内容宽度*/
  height: 150px; /*内容高度*/
  margin: 25px; /*外边距*/
  padding: 25px; /*内边距*/
  border: 5px solid black; /*边框*/
}

margin 通常被视作盒子之外的部分，盒子(可见部分)的高度宽度不是 height 和 width 设置的，因为边界通常也是可见的。 除了标准盒模型，还有 IE 使用的盒模型，它对于高度宽度的理解不太一样，是包含边框宽度的。

我们既可以使用 margin 统一设置上下左右的外边距，也可以分开使用 margin-top 等进行详细设置，对于边框等同理。

1
2
3
4
5
6
.box {
  margin-top: -40px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 4em;
}

4. 典型样式

CSS 里面的花样简直太多了，没必要学它们，只了解一下最简单的几个：

  • 字体颜色，例如color=red;
  • 背景色，例如background-color: #567895;
  • 背景图片，例如background-image: url(abc.jpg);
    • 背景图片是否平铺重复等，例如background-repeat: no-repeat;(不重复)
    • 背景图片定位，例如background-position: top center;
  • 边框，可以统一使用例如border: 1px solid black;，也可以分开使用
    • 边框宽度，例如border-width: 1px;
    • 边框样式，例如border-style: solid;
    • 边框颜色，例如border-color: black;
    • 圆角，例如border-radius: 10px;
  • 内容溢出
    • 默认会把数据错版地显示出来，尽可能避免文本数据的丢失，overflow: visible;
    • 可以设置把溢出内容隐藏，overflow: hidden;
    • 可以设置把溢出内容形成滚动条，overflow: scroll;，还可以指定 x 轴或者 y 轴滚动等。

5. 杂项

颜色

颜色通常可以用三类语句设置：

  • 常见的固定颜色名称，例如"red"；
  • RGB 值，例如rgb(255,0,0)；
  • 十六进制，例如#ff0000，由上面的三个分量值转换 16 进制后拼接而成。

CSS 的内容对我来说没有什么用，学习笔记的目的只是能看懂最基本的.css 文件在干什么，不需要自己写复杂的样式，因此简单学习到这里为止。