css-1

1.1    CSS简介
需要具备的基础知识
在继续学习之前,你需要对下面的知识有基本的了解:
• HTML
• XHTML
CSS 概述
• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一
样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。
由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。
所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表(位于 <head> 标签内部)
4. 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。


1.2 CSS语法
CSS 语法由三部分构成:选择器、属性和值:
selector {property: value}
选择器 (selector) 通常是你希望定义的 HTML 元素或标签,属性 (property) 是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration):

Java代码 复制代码
  1. body {color: blue}  
body {color: blue}


上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中,body 是选择器,而包括在花括号内的的部分是声明。声明依次由两部分构成:属性和值,color 为属性,blue 为值。
值的不同写法和单位
除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:

Java代码 复制代码
  1. p { color: #ff0000; }  
p { color: #ff0000; }


为了节约字节,我们可以使用 CSS 的缩写形式:

Java代码 复制代码
  1. p { color: #f00; }  
p { color: #f00; }


我们还可以通过两种方法使用 RGB 值:

Java代码 复制代码
  1. p { color: rgb(255,0,0); }   
  2. p { color: rgb(100%,0%,0%); }  
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }


请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
记得写引号
提示:如果值为若干单词,则要给值加引号:

Java代码 复制代码
  1. p {font-family: "sans serif";}  
p {font-family: "sans serif";}


多重声明:
提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:

Java代码 复制代码
  1. p {text-align:center; color:red;}  
p {text-align:center; color:red;}


你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:

Java代码 复制代码
  1. p {   
  2.   text-align: center;   
  3.   color: black;   
  4.   font-family: arial;   
  5. }  
p {
  text-align: center;
  color: black;
  font-family: arial;
}


空格和大小写敏感
大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

Java代码 复制代码
  1. body {   
  2.   color: #000;   
  3.   background: #fff;   
  4.   margin: 0;   
  5.   padding: 0;   
  6.   font-family: Georgia, Palatino, serif;   
  7.   }  
body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }


是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

1.3 CSS高级语法
选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

Java代码 复制代码
  1. h1,h2,h2,h3,h5,h6 {   
  2.   color: green;   
  3.   }  
h1,h2,h2,h3,h5,h6 {
  color: green;
  }


继承及其问题
根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则:

Java代码 复制代码
  1. body {   
  2.      font-family: Verdana, sans-serif;   
  3.      }  
body {
     font-family: Verdana, sans-serif;
     }


根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)。
通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。
但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不支持继承,它不仅忽略继承,而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题,在表格内的字体样式会被忽略。我们又该如何是好呢?
友善地对待Netscape 4
幸运地是,你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。

Java代码 复制代码
  1. body  {   
  2.      font-family: Verdana, sans-serif;   
  3.      }   
  4.   
  5. p, td, ul, ol, li, dl, dt, dd  {   
  6.      font-family: Verdana, sans-serif;   
  7.      }  
body  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }


4.0 浏览器无法理解继承,不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽,但是如果需要对 Netscape 4 用户进行支持,就不得不这么做。
继承是一个诅咒吗?
如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则:

Java代码 复制代码
  1. body  {   
  2.      font-family: Verdana, sans-serif;   
  3.      }   
  4.   
  5. td, ul, ol, ul, li, dl, dt, dd  {   
  6.      font-family: Verdana, sans-serif;   
  7.      }   
  8.   
  9. p  {   
  10.      font-family: Times, "Times New Roman", serif;   
  11.      }  
body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }



1.4 CSS派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。
比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

Java代码 复制代码
  1. li strong {   
  2.     font-style: italic;   
  3.     font-weight: normal;   
  4.   }  
li strong {
    font-style: italic;
    font-weight: normal;
  }


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

Html代码 复制代码
  1. <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>  
  2.   
  3. <ol>  
  4. <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>  
  5. <li>我是正常的字体。</li>  
  6. </ol>  
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>


在上面的例子中,只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id,代码更加简洁。
再看看下面的 CSS 规则:

Java代码 复制代码
  1. strong {   
  2.      color: red;   
  3.      }   
  4.   
  5. h2 {   
  6.      color: red;   
  7.      }   
  8.   
  9. h2 strong {   
  10.      color: blue;   
  11.      }  
strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }


下面是它施加影响的 HTML:

Html代码 复制代码
  1. <p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>  
  2. <h2>This subhead is also red.</h2>  
  3. <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>  
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>



1.5 CSS  id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。

下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

Java代码 复制代码
  1. #red {color:red;}   
  2. #green {color:green;}  
#red {color:red;}
#green {color:green;}


下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。

Html代码 复制代码
  1. <p id="red">这个段落是红色。</p>  
  2. <p id="green">这个段落是绿色。</p>  
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>


注意:id 属性只能在每个 HTML 文档中出现一次。想知道原因吗,请参阅 XHTML:网站重构。
id 选择器和派生选择器
在现代布局中,id 选择器常常用于建立派生选择器。

Java代码 复制代码
  1. #sidebar p {   
  2.     font-style: italic;   
  3.     text-align: right;   
  4.     margin-top: 0.5em;   
  5.     }  
#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}


上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元,尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素,比如 <em></em> 或者 <span></span>,不过这样的用法是非法的,因为不可以在内联元素 <span> 中嵌入 <p> (如果你忘记了原因,请参阅 XHTML:网站重构)。
一个选择器,多种用法
即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:

Java代码 复制代码
  1. #sidebar p {   
  2.     font-style: italic;   
  3.     text-align: right;   
  4.     margin-top: 0.5em;   
  5.     }   
  6.   
  7. #sidebar h2 {   
  8.     font-size: 1em;   
  9.     font-weight: normal;   
  10.     font-style: italic;   
  11.     margin: 0;   
  12.     line-height: 1.5;   
  13.     text-align: right;   
  14.     }  
#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}


在这里,与页面中的其他 p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所有 h2 元素明显不同的是,sidebar 中的 h2 元素也得到了不同的特殊处理。
单独的选择器
id 选择器即使不被用来创建派生选择器,它也可以独立发挥作用:

Java代码 复制代码
  1. #sidebar {   
  2.     border: 1px dotted #000;   
  3.     padding: 10px;   
  4.     }  
#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}


根据这条规则,id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框,同时其周围会有 10 个像素宽的内边距(padding,内部空白)。老版本的 Windows/IE 浏览器可能会忽略这条规则,除非你特别地定义这个选择器所属的元素:

Java代码 复制代码
  1. div#sidebar {   
  2.     border: 1px dotted #000;   
  3.     padding: 10px;   
  4.     }  
div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}



1.6 CSS 类选择器
在 CSS 中,类选择器以一个点号显示:

Java代码 复制代码
  1. .center {text-align: center}  
.center {text-align: center}


在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

Html代码 复制代码
  1. <h1 class="center">  
  2. This heading will be center-aligned   
  3. </h1>  
  4.   
  5. <p class="center">  
  6. This paragraph will also be center-aligned.   
  7. </p>  
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>


注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
和 id 一样,class 也可被用作派生选择器:

Java代码 复制代码
  1. .fancy td {   
  2.     color: #f60;   
  3.     background: #666;   
  4.     }  
.fancy td {
	color: #f60;
	background: #666;
	}


在上面这个例子中,类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为 fancy 的更大的元素可能是一个表格或者一个 div)
元素也可以基于它们的类而被选择:

Java代码 复制代码
  1. td.fancy {   
  2.     color: #f60;   
  3.     background: #666;   
  4.     }  
td.fancy {
	color: #f60;
	background: #666;
	}


在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。
<td class="fancy">
你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意,class 为 fancy 的段落也不会是带有灰色背景的橙色,当然,任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式,这个效果被限制于被标注为 fancy 的表格单元(即使用 td 元素来选择 fancy 类)。

1.7 如何创建CSS ?
如何插入样式表
当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:

Html代码 复制代码
  1. <head>  
  2. <link rel="stylesheet" type="text/css" href="mystyle.css" />  
  3. </head>  
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:

Java代码 复制代码
  1. hr {color: sienna;}   
  2. p {margin-left: 20px;}   
  3. body {background-image: url("images/back40.gif");}  
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}


不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

Html代码 复制代码
  1. <head>  
  2. <style type="text/css">  
  3.   hr {color: sienna;}   
  4.   p {margin-left: 20px;}   
  5.   body {background-image: url("images/back40.gif");}   
  6. </style>  
  7. </head>  
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>


内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

Html代码 复制代码
  1. <p style="color: sienna; margin-left: 20px">  
  2. This is a paragraph   
  3. </p>  
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>


多重样式
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
例如,外部样式表拥有针对 h3 选择器的三个属性:

Java代码 复制代码
  1. h3 {   
  2.   color: red;   
  3.   text-align: left;   
  4.   font-size: 8pt;   
  5.   }  
h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }


而内部样式表拥有针对 h3 选择器的两个属性:

Java代码 复制代码
  1. h3 {   
  2.   text-align: right;    
  3.   font-size: 20pt;   
  4.   }  
h3 {
  text-align: right; 
  font-size: 20pt;
  }


假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

Java代码 复制代码
  1. color: red;    
  2. text-align: right;    
  3. font-size: 20pt;  
color: red; 
text-align: right; 
font-size: 20pt;


即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

1.8 CSS 背景
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
CSS 在这方面的能力远远在 HTML 之上。

背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色:

Java代码 复制代码
  1. p {background-color: gray;}  
p {background-color: gray;}


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

Java代码 复制代码
  1. p {background-color: gray; padding: 20px;}  
p {background-color: gray; padding: 20px;}


可以为所有元素设置背景色,这包括 body 一直到 em 和 a 等行内元素。
background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
背景图像
要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:

Java代码 复制代码
  1. body {background-image: url(/i/eg_bg_04.gif);}  
body {background-image: url(/i/eg_bg_04.gif);}


大多数背景都应用到 body 元素,不过并不仅限于此。
下面例子为一个段落应用了一个背景,而不会对文档的其他部分应用背景:

Java代码 复制代码
  1. p.flower {background-image: url(/i/eg_bg_03.gif);}  
p.flower {background-image: url(/i/eg_bg_03.gif);}


您甚至可以为行内元素设置背景图像,下面的例子为一个链接设置了背景图像:

Java代码 复制代码
  1. a.radio {background-image: url(/i/eg_bg_07.gif);}  
a.radio {background-image: url(/i/eg_bg_07.gif);}


理论上讲,甚至可以向 textareas 和 select 等替换元素的背景应用图像,不过并不是所有用户代理都能很好地处理这种情况。
另外还要补充一点,background-image 也不能继承。事实上,所有背景属性都不能继承。
背景重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。请看下面的例子:

Java代码 复制代码
  1. body   
  2.   {    
  3.   background-image: url(/i/eg_bg_03.gif);   
  4.   background-repeat: repeat-y;   
  5.   }  
body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }


背景定位
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:

Java代码 复制代码
  1. body   
  2.   {    
  3.     background-image:url('/i/eg_bg_03.gif');   
  4.     background-repeat:no-repeat;   
  5.     background-position:center;   
  6.   }  
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。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:

Java代码 复制代码
  1. p   
  2.   {    
  3.     background-image:url('bgimg.gif');   
  4.     background-repeat:no-repeat;   
  5.     background-position:top;   
  6.   }  
p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }


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




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

Java代码 复制代码
  1. body   
  2.   {    
  3.     background-image:url('/i/eg_bg_03.gif');   
  4.     background-repeat:no-repeat;   
  5.     background-position:5050%;   
  6.   }  
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 处,可以这样声明:

Java代码 复制代码
  1. body   
  2.   {    
  3.     background-image:url('/i/eg_bg_03.gif');   
  4.     background-repeat:no-repeat;   
  5.     background-position:6633%;   
  6.   }  
body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }


如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:

Java代码 复制代码
  1. body   
  2.   {    
  3.     background-image:url('/i/eg_bg_03.gif');   
  4.     background-repeat:no-repeat;   
  5.     background-position:50px 100px;   
  6.   }  
body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }


注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。
背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:

Java代码 复制代码
  1. body    
  2.   {   
  3.   background-image:url(/i/eg_bg_02.gif);   
  4.   background-repeat:no-repeat;   
  5.   background-attachment:fixed   
  6.   }  
body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }


如需查看上例的效果,可以亲自试一试。
background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。

CSS 背景属性




1.9 CSS 文本
CSS 文本属性可定义文本的外观
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
缩进文本
把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。
通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em:

Java代码 复制代码
  1. p {text-indent: 5em;}  
p {text-indent: 5em;}


注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
使用负值
text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:

Java代码 复制代码
  1. p {text-indent: -5em;}  
p {text-indent: -5em;}


不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:

Java代码 复制代码
  1. p {text-indent: -5em; padding-left: 5em;}  
p {text-indent: -5em; padding-left: 5em;}


使用百分比值
text-indent 可以使用所有长度单位,包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中,缩进值是父元素的 20%,即 100 个像素:

Java代码 复制代码
  1. div {width: 500px;}   
  2. p {text-indent: 20%;}   
  3.   
  4. <div>   
  5. <p>this is a paragragh</p>   
  6. </div>  
div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>


继承
text-indent 属性可以继承,请考虑如下标记:

Java代码 复制代码
  1. div#outer {width: 500px;}   
  2. div#inner {text-indent: 10%;}   
  3. p {width: 200px;}   
  4.   
  5. <div id="outer">   
  6. <div id="inner">some text. some text. some text.   
  7. <p>this is a paragragh.</p>   
  8. </div>   
  9. </div>  
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}

<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>


以上标记中的段落也会缩进 50 像素,这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
水平对齐
text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接,不过第 4 个和第 5 个则略有些复杂。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
西方语言都是从左向右读,所有 text-align 的默认值是 left。文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本)。对于希伯来语和阿拉伯语之类的的语言,text-align 则默认为 right,因为这些语言从右向左读。不出所料,center 会使每个文本行在元素中居中。
提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。
<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。
justify
最后一个水平对齐属性是 justify。
在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。
需要注意的是,要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。如需了解详情,请参阅 CSS text-align 属性参考页。
字间隔
word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:

Java代码 复制代码
  1. p.spread {word-spacing: 30px;}   
  2. p.tight {word-spacing: -0.5em;}  
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}


Html代码 复制代码
  1. <p class="spread">  
  2. This is a paragraph. The spaces between words will be decreased.   
  3. </p>  
  4.   
  5. <p class="tight">  
  6. This is a paragraph. The spaces between words will be increased.   
  7. </p>  
<p class="spread">
This is a paragraph. The spaces between words will be decreased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be increased.
</p>



注释:如需深入理解 CSS 对“字”(word)的定义,请访问 CSS word-spacing 属性参考页。
字母间隔
letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量:

Java代码 复制代码
  1. h1 {letter-spacing: -0.5em}   
  2. h4 {letter-spacing: 20px}   
  3.   
  4. <h1>This is header 1</h1>   
  5. <h4>This is header 4</h4>  
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>


字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值:
• none
• uppercase
• lowercase
• capitalize
默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。
作为一个属性,text-transform 可能无关紧要,不过如果您突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素的内容,只需使用 text-transform 为你完成这个修改:

Java代码 复制代码
  1. h1 {text-transform: uppercase}  
h1 {text-transform: uppercase}


使用 text-transform 有两方面的好处。首先,只需写一个简单的规则来完成这个修改,而无需修改 h1 元素本身。其次,如果您以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改。

文本装饰
接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。
text-decoration 有 5 个值:
• none
• underline
• overline
• line-through
• blink
不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记。
none 值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果您希望去掉超链接的下划线,可以使用以下 CSS 来做到这一点:

Java代码 复制代码
  1. a {text-decoration: none;}  
a {text-decoration: none;}


注意:如果显式地用这样一个规则去掉链接的下划线,那么锚与正常文本之间在视觉上的唯一差别就是颜色(至少默认是这样的,不过也不能完全保证其颜色肯定有区别)。
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线,则规则如下:

Java代码 复制代码
  1. a:link a:visited {text-decoration: underline overline;}  
a:link a:visited {text-decoration: underline overline;}


不过要注意的是,如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。请考虑以下的规则:

Java代码 复制代码
  1. h2.stricken {text-decoration: line-through;}   
  2. h2 {text-decoration: underline overline;}  
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}


对于给定的规则,所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰,而没有下划线和上划线,因为 text-decoration 值会替换而不是累积起来。
处理空白符
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的 XHTML 处理已经完成了空白符处理:它会把所有空白符合并为一个空格。所以给定以下标记,它在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:

Java代码 复制代码
  1. <p>This     paragraph has    many   
  2.     spaces           in it.</p>  
<p>This     paragraph has    many
    spaces           in it.</p>


可以用以下声明显式地设置这种默认行为:

Java代码 复制代码
  1. p {white-space: normal;}  
p {white-space: normal;}


上面的规则告诉浏览器按照平常的做法去处理:丢掉多余的空白符。如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格。

值 pre
不过,如果将 white-space 设置为 pre,受这个属性影响的元素中,空白符的处理就有所不同,其行为就像 XHTML 的 pre 元素一样;空白符不会被忽略。
如果 white-space 属性的值为 pre,浏览器将会注意额外的空格,甚至回车。在这个方面,而且仅在这个方面,任何元素都可以相当于一个 pre 元素。

值 nowrap
与之相对的值是 nowrap,它会防止元素中的文本换行,除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行,不过 white-space 值可以应用到任何元素。

值 pre-wrap 和 pre-line
CSS2.1 引入了值 pre-wrap 和 pre-line,这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
如果元素的 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。

注意:我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例,但是结果是,值 pre-wrap 和 pre-line 都没有得到很好的支持。

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




文本方向
如果您阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。
注释:对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。


CSS 文本属性




1.10 CSS 字体
CSS 字体 (font) 属性定义文本中的字体
设置字体属性是样式表的最常见用途之一。CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight),您还可以设置字体的大小、字体风格(如斜体)和字体变形(如小型大写字母)。
指定字体
可以使用 font-family 属性在文档中采用某种字体系列。
使用通用字体系列
如果你希望文档使用一种 sans-serif 字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:

Java代码 复制代码
  1. body {font-family: sans-serif;}  
body {font-family: sans-serif;}


这样用户代理就会从 sans-serif 字体系列中选择一个字体(如 Helvetica),并将其应用到 body 元素。因为有继承,这种字体选择还将应用到 body 元素中包含的所有元素,除非有一种更特定的选择器将其覆盖。
指定字体系列
除了指定通用的字体系列,您还可以通过 font-family 属性设置更具体的字体。
下面的例子为所有 h1 元素设置了 Verdana 字体:

Java代码 复制代码
  1. h1 {font-family: Georgia;}  
h1 {font-family: Georgia;}


这样的规则同时会产生另外一个问题,如果用户代理上没有安装 Georgia 字体,就只能使用用户代理的默认字体来显示 h1 元素。
我们可以通过结合特定字体名和通用字体系列来解决这个问题:

Java代码 复制代码
  1. h1 {font-family: Georgia, serif;}  
h1 {font-family: Georgia, serif;}


如果读者没有安装 Georgia,但安装了 Times 字体(serif 字体系列中的一种字体),用户代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配,但至少足够接近。
因此,我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。
如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:

Java代码 复制代码
  1. p {font-family: Times, TimesNR, 'New Century Schoolbook',   
  2.      Georgia, 'New York', serif;}  
p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}


根据这个列表,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的 serif 字体。
使用引号
您也许已经注意到了,上面的例子中使用了单引号。只有当一个字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。但是,如果把一个 font-family 属性放在 HTML 的 style 属性中,则需要使用该属性本身未使用的那种引号。

CSS 字体属性




1.11 CSS 列表
CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。
CSS 列表
从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单,甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
由于列表如此多样,这使得列表相当重要,所以说,CSS 中列表样式不太丰富确实是一大憾事。
列表类型
要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型。
例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型,可以使用属性 list-style-type:

Java代码 复制代码
  1. ul {list-style-type : square}  
ul {list-style-type : square}


上面的声明把无序列表中的列表项标志设置为方块。
列表项图像
有时,常规的标志是不够的。你可能想对各标志使用一个图像,这可以利用 list-style-image 属性做到:

Java代码 复制代码
  1. ul li {list-style-image : url(xxx.gif)}  
ul li {list-style-image : url(xxx.gif)}


只需要简单地使用一个 url() 值,就可以使用图像作为标志。
列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
简写列表样式
为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style,就像这样:

Java代码 复制代码
  1. li {list-style : url(example.gif) square inside}  
li {list-style : url(example.gif) square inside}


list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。

CSS 列表属性(list)




1.12 CSS 表格
CSS 表格属性允许你设置表格的布局。
CSS Table 属性
CSS 表格属性允许你设置表格的布局。(请注意,本节介绍的不是如何使用表来建立布局,而是要介绍 CSS 中表本身如何布局。)




1.13 CSS 轮廓
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

CSS 边框属性

发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览