css学习笔记



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属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

水平对齐

text-align

处理空白符

下面的表格总结了 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
内边距属性

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

CSS边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

CSS外边距属性

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

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