3.CSS使用基础(2)

a:link {color:#FF0000;}      /* unvisited link */ 
a:visited {color:#00FF00;}  /* visited link */ 
a:hover {color:#FF00FF;}  /* mouse over link */ 
a:active {color:#0000FF;}  /* selected link */

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面

常见的连接样式

根据上述连接的颜色变化的例子，看它是在什么状态。

让咱们经过一些其余常见的方式转到连接样式：

文本修饰

text-decoration 属性主要用于删除连接中的下划线：

a:link {text-decoration:none;} 
a:visited {text-decoration:none;} 
a:hover {text-decoration:underline;} 
a:active {text-decoration:underline;}

背景颜色

背景颜色属性指定连接背景色：

a:link {background-color:#B2FF99;} 
a:visited {background-color:#FFFF85;} 
a:hover {background-color:#FF704D;} 
a:active {background-color:#FF704D;}

二.CSS 列表样式(ul)

不一样的列表项标记

list-style-type属性指定列表项标记的类型是：

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

一些值是无序列表，以及有些是有序列表。

下列是对list-style-type属性的常见属性值的描述：

none：不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
demical：阿拉伯数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母
lower-roman：小写罗马数字

upper-roman：大写罗马数字

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

做为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

ul
{
list-style-image: url('sqpurple.gif');
}

上面的例子在全部浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

提示：利用 list-style-position 能够肯定标志出如今列表项内容以外仍是内容内部。

若是你想在全部的浏览器放置一样的形象标志，就应使用浏览器兼容性解决方案，过程以下

浏览器兼容性解决方案

一样在全部的浏览器，下面的例子会显示的图像标记：

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

值	描述
URL	图像的路径。
none	默认。无图形被显示。
inherit	规定应该从父元素继承 list-style-image 属性的值。

列表中列表项目标记的位置

CSS list-style-position 属性

值	描述
inside	列表项目标记放置在文本之内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本之外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

列表 -缩写属性

在单个属性中能够指定全部的列表属性。这就是所谓的缩写属性。

为列表使用缩写属性，列表样式属性设置以下：
```
ul
{
list-style: square url("sqpurple.gif");
}
```
若是使用缩写属性值的顺序是：
- list-style-type
- list-style-position (有关说明，请参见下面的CSS属性表)
- list-style-image
若是上述值丢失一个，其他仍在指定的顺序，就不要紧。

三.CSS Table(表格)

使用CSS能够大大提升HTML表格的外观

1.表格边框

table, th, td 
{ 
border: 1px solid black; 
}

请注意，在上面的例子中的表格有双边框。这是由于表和th/ td元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse属性。

2.折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table 
{ 
border-collapse:collapse; 
} 
table,th, td 
{ 
border: 1px solid black; 
}

3.表格宽度和高度

Width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

table 
{ 
width:100%; 
} 
th 
{ 
height:50px; 
}

4.表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，像左，右，或中心：

td 
{ 
text-align:right; 
}

垂直对齐属性设置垂直对齐，好比顶部，底部或中间：

5.表格填充

若是在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

td 
{ 
padding:15px; 
}

6.表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色：

table, td, th 
{ 
border:1px solid green; 
} 
th 
{ 
background-color:green; 
color:white; 
}

四.盒子模型

CSS 盒子模型(Box Model)

全部HTML元素能够看做盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型容许咱们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不一样部分的说明：

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是彻底透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像

为了在全部浏览器中的元素的宽度和高度设置正确的话，你须要知道的盒模型是如何工做的。

提示：在盒模型中，外边距能够是负值，并且在不少状况下都要使用负值的外边距。

元素的宽度和高度

重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，彻底大小的元素，你还必须添加填充，边框和边距。.

下面的例子中的元素的总宽度为300px：

width:250px;        
padding:10px;        
border:5px solid gray;        
margin:10px;

让咱们本身算算：
250px (宽)
+ 20px (左 + 右填充)
+ 10px (左 + 右边框)
+ 20px (左 + 右边距)
= 300px

试想一下，你只有250像素的空间。让咱们设置总宽度为250像素的元素：

width:220px; 
padding:10px; 
border:5px solid gray; 
margin:0px;

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

浏览器的兼容性问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现倒是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用本身的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。可是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具备指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题能够在HTML页面声明 <!DOCTYPE html>便可。

详见：https://www.w3cschool.cn/css_series/css_series-6tza24q1.html

五.CSS Border(边框)

CSS 边框 (border) 能够是围绕元素内容和内边距的一条或多条线，对于这些线条，您能够自定义它们的样式、宽度以及颜色。使用CSS边框属性，咱们能够建立出比HTML中更加优秀的效果。

1.边框样式（ border-style）属性指定要显示什么样的边界。

border-style 值:

none: 默认无边框

dotted: 定义一个点线框

dashed: 定义一个虚线框

solid: 定义实线边界

double: 定义两个边界。两个边界的宽度和border-width的值相同

groove: 定义3D沟槽边界。效果取决于边界的颜色值

ridge: 定义3D脊边界。效果取决于边界的颜色值

inset:定义一个3D的嵌入边框。效果取决于边界的颜色值

outset: 定义一个3D突出边框。效果取决于边界的颜色值

2.边框宽度

您能够经过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：能够指定长度值，好比 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。

注意：CSS 没有定义 3 个关键字的具体宽度，因此一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另外一个用户代理则分别设置为 3px、2px 和 1px。

p.one 
{ 
border-style:solid; 
border-width:5px; 
} 
p.two 
{ 
border-style:solid; 
border-width:medium; 
}

3.边框颜色

border-color属性用于设置边框的颜色，它一次能够接受最多 4 个颜色值。能够设置的颜色：

name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"

您还能够设置边框的颜色为"transparent"。

注意： border-color单独使用是不起做用的，必须得先使用border-style来设置边框样式。3.

4.边框-单独设置各边

在CSS中，能够指定不一样的侧面不一样的边框：

p 
{ 
border-top-style:dotted; 
border-right-style:solid; 
border-bottom-style:dotted; 
border-left-style:solid; 
}

border-style属性能够有1-4个值：

border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style:dotted solid;
- 上、底边框是 dotted
- 左、右边框是 solid
border-style:dotted;
- 四面边框是 dotted

上面的例子用了border-style。然而，它也能够和border-width 、 border-color一块儿使用。

5.透明边框

CSS2 引入了边框颜色值 transparent，这个值用于建立有宽度的不可见边框。

透明样式的定义以下：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
 border-color: transparent;
  }
a:hover {border-color: gray;}

利用 transparent，使用边框就像是额外的内边距同样；此外还有一个好处，就是能在你须要的时候使其可见。这种透明边框至关于内边距，由于元素的背景会延伸到边框区域（若是有可见背景的话）。

6.边框-简写属性

上面的例子用了不少属性来设置边框。

你也能够在一个属性中设置边框。

你能够在"border"属性中设置：

border-width
border-style (required)
border-color
```
border:5px solid red;
```
六.CSS 轮廓（outline）属性

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

轮廓（outline）属性指定了样式，颜色和外边框的宽度。

轮廓（outline）属性的位置让它不像边框那样参与到文档流中，所以轮廓出现或消失时不会影响文档流，即不会致使文档的从新显示。

"CSS" 列中的数字表示哪一个CSS版本定义了该属性(CSS1 或者CSS2)。

属性	说明	值	CSS
outline	在一个声明中设置全部的外边框属性	outline-color outline-style outline-width inherit	2
outline-color	设置外边框的颜色	color-name hex-number rgb-number invert inherit	2
outline-style	设置外边框的样式	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	设置外边框的宽度	thin medium thick length inherit	2

七.CSS Margin(外边距)

CSS Margin(外边距)属性定义元素周围的空间。

CSS Margin属性接受任何长度单位、百分数值甚至负值。

Margin

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是彻底透明的

margin能够单独改变元素的上，下，左，右边距。也能够一次改变全部的属性。

可能的值

值	说明
auto	设置浏览器边距。这样作的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

Margin可使用负值，重叠的内容。

八.CSS Padding（填充）

CSS Padding（填充）

CSS Padding（填充）属性定义元素边框与元素内容之间的空间。

Padding（填充）

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性能够改变上下左右的填充。缩写填充属性也可使用，一旦改变一切都改变。

可能的值

值	说明
length	定义一个固定的填充(像素, pt, em,等)
%	使用百分比值定义一个填充

提示：CSS padding 属性可使用长度值或百分比值，但与 margin 属性不一样，它不容许使用负值。

内边距的百分比数值

CSS padding 属性的百分比数值是相对于其父元素的 width 计算的，若是改变了父元素的 width，则它们也会改变。

如下是将段落的内边距设置为父元素 width 的 20% 的示例：

p {padding: 20%;}

假设一个段落的父元素是 div 元素，那么它的 padding 的 width 计算是根据 div 进行的：

<div style="width: 200px;"> 
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> 
</div>

注意：上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

填充- 单边内边距属性

在CSS中，它能够指定不一样的侧面不一样的填充：

padding-top:25px; 
padding-bottom:25px; 
padding-right:50px; 
padding-left:50px;

Padding属性，能够有一到四个值。

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

全部的填充都是25px

九.CSS 分组和嵌套

CSS 分组和嵌套选择器

CSS 分组能够将具备相一样式的选择器进行分组，减小代码量。

CSS 嵌套适用于选择器内部的选择器的样式。

1.Grouping Selectors

在样式表中有不少具备相一样式的元素。

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

为了尽可能减小代码，你可使用分组选择器。

每一个选择器用逗号分隔.

在下面的例子中，咱们对以上代码使用分组选择器：

h1,h2,p 
{ 
color:green; 
}

提示：您能够对任意多个选择器进行分组，CSS 对此没有任何限制。

2.嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子，为全部p元素指定一个样式，为全部元素指定一个class="marked"的样式，并仅用于class="标记"，类内的p元素指定第三个样式：

p 
{ 
color:blue; 
text-align:center; 
} 
.marked 
{ 
background-color:red; 
} 
.marked p 
{ 
color:white; 
}

十.CSS组合选择符

CSS 组合选择符

CSS 组合选择符可让你直观的明白选择器与选择器之间的关系。

CSS 组合选择符

组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各类简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以波浪号分隔）
1.后代选取器

后代选取器匹配全部指定元素的后代元素。

如下实例选取全部 <p> 元素插入到 <div> 元素中:
```
div p 
{ 
background-color:yellow; 
}
```
2.子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择做为某元素子元素的元素。

如下实例选择了<div>元素中全部直接子元素 <p> ：
实例
```
div>p 
{ 
background-color:yellow; 
}
```
3.相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另外一元素后的元素，且两者有相同父元素。

若是须要选择紧接在另外一个元素后的元素，并且两者有相同的父元素，可使用相邻兄弟选择器（Adjacent sibling selector）。

如下实例选取了全部位于 <div> 元素后的第一个 <p> 元素:
```
div+p 
{ 
background-color:yellow; 
}
```
4.普通相邻兄弟选择器

普通兄弟选择器选取全部指定元素的相邻兄弟元素。

如下实例选取了全部 <div> 元素以后的全部相邻兄弟元素 <p> :
```
div~p 
{ 
background-color:yellow; 
}
```

十一.CSS伪类

CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。

因为状态的变化是非静态的，因此元素达到一个特定状态时，它可能获得一个伪类的样式；当状态改变时，它又会失去这个样式。由此能够看出，它的功能和class有些相似，但它是基于文档以外的抽象，因此叫伪类。

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可使用伪类：

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

anchor伪类

在支持 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;}       
<a class="red" href="css-syntax.html">CSS Syntax</a>

CSS - :first - child伪类

您可使用 :first-child 伪类来选择元素的第一个子元素

注意：在IE8的以前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。

匹配第一个 <p> 元素

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

<html> 
<head> 
<style> 
p:first-child 
{ 
color:blue; 
} 
</style> 
</head> 

<body> 
<p>I am a strong man.</p> 
<p>I am a strong man.</p> 
</body> 
</html>

匹配全部<p> 元素中的第一个 <i> 元素

在下面的例子中，选择相匹配的全部<p>元素的第一个 <i>元素：

<html> 
<head> 
<style> 
p > i:first-child 
{ 
color:blue; 
} 
</style> 
</head> 

<body> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
</body> 
</html>

匹配全部做为第一个子元素的<p> 元素中的全部 <i> 元素

在下面的例子中，选择器匹配全部做为元素的第一个子元素的<p> 元素中的全部 <i> 元素：

<html> 
<head> 
<style> 
p:first-child i 
{ 
color:blue; 
} 
</style> 
</head> 

<body> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
</body> 
</html>

CSS - :lang 伪类

:lang 伪类使你有能力为不一样的语言定义特殊的规则

注意：IE8必须声明<!DOCTYPE>才能支持;lang伪类。

在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：

<html> 
<head> 
<style> 
q:lang(no) {quotes: "~" "~";} 
</style> 
</head> 

<body> 
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> 
</body> 
</html>

全部CSS伪类/元素

选择器	示例	示例说明
:link	a:link	选择全部未访问连接
:visited	a:visited	选择全部访问过的连接
:active	a:active	选择正在活动连接
:hover	a:hover	把鼠标放在连接上的状态
:focus	input:focus	选择元素输入后具备焦点
:first-letter	p:first-letter	选择每一个<p> 元素的第一个字母
:first-line	p:first-line	选择每一个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每一个<p>元素以前插入内容
:after	p:after	在每一个<p>元素以后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

扩展阅读

CSS拾遗系列：浅谈CSS中的伪元素和伪类

十二.CSS 伪元素

CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

CSS伪元素控制的内容和元素是没有差异的，可是它自己只是基于元素的抽象，并不存在于文档中，因此称为伪元素。

伪元素的语法：
 selector:pseudo-element {property:value;}
CSS类也可使用伪元素：
 selector.class:pseudo-element {property:value;}

1.:first-line 伪元素

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

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

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

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

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

font properties
color properties
background properties
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 properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

提示：有关 first-letter 伪元素的相关描述，你能够参考本站的CSS :first-letter 伪元素一节。

伪元素和CSS类

伪元素能够结合CSS类：

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

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

Multiple Pseudo-elements

能够结合多个伪元素来使用。

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

段落中的其他文本将以默认字体大小和颜色来显示：

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

CSS - :before 伪元素

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

下面的例子在每一个 <h1>元素前面插入一幅图片：

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

CSS - :after 伪元素

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

下面的例子在每一个 <h1> 元素后面插入一幅图片：

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

全部CSS伪类/元素

选择器	示例	示例说明
:link	a:link	选择全部未访问连接
:visited	a:visited	选择全部访问过的连接
:active	a:active	选择正在活动连接
:hover	a:hover	把鼠标放在连接上的状态
:focus	input:focus	选择元素输入后具备焦点
:first-letter	p:first-letter	选择每一个<p> 元素的第一个字母
:first-line	p:first-line	选择每一个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每一个<p>元素以前插入内容
:after	p:after	在每一个<p>元素以后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

十三.导航栏

导航栏

熟练使用导航栏，对于任何网站都很是重要。

使用CSS你能够转换成好看的导航栏而不是枯燥的HTML菜单。

导航栏=连接列表

做为标准的HTML基础一个导航栏是必须的。

在咱们的例子中咱们将创建一个标准的HTML列表导航栏。

导航条基本上是一个连接列表，因此使用 <ul> 和 <li> 元素很是有意义：

<ul> 
<li><a href="default.asp">Home</a></li> 
<li><a href="news.asp">News</a></li> 
<li><a href="contact.asp">Contact</a></li> 
<li><a href="about.asp">About</a></li> 
</ul>

从列表中删除边距和填充：

ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
}

例子解析：

list-style-type:none - 移除列表前小标志。一个导航栏并不须要列表标记
移除浏览器的默认设置将边距和填充设置为0

上面的例子中的代码是垂直和水平导航栏使用的标准代码。

垂直导航栏

上面的代码，咱们只须要元素的样式，创建一个垂直的导航栏：

a 
{ 
display:block; 
width:60px; 
}

示例说明：

display:block - 显示块元素的连接，让总体变为可点击连接区域（不仅是文本），它容许咱们指定宽度
width:60px - 块元素默认状况下是最大宽度。咱们要指定一个60像素的宽度

提示：查看彻底样式的垂直导航栏的示例.

注意： 请务必指定元素在垂直导航栏的的宽度。若是省略宽度，IE6可能产生意想不到的效果。

水平导航栏

有两种方法建立横向导航栏。使用内联或浮动的列表项。

这两种方法都很好，但若是你想连接到具备相同的大小，你必须使用浮动的方法。

内嵌列表项

创建一个横向导航栏的方法之一是指定

元素，上述代码是标准的内嵌:

li 
{ 
display:inline; 
}

实例解析：

display:inline - 默认状况下，<li>元素是块元素。在这里，咱们删除换行符以前和以后每一个列表项，以显示一行。

提示: 查看彻底样式的水平导航栏的示例.

浮动列表项

在上面的例子中连接有不一样的宽度。

对于全部的连接宽度相等，浮动

元素，并指定为元素的宽度：

li 
{ 
float:left; 
} 
a 
{ 
display:block; 
width:60px; 
}

实例解析：

float:left - 使用浮动块元素的幻灯片彼此相邻
display:block - 显示块元素的连接，让总体变为可点击连接区域（不仅是文本），它容许咱们指定宽度
width:60px - 块元素默认状况下是最大宽度。咱们要指定一个60像素的宽度
display:inline; -默认状况下，
元素是块元素。在这里，咱们删除换行符以前和以后每一个列表项，以显示一行。

Tip:查看彻底样式的横向导航栏的示例..

十四.CSS 下拉菜单

CSS 下拉菜单

使用 CSS 建立一个鼠标移动上去后显示下拉菜单的效果。

基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

实例解析

HTML 部分：

咱们可使用任何的 HTML元素来打开下拉菜单，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 来建立下拉菜单的内容，并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你能够随意修改它。 注意: 若是你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置能够在小尺寸屏幕上滚动)。

咱们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

下拉菜单

建立下拉菜单，并容许用户选取列表中的某一项：

这个实例相似前面的实例，当咱们在下拉列表中添加了连接，并设置了样式：

<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 须要定位下拉内容 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* 下拉菜单的连接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 鼠标移上去后修改下拉菜单连接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">W3Cschool教程 1</a>
    <a href="#">W3Cschool教程 2</a>
    <a href="#">W3Cschool教程 3</a>
  </div>
</div>

下拉内容对齐方式

float:left;

float:right;

若是你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，能够添加如下代码 `right: 0;`

.dropdown-content {
    right: 0;
}

十五.CSS图片廓

图片廊

如下是使用CSS建立图片廊：

<html>
<head>
<style>
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
  <img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
  <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
  <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
  <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

十六.图片透明与不透明

实例1 - 建立一个透明图像

CSS3中属性的透明度是 opacity.

img
 {
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
 }

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性能够将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha（opacity= x）。 x能够采起的值是从0 - 100。较低的值，使得元素更加透明。

提示：在本站的CSS参考手册中对 CSS opacity 属性有详细介绍。

实例2 - 图像的透明度 - 悬停效果

img
 {
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
 }
 img:hover
 {
 opacity:1.0;
 filter:alpha(opacity=100); /* For IE8 and earlier */
 }

第一个CSS块是和例1中的代码相似。此外，咱们还增长了当用户将鼠标悬停在其中一个图像上时发生什么。在这种状况下，当用户将鼠标悬停在图像上时，咱们但愿图片是清晰的。

此CSS是：opacity=1.

IE8和更早版本使用： filter:alpha(opacity=100).

当鼠标指针远离图像时，图像将从新具备透明度。

实例3 - 透明的盒子中的文字

<html>
<head>
<style>
div.background  
{  
width:500px;  
height:250px;  
background:url(klematis.jpg) repeat; 
border:2px solid black;  
}
div.transbox  
{  
width:400px;  
height:180px;  
margin:30px 50px;  
background-color:#ffffff;  
border:1px solid black;  
opacity:0.6;  
filter:alpha(opacity=60); /* For IE8 and earlier */  
}
div.transbox p  
{  
margin:30px 40px;  
font-weight:bold;  
color:#000000;  
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

首先，咱们建立一个固定的高度和宽度的div元素，带有一个背景图片和边框。而后咱们在第一个div内部建立一个较小的div元素。这个div也有一个固定的宽度，背景颜色，边框 - 并且它是透明的。透明的div里面，咱们在P元素内部添加一些文本。

十七.图片拼合技术

CSS 图像拼合技术

图像拼合

图像拼合就是单个图像的集合。

有许多图像的网页可能须要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会下降服务器的请求数量，并节省带宽。

图像拼合 - 简单实例

与其使用三个独立的图像，不如咱们使用这种单个图像（"img_navsprites.gif"）：

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

实例解析：

<img class="home" src="img_trans.gif" /> -由于不能为空,src属性只定义了一个小的透明图像。显示的图像将是咱们在CSS中指定的背景图像
宽度：46px;高度：44px; - 定义咱们使用的那部分图像
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

这是使用图像拼合最简单的方法，如今咱们使用连接和悬停效果。

图像拼合 - 建立一个导航列表

咱们想使用拼合图像 ("img_navsprites.gif")，以建立一个导航列表。

咱们将使用一个HTML列表，由于它能够连接，同时还支持背景图像：

#navlist{
position:relative;
}
#navlist li{
margin:0;padding:0;
list-style:none;
position:absolute;top:0;
}
#navlist li, #navlist a{
height:44px;
display:block;
}

#home{l
eft:0px;width:46px;
}
#home{
background:url('img_navsprites.gif') 0 0;
}

#prev{
left:63px;width:43px;
}
#prev{
background:url('img_navsprites.gif') -47px 0;
}

#next{
left:129px;width:43px;
}
#next{
background:url('img_navsprites.gif') -91px 0;
}

实例解析：

#navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，全部列表项是绝对定位
#navlist li, #navlist a{height:44px;display:block;} - 全部图像的高度是44px

如今开始每一个具体部分的定位和样式：

#home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
#prev{left:63px;width:43px;} - 左外边距定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
#prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像向右侧定位47px（＃home宽46px+分隔线的1px）
#next{left:129px;width:43px;}- 左外边距定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.

#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像向右侧定位91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）

图像拼合 - 悬停效果

如今，咱们但愿咱们的导航列表中添加一个悬停效果。

:hover 选择器用于鼠标悬停在元素上的显示的效果

提示： :hover 选择器能够运用于全部元素。在本站CSS参考手册的CSS:hover选择器一节，你能够更加了解该选择器的用法。

咱们的新图像 ("img_navsprites_hover.gif") 包含三个导航图像和三幅图像：

由于这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载。

咱们添加悬停效果只添加三行代码：

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

实例解析：

因为该列表项包含一个连接，咱们可使用：hover伪类
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于全部三个悬停图像，咱们指定相同的背景位置，只是每一个再向下45px

十八.CSS媒体类型

CSS 媒体类型

媒体类型容许你指定文件将如何在不一样媒体呈现。该文件能够以不一样的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

媒体类型

某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其余一些属性可用于不一样的媒体类型。例如，"font-size"属性可用于屏幕和印刷媒体，但有不一样的值。屏幕和纸上的文件不一样，一般须要一个更大的字体，sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。

@media 规则

@media 规则容许在相一样式表为不一样媒体设置不一样的样式。

在下面的例子告诉咱们浏览器屏幕上显示一个14像素的Verdana字体样式。可是若是页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：

<html>
<head>
<style>
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>
</head>

<body>
....
</body>
</html>

你能够本身尝试看看 ! 若是您使用的是Mozilla / Firefox或IE5+打印此页，你会看到，"Media Types"将使用另外一种比其余文本字体大小小点的字体显示。

提示：有关 @media 规则的更多信息，请参考CSS参考手册的CSS @media 查询部分。

其余媒体类型

注意：媒体类型名称不区分大小写。

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

扩展阅读

CSS3教程：CSS3 多媒体查询

十九.CSS 属性选择器

CSS 属性选择器

顾名思义，CSS 属性选择器就是指能够根据元素的属性以及属性值来选择元素。

具备特定属性的HTML元素样式

具备特定属性的HTML元素样式不只仅是class和id。

注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

属性选择器

下面的例子是把包含标题（title）的全部元素变为蓝色：

[title] 
{ 
color:blue; 
}

属性和值选择器

下面的实例改变了标题title='w3cschool'元素的边框样式:

[title=w3cschool] 
{ 
border:5px solid green; 
}

属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

[title~=hello] { color:blue; }

下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:

[lang|=en] { color:blue; }

表单样式

属性选择器样式无需使用class或id的形式:

input[type="text"] 
{ 
width:150px; 
display:block; 
margin-bottom:10px; 
background-color:yellow; 
} 
input[type="button"] 
{ 
width:120px; 
margin-left:35px; 
display:block; 
}