CSS
CSS派生选择器
li strong {
font-style: italic;
font-weight: normal;
}
请注意标记为 <strong>的蓝色代码的上下文关系：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为strong元素位于 li元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
id选择器
id选择器可以为标有特定 id的 HTML元素指定特定的样式。
id选择器以 "#"来定义。
CSS背景
背景色background-color
这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：
p{background-color: gray;}
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
p{background-color: gray; padding: 20px;}
背景图像background-image
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body{background-image: url(/i/eg_bg_04.gif);}
背景重复background-repeat
属性值 repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和 repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。
背景定位background-position
可以利用background-position属性改变图像在背景中的位置
下面的例子在 body元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
下面是等价的位置关键字：
| 单一关键字 | 等价的关键字 |
| center | center center |
| top | top center或 center top |
| bottom | bottom center或 center bottom |
| right | right center或 center right |
| left | left center或 center left |
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50%50%;
}
这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 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;
background-position:66%33%;
}
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。
background-position的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过background-attachment属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50像素、向下 100像素的位置上：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px100px;
}
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与background-position声明中的指定的点对齐。
CSS文本
缩进文本text-indent
注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
水平对齐
处理空白符
下面的表格总结了 white-space属性的行为：
| 值 | 空白符 | 换行符 | 自动换行 |
| pre-line | 合并 | 保留 | 允许 |
| normal | 合并 | 忽略 | 允许 |
| nowrap | 合并 | 忽略 | 不允许 |
| pre | 保留 | 保留 | 不允许 |
| pre-wrap | 保留 | 保留 | 允许 |
CSS链接
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
为链接的不同状态设置样式时，请按照以下次序规则：
-
a:hover 必须位于a:link和 a:visited之后
-
a:active 必须位于a:hover之后
CSS 内边距属性
| 属性 | 描述 |
| 简写属性。作用是在一个声明中设置元素的所内边距属性。 | |
| 设置元素的下内边距。 | |
| 设置元素的左内边距。 | |
| 设置元素的右内边距。 | |
| 设置元素的上内边距。 |
CSS边框属性
| 属性 | 描述 |
| 简写属性，用于把针对四个边的属性设置在一个声明。 | |
| 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 | |
| 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 | |
| 简写属性，设置元素的所有边框中可见部分的颜色，或为 4个边分别设置颜色。 | |
| 简写属性，用于把下边框的所有属性设置到一个声明中。 | |
| 设置元素的下边框的颜色。 | |
| 设置元素的下边框的样式。 | |
| 设置元素的下边框的宽度。 | |
| 简写属性，用于把左边框的所有属性设置到一个声明中。 | |
| 设置元素的左边框的颜色。 | |
| 设置元素的左边框的样式。 | |
| 设置元素的左边框的宽度。 | |
| 简写属性，用于把右边框的所有属性设置到一个声明中。 | |
| 设置元素的右边框的颜色。 | |
| 设置元素的右边框的样式。 | |
| 设置元素的右边框的宽度。 | |
| 简写属性，用于把上边框的所有属性设置到一个声明中。 | |
| 设置元素的上边框的颜色。 | |
| 设置元素的上边框的样式。 | |
| 设置元素的上边框的宽度。 |
CSS外边距属性
| 属性 | 描述 |
| 简写属性。在一个声明中设置所有外边距属性。 | |
| 设置元素的下外边距。 | |
| 设置元素的左外边距。 | |
| 设置元素的右外边距。 | |
| 设置元素的上外边距。 |
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;}
css分组
选择器分组
假设希望 h2元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2,p {color:gray;}
CSS类选择器
<h1class="important">
Thisheading is very important.
</h1>
<pclass="important">
Thisparagraph is very important.
</p>
语法
然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：
*.important{color:red;}
如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：
.important{color:red;}
CSS ID选择器
语法
首先，ID选择器前面有一个 #号 -也称为棋盘号或井号。
CSS子元素选择器
选择子元素
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Childselector）。
例如，如果您希望选择只作为 h1 元素子元素的strong元素，可以这样写：
h1> strong {color:red;}
这个规则会把第一个 h1下面的两个strong元素变为红色，但是第二个 h1中的 strong不受影响：
<h1>Thisis <strong>very</strong> <strong>very</strong>important.</h1>
<h1>Thisis <em>really <strong>very</strong></em>important.</h1>
CSS3圆角边框
在 CSS3中，border-radius属性用于创建圆角：
实例
向 div元素添加圆角：
div
{
border:2pxsolid;
border-radius:25px;
-moz-border-radius:25px;/* Old Firefox */
}
CSS3边框阴影
在 CSS3中，box-shadow用于向方框添加阴影：
实例
向 div元素添加方框阴影：
div
{
box-shadow:10px 10px 5px #888888;
}
CSS3边框图片
通过 CSS3的 border-image属性，您可以使用图片来创建边框
实例
使用图片创建围绕 div元素的边框：
div
{
border-image:url(border.png)30 30 round;
-moz-border-image:url(border.png)30 30 round;/* 老的 Firefox */
-webkit-border-image:url(border.png)30 30 round;/* Safari和 Chrome */
-o-border-image:url(border.png)30 30 round;/* Opera */
}
CSS3背景
CSS3 background-size属性
background-size属性规定背景图片的尺寸。
在 CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
例子 1
调整背景图片的大小：
div
{
background:url(bg_flower.gif);
-moz-background-size:63px100px;/* 老版本的 Firefox */
background-size:63px100px;
background-repeat:no-repeat;
}
CSS3 background-origin属性
background-origin属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box或 border-box 区域。
CSS3文本效果
CSS3文本阴影
在 CSS3中，text-shadow可向文本应用阴影。
您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
实例
向标题添加阴影：
h1
{
text-shadow:5px 5px 5px #FF0000;
}
CSS3自动换行
在 CSS3中，word-wrap属性允许您允许文本强制文本进行换行 -即使这意味着会对单词进行拆分：
新的文本属性
| 属性 | 描述 | CSS |
| 规定标点字符是否位于线框之外。 | 3 | |
| 规定是否对标点字符进行修剪。 | 3 | |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
| 向元素的文本应用重点标记以及重点标记的前景色。 | 3 | |
| 规定当 text-align设置为 "justify"时所使用的对齐方法。 | 3 | |
| 规定文本的轮廓。 | 3 | |
| 规定当文本溢出包含元素时发生的事情。 | 3 | |
| 向文本添加阴影。 | 3 | |
| 规定文本的换行规则。 | 3 | |
| 规定非中日韩文本的换行规则。 | 3 | |
| 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
3015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
