day001 HTML&CSS知识合辑及实战案例—02

 《CSS基础教程》

一、CSS教程

1.简介

（1）CSS（Cascading Style Sheets，层叠样式表）定义如何显示HTML元素，样式通常存储在样式表中，而样式表通常存储在CSS文件中。

（2）把样式添加到HTML4.0中，是为了解决内容展示和样式控制分离的问题,降低耦合度,让分工协作更容易,从而提高开发效率。

最初：HTML标签被设计为用于定义文档的内容，而浏览器完成文档的布局，不添加任何格式化标签；

后来：新的HTML标签和属性不断地添加到HTML规范中，使得站点的文档内容与文档表现相互清晰地独立变得越来越困难；

最后：为了解决这一普遍的问题，W3C（万维网联盟），在HTML4.0之外创造出样式（style）。

（3）编辑一个简单的CSS文档，外部样式表、内联样式表、内联样式使我们有能力同时控制多重页面的布局、外观和样式。如需进行全局的更新，只需改变相应的样式，然后网站中地所有元素均会自动地更新，能够极大地提高工作效率。

（4）样式表允许以多种方式样式信息：外部样式表、内部样式表、内联样式，当同一个HTML元素被不止一个样式定义（样式层叠）时，所有的样式会根据优先权规则层叠为一个新的虚拟样式表中，优先权更高的样式对元素进行定义。 优先权：内联样式 ＞ 内部样式表 ＞ 外部样式表 ＞ 浏览器缺省设置

 

2.基础语法

（1）CSS语法由两部分组成：选择器和声明。选择器实现样式与HTML元素之间的相关联，每条声明由一个样式属性和一个值组成。选择器和声明之间花括号隔开，多个声明之间分号隔开，属性和值之间冒号隔开。

（2）细节注意：

①颜色值有颜色英文名、十六进制颜色值、RGB值等多种不同写法；

②若值由多（一）个单词，则（不）要给值加双引号；

③每条声明的末尾都加上双引号能降低出错率；

④每行只描述一条声明能增强样式定义的可读性；

⑤大多数样式表（规则）包含多条规则（声明）；

⑥多重声明和空格的使用使得样式表更容易被编辑；

⑦class属性和id属性对大小写敏感。

 

3.高级语法

（1）我们通过对选择器进行分组的方式，实现多个选择器共享相同的声明（多个元素拥有同一个样式），多个选择器之间用逗号隔开。

（2）通过CSS继承，子元素将继承最高级元素（父元素）的所拥有的属性，子元素的子元素也是一样，而不需要额外的定义规定。站点的body元素使用red颜色，父元素body所有的子元素（p、h、dd）都将显示red颜色。

（3）如果你希望某个子元素不继承父元素的规则（样式1），你可以针对该子元素创建一个特殊规则（样式2），这样它就会摆脱父元素的规则（样式1）

 

 

4.派生选择器

（1）派生选择器依据元素在其位置的上下文关系来定义样式，合理地使用派生选择器可以使HTML代码更加整洁。在CSS1中，也称呼为上下文选择器。谨记：所有的选择器都具有明确的某个指向。

（2）使列表li中的strong元素内容变为斜体字所定义的派生选择器，“明确的某个指向”是说该派生选择器只会使列表包含的strong元素变为斜体，而不会使其他父元素包含的strong元素或列表所包含的其他元素变为斜体。

 

5.id 选择器

（1）id选择器为通过“#”来定义特定id的HTML元素指定特定的样式。id属性在每个HTML文档中只能出现一次，单独发挥作用。但是id选择器可以通过建立派生选择器达到多次使用的目的。

（2）右边的样式只会应用于id属性值为“#sidebar”的元素所包含的段落和h2标题。

 

6.类选择器

（1）类选择器为通过“.”来定义特定类名class的HTML元素指定特定的样式。类名的第一个字符不能使用数字。和id一样，class也可被用作派生选择器（使用fancy类来选择td元素，左图所示）；另外元素也能基于他们的类被选择（使用td元素来选择fancy类，右图所示）。

 

 

7.属性选择器

（1）属性选择器通过“[ ]”对带有指定属性的HTML元素设置样式，而不仅限于 class 和 id 属性。

属性选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
element[attribute=value]	用于选取element元素内部带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

 

8.创建

（1）当读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种。

（2）外部样式表：当样式需要应用于很多页面，定义css资源文件,通过在头部head标签内使用link标签引入外部样式表，能实现改变一个文件来改变整个站点的外观。该文件不能含有任何HTML标签，以.css为扩展名进行保存。（推荐）

 

（3）内部样式表：当单个文档需要特殊样式，可以在头部head标签内使用style标签定义内部样式表。（可用）

 

（4）内联样式：当样式仅需要在一个元素上应用一次时，通过在该元素的标签内使用style属性来定义内联样式，style属性可以包含任何CSS属性。由于要将内容与表现混杂在一起，内联样式损失了许多样式表的优势。（不推荐）

 

（5）多重样式是指当某一样式在同一选择器定义在不同的样式表中，那么样式：“未重叠的样式继承、重叠的样式按优先权规则”对选择器对应的元素进行定义。

 

二、CSS 样式

1.背景

（1）CSS允许通过background-color属性为元素设置纯色的背景，该属性值可以为任何颜色值，可以应用于任何的元素，但是不可以继承，即元素没有指定背景色那么其背景就是透明的（默认值transparent），所以不会遮住父元素的背景色。另外，如果希望背景色向元素的文本外少有延伸，只需要添加一些内边距。

（2）通过background-image属性为元素设置图像的背景，别忘了填写所设置图像的URL地址。其默认值是none表示元素没有背景图像。理论上可以为任何元素设置图像背景，但大多数情况都只是为body元素设置，该属性不可以继承，想想也知道，所有的背景属性都不可以继承。

（3）通过background-repeat属性在页面上对背景图像进行平铺，默认值repeat允许在水平垂直方向均进行平铺，repeat-x和repeat-y分别只允许在水平方向和垂直方向进行平铺，no-repeat则在两个方向都不允许平铺。背景图像将从一个页面的左上角开始平铺。

（4）通过background-position属性来改变图像在背景框中的位置，为该属性提供属性值的方式有3种：关键字（5个位置关键词top、right、bottom、left、center选择两个任意顺序组队分别表示水平方向和垂直方向。如果仅出现一个关键词，那默认另一个关键词为center）；百分数（使图像所描述的点与元素所拥有的坐标对齐，即图像中描述为m% n%的点与元素中描述为m% n%的点对齐，如果只提供一个百分数值，则将该值视为水平值，垂直值默认为50%，默认值为0% 0%，相当于关键词top left，这就解释了为什么默认图像总是从左上角开始排列的）；长度值（图像的左上角相对于元素内边距区左上角进行的偏移，偏移只是从元素内边距左上角到图像左上角），图像的左上角与background-position属性值所声明的那个点对齐。

（5）如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动，当文档滚动到超过图像的位置，图像将会消失。通过（背景关联）background-attachment属性可以阻止这种滚动，声明图像相对于可视是fixed（固定的）。就不会收到滚动的影响。该属性的默认值是scroll（滚动的）。

 

3.链接

（1）链接的特殊性在于我们能够根据链接的状态来为它设置样式。

（2）链接的四种状态：（link）未被访问时、（visited）已被访问时、（hover）指针移到上面时、（active）正在被点击时。

（3）设置的链接样式的常见属性：color（字体颜色），text-decoration（下划线），background-color（背景颜色）、font-family（字体类型）、font-size（字体尺寸）等等。

（4）注意：为了使定义生效，应该按照上面的顺序对状态属性进行定义。

 

4.列表

（1）从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样，这使得列表相当重要。

（2）CSS 列表属性允许你放置列表项标志位置（list-style-position）、改变列表项标志类型（list-style-type）、将图像作为列表项标志（list-style-image）等等样式。

（3）列表类型：在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。要修改用于列表项的标志类型，可以使用属性 list-style-type。

（4）列表项图像：对各标志使用一个图像，这可以利用 list-style-image 属性做到，只需要简单地使用一个 url() 值，就可以使用图像作为标志。

（5）列表标志位置：确定标志出现在列表项内容之外还是内容内部，可以利用 list-style-position 完成的。

（6）简写列表样式：可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

 

5.表格

（1）CSS 表格属性可以帮助您极大地改善表格的外观。

（2）表格边框（border）:使用border属性设置表格，会发现表格具有双线条边框，这是由于 table、th 以及 td 元素都有独立的边框（1+1=2）。

（3）边框折叠( border-collapse)：使用border-collapse属性把表格边框折叠为单线条边框。

（4）表格宽度和高度（width，height）：通过 width 和 height 属性定义表格的宽度和高度。

（5）表格文本对齐方式（text-align，vertical-align）：text-align（vertical-align）属性设置表格中文本水平（垂直）对齐方式，比如左边（顶部）对齐、右边（底部）对齐或者居中。

（6）表格内边距（padding）：使用padding属性控制表格中内容与边框的距离（为th、td元素设置）

（7）表格文本、背景颜色（color、background-color）：分别设置元素的文本颜色和背景颜色，可单独设置也可全局设置。

 

6.轮廓

（1）轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

（2）CSS outline 属性规定元素轮廓的样式（out-style）、颜色（out-color）和宽度（out-width）。

 

三、框模型

1.框模型概述

（1）CSS框模型（Box Model）规定了元素框处理外边距（margin）、边框（border）、内边距（padding）、元素内容（element）的方式。

（2）元素框的最内部分是实际元素内容，直接包围着元素内容的是内边距，内边距的边缘是边框，背景应该用于由元素内容、内边距和边框组成的区域，边框以外是外边距，外边距默认是透明的不会遮挡其后的任何元素，外边距的边缘是元素边框。

（3）①内边距、边框和外边距都是可以设置的，默认值为0，增加它们的尺寸不会影响元素内容的尺寸，但是会增加元素边框的总尺寸。②它们可以应用于一个元素的所有边，也可以应用于单边。③width和height指的是元素内容区域的宽度和高度。④外边距在很多情况下都要使用负值。

 

2.内边距

（1）元素的内边距（padding）在元素内容（element）与边框（border）之间，定义该空白区域的是padding属性。padding属性接受厘米值、像素值和百分比值，但不接受负值。

（2）百分数值是相对于其父元素的width来计算的，所以父元素的width改变，内边距也会改变。

 

 

3.边框

（1）元素的边框（border）是围绕元素内容和内边距的一（多）条线，border属性允许你规定元素边框的样式（style）、宽度（width）、颜色（color）。

（2）HTML中我们使用表格创建文本周围的边框，但是可以使用边框属性使边框效果出色，并应用于任何元素中。

（3）元素的背景是元素内容、内边距、边框区的背景。

（4）使用border-style属性为边框指定样式。样式是边框中最重要的方面，不仅因为样式控制着边框的显示，更因为没有样式，将没有边框。CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

（5）使用border-width属性为边框指定宽度，指定方式有两种：使用长度值（1px，1em）；关键词（thin，medium，thick）。如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。

（6）使用border-color属性为边框指定颜色，可以使用颜色英文名、十六进制颜色值、RGB颜色值等三种颜色类型。可以接受4个颜色值，不够4个时值复制就会起作用。

 

4.外边距

（1）围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。百分数是相对于父元素的 width 计算的。

（2）值复制规则：如果缺少左外边距的值，则使用右外边距的值；如果缺少下外边距的值，则使用上外边距的值；如果缺少右外边距的值，则使用上外边距的值。

（3）换句话说：如果为外边距给定3个值，则第4个值使用第2个值；如果为外边距给定2个值，则第3个值使用第1个值，第4个值使用第2个值；如果为外边距给定1个值，则第2、3、4个值均使用第一个值。

（4）使用单边外边距属性为元素单边上的外边距设置值，只设置相应上的外边距，而不会直接影响所有其他外边距。

 

5.外边距合并

（1）外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

（2）当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

 

（3）当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

 

（4）外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

 

（5）如果这个外边距遇到另一个元素的外边距，它还会发生合并：

 

（6）外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

 

四、定位

1.定位概述

（1）CSS定位（Positioning）属性允许你对元素进行定位。定位的基本思想很简单：它允许你基于（参照）该元素的正常位置、浏览器窗口、其他元素、父元素的位置而定义该元素的位置。

（2）div、h1、p这些元素被称为块级元素，这些元素显示为一块内容，即“块框”，strong、span等元素被称为行内元素，它们的内容显示在行内，即“行内框”。

（3）使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

（4）CSS中有三种基本的定位机制：普通流、浮动、绝对定位。默认情况下为普通流，即元素的位置由元素在HTML中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

（5）通过使用position属性，我们可以选择4种不同类型的定位（static、relative、absolute、fixed），这会影响元素框的生成方式。

 

2.相对定位（relative）

（1）相对定位（relative）会按照元素的原始位置对该元素进行移动。元素仍然保持定位前的形状，仍然保留原来所占的空间。

（2）如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

 

3.绝对定位（absolute）

（1）删除：设置为绝对定位（absolute）的元素框从文档流完全删除，使元素框的位置与文档流无关，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，因此不占据空间。普通流中其它元素的布局就像绝对定位的元素不存在一样。

（2）定位：元素的位置相对于最近的已定位祖先元素进行定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

（3）元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。因为绝对定位的框与文档流无关，所以生成的块级框可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

（4）两者比较：对于定位的主要问题是要记住每种定位的意义。

①相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。相对定位是“相对于”元素在文档中的初始位置；

②绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

 

4.浮动（float）

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

CSS浮动：通过float属性实现元素的浮动。

（2）当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

 

（3）当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

 

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

 

行框与清理：通过clear属性实现清理工作。这是个有用的工具，它让周围的元素为浮动元素留出空间。

（5）浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像：

 

（6）要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。为了实现下图这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

 

 

五、CSS 选择器

1. 选择所有元素： *{}

2. 并集选择器：选择器1,选择器2{}

3. 子选择器：筛选选择器1元素下的选择器2元素：选择器1 选择器2{}

4. 父选择器：筛选选择器2的父元素选择器1：选择器1 > 选择器2{}

5. 属性选择器：选择元素名称，属性名=属性值的元素：元素名称[属性名="属性值"]{}

6. 伪类选择器：选择一些元素具有的状态：元素:状态{}

 

六、CSS 高级

1.对齐

（1）在 CSS 中，可以使用多种属性（margin,position,float）来水平对齐元素。(注意:使用这3种属性实现块级元素水平对齐，请始终记得设置 !DOCTYPE 声明)

（2）块元素（div,p,h1）指的是占据全部可用宽度的元素，并且在其前后都会换行。本节展示出于布局目的如何水平对齐块级元素。

（3）margin属性:可通过将左和右外边距设置为 "auto",规定均等地分配可用的外边距,结果就是水平居中对齐块元素。（注意:如果宽度是 100%，则对齐没有效果。）

（4）position属性:使用绝对定位,设置left,right属性值为0实现水平居左,居右对齐块级元素。绝对定位元素会被从正常流中删除，并且能够交叠元素。

（5）float属性:将float属性值设置为center,left,right实现居中,居左,居右水平对齐块级元素。

 

2.尺寸

（1）CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

 

3.分类

（1）CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

（2）clear属性:设置一个元素的侧面是否允许其他的浮动元素。

（3）cursor属性:规定当指向某元素之上时显示的指针类型。

（4）display属性:设置是否及如何显示元素。

（5）float属性：定义元素在哪个方向浮动。

（6）position属性:把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

（7）visibility属性:设置元素是否可见或不可见。

 

4.导航栏

（1）拥有易用的导航条对于任何网站都很重要。通过 CSS，您能够把乏味的 HTML 菜单转换为漂亮的导航栏。

（2）将用标准的 HTML 列表作为基础来构建导航栏。导航栏基本上是一个链接列表，因此使用 ul 和 li 元素是非常合适的，也很标准。

（3）有两种创建水平导航栏的方法。使用行内或浮动列表项。两种方法都不错，但是如果您希望链接拥有相同的尺寸，就必须使用浮动方法。

 

5.图片库

（1）CSS 可用来创建图片库。

 

6.图片透明

（1）通过 CSS opacity 属性创建透明图像是很容易的,该属性是W3C CSS 推荐标准的一部分。

（2）定义透明效果的 CSS3 属性是 opacity。

（3）IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

（4）IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

 

7.媒介类型

（1）媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器（screen）、纸媒介（print）或者听觉浏览器（aural）等等。

（2）某些 CSS 属性仅仅被设计为针对某些媒介,比方说 "voice-family" 属性被设计为针对听觉用户终端。

（3）其他的属性可被用于不同的媒介,例如，"font-size" 属性可被用于显示器以及印刷媒介。但是也许会带有不同的值,显示器上面的显示的文档通常会需要比纸媒介文档更大的字号。同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。

（4）@media+“媒介类型” 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

（5）常用的媒介类型：screen（用于电脑显示器）、print（用于打印机）、aural（用于语音和音频合成器）、all（用于所有的媒介设备）、projection（用于方案展示，比如幻灯片）、tv（用于电视机类型的设备）、handheld（用于小的手持的设备）

（6）媒介类型名称对大小写不敏感。

 

8.注意事项

（1）列出了在使用 CSS 时尽量避免使用的技术。

（2）Internet Explorer Behaviors:Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。

（3）因为:只有 Internet Explorer 支持 behavior 属性。所以:要避免使用它.应该:使用JavaScript和HTML DOM取而代之。

 

9.总结

（1）本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。

（2）你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。

（3）同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。

（4）下一步应该学习 CSS3（最新的CSS标准）、HTML5（下一代的 HTML）和JavaScript（世界上最流行的脚本语言）。

 

《CSS3基础教程》

1.简介

（1）CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2。

（2）CSS3被划分为模块，其中最重要的CSS3模块包括：选择器、框模型、背景和边框、文本效果、2D/3D转换、多列布局、用户界面。

（3）W3C 仍然在对 CSS3 标准规范进行开发。不过，现代浏览器已经实现了相当多的 CSS3 属性。

 

2.边框

（1）通过 CSS3，您能够通过新的边框特性属性创建圆角边框（border-radius），向矩形添加阴影（box-shadow），使用图片来绘制边框（border-image）。（注:并且不需使用设计软件，比如 PhotoShop。）

（2）在 CSS3 中，border-radius 属性用于创建圆角边框。

（3）在 CSS3 中，box-shadow 用于向边框添加阴影。

（4）在 CSS3 中，border-image 属性用于使用图片来创建边框。

 

3.背景

（1）CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。比如：background-size,background-origin,background-clip

（2）background-size 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

（3）能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

（4）background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

（5）background-clip属性规定背景的绘制区域。背景图片可以绘制于 content-box、padding-box 或 border-box 区域。

（6）CSS3 允许您为元素使用多个背景图像。

 

4.文字效果

（1）CSS3 包含多个新的文本特性。在此只介绍两个新属性：文本阴影（text-shadow）和文本换行（word-wrap）。

（2）text-shadow可向文本应用阴影,能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色.

（3）单词太长的话就可能超出某个区域，在 CSS3 中，word-wrap 属性允许你强制对文本进行换行，即使这意味着会对单词进行拆分。

新的文本属性
属性	描述
hanging-punctuation	规定标点字符是否位于线框之外。
punctuation-trim	规定是否对标点字符进行修剪。
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-outline	规定文本的轮廓。
text-overflow	规定当文本溢出包含元素时发生的事情。
text-shadow	向文本添加阴影。
text-wrap	规定文本的换行规则。
word-break	规定非中日韩文本的换行规则。
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。

 

5.字体

（1）在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体,在CSS3之后，web 设计师可以使用他们喜欢的任意字体，再也不用被迫使用“web safe”字体了。

（2）定义：找到希望使用的字体时，可将该字体文件存放到 web 服务器上，字体文件会在用户需要时被自动下载到用户的计算机上。定义自己希望使用的字体是在 CSS3 @font-face 规则中的。

（3）使用：在新的 @font-face 规则中，必须首先定义字体的名称（比如 myFirstFont），然后指向src该字体文件url。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)。

（4）使用粗体：必须为粗体文本添加另一个包含描述符的 @font-face，新字体文件应该包含该字体的粗体字符，只要 font-family 为 "myFirstFont" 的文本需要显示为粗体，浏览器就会使用该字体。

能够在 @font-face 规则中定义的所有字体描述符
描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal	可选。定义如何拉伸字体。默认是 "normal"。
font-style	normal	可选。定义字体的样式。默认是 "normal"。
font-weight	bold	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

 

6.2D转换

（1）通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

（2）转换是使元素改变形状、尺寸和位置的一种效果。你可以使用 2D 或 3D 转换来转换你的元素。

（3）2D 转换方法：translate(),rotate(),scale(),skew(),matrix()

（4）通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

（5）通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。值 rotate(30deg) 把元素顺时针旋转 30 度。

（6）通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

（7）通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

（8）通过 matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

2D Transform 方法
函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。Translate X、Y(n)定义单轴移动。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。Scale X、Y(n)定义单向缩放。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。Skew X、Y(angle)定义单向倾斜。

 

7.3D转换

（1）CSS3 允许您使用 3D 转换来对元素进行格式化。

（2） 3D 转换方法：rotateX(),rotateY().2D转换与3D转换之间的不同之处在于：2D转换在平面上上旋转，3D转换在空间上旋转。

（3）通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。值rotateX(30deg)围绕X轴旋转30°。

（4）通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。值rotateY(30deg)围绕Y轴旋转30°。

所有的转换属性
属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

 

3D Transform 方法
函数	描述
matrix3d(n,....,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。Translate X、Y、Z(x)定义单向转化。
scale3d(x,y,z)	定义 3D 缩放转换。Scale X、Y、Z(x)定义单向缩放转换。
rotate3d(x,y,z,angle)	定义 3D 旋转。Rotate X、Y、Z(angle)定义单向旋转。
perspective(n)	定义 3D 转换元素的透视视图。

 

8.过渡

（1）通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果，即过渡。

（2）CSS3 过渡是元素从一种样式逐渐改变为另一种样式的效果。要实现这一点，必须规定两项内容：规定希望把效果添加到哪个 CSS 属性上、规定效果的时长。

（3）如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开。

所有的过渡属性
属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

 

9.动画

（1）通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

（2）@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

（3）创建动画需要捆绑到某个选择器，绑定方法是通过规定至少以下两项 CSS3 动画属性:动画的名称,动画的时长,即可将动画绑定到选择器.

（4）必须定义动画的名称和时长。如果忽略时长，则不会产生动画效果，因为默认值是 0。

（5）动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

（6）可以用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

@keyframes 规则和所有动画属性
属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode	规定对象动画时间之外的状态。

 

10.多列

（1）通过 CSS3，你能够创建多个列来对文本进行布局 - 就像报纸那样！

（2）column-count 属性规定元素应该被分隔的列数。

（3）column-gap 属性规定列之间的间隔。

（4）column-rule 属性设置列之间的宽度、样式和颜色规则。

新的多列属性
属性	描述
column-count	规定元素应该被分隔的列数。
column-fill	规定如何填充列。
column-gap	规定列之间的间隔。
column-rule	设置所有 column-rule-* 属性的简写属性。
column-rule-color	规定列之间规则的颜色。
column-rule-style	规定列之间规则的样式。
column-rule-width	规定列之间规则的宽度。
column-span	规定元素应该横跨的列数。
column-width	规定列的宽度。
columns	规定设置 column-width 和 column-count 的简写属性。

 

11.用户界面

（1）在 CSS3 中，新的用户界面属性包括重设元素尺寸(resize)、盒尺寸(box-sizing)以及轮廓(outline-offset)等。

（2）resize 属性规定是否可由用户调整元素尺寸。

（3）box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

（4）outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同：轮廓不占用空间,轮廓可能是非矩形。

新的用户界面属性
属性	描述
appearance	允许您将元素设置为标准用户界面元素的外观
box-sizing	允许您以确切的方式定义适应某个区域的具体内容。
icon	为创作者提供使用图标化等价物来设置元素样式的能力。
nav-down	规定在使用 arrow-down 导航键时向何处导航。
nav-index	设置元素的 tab 键控制次序。
nav-left	规定在使用 arrow-left 导航键时向何处导航。
nav-right	规定在使用 arrow-right 导航键时向何处导航。
nav-up	规定在使用 arrow-up 导航键时向何处导航。
outline-offset	对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
resize	规定是否可由用户对元素的尺寸进行调整。

day001 HTML&CSS知识合辑及实战案例—03