当前位置：文档库 › lecture 01.04 w3school CSS 教程

lecture 01.04 w3school CSS 教程

目录
1.1. CSS 教程................................................. 2 1.1.1. CSS 教程 ..................................... 2 1.2. CSS 简介................................................. 2 1.2.1. 需要具备的基础知识 .................... 2 1.2.2. CSS 概述 ..................................... 2 1.2.3. 样式解决了一个普遍的问题 ........ 3 1.2.4. 样式表极大地提高了工作效率 .... 3 1.2.5. 多重样式将层叠为一个 ................ 3 1.3. CSS 基础语法......................................... 3 1.3.1. CSS 语法 ..................................... 3 1.3.2. 值的不同写法和单位 .................... 3 1.3.3. 记得写引号 .................................... 4 1.3.4. 多重声明： .................................... 4 1.3.5. 空格和大小写敏感 ........................ 4 1.4. CSS 高级语法......................................... 4 1.4.1. 选择器的分组 ................................ 4 1.4.2. 继承及其问题 ................................ 4 1.4.3. 友善地对待 Netscape 4 .......... 4 1.4.4. 继承是一个诅咒吗？ .................... 5 1.5. CSS 派生选择器..................................... 5 1.5.1. 派生选择器 .................................... 5 1.6. CSS id 选择器....................................... 5 1.6.1. id 选择器 ...................................... 5 1.6.2. id 选择器和派生选择器 .............. 6 1.6.3. 单独的选择器 ................................ 6 1.7. CSS 类选择器......................................... 6 1.8. 如何创建 CSS......................................... 7 1.8.1. 如何插入样式表 ............................ 7 1.8.2. 多重样式 ........................................ 8 1.9. CSS 背景................................................. 8 1.9.1. 背景色 ............................................ 8 1.9.2. 背景图像 ........................................ 8 1.9.3. 背景重复 ........................................ 9 1.9.4. 背景定位 ........................................ 9 1.9.5. 背景关联 ...................................... 10 1.9.6. CSS 背景实例 ........................... 10 1.9.7. CSS 背景属性 ........................... 11 1.10. CSS 文本............................................... 11 1.10.1. 缩进文本 ................................... 11 1.10.2. 水平对齐 ................................... 12 1.10.3. 字间隔 ....................................... 12 1.10.4. 字母间隔 ................................... 12 1.10.5. 字符转换 ................................... 13 1.10.6. 文本装饰 ................................... 13 1.10.7. 处理空白符 ............................... 13
1.10.8. 文本方向................................... 14 1.10.9. CSS 文本实例： .................... 14 1.10.10. CSS 文本属性 ..................... 15 1.11. CSS 字体 .............................................. 15 1.11.1. 指定字体................................... 15 1.11.2. CSS 字体实例： .................... 16 1.11.3. CSS 字体属性 ........................ 16 1.12. CSS 列表 .............................................. 16 1.12.1. CSS 列表 ................................ 16 1.12.2. CSS 列表实例： .................... 17 1.12.3. CSS 列表属性(list) ............. 17 1.13. CSS 表格 .............................................. 17 1.13.1. 实例：....................................... 17 1.13.2. CSS Table 属性................... 17 1.14. CSS 框模型概述 .................................. 18 1.14.1. CSS 框模型概述 .................... 18 1.14.2. 浏览器兼容性........................... 18 1.15. CSS 内边距 .......................................... 19 1.15.1. CSS padding 属性 ............. 19 1.15.2. 单边内边距属性....................... 19 1.15.3. 内边距的百分比数值............... 19 1.15.4. CSS 内边距实例： ................ 19 1.15.5. CSS 内边距属性 .................... 20 1.16. CSS 边框 .............................................. 20 1.16.1. CSS 边框 ................................ 20 1.16.2. 边框与背景............................... 20 1.16.3. 边框的样式............................... 20 1.16.4. 边框的宽度............................... 21 1.16.5. 边框的颜色............................... 21 1.16.6. CSS 边框实例： .................... 22 1.16.7. CSS 边框属性 ........................ 23 1.17. CSS 外边距 .......................................... 24 1.17.1. CSS margin 属性 ............... 24 1.17.2. 值复制....................................... 24 1.17.3. 单边外边距属性....................... 25 1.17.4. 提示和注释............................... 25 1.17.5. CSS 外边距实例： ................ 25 1.17.6. CSS 外边距属性 .................... 25 1.18. CSS 外边距合并 .................................. 25 1.18.1. 外边距合并............................... 26 1.19. CSS 定位 (Positioning) .................. 26 1.19.1. CSS 定位和浮动 .................... 27 1.19.2. 一切皆为框............................... 27 1.19.3. CSS 定位机制 ........................ 27 1.19.4. CSS position 属性 ............. 27 1.19.5. 实例........................................... 28
1

1.19.6. CSS 定位属性 ........................ 28 1.20. CSS 相对定位....................................... 28 1.20.1. CSS 相对定位 ........................ 29 1.20.2. CSS 相对定位实例 ................ 29 1.21. CSS 绝对定位....................................... 29 1.21.1. CSS 绝对定位 ........................ 29 1.21.2. CSS 绝对定位实例 ................ 29 1.22. CSS 浮动............................................... 30 1.22.1. CSS 浮动 ................................ 30 1.22.2. CSS float 属性 ..................... 30 1.22.3. 行框和清理 ............................... 30 1.22.4. CSS clear 属性 .................... 32 1.22.5. 浮动和清理实例 ..................... 32 1.23. CSS 尺寸 (Dimension)....................... 32 1.23.1. CSS 尺寸实例： .................... 32 1.23.2. CSS 尺寸属性 ........................ 33 1.24. CSS 分类 (Classification)............. 33 1.24.1. CSS 分类(Classification)实例： 33 1.24.2. CSS 分类属性 (Classification) .................................... 33 1.25. CSS 伪类 (Pseudo-classes)............. 34 1.25.1. CSS 伪类 (Pseudo-classes)实例： .................... 34 1.25.2. 语法 ........................................... 34 1.25.3. 锚伪类 ....................................... 34 1.25.4. 伪类与 CSS 类 ...................... 34 1.25.5. CSS2 - :first-child 伪类.. 34 1.25.6. CSS2 - :lang 伪类 .............. 35 1.25.7. 伪类 ........................................... 36 1.26. CSS 伪元素 (Pseudo-elements)....... 36 1.26.1. CSS 伪元素 (Pseudo-elements)实例：................ 36 1.26.2. 语法： ....................................... 36 1.26.3. :first-line 伪元素 ................ 36 1.26.4. :first-letter 伪元素 ............ 37 1.26.5. 伪元素和 CSS 类 .................. 37 1.26.6. 多重伪元素 ............................... 37 1.26.7. CSS2 - :before 伪元素 ..... 37 1.26.8. CSS2 - :after 伪元素......... 37 1.26.9. 伪元素 ....................................... 38 1.27. CSS2 媒介类型..................................... 38 1.27.1. 媒介类型 ................................... 38 1.27.2. @media 规则......................... 38 1.27.3. 不同的媒介类型 ....................... 38 1.28. CSS Don't............................................. 39
1.28.1. Internet Explorer Behaviors ................................................ 39 1.28.2. 例子 1 - Mouseover Highlight.................................................. 39 1.28.3. 例子 2 - Typewriter Simulation .............................................. 39
通过使用 CSS 来提升工作效率！
1.1. CSS 教程
1.1.1. CSS 教程
通过使用 CSS 来提升工作效率！在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。开始学习 CSS ！CSS 实例学习 70 个实例。您可以对 CSS 代码进行编辑，然后单击测试按钮来查看结果。亲自试一下吧！ CSS 测验在 W3School 测试您的 CSS 技能！开始 CSS 测验！ CSS 参考手册在 W3School，我们提供完整的 CSS2 参考手册（已升级为 CSS2.1）。
1.2. CSS 简介
1.2.1. 需要具备的基础知识
在继续学习之前，你需要对下面的知识有基本的了解： ? HTML ? XHTML 如果你希望首先学习这些项目，请在首页访问相关教程。
1.2.2. CSS 概述
? CSS 指层叠样式表 (Cascading Style Sheets) ? 样式定义如何显示 HTML 元素 ? 样式通常存储在样式表中 ? 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 ? 外部样式表可以极大提高工作效率 ? 外部样式表通常存储在 CSS 文件中
2

? 多个样式定义可层叠为一
3. 内部样式表（位于标签内部） 4. 内联样式（在 HTML 元素内部）因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
1.2.3. 样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用

、
、
这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。所有的主流浏览器均支持层叠样式表。
1.3. CSS 基础语法
1.3.1. CSS 语法
CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）： body {color: blue} 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。
1.2.4. 样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局， CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
1.3.2. 值的不同写法和单位
除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000： p { color:
1.2.5. 多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中， HTML 页的头元素中，在或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。层叠次序当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。 1. 浏览器缺省设置 2. 外部样式表
#ff0000; }
为了节约字节，我们可以使用 CSS 的缩写形式： p { color:
#f00; }
我们还可以通过两种方法使用 RGB 值：
rgb(255,0,0); } p { color: rgb(100%,0%,0%); }
p { color: 请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做
3

了。比如说，当尺寸为 0 像素时，之后不需要使用 px 0 单位，因为 0 就是 0，无论单位是什么。
1.4.1. 选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
1.3.3. 记得写引号
提示：如果值为若干单词，则要给值加引号： p {font-family:
"sans serif";}
1.3.4. 多重声明：
提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样： p {text-align:center; color:red;} 你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样： p { text-align: center; color: black; font-family: arial; }
h1,h2,h2,h3,h5,h6 {
color: green; }
1.4.2. 继承及其问题
根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则： body { font-family: Verdana, sans-serif; } 根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？
1.3.5. 空格和大小写敏感
大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑： body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; } 是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话， class 和 id 名称对大小写是敏感的。
1.4.3. 友善地对待 Netscape 4
幸运地是，你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。 body } p, td, ul, ol, li, dl, dt, dd }
4
{ font-family: Verdana, sans-serif; {
font-family: Verdana, sans-serif;
1.4. CSS 高级语法

4.0 浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对 Netscape 4 用户进行支持，就不得不这么做。
我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用

1.4.4. 继承是一个诅咒吗？
如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则： body } td, ul, ol, ul, li, dl, dt, dd } { font-family: Verdana, sans-serif; { font-family: Verdana, sans-serif;
我是斜体字。这是因为 strong 元素位于 li 元素内。

我是正常的字体。

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。再看看下面的 CSS 规则： strong {
p {
font-family: Times, "Times New Roman", serif; }
color: red; } h2 { color: red; }
1.5. CSS 派生选择器
1.5.1. 派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
h2 strong {
color: blue; } 下面是它施加影响的 HTML：
The strongly emphasized word in this paragraph isred.
This subhead is also red.

The strongly emphasized word in this
subhead isblue.

1.6. CSS id 选择器
1.6.1. id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
li strong {
font-style: italic; font-weight: normal; } 请注意标记为的蓝色代码的上下文关系：
#red {color:red;}
5

#green {color:green;}
下面的 HTML 代码中，属性为 red 的 p 元素显示 id 为红色，而 id 属性为 green 的 p 元素显示为绿色。
} 在这里，与页面中的其他 p 元素明显不同的是， sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。
id="red">这个段落是红色。

这个段落是绿色。

1.6.3. 单独的选择器
id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：
1.6.2. id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar {
border: 1px dotted #000; padding: 10px; } 根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：
#sidebar p {
font-style: italic; text-align: right; margin-top: 0.5em; } 上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如或者，不过这样的用法是非法的，因为不可以在内联元素中嵌入
（如果你忘记了原因，请参阅 XHTML:网站重构）。
div#sidebar {
border: 1px dotted #000; padding: 10px; }
1.7. CSS 类选择器
一个选择器，多种用法即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。 #sidebar p {
font-style: italic; text-align: right; margin-top: 0.5em; }
#sidebar h2 {
font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right;
class="center">
This heading will be center-aligned class="center">
This paragraph will also be center-aligned.

6

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。和 id 一样，class 也可被用作派生选择器：
个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
.fancy td {
color: #f60; background: #666; } 在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）元素也可以基于它们的类而被选择：
td.fancy {
color: #f60; background: #666; } 在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。 hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} 不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

内联样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
7

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。这条规则把元素的背景设置为灰色：
style="color: sienna; margin-left:
20px"> This is a paragraph

p {background-color: gray;} 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距： p {background-color: gray; padding: 20px;}
1.8.2. 多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对 h3 选择器的三个属性： h3 { color: red;
如需查看本例的效果，可以亲自试一试！可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。 background-color 不能继承，其默认值是 transparent。 transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
left; font-size: 8pt;
text-align: } 而内部样式表拥有针对 h3 选择器的两个属性： h3 {
1.9.2. 背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
right; font-size: 20pt;
text-align: } 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是： color:
body {background-image: url(/i/eg_bg_04.gif);} 大多数背景都应用到 body 元素，不过并不仅限于此。下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景： p.flower {background-image: url(/i/eg_bg_03.gif);} 您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
red;
right; font-size: 20pt;
text-align: 即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
1.9. CSS 背景
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。 CSS 在这方面的能力远远在 HTML 之上。
a.radio {background-image: url(/i/eg_bg_07.gif);} 如需查看上述例子的效果，可以亲自试一试！
1.9.1. 背景色
8

理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。根据规范，位置关键字可以按任何顺序出现，只要保证
另外还要补充一点， background-image 也不能继承。事实上，所有背景属性都不能继承。
不超过两个关键字 - 一个对应水平方向，另一个对象垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。所以，如果希望每个段落的中部上方出现一个图像，只需声明如下： p { background-image:url('bgimg.gif'); background-repeat:no-repeat;
1.9.3. 背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复， no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。请看下面的例子： body { background-image: url(/i/eg_bg_03.gif);
background-position:top;
} 下面是等价的位置关键字：单一关键字 center top bottom
background-repeat: repeat-y;
} 如需查看上例的效果，可以亲自试一试。
等价的关键字
1.9.4. 背景定位
可以利用 background-position 属性改变图像在背景中的位置。下面的例子在 body 元素中将一个背景图像居中放置： body {
center center top center 或 center top bottom center 或 center bottom right center 或 center right left center 或 center left
right left
background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:center;
} 为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
百分数值百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易： body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:50% 50%;
}
关键字
9

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明： body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
1.9.5. 背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响： body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat;
background-attachment:fixed
} 如需查看上例的效果，可以亲自试一试。 background-attachment 属性的默认值是 scroll，如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。 background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。长度值长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上： body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; 如何在水平方向重复背景图像本例演示如何水平地重复背景图像。如何仅显示一次背景图像本例演示如何仅显示一次背景图像。如何放置背景图像本例演示如何在页面上放置背景图像。注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。如何使用%来定位背景图像本例演示如何使用百分比来在页面上定位背景图像。
10
background-position:66% 33%;
}
也就是说，在默认的情况下，背景会随文档滚动。
1.9.6. CSS 背景实例
设置背景颜色本例演示如何为元素设置背景颜色。设置文本的背景颜色本例颜色如何设置部分文本的背景颜色。将图像设置为背景本例演示如何将图像设置为背景。将图像设置为背景 2 本例演示如何为多个元素同时设置背景图像。如何重复背景图像本例演示如何重复背景图像。如何在垂直方向重复背景图像本例演示如何垂直地重复背景图像。
background-position:50px 100px;
}

如何使用像素来定位背景图像本例演示如何使用像素来在页面上定位背景图像。如何设置固定的背景图像本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em： p {text-indent: 5em;} 注意：一般来说，可以为所有块级元素应用
所有背景属性在一个声明之中本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。
text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
1.9.7. CSS 背景属性
属性 background 描述
提示：如果想把一个行内元素的第一行“缩进”，可以用简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 p {text-indent: -5em;} background-color background-image background-position 设置元素的背景颜色。不过在为 text-indent 设置负值时要当心，如果对一个把图像设置为背景。设置背景图像的起始位置。 background-repeat 设置背景图像是否及如何重复。段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距： p {text-indent: -5em; padding-left: 5em;} 左内边距或外边距创造这种效果。使用负值 text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
使用百分比值 text-indent 可以使用所有长度单位，包括百分比值。
1.10.
CSS 文本
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 10%。在下例中，缩进值是父元素的 20%，即 100 个像素： div {width: 500px;} p {text-indent: 20%;}

this is a paragragh

CSS 文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
1.10.1.
缩进文本
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。 CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
继承
11

text-indent 属性可以继承，请考虑如下标记： div#outer {width: 500px;} div#inner {text-indent: 10%;} p {text-indent: 300px;}

some text. some text. some text.
this is a paragragh.

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。需要注意的是，要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。如需了解详情，请参阅 CSS text-indent 属性参考页。
1.10.3.
字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。 word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近： p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;}
This is a paragraph. The spaces between words will be decreased.

This is a paragraph. The spaces between words will be increased.
实例 TIY ：增加或减少单词间距（字间隔）注释：如需深入理解 CSS 对“字”（word）的定义，请访问 CSS word-spacing 属性参考页。
1.10.2.
水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）对于希伯来语和阿拉伯语之类的的语言，。 text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。 text-align:center 与您可能会认为 text-align:center 与元素的作用一样，但实际上二者大不相同。不仅影响文本，还会把整个元素居中。 text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。 justify 最后一个水平对齐属性是 justify。
This is header 1
在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的
12
1.10.4.
字母间隔
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量： h1 {letter-spacing: -0.5em} h4 {letter-spacing: 20px}
This is header 4

实例 TIY ：规定字符间距（字母间隔）
none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点： a {text-decoration: none;} 注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下： a:link a:visited {text-decoration:
1.10.5.
4 个值： ? none
字符转换
text-transform 属性处理文本的大小写。这个属性有
? uppercase ? lowercase ? capitalize 默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义， uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改： h1 {text-transform: uppercase} 使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。实例 TIY ：控制文本中字母的大小写对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则： h2.stricken {text-decoration: line-through;} h2 {text-decoration: underline overline;} underline overline;}
1.10.6.
文本装饰
1.10.7.
处理空白符
接下来，我们讨论 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。 text-decoration 有 5 个值： ? none ? underline ? overline ? line-through ? blink 不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
This spaces paragraph has many
in it.

可以用以下声明显式地设置这种默认行为： p {white-space: normal;}
13

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。实例 TIY ：white-space: normal 值 pre 不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。实例 TIY ：white-space: pre 注意：经测试， 7 以及更早版本的浏览器不支持该值， IE 因此请使用非 IE 的浏览器来查看上面的实例。值 nowrap 与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用

将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。实例 TIY ：white-space: nowrap 值 pre-wrap 和 pre-line CSS2.1 引入了值 pre-wrap 和 pre-line，这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。 pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。实例 TIY ：white-space: pre-wrap 实例 TIY ：white-space: pre-line 注意：我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例，但是结果是， pre-wrap 和 pre-line 值都没有得到很好的支持。
总结下面的表格总结了 white-space 属性的行为：值 pre-line normal nowrap pre pre-wrap 空白符合并合并合并保留保留换行符保留忽略忽略保留保留自动换行允许允许不允许不允许允许
1.10.8.
文本方向
如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。 direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。 direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。
1.10.9.
CSS 文本实例：
设置文本颜色本例演示如何设置文本的颜色。设置文本的背景颜色本例颜色如何设置部分文本的背景颜色。规定字符间距本例演示如何增加或减少字符间距。使用百分比设置行间距本例演示如何使用百分比值来设置段落中的行间距。使用像素值设置行间距本例演示如何使用像素值来设置段落中的行间距。
14

使用数值来设置行间距本例演示如何使用一个数值来设置段落中的行间距。对齐文本本例演示如何对齐文本。修饰文本本例演示如何向文本添加修饰。缩进文本本例演示如何缩进文本首行。控制文本中的字母本例演示如何控制文本中的字母。在元素中禁止文本折行本例演示如何禁止在元素中的文本折行。增加单词间距本例演示如何增加段落中单词间的距离。
1.11.
CSS 字体
CSS 字体 (font) 属性定义文本中的字体。设置字体属性是样式表的最常见用途之一。 CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。
1.11.1.
指定字体
可以使用 font-family 属性在文档中采用某种字体系列。使用通用字体系列如果你希望文档使用一种 sans-serif 字体，但是你并
1.10.10. CSS 文本属性
属性 color direction line-height letter-spacing text-align text-decoration text-indent text-shadow 描述设置文本颜色
不关心是哪一种字体，以下就是一个合适的声明： body {font-family: sans-serif;} 这样用户代理就会从 sans-serif 字体系列中选择一个
设置文本方向。设置行高。设置字符间距。对齐元素中的文本。向文本添加修饰。缩进元素中文本的首行。设置文本阴影。 CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。指定字体系列除了指定通用的字体系列，您还可以通过 font-family 属性设置更具体的字体。下面的例子为所有 h1 元素设置了 Verdana 字体： h1 {font-family: Georgia;} 这样的规则同时会产生另外一个问题，如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。我们可以通过结合特定字体名和通用字体系列来解决这
text-transform unicode-bidi white-space word-spacing
控制元素中的字母。设置文本方向。设置元素中空白的处理方式。设置字间距。
个问题： h1 {font-family: Georgia, serif;} 如果读者没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的一种字体），用户代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。
15

因此，我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。如果您对字体非常熟悉，也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接： p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;} 根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。使用引号您也许已经注意到了，上面的例子中使用了单引号。只有当一个字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号。 font-weight 设置字体的粗细。 font-variant 以小型大写字体或者正常字体显示文本。 font-style font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）设置字体风格。 font-size font-size-adjust 设置字体的尺寸。当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） font-family 设置字体系列。
1.12.
CSS 列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
1.12.1.
CSS 列表
1.11.2.
CSS 字体实例：
从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样，这使得列表相当重要，所以说， CSS 中列表样式不太丰富确实是一大憾事。列表类型
设置文本的字体本例演示如何设置文本字体。设置字体尺寸本例演示如何设置字体尺寸。设置字体风格本例演示如何设置字体风格。设置字体的异体本例演示如何设置字体的异体。设置字体的粗细本例演示如何设置字体的粗细。所有字体属性在一个声明之内本例演示如何使用简写属性将字体属性设置在一个声明之内。
要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
1.11.3.
属性 font
CSS 字体属性
描述
要修改用于列表项的标志类型，可以使用属性简写属性。作用是把所有针对字体的属性设置在一个声明中。
16
list-style-type： ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。 list-style 列表项图像有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到： ul li {list-style-image : url(xxx.gif)} 只需要简单地使用一个 url() 值，就可以使用图像作为标志。列表标志位置 CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。简写列表样式为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样： li {list-style : url(example.gif) square inside} list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。 list-style-type marker-offset list-style-position list-style-image 将图象设置为列表项标志。设置列表中列表项标志的位置。设置列表项标志的类型。简写属性。用于把所有用于列表的属性设置于一个声明中。
1.13.
1.13.1.
CSS 表格
实例：
CSS 表格属性允许你设置表格的布局。
设置表格的布局本例演示如何设置表格的布局。显示表格中的空单元本例演示是否显示表格中的空单元。（请在非 IE 浏览器中浏览）合并表格边框本例演示是否把表格边框显示为一条单独的边框，还是像标准的 HTML 中那样分开显示。
1.12.2.
CSS 列表实例：
在无序列表中的不同类型的列表标记本例演示在 CSS 中不同类型的列表项标记。在有序列表中不同类型的列表项标记本例演示在 CSS 中不同类型的列表项标记。所有的列表样式类型本例演示在 CSS 中所有不同类型的列表项标记。将图像作为列表项标记本例演示如何将图像作为列表项标记。放置列表标记本例演示在何处放置列表标记。在一个声明中定义所有的列表属性本例演示将所有针对列表的属性设置于一个简写属性。设置表格标题的位置本例演示如何定位表格的标题。（请在非 IE 浏览器中浏览）设置表格边框之间的空白本例演示如何设置单元格边框之间的距离。（请在非 IE 浏览器中浏览）
1.13.2.
CSS Table 属性
CSS 表格属性允许你设置表格的布局。（请注意，本节介绍的不是如何使用表来建立布局，而是要介绍 CSS 中表本身如何布局。）属性 border-collapse 描述设置是否把表格边框合并为单一的边框。 border-spacing 设置分隔单元格边框的距离。（仅用于 "separated
17
1.12.3.
CSS 列表属性(list)
属性描述

borders" 模型） caption-side empty-cells 设置表格标题的位置。设置是否显示表格中的空单元格。（仅用于 "separated borders" 模型） table-layout 设置显示单元、行和列的算法。 }
margin: 0; padding: 0;
在 CSS 中， width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：
1.14.
CSS 框模型概述
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
1.14.1.
CSS 框模型概述
#box { width: 70px; margin: 10px; padding: 5px; } 提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置： * {
1.14.2.
浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在
18

怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。术语翻译 ? element : 元素。 ? padding : 内边距，也有资料将其翻译为填充。 ? border : 边框。 ? margin : 外边距，也有资料将其翻译为空白或空白边。在 w3school，我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距，边框外的空白是外边距，很容易记吧：）
? padding-bottom ? padding-left 您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的： h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
1.15.3.
内边距的百分比数值
前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。下面这条规则把段落的内边距设置为父元素 width 的 10%：
1.15.
CSS 内边距
p {padding: 10%;} 例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

This paragragh is contained within a DIV that has a width of 200 pixels.

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。 CSS padding 属性定义元素边框与元素内容之间的空白区域。
1.15.1.
CSS padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样： h1 {padding: 10px;} 您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值： h1 {padding: 10px 0.25em 2ex 20%;}
1.15.4.
CSS 内边距实例：
所有内边距属性在一个声明中本例演示使用简写属性将所有的内边距属性设置于一个声明中，可以有一到四个值。设置下内边距 1 本例演示如何使用厘米值来设置单元格的下内边距。
1.15.2.
单边内边距属性
设置下内边距 2 本例演示如何使用百分比值来设置单元格的下内边距。设置左内边距 1 本例演示如何使用厘米值来设置单元格的左内边距。
19
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距： ? padding-top ? padding-right

设置左内边距 2 本例演示如何使用百分比值来设置单元格的左内边距。设置右内边距 1 本例演示如何使用厘米值来设置单元格的右内边距。设置右内边距 2 本例演示如何使用百分比值来设置单元格的右内边距。设置上内边距 1 本例演示如何使用厘米值来设置单元格的上内边距。设置上内边距 2 本例演示如何使用百分比值来设置单元格的上内边距。
1.16.2.
边框与背景
CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。 CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。
1.16.3.
边框的样式
样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。 CSS 的 border-style 属性定义了 10 个不同的非
1.15.5.
属性 padding
CSS 内边距属性
描述简写属性。作用是在一个声明中设置元素的所内边距属性。
inherit 样式，包括 none。例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”： a:link img {border-style: outset;}
padding-bottom padding-left padding-right padding-top
设置元素的下内边距。设置元素的左内边距。设置元素的右内边距。 p.aside {border-style: solid dotted dashed 设置元素的上内边距。 double;} 上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线有边框、虚线下边框和一个双线左边框。定义多种样式您可以为一个边框定义多个样式，例如：
1.16.
条或多条线。
CSS 边框
元素的边框 (border) 是围绕元素内容和内边距的一
我们又看到了这里的值采用了 top-right-bottom-left 的顺序，讨论用多个值设置不同内边距时也见过这个顺序。定义单边样式如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性： ? border-top-style ? border-right-style ? border-bottom-style ? border-left-style
20
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
1.16.1.
CSS 边框
在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面：宽度、样式，以及颜色。在下面的篇幅，我们会为您详细讲解这三个方面。

HTML5基础入门教程(小编搜集辛苦啊,必看)
HTML5教程什么是HTML5？ HTML5 将成为HTML、XHTML 以及HTML DOM 的新标准。 HTML 的上一个版本诞生于1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。你是不是多少有了解一点，但是你却对这个不精啊！可以进群交流，⑤①④①⑥⑦⑥⑦⑧。HTML5 是如何起步的？ HTML5 是W3C 与WHATWG 合作的结果。编者注：W3C 指World Wide Web Consortium，万维网联盟。编者注：WHATWG 指Web Hypertext Application Technology Working Group。WHATWG 致力于web 表单和应用程序，而W3C 专注于XHTML 2.0。在2006 年，双方决定进行合作，来创建一个新版本的HTML。为HTML5 建立的一些规则： ?新特性应该基于HTML、CSS、DOM 以及JavaScript。 ?减少对外部插件的需求（比如Flash） ?更优秀的错误处理 ?更多取代脚本的标记 ?HTML5 应该独立于设备 ?开发进程应对公众透明新特性 HTML5 中的一些有趣的新特性： ?用于绘画的canvas 元素
?用于媒介回放的video 和audio 元素 ?对本地离线存储的更好的支持 ?新的特殊内容元素，比如article、footer、header、nav、section ?新的表单控件，比如calendar、date、time、email、url、search 浏览器支持最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5 特性。Internet Explorer 9 将支持某些HTML5 特性。 HTML 5 视频许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。 Web 上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过video 元素来包含视频的标准方法。视频格式当前，video 元素支持两种视频格式： Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg X X X MPEG 4 X X Ogg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件 MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件
PS零基础入门教程
第一课时简介图象图形处理软件集于位图和矢量图绘画、图象编辑、网页图象设计、网页制作等多种功能一一体的优秀软件，如此强大的功能，决定了它能够在多种领域得到广泛的应用。如它可一外在图象处理、平面广告设计、模拟绘图以及计算机艺术作品等方面具有无与伦比的优势。特点及优势 1.快捷方式：photoshop提供了大量的快捷键，几乎每一个键都可作为快捷键，在专业制作中大大提高了工作效率，节约时间，建议初学者在学习时留心记忆快捷键。 2.工具箱：集中了许多图标工具面板 3.选择工具：是我们在photoshop最常用的 photoshop选择工具大致可分为四种：矩形选择工具图层\主要用于建立,修改,删除图层,设置图层的参数,建立图层组以及文字的特效处理等. 选择\用于修改与调整选择区,使边缘产生模糊效果等. 4.滤镜\用于使图形产生各种特殊效果,如模糊,铅笔画,浮雕,波纹等. 视图\可以控制图象在屏幕上的显示效果. 5.窗口\用于打开或关闭工具箱与控制面板,以及设定图象窗口排列方式等. 6帮助\为用户提供各种帮助. 作业:火焰字新建600800\填充背景为黑色\输入文字\图层象素化\图象\旋转画布90\滤镜\风格化\风ctrl+f3\滤镜\扭曲\波纹\旋转画布90\图象\模式\灰度\索引\颜色表\黑体\保存新建600800\输入文字\复制文字层\图层象素化\ctrl+单击图层缩览图\反选ctrl+shift+I\背景为白色\ctrl+d\滤镜\扭曲\极座标\反相ctrl+I\图象\旋转画布90滤镜\风格化\风ctrl+f3\旋转画布90\滤镜\扭曲\极座标(平面)\调整图层层次\调整图层色相 ctrl+U\保存第二课时课题：创建选区教学目的：1，掌握不同四种创建规则选区的途径。 2，运用选区的相加，减和相交
Photoshopcs6视频教程全集
Photoshop cs6 视频教程全集 Photoshop cs6 视频教程全集 AdobePhotoshop 是目前最流行的平面设计软件之一。可以说，只要你接触平面设计，那么无论早晚，你都要和它打交道。关于Photoshop，要说的实在太多太多，但不论你想让它成为你的左膀右臂，或者仅仅是用它来做一些最基础的图像处理工作，那么下面的 10 件事都是你一定要知道的，无论你是个初学者或是已经对它有了一定的了解。 1. 快捷键的使用 :这是 Photoshop 基础中的基础，却也是提高工作效率的最佳方法。快捷键的使用，使你可以将精力更好的集中在你的作品而不是工具面板上。一旦你能够熟练的使用快捷键，你就可以使用全屏的工作方式，省却了不必要的面板位置，使视野更开阔，最大限度的利用屏幕空间 ; 一些简单的命令可以用键盘来完成，不必分心在工具的选择上，哪怕它只占用了极少的时间，但我们更希望在工作时不被打断。注意: 你应该尽量多使用快捷键，下面的这些快捷键是提高效率的好帮手，但不知为什么很多书中都一带而过，甚至没有提及，请一定要牢牢记住。 Ctrl+J: 复制当前图层到一个新层 ; J: 切换到喷枪工具 ; M:切换到选框工具； ,,: 在当前工具为画笔模式时（包括喷枪、画笔、铅笔、仿制图章历史画笔、橡皮及模糊和加深等工具），依次增减笔头大小； Shift+BackSpace: 调出填充对话框。一开始，你可能无法记住所有的快捷键，可以使用 Photoshop 的工具提示来帮助你。方法是打开编辑＞预置＞常规，选择“显示工具提示”。这样，当你把鼠标移动到工具面板上时，工具名称和其快捷键就会出现，直到你移走鼠标才会消失。
Adobe-Photoshop-CS6-自学教程完整版(全面详解)
Adobe Photoshop CS6 自学教程完整版【前言】本教程适合任何技术成熟程度的人士，详细讲解从软件的下载、安装、激活（破解），到PS的基础知识，再到Photoshop CS6的新功能和高级技巧。特别是零基础人士成为PS 高阶好手的红宝书。一、安装与激活（破解） Adobe已经发布Photoshop CS6 beta，并提供免费下载，Photoshop新版本的更新包括一个全新的暗色界面，视频编辑，简易的3D特性等，包括所有Photoshop中CS6的功能扩展。如果想要使用该软件，需要注册一个Adobe ID。 Adobe Photoshop CS6配置要求 * Intel Pentium 4 或 AMD Athlon 64 处理器 * Microsoft Windows XP(带有 Service Pack 3);Windows Vista Home Premium、Business、Ultimate 或 Enterprise(带有 Service Pack 1，推荐Service Pack 2);或 Windows 7 * 1GB 内存 * 1GB 可用硬盘空间用于安装;安装过程中需要额外的可用空间(无法安装在基于闪存的可移动存储设备上) * 1024×768 屏幕(推荐1280×800)，配备符合条件的硬件加速 OpenGL 图形卡、16 位颜色和 256MB VRAM * 某些 GPU 加速功能需要 Shader Model 3.0 和 OpenGL 2.0 图形支持 * DVD-ROM 驱动器 * 多媒体功能需要 QuickTime 7.6.2 软件 * 在线服务需要宽带 Internet 连接
html5入门视频教程百度网盘
html5入门视频教程百度网盘近几年html5前端开发相当火爆，可以说引领了IT培训行业的新的潮流，越来越多人加入到了html5前端开发的行列中来。想要学好web前端，你需要一份较新且完善的学习资料，现在就给大家千锋教html5入门视频教程百度网盘云分享，希望对所有想学习html5前端的同学有所帮助。千锋教程第1部分：课程体系解读 https://www.wendangku.net/doc/75151467.html,/s/1o7B9OYA 千锋教程第2部分：微案例讲解 https://https://www.wendangku.net/doc/75151467.html,/s/1nwyNFg1 千锋教程第3部分：知识点讲解 https://www.wendangku.net/doc/75151467.html,/s/1jICHs9o 千锋Vue组件之手机通讯录实战课程
https://www.wendangku.net/doc/75151467.html,/s/1c1FrXLY 千锋微信小程序基础与实战 https://https://www.wendangku.net/doc/75151467.html,/s/1xE35SQcvW0sCF2NoR_ONiw 目前前端工程师人员的缺口很大，而2年工作经验的html5前端开发工资10K~15K左右。如果你会一些后台技术，并且前端技术很厉害，到20K也是可能的。工资的多少主要取决于你的技术情况，所以工资是不确定的。前景不错，选择现在学习前端技术，也更容易高薪就业。前端开发主要是做什么？是利用HTML/CSS/JavaScript/DOM/Flash等各种Web技能结合产品的界面开发。制作标准化纯手工代码，并增加交互功能，开拓JavaScript和Flash模块，同时结合后端开拓技能仿照全部效果，结束丰富互联网的Web开拓，致力于经过进程技能改进用户体验。而其所需技能则是学习html，这个是简单的，也是基础的；学习css；js；jquery；那样就业面试时更有优势。千锋教育html5前端全栈课程培训，致力于培养覆盖前端+后台+全栈开
PhotoshopCS6(PS)基础教程使用(图解)
第一章Photoshop CS（PS）简介一、界面构成 Photoshop的界面由菜单栏、工具选项栏、工具箱、图像窗口、浮动调板、状态栏等菜单栏：将Photoshop所有的操作分为九类，共九项菜单。如编辑、图像、图层、滤镜；工具选项栏：会随着使用的工具不同，工具选项栏上的设置项也不同；工具箱：工具下有三角标记，即该工具下还有其它类似的命令。当选择使用某工具，工具选项栏则列出该工具的选项；按工具上提示的快捷键使用该工具按SHIFT+工具上提示的快捷键切换使用这些工具按TAB 显示/隐藏工具箱、工具选项栏和调板按F 切换屏幕模式（标准屏幕模式、带有菜单栏的全屏模式、全屏模式）状态栏：包含四个部分，分别为：图像显示比例、文件大小、浮动菜单按钮及工具提示栏；浮动调板：可在窗口菜单中显示各种调板。双击调板标题最小化或还原调板拖动调板标签分离和置入调板调板右边三角调板菜单复位调板位置窗口->工作区->复位调板位置存储工作区窗口->工作区->存储工作区 SHIFT+TAB 显示/隐藏调板调板窗：可将常用的调板置入其中。文件浏览器：专业的图像浏览器，可预览各种格式的图片，并有批处理和批重命名的功能。三、基本概念 1. 像素：是组成图像的最基本单元，它是一个小的方形的颜色块。 2. 图像分辨率：图像分辨率和图像尺寸的值决定了文件的大小及输出质量，分辨率越高，图像越清晰，所产生的文件也越大。图像分辨率成为图像品质和文件大小之间的代名词；如果是用来印刷的图像，其分辨率一定要大于等于： 120像素/厘米，折算大约是：300像素/英寸。 3. 点阵图：又称像素图，即图像由一个个的颜色方格所组成，与分辨率有关，单位面积内像素越多，分辨率越高，图像的效果越好。用于显示一般为 72PPI；用于印刷一般不低于300PPI。 4. 矢量图：是由数学方式描述的曲线组成，其基本组成单元为锚点和路径。由Coreldraw、 Illustrator、FreeHand等软件绘制而成，与分辨率
《HTML5+CSS3网站设计基础教程》_教学大纲
《HTML5+CSS3网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011 学分：5学分学时：76学时（其中：讲课学时：47 一、课程的性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
PS入门基础教程-配图文说明
第一课：工具的使用一、Photoshop 简介： Adobe 公司出品的Photoshop 是目前最广泛的图像处理软件，常用于广告、艺术、平面设计等创作。也广泛用于网页设计和三维效果图的后期处理，对于业余图像爱好者，也可将自己的照片扫描到计算机，做出精美的效果。总之，Photoshop 是一个功能强大、用途广泛的软件，总能做出惊心动魄的作品。二、认识工具栏 1、选框工具：用于选取需要的区域 ----选择一个像素的横向区域 ----选择一个像素的竖向区域
属性栏：注：按shift 键+ 框选，可画出正方形或正圆形区域 2、移动工具： -----用于移动图层或选区里的图像 3、套索工具： ----用于套索出选区 ----用于套索出多边形选区 ----可根据颜色的区别而自动产生套索选区 4、魔术棒工具： ----根据颜色相似原理，选择颜色相近的区域。注：“容差”，定义可抹除的颜色范围，高容差会抹除范围更广的像素。 5、修复工具：且是 ----类似于“仿制图工具”，但有智能修复功能。 ----用于大面积的修复一新 ----用采样点的颜色替换原图像的颜色注：Alt+鼠标单击，可拾取采样点。 6、仿制图章工具----仿制图章工具从图像中取样，然后您可将样本应用到其它图像或同一图像的其它部分。 ----仿制图章工具从图像中取样，然后将样本应用到其它图像或同一图像的其它部分（按Alt键，拾取采样点）。 ----可先自定义一个图案，然后把图案复制到图像的其它区域或其它图像上。
三、小技巧： ①、取消选区：【Ctrl ＋D 】 ②、反选选区：【Shif+F7】 ③、复位调板：窗口—工作区—复位调板位置。 ④、ctrl+[+、-]=图像的缩放 ⑤空格键：抓手工具 ⑥Atl+Delete = 用前景色填充 Ctrl+Delete = 用背景色填充第二课：工具的使用二一、工具栏自由变换工具：【 Ctrl ＋ T 】 2、使用框选工具的时候，按【Shift 】后再框选，则框选出正圆或正方形。按【Alt 】后再框选，则选区以鼠标点为中心 3、：可以使图像的亮度提高。：可以使图像的区域变暗。：可以增加或降低图像的色彩饱和度。 4、用前景色来填充：【Alt ＋Delete 】
Adobe Photoshop CS6 自学完全版教程
Adobe Photoshop CS6 基本知识第一讲基础知识一、Photosop是ADOBE公司推出的图形图像处理软件，功能强大，广泛应用于印刷、广告设计、封面制作、网页图像制作、照片编辑等领域。利用Photosop 可以对图像进行各种平面处理。绘制简单的几何图形、给黑白图像上色、进行图像格式和颜色模式的转换。二、Photosop7.0的启动与退出 1、启动Photoshop的方法：单击开始/程序/Photoshop7.0即可启动.或者打开一个Photoshop文件也能够启动Photoshop. 2、退出Photoshop的方法：单击关闭按钮或按下CTRL+Q组合键或ALT+F4组合键，都可以退出Photoshop。三、Photoshop的窗口组成（标题栏、菜单栏、工具栏、工具箱、图像图口、控制面板、状态栏、Photoshop桌面） 1、标题栏：位于窗口最顶端。 2、菜单栏：其中包括9个菜单。位于标题栏下方。 3、工具栏：位于菜单栏下方。可以随着工具的改变而改变。 4、工具箱：位于工具栏的左下方。 5、图像窗口：位于工具栏的正下方。用来显示图像的区域，用于编辑和修改图像。 6、控制面版：窗口右侧的小窗口称为控制面版。用于改变图象的属性。 7、状态栏：位于窗口底部，提供一些当前操作的帮助信息。
8、Photoshop桌面：Photoshop窗口的灰色区域为桌面。其中包括显示工具箱、控制面板和图像窗口。四、图像窗口：图像窗口由（标题栏、图像显示区、控制窗口图标） 1、标题栏：显示图像文件名、文件格式、显示比例大小、层名称以及颜色模式。 2、图像显示区：用于编辑图像和显示图像。 3、控制窗口图标：双击此图标可以关闭图像窗口。单击此图标，可以打开一个菜单，选择其中的命令即可。五、工具箱和工具栏 Photosop工具包含了40余种工具，单击图标即可选择工具或者按下工具的组合键。工具箱中并没有显示出全部的工具，只要细心观察，会发现有些工具图标中有一个小三角的符号，这就表示在该工具中还有与之相关的工具。打开这些工具的方法有两种： 1、把鼠标指针移到含有三角的工具上，右击即可打开隐藏的工具或者按鼠标左键不放在工具上开隐藏稍等片刻也可打工具。然后选择工具即可。 2、可以按下ALT键不放，再单击工具图标，多次单击可以在多个工具之间切换。六、控制面板控制面板可以完成各种图像处理操作和工具参数设置，Photosop7.0中共提供了14个控制面板。其中包括：导般器、信息、颜色、色板、图层、通道、路径、历史记录、动作、工具预设、样式、字符、段落控制面板和状态栏。 1、导般器（Nanigator）：用来显示图像上的缩略图，可用缩放显示比例，
html5教程视频教程网盘下载
html5教程入门视频网盘下载学习HTML、CSS基础知识，实现PC端静态页面制作（例如京东商城），响应式网页布局的制作（微软中国官网）、及WebApp页面布局（淘宝、美团等）。 html5前端人才已成为IT职场的紧缺型人才，如何自学html5？如何短时间内迅速提升html5开发能力？千锋教育html5教程入门视频网盘下载（https://www.wendangku.net/doc/75151467.html,/video/html5_download.html），助力大家成为企业不可多得的贤才。实现这些需要的知识有 1、学习HTML基本语法：双标签、单标签语法结构。 2、常用标签：标题标签、段落标签、布局标签、表格、列表、标签标签。 3、学习CSS基本语法：选择器声明。 4、学习CSS的三种样式表：内联、内部、外部 5、学习CSS的各种常用选择器 6、学习CSS的选择器、样式表的优先级和权重问题。 7、学习CSS的核心属性及属性值 8、学习CSS的元素类型的转换
9、学习CSS的定位锚地的应用 10、学习CSS中的图片整合技术的应用 11、学习CSS中常见的浏览器的兼容及解决方法 12、学习HTML5新增元素及属性 13、学习CSS3新增选择器的应用 14、学习CSS3的2D、3D、关键帧动画的相关应用 15、学习CSS3中弹性盒的应用 16、学习CSS3中媒体查询响应式的设计应用学习JavaScript和jQuery及掌握一门后台程序语言的简单基础和一个数据库，实现PC端项目交互开发（做一个电商类型的网站开发）需要的知识有 1、学习JavaScript的基本语法 2、学习JavaScript的循环语句 3、学习JavaScript的函数与数组 4、学习JavaScript的String和Data 5、学习JavaScript的BOM与DOM 6、学习JavaScript的相关事件 7、学习JavaScript的拖拽效果 8、学习JavaScript的cookie存储 9、学习JavaScript的正则表达式 10、学习JavaScript的Ajax的应用 11、学习JavaScript的面相对象基础
网页设计基础Div+CSS布局入门教程
网页设计基础：Div+CSS布局入门教程在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。以下为引用的内容： DIV结构如下： │body {}/这是一个HTML元素，具体我就不说明了/ └#Container {}/页面层容器/ ├#Header {}/页面头部/ ├#PageBody {}/页面主体/
│├#Sidebar {}/侧边栏/ │└#MainBody {}/主体内容/ └#Footer {}/页面底部/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。接下来我们在桌面新建一个文件夹，命名为“DIV+CS S布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：以下为引用的内容：无标题文档这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。下面，我们在标签对中写入DIV的基本结构，代码如下：
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]

[color=#aaaaaa][/color]
[color=#aaaaaa][/color]

[color=#aaaaaa][/color]

[color=#aaaaaa][/color]

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：
html5入门教程网盘下载
html5入门教程网盘下载 Html5的发展让不少开发商发现了机遇，html5开发人才也遭受疯抢，但传统前端人才很难驾驭移动端。因此，html5开发人才出现严重紧缺状态，很多企业陷入两难境地。那么想学习这门技术，当然要有好的学习资料，千锋教育免费分享html5自学教程！设计模式是在软件开发中，经过验证的，用于解决在特定环境下，重复出现的特定的问题的解决方案。在编写JS代码的过程中，运用一定的设计模式可以让我们的代码更加优雅、灵活。每个设计模式的构成如下： 1、模式名称：模式的一个好记的名字 2、环境和问题：描述在什么环境下，出现什么特定的问题 3、解决方案：描述如何解决问题 4、效果：描述应用模式后的效果，以及可能带来的问题简单地说，模式就是一些经验，一套场景/问题+解决方案。千锋HTML5百人教学天团，每个讲师都是具有多年开发经验的行业佼佼者。设计模式课程的讲解将从实际应用场景出发，以实践和尝试的方式，分析可能出现的问题以及如何解决，以期达到“避免犯前人犯过的错误+ 避免引入不成熟的设计“这一目标。让大家快速领略编程之美，模式之美。为什么要学习设计模式？
设计模式的种类较多，各个模式都有它对应的场景，不能武断地认为某个模式就是最优解决方案。通过学习这些设计模式，让你找到“封装变化”、“松耦合”、“针对接口编程”的感觉，从而设计出易维护、易复用、扩展性好、灵活性足的程序。通过学习设计模式让你领悟面向对象编程的思想（SOLID），到最后就可以抛弃设计模式，把这些思想应用在你的代码中，写出高内聚、低耦合、可扩展、易维护的代码了。此时已然是心中无设计模式，而处处是设计模式了。这就是学习设计模式的目的。常见的几种设计模式单例模式之所以叫做单例模式是因为它限定对于一个类，它他只允许有一个实例化对象，经典的实现方式是，创建一个类，这个类包含一个方法，这个方法在没
ps入门教程零基础视频网盘下载,真正学好ps
ps入门教程零基础视频网盘下载，真正学好ps Photoshop是专业设计师修炼之路的必备工具，但是面对这个从87年开始进化的庞然大物，若没有前辈指导，战胜它可着实不易。今天分享一篇好文，讲讲在摄影领域，你该怎样做才能学好Photoshop。《超赞！设计师完全自学指南》https://www.wendangku.net/doc/75151467.html,/s/1mhO5K9q 《从菜鸟到高手！PHOTOSHOP知识点》https://www.wendangku.net/doc/75151467.html,/s/1sl5AB85 1 学好PS，并非一朝一夕兴趣—是迈向PS高手之路的一个好的开端：如果你本身对PS并不感兴趣，只是因为工作需要而刻意去学，那么你无论拜读哪位大师的教程，或是投奔哪位PS高手的门下，你也只能学会一点皮毛而已。 2审美基础，这个相当重要
很多学生过来学习时，其中有些学生已经做PS很多年了，为什么一直就没有进步？有的人就开始埋怨自己笨，或者埋怨自己没有好的老师带他进步？大多数人吐槽的话题就是影楼机械性的工作，让自己过于麻木。其实归根结底，是审美基础薄弱！那么怎样提高自己的审美？或者说有没有老师专门教你审美的课程？其实每个人的审美虽千差万别，但万变不离其宗。而美术，就是教你怎么去审美的。适当补习一些美术基础，对你的PS是相当重要。 3 调色难学么？
这是很多学生经常问的一句话：就好像有人问你，啤酒好喝么？冰激凌好吃么？某某电影好看不？不同的人，会得出不同的答案：调色难学与否，最重要的还是看自己对色彩的把握程度和接受能力等：因为调色牵扯到光影，色彩，美学等，它不单单是耍弄几个工具那么简单而已。很多学生对PS工具的熟练程度，远远超出了我的速度，甚至闭上眼睛都可以快速调出相应的工具来：但这并不说明你的调色技术就非常厉害。色彩是一门庞大的学问，岂止是PS那几个工具和通道就能诠释的？ 4 没有美术基础可以学PS么？
珍藏版Photoshop_CS6.3510481888自学教程
珍藏版Photoshop_CS6.3510481888自学教程第一课初识Photoshop CS（PS）一、Photoshop简介及应用领域 Photoshop是Adobe公司开发的一个跨平台的平面图像处理软件，是专业设计人员的首选软件。1990年2月，Adobe公司推出Photoshop1.0，2005年5月最新版本为PhotoshopCS2，即Photoshop9.0。 Photoshop是图像处理软件，其优势不在图形创作。图像处理是对已有的位图图像进行编辑、加工、处理以及运用一些特殊效果；常见的图像处理软件有Photoshop、Photo Painter、Photo Impact、Paint Shop Pro。图形创作是按照自己的构思创作。常见的图形创作软件有Illustrator、CorelDraw、Painter。应用领域：主要应用于平面设计、网页设计、数码暗房、建筑效果图后期处理以及影像创意等。二、界面构成 Photoshop的界面由菜单栏、工具选项栏、工具箱、图像窗口、浮动调板、状态栏等菜单栏：将Photoshop所有的操作分为九类，共九项菜单。如编辑、图像、图层、滤镜；工具选项栏：会随着使用的工具不同，工具选项栏上的设置项也不同；工具箱：工具下有三角标记，即该工具下还有其它类似的命令。当选择使用某工具，工具选项栏则列出该工具的选项；按工具上提示的快捷键使用该工具按SHIFT+工具上提示的快捷键切换使用这些工具按TAB 显示/隐藏工具箱、工具选项栏和调板按F 切换屏幕模式（标准屏幕模式、带有菜单栏的全屏模式、全屏模式）状态栏：包含四个部分，分别为：图像显示比例、文件大小、浮动菜单按钮及工具提示栏；浮动调板：可在窗口菜单中显示各种调板。双击调板标题最小化或还原调板拖动调板标签分离和置入调板调板右边三角调板菜单复位调板位置窗口->工作区->复位调板位置存储工作区窗口->工作区->存储工作区 SHIFT+TAB 显示/隐藏调板调板窗：可将常用的调板置入其中。文件浏览器：专业的图像浏览器，可预览各种格式的图片，并有批处理和批重命名的功能。三、基本概念 1. 像素：是组成图像的最基本单元，它是一个小的方形的颜色块。 2. 图像分辨率：即单位面积内像素的多少。分辨率越高，像素越多，图像的信息量越大。单位为PPI（Pixels Per Inch），如300PPI表示该图像每平方英寸含有300×300个像素。图像分辨率和图像尺寸的值决定了文件的大小及输出质量，分辨率越高，图像越清晰，所产生的文件也越大。图像分辨率成为图像品质和文件大小之间的代名词；如果是用来印刷的图像，其分辨率一定要大于等于：120像素/厘米，折算大约是：300像素/英寸。 3. 点阵图：又称像素图，即图像由一个个的颜色方格所组成，与分辨率有关，单位面积内
千锋html5基础入门教程内容
千锋html5基础入门教程内容千锋html5基础入门教程内容有哪些？零基础能不能学会这门课程？互联网的高速发展带动了软件行业，更多年轻人会选择学习软件行业作为未来的职业，html5随着近两年的不断火热，受到了更多年轻人的青睐，那么学习的内容也更受到大家的关注，那么给大家介绍一下千锋html5入门教程内容。千锋html5培训课程分采用进阶式学习，阶段性检测学员掌握学员学习情况。千锋的html5学科的课程体系能够适应市场需求、紧跟时代技术，完全满足市场对html5工程师的要求，大大提升了学员的市场竞争力。学习内容包括7大学习阶段：阶段一：前端页面重构(4周）内容包含了：（PC端网站布局项目、HTML5+CSS3基础项目、WebApp 页面布局项目）阶段二：JavaScript高级程序设计（5周）
内容包含：1）原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目）阶段三：PC端全栈项目开发（3周）内容包含：（jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目）阶段四：移动端项目开发(6周) 内容包含：（Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目）阶段五：混合（Hybrid,ReactNative）开发（1周）内容包含：（微信小程序开发、React Native、各类混合应用开发）
Photoshop CS6视频教程
江西省南昌市2015-2016学年度第一学期期末试卷（江西师大附中使用）高三理科数学分析一、整体解读试卷紧扣教材和考试说明，从考生熟悉的基础知识入手，多角度、多层次地考查了学生的数学理性思维能力及对数学本质的理解能力，立足基础，先易后难，难易适中，强调应用，不偏不怪，达到了“考基础、考能力、考素质”的目标。试卷所涉及的知识内容都在考试大纲的范围内，几乎覆盖了高中所学知识的全部重要内容，体现了“重点知识重点考查”的原则。 1．回归教材，注重基础试卷遵循了考查基础知识为主体的原则，尤其是考试说明中的大部分知识点均有涉及，其中应用题与抗战胜利70周年为背景，把爱国主义教育渗透到试题当中，使学生感受到了数学的育才价值，所有这些题目的设计都回归教材和中学教学实际，操作性强。 2．适当设置题目难度与区分度选择题第12题和填空题第16题以及解答题的第21题，都是综合性问题，难度较大，学生不仅要有较强的分析问题和解决问题的能力，以及扎实深厚的数学基本功，而且还要掌握必须的数学思想与方法，否则在有限的时间内，很难完成。 3．布局合理，考查全面，着重数学方法和数学思想的考察在选择题，填空题，解答题和三选一问题中，试卷均对高中数学中的重点内容进行了反复考查。包括函数，三角函数，数列、立体几何、概率统计、解析几何、导数等几大版块问题。这些问题都是以知识为载体，立意于能力，让数学思想方法和数学思维方式贯穿于整个试题的解答过程之中。二、亮点试题分析 1．【试卷原题】11.已知,,A B C 是单位圆上互不相同的三点，且满足AB AC → → =，则A BA C →→ ?的最小值为（） A ．1 4- B ．12- C ．34- D ．1-
HTML5 canvas 初级入门教程
HTML5 canvas 初级入门教程
HTML5 canvas 即 HTML5 画布，是一个现代浏览器都支持的 HTML5 非插件绘图的功能，本文将展示如何通过 HTML5 canvas API 操作 canvas 元素、绘制图形、改变绘图颜色以及删除图形，让我们开始进入这很酷的新技术的短暂旅行吧。
canvas 元素简介
使用 canvas 元素相当简单，它只是一个单纯的 HTML 标签，外加宽高两个特性。

上面的代码在页面中插入了一个透明的画布，canvas 元素内部的内容可以在不支持 canvas 功能的浏览器下显示你想给你的用户提供的信息，联想下

lecture 01.04 w3school CSS 教程

This subhead is also red.

The strongly emphasized word in thissubhead isblue.

This is header 1

This is header 4

HTML5基础入门教程(小编搜集辛苦啊,必看)

PS零基础入门教程

Photoshopcs6视频教程全集

Adobe-Photoshop-CS6-自学教程完整版(全面详解)

html5入门视频教程百度网盘

PhotoshopCS6(PS)基础教程使用(图解)

《HTML5+CSS3网站设计基础教程》_教学大纲

PS入门基础教程-配图文说明

Adobe Photoshop CS6 自学完全版教程

html5教程视频教程网盘下载

网页设计基础Div+CSS布局入门教程

html5入门教程网盘下载

ps入门教程零基础视频网盘下载,真正学好ps

珍藏版Photoshop_CS6.3510481888自学教程

千锋html5基础入门教程内容

Photoshop CS6视频教程

HTML5 canvas 初级入门教程

The strongly emphasized word in this
subhead isblue.