《Head First HTML 与CSS(第2版)》读书笔记

《Head First HTML 与CSS(第2版)》是比较基础的入门书,快速过一遍,了解HTML和CSS最基本的概念和知识。
book cover

标记语言

  • Web服务器存储并提供由HTML和CSS创建的网页。浏览器获取页面,并根据HTML和CSS显示网页的内容。
  • HTML 是超文本标记语言 (HyperText Markup Language) 的缩写,用以建立网页的结构。
  • CSS是层叠样式表 (Cascading Style Sheets) 的缩写,用以控制HTML的表现。
  • 大部分空白符(制表符、回车、空格)都会被浏览器忽略,不过可以利用空白符让HTML更有可读性。
  • 注释的格式为: <!-- 我是注释内容,可以写为多行 -->

元素

  • 通过HTML,我们利用标记来标示内容提供结构。我们把匹配标记以及它们包围的内容称为元素。
  • 元素由3部分组成:开始标记 + 内容 + 结束标记。不过有些元素(比如<img>)有所例外。
  • 开始标记可以有属性,如下文的 type
  • 结束标记在左尖括号后面、标记名前面有一个“/”,以明确这是结束标记。
  • 所有页面都要有一个<html>元素,其中要有一个<head>元素和一个<body>元素。
  • 网页的信息放在<head>元素里。
  • <body>元素里的内容就是你将在浏览器里看到的东西。

CSS

  • 可以在<style>元素中写CSS规则,为HTML网页增加CSS。<style>元素总要放在<head>元素里。
  • <style>元素有一个名为type的(可选的)属性,告诉浏览器你在使用什么类型的样式,由于要使用CSS,所以可以指定“text/css”类型。
  • 可以使用CSS在HTML中指定元素的特性。

    示例

    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
    <html>
    <head>
    <title>Starbuzz Coffee</title>
    <style type="text/css">
    body {
    background-color: #d2b48c;
    margin-left: 20%;
    margin-right: 20%;
    border: 2px dotted black;
    padding: 10px 10px 10px 10px;
    font-family: sans-serif;
    }
    </style>
    </head>
    <body>
    <h1>Starbuzz Coffe Beverages</h1>
    <h2>House Blend, $1.49</h2>
    <p>A smooth, mold blend of coffees from Mexico, Bolivia and Guatemala.</p>
    <h2>Mocha Caffe Latte, $2.35</h2>
    <p>A mixture of espresso, steamed milk and milk foam.</p>
    <h2>Chai Tea, $1.85</h2>
    <p>A spicy drink made with black tea, spices, milk and honey.</p>
    </body>
    </html>

深入了解超文本

超链接

  • 使用<a>元素从一个页面链接到另一个页面
  • <a>元素的href属性指定链接的目标文件。
  • <a>元素的内容是链接的标签,即在网页上看到的链接文本,文字和图像都可以用作链接的标签。
  • 单击一个链接时,浏览器会加载href属性中指定的Web页面。

    文件路径

  • 相对路径是相对于链接的源Web页面指向网站中其他文件的一个链接。
  • “..”表示“父文件夹”,使用“..”可以连接到源文件上一层文件夹中的一个文件。
  • 记住要用“/”字符分隔路径中的各个部分。
  • 为网站选择的文件名和文件夹名中不要使用空格。
  • 最好在构建网站初期组织网站文件,这样就不用再网站升级时修改一大堆的路径了。

构建模块

页面规划

  • 开始输入内容之前要规划好Web页面的结构。首先画出一个草图,然后创建一个略图,最后再写出HTML。
  • 尽可能使用元素来告诉浏览器你的内容的含义,而不是变现形式。
  • 规划页面时,首先设计大的块元素,然后用内联元素完善。
  • 一定要使用与内容含义最接近的元素。如果需要一个列表,就不要使用段落元素。

    块元素和内联元素

  • 块元素通常用作Web页面中的主要构建模块,内联元素往往用来标记小段内容。
  • <p><blockquote><ol><ul><li>都是块元素,它们单独显示,在内容前后分别有一个换行(默认地)。
  • <q><em>是内联元素。这些元素中的内容与其包含元素的其余内容放在一起。

void元素

  • void元素没有内容,只有一个标记组成。
  • 为方便使用,可省略void元素的结束标记,只使用一个开始标记。
  • <br><img>是void元素。

列表

  • 要结合两个元素建立一个HTML列表:将每个列表项放在一个<li>元素中,用<ol><ul>元素包围以上<li>元素。
  • <ol> (ordered list)是有序列表,会自动为列表创建序号;<ul> (unordered list)是无序列表。

嵌套元素

  • 嵌套元素是指完全包含在另一个元素中的元素。如果元素能正确地嵌套,所有标记都能正确匹配。
  • 可以在列表中建立嵌套列表,将<ol><ul>元素放在<li>元素中。

特殊字符

字符 字符实体
> &gt;
< &lt;
& &amp;
© &copy;
® &reg;
¥ &yen;
&trade;

更多的可以参考 HTML特殊字符编码对照表

连接起来

HTTP

  • URL是统一资源定位符 (Uniform Resource Locators),用以标识Web上的任何资源。
  • 典型的URL由一个协议、一个网站名和资源的一个绝对地址组成。
  • HTTP,超文本传输协议 (HyperText Transfer Protocol) 是一个请求和响应协议,用以在Web服务器和浏览器之间传送Web页面。

访问请求

  • 如果请求内容是一个目录而没有指定文件名,则Web服务器会查找一个默认页面并返回到浏览器。“index.html”和“default.htm”都是默认页面。
  • 正常的Web服务器几乎都在端口80接收请求。如果没有指定端口,则默认为80。

<a>元素的新应用

  • <a>元素的href属性中可以使用相对路径或URL来链接其他Web页面。一般而言,内部页面使用相对路径,对外部链接才使用URL。
  • 可以使用id属性为页面的某个元素创建一个目标位置。在<a>元素的href属性使用#后面加一个目标id,可以连接到页面中的那个目标位置。
  • 为了便于访问,可以在<a>元素中使用title属性提供链接的一个描述。
  • 使用target属性在另一个浏览器窗口中打开链接。不过,对于使用不同设备和浏览器的用户,可能会有不相同的表现。
    以下为示例代码:
    1
    2
    Read the <a target="_blank" href="http://wickedlysmart.com/buzz/index.html#Coffee"
    title="Read all about caffeine on the Buzz">Caffeine Buzz</a>

增加图像

<img>元素的应用

<img>的基本使用

  • 使用<img>元素在Web页面中放置图像。
  • 浏览器读取HTML页面之后,要先从Web服务器获取图像再显示,这与其他元素稍有不同。
  • <img>元素是一个内联元素,浏览器不会在图像前后插入一个换行。
  • 如果Web页面上有多个大图像,可以通过创建图像的缩略图使页面更可用,下载得更快。缩略图可以链接到原来的大图像上,这样当用户单击这些缩略图时可以看到原来的大图像。

<img>的属性

  • src属性指定图像文件的位置,可以使用相对路径包含本地网站中的图像,也可以使用URL包含其他网站的图像。
  • alt属性是对图像的一个有意义的描述。在一些浏览器中,如果无法找到图像,就会显示这个描述。
  • <img>元素的widthheight属性可以使用像素数提前指定图像的宽度和高度,从而让浏览器在获取图像前就开始建立图像的页面布局(但并不推荐如此调整图像大小,因为浏览器仍然需要获取整个图像)。

图像的知识

图像格式

JPEG、PNG和GIF是Web浏览器广泛支持的3种图像格式。

JPEG

特点
  • 可以表示包含多达1600万种不同颜色的图像。
  • 可以按不同质量压缩,可以很好地权衡图像质量和文件大小来满足实际需求。
  • 是一种“有损”格式,压缩文件大小时会丢掉图像的一些信息。
  • 不支持透明度
  • 不支持动画。
适用范围

适合连续色调图像,如照片和其他复杂图像。

PNG和GIF

特点
  • PNG有种不同的大小选择:PNG-24(支持数百万种颜色)、PNG-16(支持数千种颜色),以及PNG-8(支持256种颜色),可以根据需要来选择。
  • GIF可以表示最多256种不同颜色的图像。
  • PNG和GIF会压缩文件来缩小文件大小,不过不会丢失信息,是一种“无损”格式,但文件往往也更大。
  • PNG允许将颜色设置为“透明”,GIF只允许一种颜色设置为“透明”,PNG能提供比GIF更好的透明度控制。
  • GIF支持动画。
适用范围

适合保存logo和其他包含单色、线条或文本的简单图形。

图像的编辑

  • 太大的图像会使Web页面难以使用,下载和显示都很慢,可使用照片编辑应用如 Photoshop Elementsis 调整图像的大小。
  • 在 Photoshop Elementsis 中,使用 “Save for Web” 对话框中的 Matte(蒙版)颜色菜单来选择合适的颜色(与背景色相同),柔化PNG或GIF图像的边缘。

标准及其他

HTML5

  • 每个页面都要从一个文档类型定义 (doctype) 开始,来告诉浏览器你使用的HTML版本。
  • 紧接着doctype,<html>元素必须是Web页面的最顶层元素,页面中的所有其他内容都嵌套在这个元素中。
  • 只有<head><body>元素能直接放在<html>元素中,其他元素都必须放在这两个元素中。
  • <head>元素中的<meta>标记告诉浏览器内容类型和字符编码等关于一个Web页面的额外信息。
  • 大多数Web页面的HTML文件都使用utf-8编码,因此应在<head>中包含一个<meta charset="utf-8">标记。
  • 一定要在<head>元素中包含一个<title>属性。
  • alt属性是<img>元素中的必要属性。

    W3C验证工具

    W3C验证工具可以检查页面是否符合HTML5标准。

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <html>
    <head>
    <meta charset="utf-8">
    <title>Head First Lounge</title>
    </head>
    <body>
    <h1>Welcom to the New and Improved Head First Lounge</h1>
    <img src="drinks.gif" alt="Drinks">
    <p>
    Join us any evening for refreshing
    <a href="elixir.html">elixirs</a>, conversation and
    maybe agame or two of <em>Dance Dance Revolution</em>.
    Wireless access is always provided; BYOWS (Bring your own Web server).
    </p>
    <h2>Directions</h2>
    <p>
    You'll find us right in the center of downtown
    Webville. If you need help finding us, check out our
    <a href="directions.html">detailed derections</a>.
    Come join us!
    </p>
    </body>
    </html>

CSS入门

CSS基本语法

规则

  • CSS包含一些简单语句,称为规则,每个规则为选择的一些HTML元素提供样式。
  • 典型的规则包括一个选择器,以及一个或多个属性和值。
  • 注释:如果要注释CSS语句,将其包围在/**/之间。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    h1, h2 {
    font-family: sans-serif;
    color: gray;
    }
    h1 {
    border-bottom: 1px solid black;
    }
    p {
    color: maroon;
    }

选择器

  • 选择器指定规则将应用到哪些元素。
  • 通过用逗号分隔元素名,可以一次选择多个元素。

元素类

  • 可以通过给元素添加class属性将其归到某一类中,元素可以添加多个类名,类名之间用空格分隔。如

    1
    <p class="raspberry blueberry greentea">
  • 通过“元素名.类名”的形式在CSS中选中该类中的一个特定元素指定规则。如

    1
    2
    3
    p.greentea {
    clolor: green;
    }
  • 使用 “.classname” 可以选择属于这个类的所有元素。如

    1
    2
    3
    .greentea {
    color: green;
    }

属性和值

  • 规则中的所有属性和值都放在{}大括号之间
  • 每个属性声明以一个分号结束。
  • 继承:很多属性能够继承。例如,如果为<body>元素设置了一个可继承的属性,那么<body>的所有子元素都会继承这个属性。
  • 覆盖:通过为你想改变的元素创建一个更特定的规则,能覆盖该元素继承的属性。

常用CSS样式属性

属性 说明
color 设置文本元素的字体颜色
background-color 设置元素的背景颜色
background-image 在元素后面放置一个图像
border 在元素周围加边框,可以是实现、凸起、虚线边框
top 控制元素顶部的位置
left 制定一个元素的左边所在位置
padding 设置一个元素边缘和它的内容之间的空间距离
font-family 设置元素的字体格式
font-weight 控制文本的粗细,可以用来设置粗体
font-size 让文本更大或更小
font-style 设置斜体文体
text-align 将文本左对齐、居中或右对齐
line-height 设置一个文本元素中的行间距
letter-spacing 在字母之间设置间距
list_style 改变列表中列表项的外观

CSS验证工具

可以使用W3C的CSS验证工具验证CSS语法。

在HTML中使用CSS

  • 要在HTML中包含一个样式,最容易的办法就是使用<style>标记。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
    <head>
    <meta charset="utf-8">
    <title>Head First Lounge</title>
    <style type="text/css">
    <!-- 样式内容在此 -->
    </style>
    </head>
    <body>
    .
    .
    .
    </body>
    </html>
  • 对于HTML以及相当复杂的网站,可能要链接到一个外部样式表。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html>
    <head>
    <meta charset="utf-8">
    <title>Head First Lounge</title>
    <link type="text/css" rel="stylesheet" href="lounge.css">
    </head>
    <body>
    .
    .
    .
    </body>
    </html>

增加字体和颜色样式

字体样式

CSS提供了很多属性对字体的外观加以控制:

属性 说明
font-family 定制页面中使用的字体
font-size 控制字体大小
color 设置文本颜色
font-weight 设置字体的粗细
text-decoration 为文本增加更多风格,如上划线、下划线和删除线等

字体系列 font-family

字体系列类型

字体系列是一组有共同特征的字体,用于Web的字体系列有5个。

字体系列 说明
sans-serif(无衬线体) 包括没有衬线的字体。与serif字体相比,通常认为sans-serif字体在计算机屏幕上更容易识读
serif(衬线体) 包括有衬线的字体,更多用于新闻报纸的文字排版
Monospace(等距) 字体包含固定宽度的字符
Cursive(手写体) 包括看似手写的字体,有时会看到标题中使用这些字体
Fantasy 包含有某种风格的装饰性字体

衬线:字幕末端的装饰性“小细线”。

在CSS中指定字体系列

  • 访问者在你的Web页面上看到的字体取决于他们自己的计算机上安装了哪些字体,除非你使用Web字体。
  • 最好在font-family CSS属性中指定候选字体,以防用户没有安装你的首选字体,最后一个字体要指定为一个通用字体,如serif或sans-serif,这样如果找不到其他字体浏览器可以替换适当的字体。
    1
    2
    3
    4
    5
    body {
    font-family: Verdana, Geneva, Arial, sans-serif;
    /* 大多数PC上都有Verdana字体,另外大多数Mac上都有Geneva,Arial在PC和Mac上
    都很常见,如果其他字体都找不到,就使用默认的sans-serif字体。 */
    }

增加Web字体

1.找到一个字体:访问一些提供字体的网站,如Google Web FontsFonts.comExtensis,此处使用Emblema One。

2.确保有所需字体的所有格式,推荐使用Web开放字体格式,另外选择
TrueType作为候选,因为这种字体在所有浏览器上也得到了很好的支持(IE除外)。

字体格式 文件扩展名 说明
TrueType字体 .ttf
OpenType字体 .otf TrueType的更新版
Embedded OpenType字体 .eot OpenType的一种压缩形式,是Microsoft专用的,仅IE提供支持
SVG字体 .svg Svalable Vector Graphics是一种通用图像格式,SVG字体使用这种格式表示字符
Web开放字体格式 .woff 建立在TrueType基础之上,已经发展为Web字体的一个标准。大多数现代浏览器都对这种格式提供了很好的支持

3.把你的字体文件放在Web上,得到字体文件的URL,例如

1
2
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf

4.在CSS中增加@font-face属性,在CSS文件中的最上面增加一个@font-face规则:

1
2
3
4
5
6
7
/* 规则以 @font-face开头 */
@font-face {
/* @font-face规则会建立一个字体,并指定一个font-family名,以便以后使用 */
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}

5.在CSS中使用 font-family 名

1
h1 { font-family: "Emblema One", sans-serif; }

字体大小 font-size

字体大小调整方法

px像素

用像素指定字体大小,就是告诉浏览器字母高度(字母的最低部分与最高部分之间)是多少像素。

1
2
3
4
body {
/* 先指定一个数,后面是 “px”,之间不能有空格 */
font-size: 14px
}

百分数

用百分数指定字体大小时,会相对于另一个字体大小指出这个字体有多大(一般而言就是相对于父元素的字体大小)。

1
2
3
4
5
6
body {
font-size: 14px;
}
h1 {
font-size: 150%; /* 此处大小即为21px */
}

em

em 类似于百分数,也是一个相对度量单位,不过是指定一个比例因子。

1
2
3
4
5
6
7
8
9
body {
font-size: 14px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 1.2em /* 此处大小因大多数浏览器四舍五入为17px */
}

关键字

可以把一个字体大小指定为 xx-small, x-small, small, medium, large, x-large 或 xx-large,浏览器会使用自己定义的默认值来把这些关键字转换为像素值。

各个关键字对应的大小通常有以下关系(但不同浏览器中关键字的定义并不一定相同):

  • 每个大小大约比前一个大小大20%
  • small通常定义为大约12像素。

在CSS中指定字体大小

  1. 选择一个关键字(推荐 small 或 medium ),指定它作为 body 规则中的字体大小(这相当于页面的默认字体大小)。
  2. 使用 em 或百分数,相对于body字体大小指定其他元素地字体大小。
1
2
3
body { font-size: small; }
h1 { font-size: 150%; }
h2 {font-size: 120%; }
  • 只要改变 body 字体大小,就可以相应地按比例调整Web页面的所有字体大小,方便用户自定义调整。
  • 如果直接适用像素指定字体大小,老版本的 Internet Explorer 将不支持文本缩放,而且不利于维护。

字体粗细 font-weight

  • 将元素的 font-weight 属性设置为 bold,来使用粗体文本:

    1
    font-weight: bold;
  • 如果一个元素默认地设置为bold,或者从父元素继承了粗体,可以如下去掉粗体样式:

    1
    font-weight: normal;
  • 使用bolderlighter两个相对 font-weight 属性会相对于所继承的值使文本样式稍粗一些或者稍细一些。但由于没有多少字体支持粗细程度的微小差别,实际上这两个值通常没有任何效果,所以这些值很少使用。

  • 还可以把 font-weight 属性设置为 100 到 900 之间的一个数(100的倍数),不过这个特性也未得到字体和浏览器的广泛支持,所以通常并不使用。

字体风格 font-style

  • 将 font-syle 属性设置为italic或者oblique会使字体看起来是倾斜的。

    1
    2
    font-style: italic; /* 斜体 */
    font-style: oblique; /* 倾斜字体 */
  • 由于无法控制用户使用的字体和浏览器,实际上指定斜体或倾斜文本最终表现风格并没有明显的差别,所以不必严格区别,完全就用斜体

文本装饰 text-decoration

文本装饰允许你为文本增加一些装饰性的效果,如下划线、上划线和删除线。

1
2
3
4
5
6
em {
text-decoration: line-through; /* 添加一个从文本中间穿过的横线 */
text-decoration: underline; /* 添加下划线 */
text-decoration: overline; /* 添加上划线 */
text-decoration: none; /* 如果文本继承了不想要的文本装饰,使用“none”值来去除装饰 */
}

如果要对 text-decoration 指定多个值,需要将这几个值合并到一个 text-decoration声明中,因为不同规则中的装饰不会累加在一起:

1
2
3
em {
text-decoration: underline overline;
}

实际上,并不推荐使用 text-decoration 添加下划线,因为会被用户误认为是链接文本。作为替代,可使用 border-bottom属性给整个段落添加下划线。

1
2
3
4
5
h1, h2 {
color: #cc6600;
border-bottom: thin dotted #888888;
/* text-decoration : underline; */
}

颜色样式

Web颜色如何工作

  • Web颜色是混合不同数量的红、绿、蓝色得到的
  • 如果混合红色100%,绿色100%,蓝色100%,可以得到白色;
  • 如果混合红色60%,绿色60%,蓝色60%,可以得到灰色;
  • 如果混合红色80%,绿色40%,蓝色0%,可以得到橙色;
  • 如果混合红色0%,绿色0%和蓝色0%,可以得到黑色。

指定Web颜色方法

按名指定颜色

要在CSS中描述颜色,最直接的方法就是使用颜色名:

1
2
3
body {
background-color: silver; /* 不区分大小写 */
}

有16种基本颜色和150种扩展颜色可以采用这种方法指定,这些颜色名只是预定义了红、绿、蓝三种颜色分量的多少。

16种基本颜色分别是:Aqua、black、Blue、Fuchsia、Gray、Green、
Lime、Maroon、Navy、Olive、Purple、Red、Silver、Teal、White、Yellow。
所有浏览器中肯定都有这16种颜色,不过可能只在较新的浏览器中能找到150种扩展颜色。

用红绿蓝值指定颜色

可以按红、绿、蓝分量的多少来指定一个颜色。以上文的橙色为例,可以如下表示:

1
2
3
4
body {
background-color: rgb(80%, 40%, 0%);
/* 以 “rgb” 开头,这是 red,green,blue 的缩写,后面依次指定其百分比 */
}

还可以将红、绿、蓝值指定为0到255之间的一个数值,如下表示:

1
2
3
4
body {
background-color: rgb(204, 102, 0);
/* 数值为255与相应百分数的乘积 */
}

使用十六机制码指定颜色

将表示颜色分量的红绿蓝值依次转换成十六进制码就是相应的十六进制码颜色表示方法:

1
2
3
4
body {
background-color: #cc6600
/* 十六进制的cc对应十进制的204,66对应102,0对应0 */
}

如果每一组分量中两位数字都相同,可以使用简写,如 #cc6600 可以缩写为 #cb0。

找到Web颜色

盒模型 box model

盒模型的基本概念

CSS使用一个盒模型来控制元素如何显示。所有元素都当做盒子:段落、标题、块引用、列表、列表项等,甚至内联元素(如<em>和链接)。盒子由内容区和可选的内边距、边框和外边距组成。

区域 说明
内容区 content area 内容区包含元素的内容(例如文本或图像),它的大小通常正好能包含全部内容。内容区被内边距包围。
内边距 padding 内边距是可选的,通过使用内边距,可以在内容与盒子边框之间创建一些看得到的额外空间。作为元素的一部分,元素的背景颜色(或背景图像)会延伸到内边距下面。内边距是透明的,没有颜色,也没有自己的装饰。
边框 border 元素周围可以添加一个可选的边框,这个边框会包围内边距,提供了从视觉上分离内容的一种手段。边框可以有各种不同的宽度、颜色和样式。
外边距 margin 外边距也是可选的,它允许在元素和其他元素之间增加空间。类似于内边距,外边距也是透明的,本身没有颜色或装饰。

盒模型的一般设置

边距

行间距 line-height

使用 line-height 属性可以设置文本行之间的间距,line-height属性可以继承,行间距的指定方式有以下5种:

描述 继承问题
normal 默认。设置合理的行间距,一般为1.2 子元素根据自身字体大小乘以固定倍数(由浏览器给出,一般为1.2)计算行间距,不继承父元素属性,元素随着自身字体大小做相应的缩放
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距 与normal类似,不过倍数可自定义
length 使用像素数设置固定的行间距 继承指定的固定行间距
% 基于当前字体尺寸的百分比行间距 与设置数字不同,此处继承父元素的行间距绝对值,而非比例
inherit 规定应该从父元素继承行间距的值

内边距和外边距

  • 内边距和外边距大小可以用像素或百分数设置。
  • 对于外边距、内边距或边框,CSS提供了相应的属性,可以一次对所有四个边完成设置,也可以单独设置任意一边(但后设置的会覆盖先设置的值,因此如需对某一边进行单独设置,请将其规则放置在通用规则后面)。
1
2
3
4
5
6
.guarantee {
padding: 25px;
padding-left: 80px; /* 注意设置顺序,先通用,再特例 */
margin: 30px;
margin-right: 250px;
}

边框

边框样式 border-style

border-style 属性可以控制边框的视觉样式,共有8种不同的边框样式,包括实线(solid)、破折线(dashed)、虚线(dotted)、双线(double)、槽线(groove)、内凹(inset)、外凸(outset)和脊线(ridge)。

1
border-style: groove;

边框宽度 border-width

边框宽度可以用像素设置,也可以使用关键字 thinmediumthick来指定。

1
2
border-width: thin;
border-width: 5px;

边框颜色 border-color

边框颜色设置与设置字体颜色类似,可以使用颜色名,rgb值或十六进制码来指定颜色。

1
2
3
border-color: red;
border-color: rgb(100%, 0%, 0%);
border-color: #ff0000;

边框圆角 border-radius

使用 border-radius 属性可以对有边框的元素创建圆角。

1
2
border-radius: 15px;
border-radius: 3em; /* 如果使用em,边框半径的度量相对于元素的字体大小。 */

特定某一边的边框特性化

就像外边距和内边距一样,边框还可以指定任意一边的边框样式、宽度、颜色或圆角。

1
2
3
4
border-top-color: black;
border-top-style: dashed;
border-top-width: thick;
border-top-left-radius: 15px;

背景图像 background-image

background-image 和 <img>

backgound-image 属性用途非常特定,只是设置一个元素的背景图像,属于表现方面的一个装饰,在页面中没有任何具体的意义。

<img>元素用来包含一个图像,它在页面中可能有更为重要的作用,如照片或 logo。

1
background-image: url(images/background.gif);

注意 URL两边不需要加引号。

background-position

background-position 属性会设置图像的位置,可以按像素指定,也可以指定为一个百分数,或者使用关键字指定,如 top、left、right、bottom 和 center。

1
background-position: top left; /* 将这个图像放在元素的左上角 */

background-repeat

background-repeat 属性会设置背景图像的平铺行为,默认地背景图像会在水平和垂直方向上重复。

1
2
3
4
5
background-repeat: repeat; /* 默认行为 */
background-repeat: no-repeat; /* 图像显示一次,不重复 */
background-repeat: repeat-x; /* 图像只在水平方向上重复 */
background-repeat: repeat-y; /* 图像只在垂直方向上重复 */
background-repeat: inherit; /* 按照父元素的设置来处理 */

类和 id

  • 对于希望成组指定样式的元素要使用 class 属性。
  • 使用id属性为元素指定一个唯一的名字。还可以使用id属性为元素提供唯一的样式。
  • 一个元素只能有一个id,不过它可以属性多个类。

混合样式表

  • 在HTML中可以使用多个样式表。如果两个样式表包含冲突的属性定义,HTML文件中最后链接的样式表最为优先。
  • 使用多个样式表,一方面可以在继承CSS样式的同时覆盖和修改特定的样式,另一方面也可以针对现实页面的不同设备类型来调整页面的样式,以提供最优的表现形式。

设备指定

media 属性允许在应用样式表时指定设备类型,通过创建一个“媒体查询”来指定设备类型,媒体查询要与设备匹配。

1
2
3
4
<!-- 下面查询指定了有屏幕且屏幕宽度不超过480像素的设备类型 -->
<link rel="stylesheet" href="lounge-mobile.css" media="screen and (max-device-windth: 480px)">
<!-- 指定设备类型为打印机 -->
<link rel="stylesheet" href="lounge-print.css" media="print">

查询中有很多属性可以使用,如屏幕宽度min-device-widthmax-device-width、以及显示方向orientation(这可以是横向(landscape)或纵向(protrait)。可以根据需要为HTML增加多个<link>标记,涵盖所要支持的所有设备。

CSS的 @media 规则指定

要为CSS指定有特定属性的设备,还可以直接写在CSS中。

1
2
3
4
5
6
7
8
9
10
@media screen and (min-device-width: 481px) {
#guarantee {
margin-right: 250px;
}
}
@media print {
body {
font-family: Times, "times New Roman", serif;
}
}

需要注意的是,如果使用CSS的 @media 规则,要把所有规则都放在一个文件中,再用 @media 规则将其分开,这样 CSS会变得非常庞大。

div 与 span、

<div>元素

  • 逻辑区 (logical section) 就是页面上彼此相关的一组元素,找出逻辑区有助于标识主内容区以及页面的页眉和页脚。
  • <div>元素用于将相关的元素归组在一起,放在逻辑区中。可以使用<div>元素将需要共同样式的元素归组在一起。
  • 使用嵌套<div>元素为文件增加更多结构,这有利于保证结构清晰或者方便增加样式。不过除非确实需要,否则不要过多地增加结构。
  • 一旦用<div>元素将内容区归组在一起,类似于其他块元素,可以对这些<div>增加样式。例如,对于包含在<div>中的一组元素,可以使用嵌入这些元素的<div>的边框属性,对这组元素增加一个边框。

元素宽度和对齐方式

元素宽度 width

  • width 属性设置一个元素内容区的宽度,可以通过像素数指定具体大小,也可以指定一个百分数。如果使用百分数,那么宽度会计算为元素所在容器宽度的一个百分比(容器可以是<body><div>等)。
  • 一个块元素的默认宽度是 “auto”,这说明它会延伸占满浏览器的整个宽度。
  • 一个元素的总宽度是内容区宽度,加上所增加的内边距、边框和外边距的宽度。
  • 一般而言,一个元素的高度是默认的,也就是 auto,浏览器会在垂直方向上延伸内容区,使所有内容都可见。一般地,不用指定元素的高度。

元素内容对齐 text-align

  • text-align 是块元素的一个属性,用来将这个块元素中的所有内容对齐(包括内联元素和嵌套块元素)。
  • 这个属性可以由块元素中的所有嵌套的块元素继承。
  • 内联元素(如<img>)上无法直接使用 text-align 属性。

子孙选择器

可以使用子孙选择器来选择嵌套在其他元素中的元素。

1
2
3
4
div h2 { ... } /* 选择嵌套在<div>元素中的所有<h2>(包括子元素、孙子元素等) */
#elexirs h2 { ... } /* 选择id为elixirs元素中的所有<h2> */
#elexirs>h2 { ... } /* 选择id为elixirs的元素中的直接子元素<h2> */
h2#elexirs { ... } /* 选择id为elixirs的<h2>元素,注意与以上选择器作区分 */

属性的快捷形式

内外边距的快捷形式

1
2
3
4
padding: 0px 20px 30px 10px; /* 依次为上、右、下、左的内边距(顺时针方向) */
margin: 0px 20px 30px 10px; /* 与内边距相同的顺时针的规定顺序 */
padding: 20px; /* 所有内边距都为20px */
margin: 0px 20px; /* 依次指定了上下边距、左右边距 */

边框和背景的快捷形式

边框和被背景的快捷形式没有顺序要求,更加灵活:

1
2
3
border: solid thin #007e7e;
border: #007e7e solid thin;
background: white url(images/cocktail.gif) repeat-x;

字体属性的快捷形式

字体属性的快捷形式如下:

1
font: font-style font-variant font-weight font-size/line-height font-family;

其中 font-style、font-variant、font-weight、line-height 四个属性是可选的,但必须指定 font-size 和 font-family(必须指定一个字体),如下:

1
font: small/1.6em Verdana, Helvetica, Arial, sans-serif;

<span>

  • <span>内联元素与<div>元素类似,它用于将相关的内联元素和文本归组在一起。
  • 类似于<div>,可以将<span>元素增加到类(或者指定唯一的id),对它们增加自定义的样式。

<a>元素和伪类 Pseudo-class

  • <a>元素具有多种状态:未访问(link)、已访问(visited)、悬停(hover)、聚焦(focus)和活动(active)等,根据状态的不同,需要指定不同的样式。
  • 伪类是内置的类,通过伪类可以单独的为<a>各个状态指定样式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    a:link {
    color: green;
    }
    a:visited {
    color: red;
    }
    a:hover {
    color: yellow;
    }
  • 伪类first-child对应元素的第一个子元素,如<blockquote>中的第一个段落,用last-child伪类选择<blockquote>的最后一个段落。

层叠

在多个样式表中,对同一个元素的样式规定,如何选择基本遵循以下两个原则:

  1. 从规定者来看,按作者、读者和浏览器的优先顺序排列;
  2. 从CSS选择器来看,按id、类或伪类、元素名的优先顺序排列。

布局与定位

流体布局 liquid layouts

浏览器使用流在页面中放置元素。块元素从上向下流,各元素之间有一个换行。默认的,每个块元素会占浏览器窗口的整个宽度。内联元素在块元素内部从左上方流向左下方。如果需要多行,浏览器会换行,在垂直方向上扩展外围块元素,来包含这些内联元素。

正常页面流中两个块元素上下相邻的外边距会折叠为最大外边距的大小,或者如果两个外边距大小相同的,则会折叠为一个外边距(块元素左右相邻不折叠)。

布局方式

流体布局是指,扩展浏览器窗口时,页面中的内容会扩展以适应页面。除此之外,还有冻结布局和凝胶布局。

浮动布局 float layouts

浮动元素会从正常流中取出,浮动到左边或右边。元素通过 float 属性来实现浮动,其值可以设置为 right 或 left。

1
2
3
4
#amazing { /* 指定标识 */
width: 200px; /* 指定宽度,浮动元素必须有特定的宽度,不能设置为auto。 */
float: right;
}

浮动元素放在块元素之上,不会影响正常的页面流。不过,内联内容会考虑浮动元素的边界,围绕着这个浮动元素。它非常适合在一个文本段落中浮动图像,让文本围绕着这个图像。

clear属性用来指定一个块元素左边或右边(或者左右两边)不能有浮动元素。设置了clear属性的块属性会下移,知道它旁边没有块元素。

1
2
3
4
#footer {
...
clear: right /* 指定该元素右边不允许有浮动内容 */
}

冻结布局 frozen layouts

概念

冻结布局是指,其中内容的宽度是固定的,不会随着浏览器窗口扩展或收缩。这有一个好处,可以对设计提供更多控制,不过也要付出代价,这样就不能有效地使用浏览器宽度了。

冻结方式

HTML修改

增加一个新的<div>元素包围页面中的所有内容(<body>元素中的内容),指定id(例如“allcontent”)。

CSS修改

限定“allcontent” <div>中所有元素的内容大小,使之有一个固定的宽度。

1
2
3
4
5
6
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47
}

凝胶布局 jollo layouts

凝胶布局是指,其中内容宽度是固定的,但是外边距会随着浏览器窗口扩展或收缩。凝胶布局通常会把内容放在中央。这与冻结布局有同样的好处,不过通常更美观。

1
2
3
4
5
6
7
8
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47
margin-left: auto;
margin-right: auto;
}

定位

position 属性可以设置为4个值: static(静态)、absolute(绝对)、fixed(固定)和relative(相对)。
使用绝对、固定和相对定位时,属性top、right、bottom和left可以用来指定元素的位置。

静态定位

静态定位是默认方式,将元素放在页面的正常流中。

绝对定位

绝对定位允许将元素放在页面上的任何位置。默认地,绝对定位元素会相对于页面边界来放置。如果一个绝对定位元素嵌套在另一个定位元素中,这个元素就会相对于外包含元素(即其父元素)定位。

绝对定位元素可以使用z-index属性分层放置,使一个元素在另一个元素上面。z-index值越大,说明它层次越高(在屏幕上离你越近)。

固定定位

固定定位元素总是相对于浏览器窗口定位,页面滚动时,固定定位的元素不会移动。页面中的其他内容会在这些固定定位元素下面正常滚动。

相对定位

相对定位元素首先正常流入页面,然后按指定的量偏移,从而流出它们原先所在的空间。

使用相对定位时,left、right、top和bottom是指距正常流中该元素位置的偏移量。

表格显示

CSS表格显示允许按一种表格布局来摆放元素。

如何使用表格显示

增加HTML结构

要创建表格显示,需要使用对应表格的一个块元素,对应行的块元素,以及对应单元格的块元素。通常,这些块元素都是<div>元素(如要使用图像等内联元素,需要将其包装在一个<div>元素中使用)。

1
2
3
4
5
6
7
8
9
10
<div id="tableContainer"> <!-- 为整个表格指定块元素 -->
<div id="talbeRow"> <!-- 为 "main"和"sidebar"对应行指定块元素 -->
<div id="main"> <!-- 为 "main" 指定块元素 -->
...
</div>
<div id="sidebar"> <!-- 为 "sidebar" 指定块元素 -->
...
</div>
</div>
</div>

使用CSS创建表格显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#tableContainer {
display: table; /* 创建整个表格结构 */
border-spacing: 10px; /* 为表格中的单元格指定10像素的边框间距,类似于常规元素的外边距 */
}
#tableRow {
display: table-row; /* 指定该元素以表格行的形式显示 */
}
/* 以下设置表格中单元格的显示格式 */
#main {
display: talbe-cell; /* 以表格单元格的形式显示 */
font-size: 105%;
background: #efe5d0 url(images/background.gif) top left;
padding: 15px;
/* margin: 0px 10px 10px 10px 由于表格属性中已经规定 border-spacing,此处无需再规定外边距*/
vertical-align: top; /* vertical-align 属性使得单元格的所有内容相对于单元格上边对齐 */
}
#sidebar {
display: table-cell;
font-size: 105%;
background: #efe5d0 url(images/background.gif) bottm right;
padding: 15px;
/* margin: 0px 10px 10px 10px */
vertical-align: top;
}

vertical-align属性:垂直对齐可以设置为 top(顶端对齐)、middle(中间对齐)、或bottom(底端对齐),浏览器默认的对齐方式为 middle。
列的宽度:可以用 width 属性控制表格列的宽度,通过使用百分数,可以使表格随着浏览器窗口大小的调整扩展和收缩。

双栏布局方案的选择

浮动布局的特点

使用 float 使边栏浮在页面主内容上,并使用clear确保这个浮动边栏不会与页脚重叠。但存在一些局限:

  • 如果希望浮动元素在某个元素后面,就要让它紧挨着放在哪个元素下面。这样,如果要在页面主内容上浮动某元素,则它需要移动到页眉下,主内容上面,这种顺序并不能反映页面中内容的相对重要性。
  • 使用 float时,无法创建两个高度相同的列。

凝胶布局的特点

凝胶布局中,由一个固定大小的<div>包围页面中的所有内容,然后利用auto属性允许外边距扩展,从而提供了一个适当居中,固定大小的页面。这要就解决了内容顺序的问题,但其缺点在于,内容不会扩展来填满整个浏览器窗口(虽然很多人可能根本不认为这是一个缺点)。

绝对布局的特点

使用绝对定位能保证内容的顺序不会被布局打乱。通过将边栏设置为一个特定的宽度,并将其定位在主内容右边,就有了一个可以随页面大小扩展和收缩的主内容区,而边栏会一致保持固定的的大小固定在浏览器窗口右侧。

如果希望页面的某一部分大小固定,而另一部分可以扩展和收缩,这就是一个很好的布局选择;或者如果需要精确地指定某个元素的位置,也很适合选择绝对定位。

不过这种布局在此处存在一个缺点:浏览器变宽时,边栏会再次覆盖页脚。

表格显示布局的特点

通过在HTML结构使用<div>,形成表格显示布局,可以得到完美对齐的两列,而且可以随浏览器窗口的大小扩展和收缩。
如果需要建立多栏布局,而且内容栏是均匀的,表格显示就是一个很好的布局策略。

HTML5标记

HTML5为HTML增加了很多新元素,但较早的浏览器不支持新的HTML5元素,所以一定要知道主要用户使用哪些浏览器访问你的Web页面,除非能确保新元素对你的用户适用,否则不要贸然使用这些新元素。

div元素和HTML5新元素

<section>用于对相关的内容分组。

<article>用于类似博客帖子、论坛帖子和新闻报道等独立的内容。

<aside>用于表示不作为页面主内容的次要内容,如插图和边栏。

<nav>用于组织网站导航链接。

<header>将标题、logo和署名等通常放在页面或区块最上方的内容组织在一起。

<footer>将诸如文档信息、法律措辞和版权说明等通常在页面或区块最下方的内容组织在一起。

<time>用来标记时间和日期。

<div>仍然用于建立结构。它通常将元素组织在一起来指定样式,或者有些内容可能不适合放在HTML5中那些与结构相关的新元素中,这些内容就可以使用<div>创建结构。

video元素

<video>用于为页面增加视频。

视频编码是用来创建视频文件的编码。常用的编码包括h.264、Vp8和Theora。

视频同期文件包含视频、音频和元数据。流行的容器格式包括MP4、OGG和WebM。

要提供多个视频源文件,确保你的用户可以在他们的浏览器中观看你的视频文件。

表格与更多列表

表格的基本使用

HTML表格使用元素<table><tr><th><td>建立表格数据结构。其中<table>元素定义并包围整个表格,<tr>元素按行定义,<td>元素定义每行包含的一个或多个数据单元格,<th>元素表示作为行或列表格的数据单元格。

可以用<caption>元素提供关于表格的额外信息(表格标题)。

表格边框和边距

表格数据单元格有内边距和边框,也有边框间距(border-spacing,相当于外边距,也就是单元格之间的间距)。

border-collapse是针对表格的一个特殊的CSS属性,允许将单元格边框合并为一个边框,让外观更简洁。

表格的CSS表现

可以用text-alignvertical-align CSS属性改变表格单元格中数据的对齐方式。

可以用background-color属性为表格增加颜色。可以为整个表格、各行或者单个的数据单元格增加背景颜色。

使用CSS nth-child伪类可以为表格隔行增加背景颜色。

1
2
3
4
5
6
tr:nth-child(even) {
background-color: #fcba7a;
}
tr:nth-child(odd) {
background-color: green;
}

表格的进阶使用

如果一个数据单元格没有数据,<td>元素中不放置任何内容。不过,需要使用一个<td>......</td>元素维持表格的对齐。

如果数据单元格需要跨多行或多列,可以使用<td>元素的rowspancolspan属性。

可以在表格中嵌套表格,将<table>元素及其所有内容放在一个数据单元格中。

列表的更多使用

list-style-type用于指定列表中使用的项目符号。

1
2
3
4
5
6
li {
list-style-type: dics; /* 默认的列表标记类型,为实心圆形标记 */
list-style-type: circle; /* 空心圆形标记 */
list-style-type: square; /* 方块标记 */
list-style-type: none; /* 无列表标记 */
}

list-style-image允许指定列表标记图像。

1
2
3
4
5
li {
list-style-image: url(images/backpack.gif);
padding-top: 5px;
margin-left: 20px;
}

HTML表单

form 元素

<form>元素定义了表单,所有表单输入元素都嵌套在这个元素中。

1
2
3
<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
...
</form>

method属性包含发送表单数据的方法,可以是POST或GET。POST打包表单数据,并把它作为请求的一部分发送到服务器。GET打包表单数据,并把数据追加到URL。
如果表单数据应当是私有的,或者表单数据很多,如使用了一个<textarea>或者file <input>元素,就应当使用POST。
对于可以加书签的请求,要使用GET,如查看当前时事的表单。

input 元素

<input>元素是一个void元素,在Web页面上可以作为多种不同的输入控件,这取决于它的type属性值。

文本输入

text <input>元素用于输入一行文本。它还有一些可选的属性,允许为这个控件设置最大字符个数和宽度。

1
<input type="text" name="fullname" maxlength="100" value="type something">

text 类型中的 value属性可以用来为单行文本输入控件提供一个初始值

Placeholder 属性

表单中大多数不同类型的<input>元素都可以使用 placeholder 属性,这会为表单用户提供一个提示,指出你希望在一个输入域中输入什么内容。

1
<input type="text" placeholder="China">

Country:

Required

required属性指示一个输入域是必要的,要让表单成功提交,这个输入域中必须有值。

1
<input type="text" placeholder="China" required="required">

提交输入

submit <input>元素会创建一个按钮,允许提交表单。点击这个按钮时,浏览器会把表单发送到服务器脚本进行处理。

1
<input type="submit" value="updata">

在提交按钮上设置value属性可以改变按钮上显示的文本。

单选钮输入

radio <input>元素会创建包含多个按钮的控件,所有同名的单选钮构成一组互斥的按钮。

1
2
<input type="radio" name="hotornot" value="hot">
<input type="radio" name="hotornot" value="not">

复选框输入

checkbox <input>元素会创建一个复选框控件,通过为多个复选框指定相同的名字,可以创建一组选择。

1
2
3
<input type="checkbox" name="spice" value="Salt">
<input type="checkbox" name="spice" value="Pepper">
<input type="checkbox" name="spice" value="Garlic">

文件输入

file 类型会创建一个文件输入控件,允许选择一个文件,表单提交时,文件的内容会随其他的表单数据意思发送给服务器。使用这个元素的前提是必须使用POST方法。

1
<input type="file" name="doc">

HTML5新增的其他输入类型

数字输入

number <input>元素会创建一个只允许数字字符的单行文本输入控件,还可以用可选的属性指定这个元素允许的最小数和最大数。

1
<input type="number" min="0" max="20">

范围输入

range <input>元素会创建一个滑动条控件提供数字输入。number和range都有一个可选的step属性,可以用来指定值的间隔数(步长)。

1
<input type="range" min="0" max="20" step="5">

颜色输入

color 类型会在支持这个类型的浏览器中创建一个颜色选择器(否则只会创建一个普通的文本输入控件)。

1
<input type="color">

日期输入

date 类型会在迟滞这个类型的浏览器中创建一个日期选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<input type="date">
```
<input type="date">
#### email、Tel和URL输入
```html
<input type="email">
<input type="tel">
<input type="url">
```
Email: <input type="email">
Phone: <input type="tel">
URL: <input type="url">
这三种 input 类型在桌面浏览器上看不出任何差别。不过在移动浏览器上,它们会得到一个定制键盘,可以更容易地输入需要的字符,如`/`、@和数字。
## 其他表单元素
### 文本区
`<textarea>`元素会创建一个多行文本输入区。
```html
<textarea name="comments" cols="10" rows="48">这是初始文本</textarea>


rows属性指定文本区高度为多少个字符,cols属性指定文本区宽度为多少个字符,开始和结束标记之间的左右文本会成为浏览器文本区空间中的初始文本。

菜单控件

<select>元素会创建一个菜单,包含一个或多个<option>元素。<option>元素定义了菜单中的菜单项。

1
2
3
4
5
6
7
<select name="characters" multiple="multiple"> <!-- 若增加布尔属性multiple,则变成一个多选菜单 -->
<option value="Buckaroo">Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny">Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John">John Parker</option>
</select>