C++博客-RTY 实践出真知-随笔分类-CSS

分享60个来自Picons.me的全格式社交图标库

RTY — Sun, 25 Sep 2011 01:37:00 GMT

原文位置：http://www.gbin1.com/tools/design/60socialiconsinallpopularformatsbypiconsme/

图标设计公司Picons.me免费提供了一套60枚的图标库，这套图标支持所有的流行社交网络，并且支持多种格式：AI，EPS，PDF

同时有PSD和CSH格式以及不同大小的PNG格式（从16*16到512*512）。

最后提示，GBin1为了不让用户出现困惑，Picons.me的授权不包括这套社交图标。

下载地址

RTY 2011-09-25 09:37 发表评论

分享35个高品质的PSD版本UI网页设计

RTY — Sun, 25 Sep 2011 01:31:00 GMT

摘要: http://sixrevisions.com/freebies/web-page-templates/transparent-glass-ui/This free user interface pack, brought to you by PixelsDaily, includes a variety of popular elements used in web applicati... 阅读全文

RTY 2011-09-25 09:31 发表评论

[学习笔记] CSS2 参考手册

RTY — Sat, 28 May 2011 13:26:00 GMT

摘要: 请点击表格中属性列的链接，可以查看相关属性的详细信息。CSS 属性组：背景文本字体边框和轮廓外边距内边距列表内容生成尺寸定位打印表格伪类伪元素提示和注释：属性：“属性” 列指向语法、实例、浏览器支持等内容。CSS："CSS" 列指示属性是在哪个 CSS 版本中定义的（CSS1 还是 CSS2）。提示：W3School 的 CSS 参考手册定期在所有主流浏览器中进行测试。最后... 阅读全文

RTY 2011-05-28 21:26 发表评论

[学习笔记] CSS2 打印参考]

RTY — Sat, 28 May 2011 13:25:00 GMT

打印属性

打印 HTML 文档总是会出现问题。在 CSS2 中，我们可以借助打印属性让打印 web 内容更容易一些。

属性	描述	值
orphans	设置元素放在页面底部时所允许的最少文本行数。	number
marks	设置是否在内容区之外但是在画布的可打印区域内放“十字标志”。请注意，CSS2.1 已删除该属性。	none crop cross
page	这个属性与 size 属性结合可以指定打印一个元素时所用的特定页面类型。请注意，CSS2.1 已删除该属性。	auto identifier
page-break-after	设置元素后是否应当放置分页符。	auto always avoid left right
page-break-before	设置元素前否应当放置分页符。	auto always avoid left right
page-break-inside	设置元素内部是否应当放置分页符。	auto avoid
size	利用这个属性，创作人员可以声明打印一个元素时所用页框的大小和方向。它可以与 page 结合使用。不过并不要求一定如此。请注意，CSS2.1 已删除该属性。	auto portrait landscape
widows	设置元素放在页面顶部时所允许的最少文本行数。	number

RTY 2011-05-28 21:25 发表评论

[学习笔记] CSS2 听觉参考

RTY — Sat, 28 May 2011 13:24:00 GMT

摘要: 听觉样式表听觉样式表可把语音合成与音响效果相组合，使用户可以听到信息，而无需进行阅读。听觉呈现可用于：视觉能力低弱的人士帮助用户学习阅读帮助有阅读障碍的用户家庭娱乐在汽车中使用听觉呈现通常会把文档转化为纯文本，然后传给屏幕阅读器（可读出屏幕上所有字符的一种程序）。听觉样式表的一个例子：h1, h2, h3, h4 { voice-family: male; richness: 80; cue-be... 阅读全文

RTY 2011-05-28 21:24 发表评论

[学习笔记] CSS 单位

RTY — Sat, 28 May 2011 13:24:00 GMT

尺寸

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)

颜色

单位	描述
(颜色名)	颜色名称 (比如 red)
rgb(x,x,x)	RGB 值 (比如 #ff0000)
rgb(x%, x%, x%)	RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb	十六进制数 (比如 #ff0000)

RTY 2011-05-28 21:24 发表评论

[学习笔记] CSS2 媒介类型

RTY — Sat, 28 May 2011 13:22:00 GMT

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

媒介类型

某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如，"font-size" 属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。

@media规则

@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：

       ....

不同的媒介类型

注释：媒介类型名称对大小写不敏感。

媒介类型	描述
all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。

RTY 2011-05-28 21:22 发表评论

[学习笔记] CSS 分类 (Classification)

RTY — Sat, 28 May 2011 13:21:00 GMT

CSS 分类属性允许你规定如何以及在何处显示元素。

CSS分类(Classification)实例：

如何把元素显示为内联元素: 本例演示如何把元素显示为内联元素。
如何把元素显示为块级元素: 本例演示如何把元素显示为块级元素。
float 属性的简单应用: 使图像浮动于一个段落的右侧。
将带有边框和边界的图像浮动于段落的右侧: 使图像浮动于段落的右侧。向图像添加边框和边界。
带标题的图像浮动于右侧: 使带有标题的图像浮动于右侧
使段落的首字母浮动于左侧: 使段落的首字母浮动于左侧，并向这个字母添加样式。
创建水平菜单: 使用具有一栏超链接的浮动来创建水平菜单。
创建无表格的首页: 使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
定位：相对定位: 本例演示如何相对于一个元素的正常位置来对其定位。
定位：绝对定位: 本例演示如何使用绝对值来对元素进行定位。
定位：固定定位: 本例演示如何相对于浏览器窗口来对元素进行定位。
如何使元素不可见: 本例演示如何使元素不可见。你希望元素被显示出来，还是不呢？
把表格元素设置为 collapse（请在非 IE 的浏览器中查看）: 本例演示如何使表格元素叠加？
改变光标: 本例演示如何改变光标。
清除元素的侧面: 本例演示如何使用清除元素侧面的浮动元素。

CSS 分类属性 (Classification)

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

属性	描述
clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

RTY 2011-05-28 21:21 发表评论

[学习笔记] CSS 尺寸 (Dimension)

RTY — Sat, 28 May 2011 13:21:00 GMT

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

CSS 尺寸实例：

使用像素值设置图像的高度: 本例演示如何使用像素值设置元素的高度。
使用百分比设置图像的高度: 本例演示如何使用百分比值来设置元素的高度。
使用像素值来设置元素的宽度: 本例演示如何使用像素值来设置元素的宽度。
使用百分比来设置元素的宽度: 本例演示如何使用百分比值来设置元素的宽度。
设置元素的最大高度: 本例演示如何设置一个元素的最大高度。
使用像素值来设置元素的最大宽度: 本例演示如何使用像素值来设置元素的最大高度。
使用百分比来设置元素的最大宽度: 本例演示如何使用百分比值来设置元素的最大高度。
使用像素值来设置元素的最小高度: 本例演示如何使用像素值来设置元素的最小高度。
使用像素值来设置元素的最小宽度: 本例演示如何使用像素值来设置元素的最小宽度。
使用百分比来设置元素的最小宽度: 本例演示如何使用百分比值来设置元素的最小宽度。
使用百分比设置行间距: 本例演示如何使用百分比值来设置段落中的行间距。
使用像素值设置行间距: 本例演示如何使用像素值来设置段落中的行间距。
使用数值来设置行间距: 本例演示如何使用一个数值来设置段落中的行间距。

CSS 尺寸属性

CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

RTY 2011-05-28 21:21 发表评论

[学习笔记] CSS 伪元素 (Pseudo-elements)

RTY — Sat, 28 May 2011 13:20:00 GMT

CSS 伪元素用于向某些选择器设置特殊效果。

语法

伪元素的语法：

selector:pseudo-element {property:value;}

CSS 类也可以与伪元素配合使用：

selector.class:pseudo-element {property:value;}

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

实例

p:first-line   {   color:#ff0000;   font-variant:small-caps;   }

亲自试一试

注释："first-line" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-line" 伪元素：

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

p:first-letter   {   color:#ff0000;   font-size:xx-large;   }

亲自试一试

注释："first-letter" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-letter" 伪元素：

font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear

伪元素和 CSS 类

伪元素可以与 CSS 类配合使用：

p.article:first-letter   {   color: #FF0000;   }  class="article">This is a paragraph in an article。

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多重伪元素

可以结合多个伪元素来使用。

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter   {   color:#ff0000;   font-size:xx-large;   }  p:first-line   {   color:#0000ff;   font-variant:small-caps;   }

亲自试一试

CSS2 - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个

元素前面插入一幅图片：

h1:before   {   content:url(logo.gif);   }

亲自试一试

CSS2 - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个

元素后面插入一幅图片：

h1:after   {   content:url(logo.gif);   }

亲自试一试

伪元素

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

RTY 2011-05-28 21:20 发表评论

[学习笔记] CSS 伪类 (Pseudo-classes)

RTY — Sat, 28 May 2011 13:19:00 GMT

CSS 伪类用于向某些选择器添加特殊的效果。

CSS 伪类 (Pseudo-classes)实例：

超链接: 本例演示如何向文档中的超链接添加不同的颜色。
超链接 2: 本例演示如何向超链接添加其他样式。
超链接 - :focus 的使用: 本例演示如何对超链接应用 :focus 伪类（无法在 IE 中工作）。
:first-child（首个子对象）: 本例演示 :first-child 伪类的用法。
:lang（语言）: 本例演示 :lang 伪类的用法。

语法

伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */ a:visited {color: #00FF00}	/* 已访问的链接 */ a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */ a:active {color: #0000FF}	/* 选定的链接 */

亲自试一试

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

伪类与 CSS 类

伪类可以与 CSS 类配合使用：

a.red : visited {color: #FF0000}  red" href="css_syntax.asp">CSS Syntax

假如上面的例子中的链接被访问过，那么它将显示为红色。

CSS2 - :first-child 伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：

 These are the necessary steps:  Intert Key Turn key clockwise
 Push accelerator
 
 Do not push the brake at the same time as the accelerator.

在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。

给定以下规则：

p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;}

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。

请访问该链接，来查看这个 :first-child 实例的效果。

提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

注释：必须声明，这样 :first-child 才能在 IE 中生效。

为了使您更透彻地理解 :first-child 伪类，我们另外提供了 3 个例子：

例子 1 - 匹配第一个
元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：

some text

some text

TIY

例子 2 - 匹配所有
元素中的第一个元素

在下面的例子中，选择器匹配所有

元素中的第一个 元素：

      some text. some text.
 some text. some text.

TIY

例子 3 - 匹配所有作为第一个子元素的
元素中的所有元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素：

      some text. some text.
 some text. some text.

TIY

CSS2 - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

        文字lang="no">段落中的引用的文字文字

伪类

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

RTY 2011-05-28 21:19 发表评论

[学习笔记] CSS 相邻兄弟选择器

RTY — Sat, 28 May 2011 13:18:00 GMT

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
亲自试一试
语法解释
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
请看下面这个文档树片段：

List item 1

List item 2

List item 3

List item 1

List item 2

List item 3

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
亲自试一试
结合其他选择器
相邻兄弟结合符还可以结合其他结合符：
html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

RTY 2011-05-28 21:18 发表评论

[学习笔记] CSS 子元素选择器

RTY — Sat, 28 May 2011 13:18:00 GMT

上海装修公司 http://www.zhixian.com.cn/装修公司
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
选择子元素
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：
This is very important.

This is really very important.

亲自试一试
语法解释
您应该已经注意到了，子选择器使用了大于号（子结合符）。
子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：
h1 > strong h1> strong h1 >strong h1>strong
如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
结合后代选择器和子选择器
请看下面这个选择器：
table.company td > p
下面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

RTY 2011-05-28 21:18 发表评论

[学习笔记] CSS 后代选择器

RTY — Sat, 28 May 2011 13:17:00 GMT

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
根据上下文选择元素
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
This is a important heading

This is a important paragraph.

亲自试一试
当然，您也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。
语法解释
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。
具体应用
后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。
假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。
解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：
div.sidebar {background:blue;} div.maincontent {background:white;} div.sidebar a:link {color:white;} div.maincontent a:link {color:blue;}
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以使无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
因此，ul em 将会选择以下标记中的所有 em 元素：

List item 1

List item 1-1

List item 1-2

List item 1-3

List item 1-3-1

List item 1-3-2

List item 1-3-3

List item 1-4

List item 2

List item 3

亲自试一试

RTY 2011-05-28 21:17 发表评论

[学习笔记] CSS 属性选择器详解

RTY — Sat, 28 May 2011 13:17:00 GMT

CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
亲自试一试
例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
亲自试一试
例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
亲自试一试
例子 4
可以采用一些创造性的方法使用这个特性。
例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：
img[alt] {border: 5px solid red;}
亲自试一试
提示：上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。
例子 5：为 XML 文档使用属性选择器
属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：
planet[moons] {color:red;}
这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：
Venus moons="1">Earth moons="2">Mars
查看效果
根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
例子 1
例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
亲自试一试
例子 2
与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
这会把以下标记中的第一个超链接的文本大小加倍，但是第二个或第三个链接不受影响：
href="http://www.w3school.com.cn/" title="W3School">W3School CSS HTML
亲自试一试
例子 3
同样地，XML 语言也可以利用这种方法来设置样式。
下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素：
planet[moons="1"] {color: red;}
上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：
Venus moons="1">Earth Mars
查看效果
属性与属性值必须完全匹配
请注意，这种格式要求必须与属性值完全匹配。
如果属性值包含用空格分隔的值列表，匹配就可能出问题。
请考虑一下的标记片段：
class="important warning">This paragraph is a very important warning.

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。
要根据具体属性值来选择该元素，必须这样写：
p[class="important warning"] {color: red;}
亲自试一试
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}
亲自试一试
如果忽略了波浪号，则说明需要完成完全值匹配。
部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说，p.important 和 p["important"] 应用到 HTML 文档时是等价的。
那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。
例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
亲自试一试
子串匹配属性选择器
下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。
很多现代浏览器都支持这些选择器，包括 IE7。
下表是对这些选择器的简单总结：
类型描述
[abd^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abd$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abd*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
可以想到，这些选择有很多用途。
举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：
a[href*="w3school.com.cn"] {color: red;}
亲自试一试
提示：任何属性都可以使用这些选择器。
特定属性选择类型
最后为您介绍特定属性选择器。请看下面的例子：
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
en">Hello!

en-us">Greetings!

en-au">G'day!

Bonjour!

Jrooana!

亲自试一试
一般来说，[att|="val"] 可以用于任何属性及其值。
假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：
img[src|="figure"] {border: 1px solid gray;}
亲自试一试
当然，这种属性选择器最常见的用途还是匹配语言值。

RTY 2011-05-28 21:17 发表评论

[学习笔记] CSS ID 选择器详解

RTY — Sat, 28 May 2011 13:16:00 GMT

ID 选择器允许以一种独立于文档元素的方式来指定样式。
CSS ID 选择器
在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。
语法
首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则：
*#intro {font-weight:bold;}
与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：
#intro {font-weight:bold;}
这个选择器的效果将是一样的。
第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。
以下是一个实际 ID 选择器的例子：
id="intro">This is a paragraph of introduction.
亲自试一试
类选择器还是 ID 选择器？
在类选择器这一章中我们曾讲解过，可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。
区别 1：只能在文档中使用一次
与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
区别 2：不能使用 ID 词列表
不用于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
区别 3：ID 能包含更多含义
类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：
#mostImportant {color:red; background:yellow;}
这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：
id="mostImportant">This is important!
id="mostImportant">This is important!
id="mostImportant">This is important!

亲自试一试：
为 id 为 mostImportant 的 h1 元素设定样式
为 id 为 mostImportant 的 em 元素设定样式
为 id 为 mostImportant 的 ul 元素设定样式
区分大小写
请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
因此，对于以下的 CSS 和 HTML，元素不会变成粗体：
#intro {font-weight:bold;}
id="Intro">This is a paragraph of introduction.
由于字母 i 的大小写不同，所以选择器不会匹配上面的元素。

RTY 2011-05-28 21:16 发表评论

[学习笔记] CSS 类选择器详解

RTY — Sat, 28 May 2011 13:15:00 GMT

类选择器允许以一种独立于文档元素的方式来指定样式。
CSS 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
修改 HTML 代码
在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。
为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：
class="important"> This heading is very important.

class="important"> This paragraph is very important.

在上面的代码中，两个元素的 class 都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。
语法
然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：
*.important {color:red;}
如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：
.important {color:red;}
亲自试一试
结合元素选择器
类选择器可以结合元素选择器来使用。
例如，您可能希望只有段落显示为红色文本：
p.important {color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。
如果你确实希望为 h1 元素指定不同的样式，可以使用选择器 h1.important：
p.important {color:red;} h1.important {color:blue;}
亲自试一试
CSS 多类选择器
在上一节中，我们处理了 class 值中包含一个词的情况。在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
class="important warning"> This paragraph is a very important warning.

这两个词的顺序无关紧要，写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作：
.important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;}
亲自试一试
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：
.important.urgent {background:silver;}
不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：
class="important urgent warning"> This paragraph is a very important and urgent warning.

亲自试一试
重要事项：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。

RTY 2011-05-28 21:15 发表评论

[学习笔记] CSS 分组

RTY — Sat, 28 May 2011 13:14:00 GMT

选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
可以将任意多个选择器分组在一起，对此没有任何限制。
例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：
/* no grouping */ h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;} /* grouping */ h1, h2, h3, h4, h5, h6 {color:blue;}
亲自试一试
分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：
/* group 1 */ h1 {color:silver; background:white;} h2 {color:silver; background:gray;} h3 {color:white; background:gray;} h4 {color:silver; background:white;} b {color:gray; background:white;} /* group 2 */ h1, h2, h4 {color:silver;} h2, h3 {background:gray;} h1, h4, b {background:white;} h3 {color:white;} b {color:gray;} /* group 3 */ h1, h4 {color:silver; background:white;} h2 {color:silver;} h3 {color:white;} h2, h3 {background:gray;} b {color:gray; background:white;}
亲自试一试：
group 1
group 2
group 3
请注意，group 3 中使用了“声明分组”。稍后我们会为您介绍“声明分组”。
通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
亲自试一试
这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。
声明分组
我们既可以对选择器进行分组，也可以对声明分组。
假设您希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：
h1 {font: 28px Verdana;} h1 {color: blue;} h1 {background: red;}
但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起：
h1 {font: 28px Verdana; color: white; background: black;}
这与前面的 3 行样式表的效果完全相同。
注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：
h1 { font: 28px Verdana; color: blue; background: red; }
亲自试一试
怎么样，上面这种写法的可读性是不是更强。
不过，如果忽略了第二个分号，用户代理就会把这个样式表解释如下：
h1 { font: 28px Verdana; color: blue background: red; }
亲自试一试
因为 background 对 color 来说不是一个合法值，而且由于只能为 color 指定一个关键字，所以用户代理会完全忽略这个 color 声明（包括 background: black 部分）。这样 h1 标题只会显示为蓝色，而没有红色背景，不过更有可能根本得不到蓝色的 h1。相反，这些标题只会显示为默认颜色（通常是黑色），而且根本没有背景色。font: 28px Verdana 声明仍能正常发挥作用，因为它确实正确地以一个分号结尾。
与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，也更易维护。
提示：在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。
结合选择器和声明的分组
我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。
下面的规则为所有标题指定了一种复杂的样式：
h1, h2, h3, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; }
亲自试一试
上面这条规则将所有标题的样式定义为带有白色背景的灰色文本，其内边距是 10 像素，并带有 1 像素的实心边框，文本字体是 Verdana。

RTY 2011-05-28 21:14 发表评论

[学习笔记] CSS 元素选择器

RTY — Sat, 28 May 2011 13:14:00 GMT

CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;} h1 {color:blue;} h2 {color:silver;}
亲自试一试
可以将某个样式从一个元素切换到另一个元素。
假设您决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器该为 p：
html {color:black;} p {color:gray;} h2 {color:silver;}
亲自试一试
类型选择器
在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
下面的规则匹配文档树中所有 h1 元素：
h1 {font-family: sans-serif;}
因此，我们也可以为 XML 文档中的元素设置样式：
XML 文档：
George John Reminder Don't forget the meeting!
CSS 文档：
note { font-family:Verdana, Arial; margin-left:30px; } to { font-size:28px; display: block; } from { font-size:28px; display: block; } heading { color: red; font-size:60px; display: block; } body { color: blue; font-size:35px; display: block; }
查看效果
通过上面的例子，您可以看到，CSS 元素选择器（类型选择器）可以设置 XML 文档中元素的样式。
如果您需要更多关于为 XML 文档添加样式的知识，请访问 w3school 的 XML 教程。

RTY 2011-05-28 21:14 发表评论

[学习笔记] CSS 浮动

RTY — Sat, 28 May 2011 13:13:00 GMT

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS 浮动
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
CSS float 属性
在 CSS 中，我们通过 float 属性实现元素的浮动。
如需更多有关 float 属性的知识，请访问参考手册：CSS float 属性。
行框和清理
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
因此，创建浮动框可以使文本围绕图像：
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：
这是一个有用的工具，它让周围的元素为浮动元素留出空间。
让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; }

some text

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：
不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; }

some text

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。
不过我们还有另一种办法，那就是对容器 div 进行浮动：
.news { background-color: gray; border: solid 1px black; float: left; } .news img { float: left; } .news p { float: right; }

some text

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。
事实上，W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。
CSS clear 属性
我们刚才详细讨论了 CSS 清理的工作原理和 clear 属性应用方法。如果您希望学习更多有关 clear 属性的知识，请访问参考手册：CSS clear 属性。
浮动和清理实例
float 属性的简单应用
使图像浮动于一个段落的右侧。
将带有边框和边界的图像浮动于段落的右侧
使图像浮动于段落的右侧。向图像添加边框和边界。
带标题的图像浮动于右侧
使带有标题的图像浮动于右侧
使段落的首字母浮动于左侧
使段落的首字母浮动于左侧，并向这个字母添加样式。
创建水平菜单
使用具有一栏超链接的浮动来创建水平菜单。
创建无表格的首页
使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
清除元素的侧面
本例演示如何使用清除元素侧面的浮动元素。

RTY 2011-05-28 21:13 发表评论

[学习笔记] CSS 绝对定位

RTY — Sat, 28 May 2011 13:12:00 GMT

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
CSS 绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative { position: absolute; left: 30px; top: 20px; }
如下图所示：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
CSS 绝对定位实例
定位：绝对定位
本例演示如何使用绝对值来对元素进行定位。

RTY 2011-05-28 21:12 发表评论

[学习笔记] CSS 相对定位

RTY — Sat, 28 May 2011 13:12:00 GMT

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
CSS 相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative { position: relative; left: 30px; top: 20px; }
如下图所示：
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
CSS 相对定位实例
定位：相对定位
本例演示如何相对于一个元素的正常位置来对其定位。

RTY 2011-05-28 21:12 发表评论

[学习笔记] CSS 定位 (Positioning)

RTY — Sat, 28 May 2011 13:11:00 GMT

CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS 定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：
some text
Some more text.

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。
CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
实例
定位：相对定位
本例演示如何相对于一个元素的正常位置来对其定位。
定位：绝对定位
本例演示如何使用绝对值来对元素进行定位。
定位：固定定位
本例演示如何相对于浏览器窗口来对元素进行定位。
使用固定值设置图像的上边缘
本例演示如何使用固定值设置图像的上边缘。
使用百分比设置图像的上边缘
本例演示如何使用百分比值设置图像的上边缘。
使用像素值设置图像的底部边缘
本例演示如何使用像素值设置图像的底部边缘。
使用百分比设置图像的底部边缘
本例演示如何使用百分比值设置图像的底部边缘。
使用固定值设置图像的左边缘
本例演示如何使用固定值设置图像的左边缘。
使用百分比设置图像的左边缘
本例演示如何使用百分比值设置图像的左边缘。
使用固定值设置图像的右边缘
本例演示如何使用固定值设置图像的右边缘。
使用百分比设置图像的右边缘
本例演示如何使用百分比值设置图像的右边缘。
如何使用滚动条来显示元素内溢出的内容
本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。
如何隐藏溢出元素中溢出的内容
本例演示在元素中的内容太大以至于无法适应指定的区域时，如何设置 overflow 属性来隐藏其内容。
如何设置浏览器来自动地处理溢出
本例演示如何设置浏览器来自动地处理溢出。
设置元素的形状
本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。
垂直排列图象
本例演示如何在文本中垂直排列图象。
Z-index
Z-index可被用于将在一个元素放置于另一元素之后。
Z-index
上面的例子中的元素已经更改了Z-index。
CSS 定位属性
CSS 定位属性允许你对元素进行定位。
属性描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

RTY 2011-05-28 21:11 发表评论

[学习笔记] CSS 外边距合并

RTY — Sat, 28 May 2011 13:09:00 GMT

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
亲自试一试
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
亲自试一试
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

RTY 2011-05-28 21:09 发表评论

[学习笔记] CSS 外边距

RTY — Sat, 28 May 2011 13:09:00 GMT

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：
h1 {margin : 0.25in;}
下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;}
与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
margin: top right bottom left
另外，还可以为 margin 设置一个百分比数值：
p {margin : 10%;}
百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
值复制
还记得吗？我们曾经在前两节中提到过值复制。下面我们为您讲解如何使用值复制。
有时，我们会输入一些重复的值：
p {margin: 0.5em 1em 0.5em 1em;}
通过值复制，您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的：
p {margin: 0.5em 1em;}
这两个值可以取代前面 4 个值。这是如何做到的呢？CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
下图提供了更直观的方法来了解这一点：
换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。
利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值，例如：
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */ h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */ p {margin: 1px;} /* 等价于 1px 1px 1px 1px */
这种办法有一个小缺点，您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素，下外边距和右外边距设置为 30 像素。在这种情况下，必须写作：
p {margin: 20px 30px 30px 20px;}
这样才能得到您想要的结果。遗憾的是，在这种情况下，所需值的个数没有办法更少了。
再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto（左外边距是 20px）：
p {margin: auto auto auto 20px;}
同样的，这样才能得到你想要的效果。问题在于，键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距，请使用单边外边距属性。
单边外边距属性
您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：
p {margin-left: 20px;}
您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left
一个规则中可以使用多个这种单边属性，例如：
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
当然，对于这种情况，使用 margin 可能更容易一些：
p {margin: 20px 30px 30px 20px;}
不论使用单边属性还是使用 margin，得到的结果都一样。一般来说，如果希望为多个边设置外边距，使用 margin 会更容易一些。不过，从文档显示的角度看，实际上使用哪种方法都不重要，所以应该选择对自己来说更容易的一种方法。
提示和注释
提示：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。
CSS 外边距实例：
设置文本的左外边距
本例演示如何设置文本的左外边距。
设置文本的右外边距
本例演示如何设置文本的右外边距。
设置文本的上外边距
本例演示如何设置文本的上外边距。
设置文本的下外边距
本例演示如何设置文本的下外边距。
所有的外边距属性在一个声明中。
本例演示如何将所有的外边距属性设置于一个声明中。
CSS 外边距属性
属性描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

RTY 2011-05-28 21:09 发表评论

[学习笔记] CSS 边框

RTY — Sat, 28 May 2011 13:08:00 GMT
摘要: 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。CSS 边框在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方... 阅读全文

RTY 2011-05-28 21:08 发表评论

[学习笔记] CSS 内边距

RTY — Sat, 28 May 2011 13:04:00 GMT

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
内边距的百分比数值
前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
下面这条规则把段落的内边距设置为父元素 width 的 10%：
p {padding: 10%;}
例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

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

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
CSS 内边距实例：
所有内边距属性在一个声明中
本例演示使用简写属性将所有的内边距属性设置于一个声明中，可以有一到四个值。
设置下内边距 1
本例演示如何使用厘米值来设置单元格的下内边距。
设置下内边距 2
本例演示如何使用百分比值来设置单元格的下内边距。
设置左内边距 1
本例演示如何使用厘米值来设置单元格的左内边距。
设置左内边距 2
本例演示如何使用百分比值来设置单元格的左内边距。
设置右内边距 1
本例演示如何使用厘米值来设置单元格的右内边距。
设置右内边距 2
本例演示如何使用百分比值来设置单元格的右内边距。
设置上内边距 1
本例演示如何使用厘米值来设置单元格的上内边距。
设置上内边距 2
本例演示如何使用百分比值来设置单元格的上内边距。
CSS 内边距属性
属性描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

RTY 2011-05-28 21:04 发表评论

[学习笔记] CSS 框模型概述

RTY — Sat, 28 May 2011 13:03:00 GMT

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
CSS 框模型概述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距组成的区域。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* { margin: 0; padding: 0; }
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：
#box { width: 70px; margin: 10px; padding: 5px; }
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
术语翻译
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。
在 w3school，我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距，边框外的空白是外边距，很容易记吧：）

RTY 2011-05-28 21:03 发表评论

[学习笔记] CSS 样式笔记（样式轮廓）

RTY — Sat, 28 May 2011 13:02:00 GMT

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
轮廓（Outline）实例：
在元素周围画线
本例演示使用outline属性在元素周围画一条线。
设置轮廓的颜色
本例演示如何设置轮廓的颜色。
设置轮廓的样式
本例演示如何设置轮廓的样式。
设置轮廓的宽度
本例演示如何设置轮廓的宽度。
CSS 边框属性
"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。
属性描述 CSS
outline 在一个声明中设置所有的轮廓属性。 2
outline-color 设置轮廓的颜色。 2
outline-style 设置轮廓的样式。 2
outline-width 设置轮廓的宽度。 2

RTY 2011-05-28 21:02 发表评论

[学习笔记] CSS 样式笔记（样式表格）

RTY — Sat, 28 May 2011 13:01:00 GMT

CSS 表格属性可以帮助您极大地改善表格的外观。
表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框：
table, th, td { border: 1px solid blue; }
亲自试一试
请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，请使用 border-collapse 属性。
折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
table { border-collapse:collapse; } table,th, td { border: 1px solid black; }
亲自试一试
表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。
下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：
table { width:100%; } th { height:50px; }
亲自试一试
表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
td { text-align:right; }
亲自试一试
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
td { height:50px; vertical-align:bottom; }
亲自试一试
表格内边距
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
td { padding:15px; }
亲自试一试
表格颜色
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
亲自试一试
CSS Table 属性
属性描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。
亲自试一试 - 更多实例
制作一个漂亮的表格
本例演示如何创造一个漂亮的表格。
显示表格中的空单元
本例演示是否显示表格中的空单元。
设置表格边框之间的空白
本例演示如何设置单元格边框之间的距离。
设置表格标题的位置
本例演示如何定位表格的标题。

RTY 2011-05-28 21:01 发表评论

类型	描述
[abd^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abd$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abd*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

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

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

属性	描述	CSS
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

C++博客-RTY 实践出真知-随笔分类-CSS

分享60个来自Picons.me的全格式社交图标库

分享35个高品质的PSD版本UI网页设计

[学习笔记] CSS2 参考手册

[学习笔记] CSS2 打印参考]

打印属性

[学习笔记] CSS2 听觉参考

[学习笔记] CSS 单位

尺寸

颜色

[学习笔记] CSS2 媒介类型

媒介类型

@media规则

不同的媒介类型

[学习笔记] CSS 分类 (Classification)

CSS分类(Classification)实例：

CSS 分类属性 (Classification)

[学习笔记] CSS 尺寸 (Dimension)

CSS 尺寸实例：

CSS 尺寸属性

[学习笔记] CSS 伪元素 (Pseudo-elements)

语法

:first-line 伪元素

实例

:first-letter 伪元素

伪元素和 CSS 类

多重伪元素

CSS2 - :before 伪元素

元素前面插入一幅图片：h1:before { content:url(logo.gif); } 亲自试一试

CSS2 - :after 伪元素

元素后面插入一幅图片：h1:after { content:url(logo.gif); } 亲自试一试

伪元素

[学习笔记] CSS 伪类 (Pseudo-classes)

CSS 伪类 (Pseudo-classes)实例：

语法

锚伪类

伪类与 CSS 类

CSS2 - :first-child 伪类

例子 1 - 匹配第一个 元素

例子 2 - 匹配所有 元素中的第一个 元素

例子 3 - 匹配所有作为第一个子元素的 元素中的所有 元素

CSS2 - :lang 伪类

伪类

[学习笔记] CSS 相邻兄弟选择器

选择相邻兄弟

语法解释

结合其他选择器

[学习笔记] CSS 子元素选择器

选择子元素

This is very important.

This is really very important.

语法解释

结合后代选择器和子选择器

[学习笔记] CSS 后代选择器

根据上下文选择元素

This is a important heading

语法解释

具体应用

[学习笔记] CSS 属性选择器详解

简单属性选择

例子 1

例子 2

例子 3

例子 4

例子 5：为 XML 文档使用属性选择器

根据具体属性值选择

例子 1

例子 2

例子 3

属性与属性值必须完全匹配

根据部分属性值选择

部分值属性选择器与点号类名记法的区别

子串匹配属性选择器

特定属性选择类型

[学习笔记] CSS ID 选择器详解

CSS ID 选择器

语法

类选择器还是 ID 选择器？

区别 1：只能在文档中使用一次

区别 2：不能使用 ID 词列表

元素前面插入一幅图片：
h1:before { content:url(logo.gif); }
亲自试一试

元素后面插入一幅图片：
h1:after { content:url(logo.gif); }
亲自试一试

例子 1 - 匹配第一个
元素

例子 2 - 匹配所有
元素中的第一个元素

例子 3 - 匹配所有作为第一个子元素的
元素中的所有元素

浮动和清理实例

[学习笔记] CSS 样式笔记（样式轮廓）

轮廓（Outline）实例：

[学习笔记] CSS 样式笔记（样式表格）