css学习笔记

标签：

CSS

CSS派生选择器

请注意标记为 <strong>的蓝色代码的上下文关系：

id选择器

id选择器可以为标有特定 id的 HTML元素指定特定的样式。

id选择器以 "#"来定义。

CSS背景

背景色background-color

这个属性接受任何合法的颜色值。

这条规则把元素的背景设置为灰色：

如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

背景图像background-image

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

背景重复background-repeat
属性值 repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和 repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。

背景定位background-position

可以利用background-position属性改变图像在背景中的位置

下面的例子在 body元素中将一个背景图像居中放置：

为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

关键字

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

如果只出现一个关键字，则认为另一个关键字是 center。

所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

下面是等价的位置关键字：

百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50%50% 的点（中心点）与元素中描述为 50%50%的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100%100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3处，可以这样声明：

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

background-position的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过background-attachment属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50像素、向下 100像素的位置上：

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与background-position声明中的指定的点对齐。

CSS文本

缩进文本text-indent

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

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

水平对齐

text-align

处理空白符

下面的表格总结了 white-space属性的行为：

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边框属性

CSS外边距属性

CSS元素选择器

最常见的 CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML的样式，选择器通常将是某个 HTML元素，比如 p、h1、em、a，甚至可以是 html 本身：

可以将某个样式从一个元素切换到另一个元素。

假设您决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1选择器改为 p：

css分组

选择器分组

假设希望 h2元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

CSS类选择器

语法

然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：

CSS ID选择器

语法

首先，ID选择器前面有一个 #号 -也称为棋盘号或井号。

CSS子元素选择器

选择子元素

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Childselector）。

例如，如果您希望选择只作为 h1 元素子元素的strong元素，可以这样写：

这个规则会把第一个 h1下面的两个strong元素变为红色，但是第二个 h1中的 strong不受影响：

CSS3圆角边框

在 CSS3中，border-radius属性用于创建圆角：

实例

向 div元素添加圆角：

CSS3边框阴影

在 CSS3中，box-shadow用于向方框添加阴影：

实例

向 div元素添加方框阴影：

CSS3边框图片

通过 CSS3的 border-image属性，您可以使用图片来创建边框

实例

使用图片创建围绕 div元素的边框：

CSS3背景

CSS3 background-size属性

background-size属性规定背景图片的尺寸。

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

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

例子 1

调整背景图片的大小：

CSS3 background-origin属性

background-origin属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box或 border-box 区域。

CSS3文本效果

CSS3文本阴影

在 CSS3中，text-shadow可向文本应用阴影。

您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

实例

向标题添加阴影：

CSS3自动换行

在 CSS3中，word-wrap属性允许您允许文本强制文本进行换行 -即使这意味着会对单词进行拆分：

新的文本属性

css学习笔记

标签：

原文地址：http://blog.csdn.net/qianmodanshang/article/details/51918777