一、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,而不是 underlineline-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, centertext-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,并不是 underlineline-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 的值 italicoblique 的区别:

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

    • 绝对值:

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

      • 相对于周围的元素来设置大小
      • 允许用户在浏览器中改变文本大小
    • font-size 的单位如果是 px(如 16px),意思是字体的高度为 16px,而不是宽度

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

    • 如何设置字体大小?一种推荐的做法:<body>关键字(推荐 smallmedium),其他用 %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%
  • widthheight 只是指定内容区的宽高,不包括内边距。
  • 对于包含内容的块元素,一般设置 width 而不设置 height,因为 height 设置的太小有可能会使内容溢出
  • div { height: 100vh; } 可以让 div 占满屏幕。

八、CSS 盒模型

8.1 概述

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

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

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

    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 可以指定长度值,也可以使用关键词 thinmediumthick,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-xoverflow-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 属性分别指定为 tabletable-rowtable-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; /* 如果需要水平方向也有进度条,需要写这个属性 */