一、CSS 概述

  1. CSS - Cascading Style Sheets（层叠样式表）
  2. 使用 CSS 的优点：
    • 将内容与表现分离，易于样式定义与修改。
    • 多个样式定义可层叠为一：样式表允许以多种方式规定样式信息：内联式，内部式 和 外部式。
    • 使用外部样式表可以极大地提高工作效率，因为可以在同一个 HTML 文档内部引用多个外部样式表。可以通过仅仅修改一个 CSS 文档，改变站点中所有页面的布局和外观。

二、关于颜色

  • 指定颜色的方法
    1. 颜色名
    2. rgb(x%, x%, x%)
    3. rgb(255, 255, 255)
    4. #aabbcc 前两位表示红，中两位表示绿，后两位表示蓝。这个颜色还能简写为 #abc
  • 仅有 16 种 颜色名被 w3c 的标准支持：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, _yellow_。如果需要使用其它的颜色，必须使用十六进制的颜色值。被大多数浏览器支持的颜色名
  • 早期浏览器支持的颜色数量少，所以定义了 web 安全色，这些颜色可以在这些浏览器上正常显示。但现在浏览器可以支持数百万种颜色，所以基本不用考虑使用的颜色是否 web 安全色。
  • 现代浏览器支持使用 rgba(x%, x%, x%, 0.3) 指定颜色，同时指定元素的透明度。与使用 opacity 属性指定透明度的不同之处是，这样指定的透明不会被子元素继承。

三、CSS 长度单位

单位 描述
px 像素 (计算机屏幕上的一个点)
% 百分比
em 1em 等于当前的字体尺寸。一般情况下，1em = 16px
vw 视口宽度
vh 视口高度
cm 厘米
mm 毫米
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
in 英寸
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)

四、定义 CSS 的三种方式

  1. 内联式

    1
    <p style="color:blue; font-size:20px;">

    当特殊的样式需要应用到个别元素时，可以使用内联式。

  2. 内部式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <head>
    <style type="text/css">
    p {
        font-size: 12px; /* CSS 注释 */
        color: red;
        font-weight: bold;
    }
    </style> <!-- HTML 注释 -->
    </head>
    • 当单个文件需要特别样式时，可以使用内部样式表。在 head 部分通过 <style> 标签定义内部样式表。

  3. 外部式

    1
    2
    3
    4
    5
    <!-- 在 head 内，使用 <link> 标签将 css 样式文件链接到 HTML 文件中 -->
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
         <!-- 链接文件的类型 链接文件与该文件的关系  文件路径 -->
    </head>

    当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表可以通过更改一个文件来改变整个站点的外观。

优先级：内联式 > 内部式 > 外部式 > 浏览器缺省设置。

注意：如果为某个样式加了 !important 关键词，那么这个样式的优先级会比内联样式还要高。

1
2
3
.pink-text {
    color: pink !important;
}

使用多个样式表：当网页较多时，将所有网页通用的样式写入一个样式表，并在所有页面中引用该样式表。再针对每个不同的网页写它独有的样式，并在该页中引用该样式表。基础样式表基本不改，只改各自独立的样式表。

当网站需要面向各种设备时，可以为每种设备写一个样式表，然后在 HTML 头部使用媒体查询来引用：<link type="text/css" rel="stylesheet" href="main_mobile.css" media="screen and (max-device-width: 600px)" />

五、选择器

5.1 什么是选择器

1
2
3
选择器 {
    样式;
}

5.2 选择器的种类

  1. 标签选择器

    1
    p { font-size: 12px; color: blue; }

    大括号前写标签名，为指定标签添加样式。

  2. 类选择器

    语法：.class_name { CSS样式 }。注意类名前的 . 不能丢，它表明该选择器是类选择器。

    类选择器可以结合标签选择器使用：

    1
    p.class_name { CSS样式 }

    此时该选择器只会选择类名为 class_name 的 <p> 标签。

    元素可以被指定为多个类：

    1
    <p class="important warning"></p>   <!-- 多个类用空格隔开 -->

    此时下面的样式：

    1
    2
    3
    .important { font-weight: bold; } /* 该属性会应用到所有类名为 important 的元素 */
    .warning { font-style: italic; } /* 该属性会应用到所有类名为 warning 的元素 */
    .important.warning { background: silver; } /* 该属性会应用到所有同时包含 important，warning 类名的元素 */

  3. id 选择器

    语法：#id { CSS样式 }。id 前的 # 表明该选择器是 id 选择器。
    id 选择器也可以结合标签选择器使用：

    1
    p#id { CSS样式 }

由于在 HTML 中，一个 id 只能被用于一个元素，一个元素只能使用一个 id，所以 id 选择器用来为特定元素设置样式。

  1. 后代选择器（派生选择器）

    1
    .class_name span{ color: blue; }

    后代选择器是用空格选择 指定标签的所有子元素。如上例中，类名为 .class_name 的标签包含的 所有 span 标签 所包含的内容的颜色都会变成蓝色。

  2. 子选择器

    1
    .class_name > span{ color: blue; }

    子选择器即用 大于号（子结合符） 选择 指定标签的第一代子元素。如上例中，类名为 .class_name 的标签的 第一代子元素 中的 span 标签所包含的内容的颜色会变成蓝色。

    后代选择器和子选择器可以结合使用。

  3. 相邻兄弟选择器

    1
    h1 + p { margin-top:50px; } /* 选择紧跟在 h1 后面的 p 标签，它们要有相同的父元素 */

    + 为相邻兄弟结合符，相邻兄弟选择器的作用是选择紧跟在一个元素后的元素，二者必须有相同的父元素。

  4. 通用选择器

    语法：* { color: blue; }。* 是通配符，通用选择器可以匹配所有标签。

  5. 分组选择符

    当想为多个标签、类或 id 设置同一个样式时，可以使用分组选择符。实质上就是将 多个选择器用逗号隔开。

  6. 伪类选择符

    1
    2
    3
    4
    5
    6
    7
    8
    9
    a:link { color: #FF0000; } /* 未被访问的链接 */
    a:visited { color: #00FF00; } /* 已被访问的链接 */
    a:hover { color: #FF00FF; } /* 鼠标指针移动到链接上时 */
    a:active { color: #0000FF; } /* 正在被点击的链接 */
    a:focus { border: dotted; } /* 解释在下面 */
    input:focus { color: yellow; } /* 向拥有键盘输入焦点的元素添加样式 */
    li:nth-child(even/odd/2n+1/...) { border-bottom: solid 1px; }   /* 选择同一个列表中的指定列表项。even 表示选择偶数，odd 表示选择基数，还可以使用 n 的表达式如：2n+1 */
    li:first-child {}	/* 选择同一个列表中的第一个列表项 */
    li:last-child {}	/* 选择同一个列表中的最后一个列表项 */
    • 伪类选择符以冒号开头。
    • 什么是伪类？顾名思义，伪类就是看上去像真的类，但实际上却不是。开发者可以像为类指定样式一样为伪类指定样式，但没有人在 HTML 中真正输入这些伪类。
    • 伪类是怎么工作的？浏览器会检查所有 a 元素，把它们添加到正确的伪类中。如果一个链接已经被访问过，它会被放在 :visited 伪类中；用户把鼠标悬停在一个链接上，浏览器会把这个链接扔进 :hover 伪类中；用户不再悬停了，浏览器又会把它从 :hover 伪类中拽出来。
    • a 标签应用 focus 伪类：有些浏览器允许按下 Tab 键来轮流访问页面上的所有链接。浏览器访问到某个链接时，这个链接就拥有 “焦点”。设置一个焦点伪类值对于提高可访问性很有帮助，因为使用键盘来访问链接的人会知道他们何时选择到正确的链接。
    • 因为链接可能会同时处于多种状态，如：某个链接已经被访问过(visited)，且鼠标悬停在它上面(hover)，而且用户正在点击它(active)。所以要按一定的顺序为链接的不同状态设置样式，一般认为适当的顺序是：_link, visited, hover, focus, active_。

  7. 属性选择器

    1
    2
    [attr]	/* 选择具有 attr 这个属性的元素*/
    [attr='value']	/* 选择属性 attr 的值为 value 的元素 */
    • 伪元素选择器：TODO

六、关于 CSS 样式

  1. 为了排版优美并方便后期修改，样式规则每条规则占一行，末尾规则也加分号。属性与值之间加一个空格。

  2. 写 CSS 时，样式从高层元素开始写。同级元素先写公共属性，再通过覆盖来设置每个元素的特殊属性。

  3. 如果某个属性的值有多个，将多个值分开写时，不会叠加，而是会覆盖，如：

    1
    2
    p { text-decoration: underline; }
    p { text-decoration: line-through; }

    最后该 <p> 元素仅仅应用了 line-through，而不是 underline 和 line-through 同时应用。

  4. 如果一个元素属于多个类，为这些类指定的样式有冲突时，元素最终的样式与元素中类的声明顺序无关，而与类的样式的指定顺序有关，后指定的具有更高的优先级。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        .blue-text {
            color: blue;
        }
        .pink-text{
            color: pick;
        }
    </style>
    <h1 class="pick-text blue-text">Hello World!</h1>
    <!-- Hello World 的颜色为 pick -->

    如果一个元素既有类又有 id，为这个类和这个 id 指定的样式有冲突时，不管样式的声明顺序如何，id 的样式具有更高的优先级。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        .blue-text {
            color: blue;
        }
        #orange-text{
            color: orange;
        }
    </style>
    <h1 class="blue-text" id="orange-text">Hello World!</h1>
    <!-- Hello World 的颜色为 orange -->

  5. 样式继承：

    • 继承：父元素的样式会被其所有子元素继承，如果不想子元素继承父元素的样式，需要给它设置单独的样式。
    • 一些特定的属性不能继承。
    • 不能继承的属性：
      • 所有背景属性。
        • TODO
    • 很多样式能不能继承都可以通过常识来判断。

七、基本样式

7.1 背景

属性 描述
background 简写属性，可以将背景属性设置在一个声明中。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-repeat 设置背景图像是否及如何重复。
background-position 设置背景图像的起始位置。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

样例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 设置背景颜色或背景图像 */
body { background-color: gray; }
body { background-image: url(./image/test.jpg); } /* 可以为任意元素设置背景图像，但不是所有用户代理都能很好的为textareas 和 select 等替换元素的背景应用图像 */

/* 设置背景是否及如何重复 */
body { background-repeat: repeat; } /* no_repeat: 不重复; repeat-x: 在水平方向重复; repeat-y: 在垂直方向重复。默认为 no-repeat */

/* 背景定位 */
body { background-position: top center; } /* 关键字 */
body { background-position: 50px 100px; } /* 长度值。图像的左上角在背景中的位置。默认值为 0px,0px。只写一个表示水平值，垂直值默认。 */
body { background-position: 10% 50%; } /* 百分比。图像的 10%,50% 的点位于背景的 10%,50% 的点处。默认值为 0%,0%。只写一个表示水平值，垂直值默认。 */

/* 图像固定 */
body { background-attachment: fixed } /* 默认为不固定 */

<img> 和 background-image：<img> 标签指定的图片都是有一定实际意义的，如照片、logo。而用 background-image 属性指定的图片只是为了修饰页面。

7.2 文本

属性 描述
color 设置颜色（color 属性会同时控制文本和边框颜色，所以它不叫 text-color。）
text-indent 缩进元素中文本的首行。
text-align 文本对齐方式（事实上，只要是内联元素，就可以使用该属性）
text-decoration 向文本添加修饰。
line-height 设置行高。
word-spacing 设置字间距。（字：由空白字符隔开的部分）
letter-spacing 设置字符间距。
white-space 设置元素中空白的处理方式。
text-transform 元素中的字母大小写转换。
direction 设置文本方向。
unicode-bidi 设置文本方向。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 文本缩进。默认为 0 */
p { text-indent: 2em; } /* 设置段落缩进为两个字符 */
p { text-indent: -2em; padding: 2em; } /* 设置缩进为负值，实现悬挂缩进。为防止文字超出浏览器边界，设置内边距 */

/* 水平缩进。默认值会根据语言的不同而不同。比如对于从右向左读的语言，text-align 的值默认是 right */
p { text-align: center; } /* 文本居中 */

/* 大小写转换。默认为 none */
p { text-transform: capitalize; } /* 设置每个单词的首字母大写 */

/* 文本装饰。默认值根据标签的不同而不同 */
a { text-decoration: none; } /* 文本装饰常用来消除 a 标签的下划线 */

/* 设置文本方向，默认为 ltr */
p { direction: rtl } /* 设置文本方向为 从右向左 */

注意及提示：

  1. text-indent 可以应用于块级元素，不能应用于内联元素和图像之类的替换元素。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

  2. 如果想把一个内联元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

  3. text-indent 可以使用百分比值，百分比是相对于其父元素的宽度来说的。

  4. text-align 的常用值为 left, right, center。text-align: center; 与 <center> 标签并不相同，text-align: center; 只会把文本居中，<center> 会把整个元素居中。

  5. text-transform 有四个值。none: 不做任何改动; uppercase: 转换为全大写; lowercase: 转换为全小写; capitalize: 每个单词首字母大写。

  6. text-transform 属性不会对原文本造成影响。如果突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 完成这个修改，另外，如果以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。

  7. text-decoration 属性有六个值。none: 消除所有装饰; underline: 下划线; overline: 上划线; line-through: 删除线; blink: 使文本闪烁。

  8. 如果为同一个元素指定多个 text-decoration 的规则，text-decoration 值会替换而不是累积起来。如：

    1
    2
    h2 { text-decoration: line-through; }
    h2 { text-decoration: underline; }

    只会应用 underline，并不是 underline 和 line-through 都应用。

  9. white-space 属性的值：

    值 空白符 换行符 自动换行
    normal 合并 忽略 允许
    nowrap 合并 忽略 不允许
    pre 保留 保留 不允许
    pre-wrap 保留 保留 允许
    pre-line 合并 保留 允许

7.3 字体

属性 描述
font 简写属性。把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-style 设置字体风格。（斜体）
font-size 设置字体的尺寸。
font-weight 设置字体的粗细。
font-variant 设置字体变形（小型大写字体） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 设置字体系列 */
h1 { font-family: Georgia, serif; } /* 设置一个特定字体系列，再在最后设置一个通用字体系列，这样，当用户电脑里没有特定字体系列时，会使用通用字体系列 */

/* 设置字体风格 */
p { font-style: normal; }
p { font-style: italic; } /* 文本斜体显示 */
p { font-style: oblique; } /* 文本倾斜显示 */

/* 设置字体大小 */
h1 { font-size: 60px; } /* 设置绝对大小 */
h2 { font-size: 2.5em; } /* 设置相对大小 */

/* 字体加粗 */
p { font-weight: normal; }
p { font-weight: bold; } /* 字体加粗 */

/* 设置字体变形 */
p { font-variant: small-caps; } /* 将所有字母变为大写，并将除首字母外的其他字母变小（小型大写字母） */

  1. 在 CSS 中，有两种不同类型的字体系列名称：

    • 通用字体系列 - 拥有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）
    • 特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”）

  2. CSS 中提供了 5 中通用字体系列：Serif，Sans-serif，Monospace，Cursive，Fantasy。

    • Serif 字体：有衬线。可以作为突出某段文本的字体。
    • Sans-serif 字体：无衬线，通常认为这种字体在计算机屏幕上比 Serif 更可读。这种字体最常用于体文本。
    • Monospace：字母间距一致，像打印出来的一样。适合显示计算机代码。
    • Cursive：像手写体。有时作为标题的字体使用。
    • Fantasy：有某种风格的装饰性字体。
    • 大多数字体都属于这五个字体系列，只有很少的一部分字体不属于任何一个字体系列。

  3. font-family 属性的书写：

    • 先写几个同类型的字体，最后写它们所属的通用字体系列。
    • 不提倡只写一种字体，因为用户电脑上没有该字体时，会使用浏览器默认字体。
    • 也不提倡只写通用字体系列，因为这样就无法对所要使用的字体做太多控制。
    • 浏览器会使用最先写的字体（如果有的话），依次往后。
    • font-family 的值为多个时，用 逗号 隔开。当字体名中包含 空格、#、$ 等时，用引号引起来。

  4. font-style 的值 italic，oblique 的区别：

    • 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观，斜体是字体设计者设计的。
    • 倾斜（oblique）文本则是正常竖直文本的一个倾斜版本，是操作系统或浏览器等软件将字体倾斜过来。
    • 斜体和倾斜文本取决于字体和浏览器，有时这两种风格是一样的，有时是不一样的。无论使用 italic 还是 oblique，结果都不确定，所以用哪个都可以（因为无从控制）。

  5. font-size 值可以是绝对或相对值。

    • 绝对值：

      • 将文本设置为指定的大小
      • 不允许用户在任意浏览器中改变文本大小（不利于可用性）
      • 绝对大小在确定了输出的物理尺寸时很有用

    • 相对值：

      • 相对于周围的元素来设置大小
      • 允许用户在浏览器中改变文本大小

    • font-size 的单位如果是 px（如 16px），意思是字体的高度为 16px，而不是宽度。

    • font-size 可以指定关键字：xx-small、x-small、small、medium、large、x-large、xx-large。每个大小大约比前一个大 20%。small 一般定义为 12px。不同浏览器对关键字的大小的定义并不一定相同。

    • 如何设置字体大小？一种推荐的做法：<body> 用关键字（推荐 small 或 medium），其他用 % 或 em。这样，当改变 body 的字体大小时，整个页面的字体大小都会同步更改。而且用户在调整字体大小时不会有任何问题。

      1
      2
      3
      4
      body { font-size: medium; }
      h1 { font-size: 3.75em; }
      h2 { font-size: 2.5em; }
      p { font-size: 0.875em; }

    • 为什么 body 的字体大小不用像素指定？因为如果用像素指定大小，老版本的 IE 不支持文本缩放。

  6. font-weight 属性的值有三种：

    • normal, bold。这两个属性值是最常用的。
    • bolder, lighter: 采用比继承值更粗（更细）的一个字体变形。没有多少字体支持粗细程度的微小差别，所以这两个值通常没有任何效果。
    • 100 ~ 900：为字体指定 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。400 等价于 normal，700 等价于 bold。同样的，100 ~ 900 这些值也没有得到字体和浏览器的广泛支持，所以通常不使用。

7.4 链接

1
2
3
4
5
6
/* 设置不同状态时链接的颜色 */
a:link { color: #FF0000; } /* 未被访问的链接 */
a:visited { color: #00FF00; } /* 已被访问的链接 */
a:hover { color: #FF00FF; } /* 鼠标指针移动到链接上时 */
a:focus { color: #00FF00; } /* 元素拥有焦点时 */
a:active { color: #0000FF; } /* 正在被点击的链接 */

因为链接可能会同时处于多种状态，如：某个链接已经被访问过(visited)，且鼠标悬停在它上面(hover)，而且用户正在点击它(active)，所以要按一定的顺序为链接的不同状态设置样式。

一般认为适当的顺序是：_link, visited, hover, focus, active_。

7.5 列表

属性 描述
list-style 简写属性。把所有用于列表的属性设置于一个声明中。
list-style-type 设置列表项标志的类型。
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。

为 li 标签使用 list-style-type 属性可以设置无需列表项前标记的样式：

  • disc（实心圆点）
  • circle（空心圆点）
  • square（实心方块）
  • none（不使用标记）
  • 也可以用 list-style-image: url(...); 自定义标记。

详情参考此页：CSS 列表

7.6 表格

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
border-spacing 设置分隔单元格边框的距离。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 为表格添加边框并设置边框颜色 */
table, th, td { border: 1px solid blue; } /* border 属性不能继承。 */
table { border-collapse: collapse; } /* 将表格边框折叠为单一边框 */

/* 将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px */
table { width: 100%; }
th { height: 50px; }

/* 表格文本对齐 */
td {
    text-align: center; /* 水平对齐。属性值有 left right center */
    vertical-align: bottom; /* 垂直对齐。属性值有 top bottom middle */
}

/* 设置表格内边距 */
th, td { padding: 5px; }

/* 设置表格边框不折叠时边框之间的空白。表格单元无法设置外边距，可以使用该属性来代替 */
table {border-spacing: 10px 50px;}

/* 表格颜色 */
table, th, td {
    border: 1px solid black; /* 设置边框颜色 */
    background-color: yellow; /* 设置背景颜色 */
    color: red; /* 设置文本颜色 */
}

/* 设置表格标题的位置 */
caption {caption-side: bottom}

/* 隐藏空单元格 */
table {empty-cells: hide;} /* 默认为不隐藏 */

7.7 元素尺寸

属性 描述
width 设置元素的宽度。
height 设置元素的高度。
line-height 设置行高。（行高设大一点可以改善可读性，还可以使页面不同部分之间形成对比，产生反差。）
max-width 设置元素的最大宽度。
min-width 设置元素的最小宽度。
max-height 设置元素的最大高度。
min-height 设置元素的最小高度。
  • 块元素的宽高默认是 auto，宽 auto 意思是占据能占据的最大宽度，但高 auto 意思是 0，因为一个网页的高度是无限大。所以，为一个空的块元素指定高度时，不能使用 auto 或 %。
  • width 和 height 只是指定内容区的宽高，不包括内边距。
  • 对于包含内容的块元素，一般设置 width 而不设置 height，因为 height 设置的太小有可能会使内容溢出。
  • div { height: 100vh; } 可以让 div 占满屏幕。

八、CSS 盒模型

8.1 概述

CSS盒模型

  1. 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

  2. 背景应用于由内容和内边距、边框组成的区域，不会应用于外边距区域。

  3. 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。

    1
    2
    3
    4
    * {
        margin: 0;
        padding: 0;
    }

  4. 外边距可以是负值，而且在很多情况下都要使用负值的外边距。

  5. 在 CSS 中，任何元素都是盒子，包括内联元素，只是内联元素一般不指定宽高和内外边距（除了图像）。

8.2 内边距

属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。 
1
2
3
4
5
6
7
8
/* 使用 padding 设置内边距 */
h1 { padding: 10px; } /* 值为一个时，四条边设置同样的内边距 */
h1 { padding: 10px 20px; } /* 值为两个时，上下边采用第一个内边距，左右边采用第二个内边距 */
h1 { padding: 10px 0.25em 2ex; } /* 值为三个时，上、右、下边距分别使用这三个值，左边距使用右边距的值 */
h1 { padding: 10px 0.25em 2ex 20%; } /* 值为四个时，按照上、右、下、左的顺序分别设置各边的内边距 */

/* 使用百分比单位 */
p { padding: 10%; } /* 表示把 p 元素的内边距设置为其父元素 width 的 10%。要注意的是，上下内边距也是父元素 width 的 10%，而不是父元素 height 的 10% */

8.3 边框

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 简写属性，用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。

  1. 如果不用 CSS，只用 HTML，只能为表格设置边框，但使用 CSS 可以为任何元素设置边框。

  2. 如果为元素设置背景，背景会被设置到元素内容、内边距和边框区。

  3. 可以用边框代替下划线，使下划线的样式更灵活。

  4. 边框样式 border-style 的值：

    值 描述
    none 定义无边框。
    hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
    dotted 定义点状边框。在大多数浏览器中呈现为实线。
    dashed 破折号。
    solid 定义实线。
    double 定义双线。双线的宽度等于 border-width 的值。（最不可预测）
    groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
    ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
    inset 定义 3D inset 边框。其效果取决于 border-color 的值。
    outset 定义 3D outset 边框。其效果取决于 border-color 的值。
    inherit 规定应该从父元素继承边框样式。
    边框样式

  5. 锯齿状边框的实现：边框样式用 dashed，边框颜色设置为与背景色相同。

  6. border-width 可以指定长度值，也可以使用关键词 thin 、medium 和 thick，CSS 并没有定义这三个值的具体宽度，它们的宽度与用户代理有关。

  7. 若设置简写属性，顺序也是 top-right-bottom-left。

  8. 如果这样定义样式：p { border-style: solid; border-bottom-style: dotted; }。只有底部边框是 dotted，其他边框都是 solid，因为后一个属性覆盖了前一个属性的底部样式。

  9. 默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

  10. border-color 除了指定为颜色值，还可以指定为 transparent，用于创建有宽度的不可见边框。从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。

8.4 外边距

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

  1. margin 书写规则与 padding 相似。

  2. margin 可以使用负值，而 padding 不能使用负值。

  3. 元素的 margin 控制元素的 border 和元素实际所占空间的距离。如果将一个元素的 margin 设置为负值，元素会变大。

  4. 清除浏览器默认样式：* { margin: 0; padding: 0; }

  5. margin 的值可以设置为 auto，使得块级元素居中，示例

  6. 只要两个块元素处于正常流中且垂直外边距碰到一起，就会合并。这种情况通常有：

    • 两个块级元素一上一下；
    • 两个块级元素嵌套。

    如果嵌套时，外面的元素有一个边框，外边距不会碰到一起；如果没有边框，外边距会碰到一起。

块级元素水平居中：div { margin: 0 auto; width: xxx; height: xxx; }。详情：水平对齐
块级元素水平并垂直居中：div { position: absolute; left: 50%; top: 50%; width: xxx; height: xxx; }

九、定位

9.1 定位概述

  1. 一切皆为框：HTML 中的任何元素都有框，块级元素（div、p、h1 等）有 块框，内联元素（span、strong 等）有 行内框。

  2. CSS 有三种基本的定位机制：普通流、绝对定位 和 浮动。除非专门制定，否则所有框都在 普通流 中，普通流中的元素位置由元素在 (X)HTML 中的位置确定。绝对定位 和 浮动 的元素脱离了普通流，绝对定位的元素位置相对于其父元素；浮动的元素相当于处于一个新的文本流中。

  3. 对于行内框，可以通过调整它的水平内边距、边框和外边距调整它与其他内联元素之间的间距。但调整垂直内边距、边框和外边距不影响它的高度。

  4. 由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

  5. CSS 中有四种定位方式：静态定位、相对定位、绝对定位 和 浮动，静态定位 和 相对定位 都属于 普通流。浮动用 float 属性实现，前三种定位方式可以用 position 属性实现，它的值为：

    值 描述
    static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
    relative 生成相对定位的元素，相对于其正常位置进行定位。
    absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

  6. top, right, bottom, left：设置元素外边界相对于 上、右、下、左 的偏移，一般与 position 搭配使用。position 属性规定怎样定位。top, left, right, bottom 确定位置

  7. overflow 属性规定当内容溢出元素框时发生的事情。它的值有：

    值 描述
    visible 默认值。内容不会被修剪，会呈现在元素框之外。
    hidden 内容会被修剪，并且其余内容是不可见的。
    scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

    如果使用 scroll，不管内容是否溢出，都会显示滚动条。如果使用 auto，内容不溢出时不显示滚动条，溢出时显示滚动条。

    使用 overflow-x 和 overflow-y 可以分别规定 x 和 y 方向上的行为。

9.2 相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

1
2
3
4
5
#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

相对定位一般不在布局中使用，一般是用于做一些特效。

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

9.3 绝对定位

设置为绝对定位的元素框从文档流 完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中 所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个 块级框，而 不论原来它在正常流中生成何种类型的框。

1
2
3
4
5
#box_relative {
    position: absolute;
    left: 30px;
    top: 20px;
}

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序，0 为正常优先级，优先级大的元素会覆盖在优先级小的元素上面。优先级可以是负数，该属性不能继承。

9.4 浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到 包含框 或 另一个浮动框的边框 为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动的元素都必须指定一个宽度，否则浮动就没什么用了。

将一个元素浮动或绝对定位都会使元素从文本流中删除。设置成绝对定位时，其他块元素和内联元素都会忽略此元素；设置成浮动时，块元素会忽略此元素，但内联元素不会忽略此元素。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

CSS浮动

浮动用 float 属性实现，它的值有 left：向左浮动，right：向右浮动。

块元素会忽略浮动元素，但内联元素不会忽略。因此，创建浮动框可以使文本围绕图像（段落标签忽略了浮动元素，但文本没有忽略浮动元素）：

行框围绕浮动框

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。

clear：用来指定一个块元素的左边或右边或两边不能有浮动元素。设置了 clear 属性的块元素会下移，直到它旁边没有浮动元素。可能的值：

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。

如果有两个元素包含在一个容器中，这两个元素分别向左和向右浮动，容器不浮动，此时，这个容器不占空间，因为浮动元素脱离了文本流。如果想让该容器包含这两个元素，需要在这个容器的某个地方应用 clear：

容器包含浮动元素

但这样需要在容器中添加一个空元素来应用 clear，为了不添加无意义的代码，可以使用另一种方法：对容器也进行浮动。

但这样，下一个元素会受到浮动元素的影响，所以可以对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。

十、CSS 布局

常用布局方式：

  1. 流体布局（_liquid layouts_，扩展或收缩浏览器窗口时，页面中的内容会扩展以适应页面）
    • 以两栏布局为例：侧边栏定宽并浮动，主内容区靠近侧边栏的一边设置比侧边栏稍大的外边距，以分离侧边栏与主内容区，主内容区随窗口宽度扩展与收缩，侧边栏下面的元素应用 clear ，防止其与侧边栏重叠。
    • 缺点：
      1. 应用浮动的元素在 HTML 代码中的位置必须在其他元素前面。
      2. 当浏览器窗口变窄时，侧边栏的宽度可能会超过主内容区，导致主次不明。
    • 或者也可以主内容区定宽并浮动，侧边栏随窗口扩展与收缩。但同样的，当浏览器窗口过宽时，侧边栏的宽度甚至会比主内容区还大。
    • 侧边栏也可以使用百分比指定宽度，这样，就不会出现前面所述的第二个缺点，但主内容区的外边距要用 calc() 指定。
  2. 绝对布局
    • 以两栏布局为例：侧边栏定宽并使用绝对定位指定位置，主内容区靠近侧边栏的一边设置比侧边栏稍大的外边距，以分离侧边栏与主内容区，主内容区随窗口宽度扩展与收缩。
    • 这种布局方式的优缺点与流体布局相似，且多了一个缺点：无法防止侧边栏与其下面的元素重叠（因为绝对布局的元素会从文本流中脱离，其下面的元素“看不见”它）
    • 同样的，侧边栏也可以使用百分比指定宽度
  3. 凝胶布局（_jello layouts_，主内容区定宽并居中）
    • 以两栏布局为例：使用一个 <div> 包含 body 中的所有内容，为这个 div 设置固定的宽度（如：800px），使用 margin: auto; 将其居中，div 内部用 float 摆放元素。
    • 优点：优雅漂亮。
    • 缺点：内容定宽，无法扩展与收缩，空间利用率较小。
    • 这种布局方式常常用于博客。
  4. CSS 表格布局（可以两栏或多栏布局）
    • 用 <div> 标签模拟 <table>、<tr>、<td> 等标签包含要布局的元素，然后在 CSS 中将这些 div 的 display 属性分别指定为 table、table-row、table-cell，这样，就相当于形成了一个表格，使用表格的一些属性即可完成布局。（border-spacing 指定表格项的间距，width: xx em/xx% 指定表格项的宽度）。
    • 优点：
      1. 很容易实现多栏布局。
      2. 每一栏的大小都可以随浏览器窗口的大小漂亮的扩展与收缩。
      3. 并没有使用 HTML 表格标签，不会改变页面语义。
  5. 弹性布局（_flexible layout_）：
    • 使用 display: flex;
      • TODO

有几个程序员就有几种布局方式。

没有哪种布局方式是完美的，但可以使用媒体查询，在不同宽度区间使用不同的布局方式，多种布局方式结合起来以达到最好的布局效果。

十一、媒体查询

使用媒体查询有两种方式：

  1. 在 HTML 头部使用媒体查询来引用样式表：<link type="text/css" rel="stylesheet" href="main_mobile.css" media="screen and (max-device-width: 600px)" /> （加了一个 media 属性）

  2. 在样式表中使用媒体查询指定不同的样式：

    1
    2
    3
    4
    @media screen and (max-device-width: 600px) {
        p {...}
        h1 {...}
    }

媒体查询的主要属性：

  • screen / print 面向设备还是面向打印机
  • max-width / min-width 浏览器的最大、最小屏幕宽度
  • max-device-width / min-device-width 设备的最大、最小屏幕宽度
  • orientation 显示方向。有 landscape(横向) 和 portrait(纵向)
  • 其他属性

IE8 及以前版本不支持媒体查询。

媒体查询还处于发展当中，要时刻关注网上最新的信息。

十二、其他高级属性

  1. quotes：定义 <q> 标签的引号类型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <head>
        <style type="text/css">
            q {
                quotes: "~" "=";
            }
        </style>
    </head>
    <body>
        <q>引用的文本</q>
    </body>

    显示结果：~引用的文本=

  2. z-index：设置元素的堆叠顺序。只有使用 绝对、相对、固定定位 的元素才能指定 z-index 值。z-index 有最大值，但这是一个非常大的数，实际来讲，永远也不会用到那么大的 z-index 值。

  3. cursor：设置鼠标指向某元素时显示的光标形状

    值 描述
    default 默认光标（通常是一个箭头）
    auto 默认。浏览器设置的光标。
    crosshair 光标呈现为十字线。
    pointer 光标呈现为指示链接的指针（一只手）
    move 此光标指示某对象可被移动。
    e-resize 此光标指示矩形框的边缘可被向右（东）移动。
    ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
    nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
    n-resize 此光标指示矩形框的边缘可被向上（北）移动。
    se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
    sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
    s-resize 此光标指示矩形框的边缘可被向下移动（南）。
    w-resize 此光标指示矩形框的边缘可被向左移动（西）。
    text 此光标指示文本。
    wait 此光标指示程序正忙（通常是一只表或沙漏）。
    help 此光标指示可用的帮助（通常是一个问号或一个气球）。

  4. display：这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。

    值 描述
    none 此元素不会被显示。
    block 此元素将显示为块级元素，此元素前后会带有换行符。
    inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
    inline-block 行内块元素。（CSS2.1 新增的值）
    list-item 此元素会作为列表显示。
    run-in 此元素会根据上下文作为块级元素或内联元素显示。
    compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
    marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
    table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
    inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
    table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
    table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
    table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
    table-row 此元素会作为一个表格行显示（类似 <tr>）。
    table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
    table-column 此元素会作为一个单元格列显示（类似 <col>）
    table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
    table-caption 此元素会作为一个表格标题显示（类似 <caption>）

    block, inline, inline-block 的区别：

    • block：可以设置宽高、内外边距，但即使设置了宽度，元素也会独占一行。
    • inline：不能设置宽高，且上下内外边距不起作用，多个元素会在同一行，直到放不下时才换行。
    • inline-block：可以设置宽高、内外边距，且多个元素会放在同一行。

  5. visibility：规定元素是否可见。即使不可见的元素也会占据页面上的空间。请使用 “display” 属性来创建不占据页面空间的不可见元素。

    值 描述
    visible 默认值。元素是可见的。
    hidden 元素是不可见的。
    collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。

  6. opacity：设置元素不透明度。值为 0 ~ 1.0。实例：创建透明图像 - Hover 效果，创建文本在背景图像上的透明框

    注意：opacity 属性可以继承，且如果为父元素设置 opacity 属性，即使为子元素设置 opacity: 1;，子元素仍然会透明。

  7. outline：绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。该属性可以分开为 outline-color, outline-style, outline-width。如果想去除浏览器在 input 输入框中自动应用的 ouline 样式，可以：outline-width: 0;

  8. CSS 参考手册

十三、一些技巧

  1. 使用 CSS 隐藏多余文本（三个属性缺一不可）：

    1
    2
    3
    white-space: nowrap;	/* 溢出的文本不换行 */
    text-overflow: clip;	/* 如果是 ellipsis，溢出的文本用省略号代替 */
    overflow: hidden;		/* 隐藏溢出的文本 */

  2. 使用fixed定位的侧边栏也支持滚动：

    1
    2
    3
    4
    5
    overflow: auto;	/* 文本溢出时显示滚动条 */
    width: 100%;	/* 需要设定 width 和 height，overflow 属性才能起作用 */
    height: 100%;

    white-space: nowrap; /* 如果需要水平方向也有进度条，需要写这个属性 */