CSS基础教程（上）

因为本人是个CSS盲，为了改善这种情况，特意扫了一下盲，前不久不买书时，看到一本不错的CSS基础书，顺手买了一本，觉得还不错，记了一下笔记，共享给大家。

一．CSS入门

1.CSS应用到(X)HTML的方法

1）内联样式

内联样式（inline style）通过Style属性应用于文档的特定标记。(X)HTML中的样式值通过name:value或property:value的形式声明。

Eg. <p style=”color: #F00”>

优点：对于测试简单的CSS示例有点用。

不足：应该使(X)HTML文件中的表现信息尽可能少，将内联样式散布在(X)HTML代码中会使页面变得非常复杂。

2）内嵌样式

内嵌样式（embedded style）只影响某个特定的(X)HTML模板，但是，与内联样式所不同的是，它将所有的样式定义放在一起，作为元素的一部分，位于文档的头部。

Eg.在title元素之后，将上上下代码：

<style type=”text/css”>

p {

color: #F00;

}

</style>

优点：这种方式比内联样式好，它允许一次修改一个元素的所有实例而不是使用重复的内联样式。

不足：内嵌样式将表示部分加入(X)HTML文档，使得(X)HTML文档变大。另外，这些样式需要随每个网页的加载而重复下载。

3）外部样式

将CSS样式代码放入外部的CSS文件中，需要用到该CSS文件的样式的(X)HTML将该文件引入。

优点：当你考虑站点的CSS时，所需考虑的仅仅是一个外部样式表，而不再是标记，这就意味着整个网站的样式改变将仅仅需要修改某个或某几个样式表。另外，一旦浏览器访问过该样式表，它将被缓存而无需重新下载。

不足：由于某种原因而无法获取外部CSS文件时，任何(X)HTML页面将都没有样式，但这种情况很少发生。

2.导入和组合样式

通过@import规则来包括表现信息是Web标准灵活性的一个重要体现。@import规则不是为了在(X)HTML文档中应用而设计的，但它是通过主外部样式表导入一个或多个样式表的方法。并且通过(X)HTML导入一个外部样式表，可以使得老版本的浏览器（eg. Netscape 4.x或IE4）忽略某些特殊的样式。

Eg.在(X)HTML文档那个的<title>元素后，通过代码<style type=”text/css”>@import url(external.css);</style>来引入CSS文件。

3.打印样式表

有时候为了不在打印时浪费太多的墨，在打印时存在更换样式的需要，可以通过如下方式做到。Eg.

<link rel=”stylesheet” media=”screen” type=”text/css” href=”screen.css” />

<link rel=”stylesheet” media=”print” type=”text/css” href=”print.css” />

如果一个样式表的media属性为screen，那么在页面打印时，将不会使用该样式，但是，如果没有明确说明媒体类型，则样式表显示时不使用这些样式。

注意：目前IE支持的media的声明只有all、screen、print和其他的一些声明，如projection（针对投影仪）、aural（针对语言合成器）和braille（针对盲人），这些都是在针对特殊的设备或者面向特殊的终端用户时使用的。

4．注释

Eg1. /* Default styling for paragraphs */

p {

color: #F00;

font-size: 12px;

}

二．CSS核心概念

1.ID与类

1）ID

每个ID在一个页面中只能使用一次，作为某个元素的唯一标识符。一般情况下，ID只用于页面的唯一元素，如页眉、主导航栏、页角或用户界面的其他关键部分。

Eg. <p id=”highlight”>这个段落为红色文本</p>

<p id=”default”>这个段落为灰色文本</p>

相应的CSS通过#来标识某规则是唯一ID，#和ID名一起作为规则的起始，后面跟着属性的声明。如下所示：

/*定义highlight文本样式*/

# highlight {

color: #F00;

}

/*定义default文本样式*/

#default {

color: #333;

}

如何将ID与选择器结合呢？下面来看一个例子。基本的CSS将所有的h2标题设计为深灰色，并且字号为16像素，代码如下：

/*基本的标题样式*/

h2 {

color: #333;

font-size: 16px;

}

这个样式适用于大多数<h2>标题，但是，如果页面的主<h2>需要不通的颜色来突出强调时，就需要定义新的规则。在规则中，选择器定义成element#name的形式。

/*调整作为标题的h2的样式*/

h2#title {

color: #F00;

}

<h2 id=”title”>文章的标题</h2>

但是，必须牢记title是唯一的，它不能在模板的其他地方再次使用。

使用ID的场合如下：

ID应该为每个页面唯一存在并仅使用一次的元素保留，如页眉、边栏、主导航栏或者页脚等。

避免使用ID的场合如下：

当有一个以上的地方需要使用同一CSS规则时，不应该使用ID，也不要在将来可能在多个地方使用到的规则中使用ID。

2）类

类可以在页面中无限次地使用，因此它是应用CSS的非常灵活的方法。下面来看个例子：

<p id=”highlight”>这个段落为红色文本</p>

<p id=”default”>这个段落为灰色文本</p>

相应的CSS通过句点(.)来标识一个规则是可重用的类。句点和类名一起作为新规则的开始，接着便是属性说明，如下例所示：

/*定义highlight类*/

. highlight {

color: #F00;

}

/*定义default类*/

.default {

color: #333;

}

下面来看一个稍微复杂点的例子，该类结合多个类的ID，如下所示：

<ul id=”drinks”>

<li class=”alcohol”>Beer</li>

<li class=”alcohol”>Spirits</li>

<li class=”mixer”>Cola</li>

<li class=”mixer”>Lemonade</li>

<li class=”hot”>Tea</li>

<li class=”hot”>Coffee</li>

</ul>

其CSS定义如下：

/* Drinks list styling*/

ul#drinks {

color: #F00;

}

/* Define alcohol color*/

.alcohol {

color: #333;

}

/* Define mixer color*/

.mixer {

color: #999;

}

/* Define hot drinks color*/

.hot {

color: #CCC;

}

应用类的场合如下：

类是一种应用CSS规则的灵活方法，可以在页面中重复使用。目前我们仅仅使用类来控制属于一个组的元素，从而改善ID的行为。

避免使用类的场合：

在页面的主结构元素（如页眉、主导航栏）中不推荐使用，因为这样做将降低设计的灵活性，并且不得不通过大量修改或添加另外的标签来实现用户定制。

2.使用层叠

当有多个样式表时，有一个层次来定义将这些样式表应用到(X)HTML的顺序。同时，针对不同的应用方法，同样存在一个顺序，这个顺序就是“层叠”。

对于应用CSS的不同方法——内联、内嵌、外部和导入，其层叠顺序描述如下：

浏览器首先执行内联规则，然后执行所有的内嵌规则，最后再查找外部文件来完全理解所创建的CSS。

另外一种层叠的方法是使用多个外部样式表，eg.

<link rel=”stylesheet” media=”screen” type=”text/css” href=”one.css” />

<link rel=”stylesheet” media=”screen” type=”text/css” href=”two.css” />

<link rel=”stylesheet” media=”screen” type=”text/css” href=”three.css” />

浏览器认为最后一个样式表最为重要，并且优先执行它所包含的所有规则。

层次性也体现在导入样式表上。它与样式表给定的顺序相关，eg:

@import url(“default.css”)

@import url(“layout.css”)

@import url(“navigation.css”)

@import url(“forms.css”)

在该例中，forms.css在层次上是最高，default.css显然最低。

注意：如果一个样式表是通过另外一个模块化样式表使用@import导入，那么在层次上，它将自动处于较低层，简单地说，一个样式表总是比调用它的样式表级别更低。

处于层叠层次最底层的样式表是浏览器自己的默认样式表。

3.分组

另一个创建具有良好组织结构CSS所需遵守的关键原则是分组。Eg:

h1, h2, h3 {

font-family: Helvetica, Arial, sans-serif;

line-height: 140%;

color: #333;

}

如果想让这些标题中的某一个有点小差别的话，可用如下方法：

h1 {

font-style: itatic;

}

4.继承

继承（inheritance）主要描述(X)HTML元素从它的父元素继承样式属性的情况。如果没有为子元素定义特定的CSS，那么在某些情况下，子元素将继承赋予父元素的特定CSS值。这些地方CSS是层叠的，因此(X)HTML可以继承。

Eg. /* Top-level heading*/

h1 {

color: #333;

}

下面来看一段对应的(X)HTML代码：

<h1>Hello, <em>阿蜜果</em></h1>

若没有给<em>元素定义相应的CSS规则，那么它将从<h1>元素中继承样式。

在正规的CSS设计中，主样式表都以<body>元素声明开始。<body>元素不仅仅是结构良好的(X)HTML文件所必须的，它同时还是模板中所有可视元素的父元素。因此，每个元素都可以从它继承相关信息。Eg:

body {

margin: 10px;

font-family: Helvetica, Arial, sans-serif;

background: #CCC;

color: #000;

}

如果没有特殊给定，CSS中的其他规则都将继承这些值。

5.上下文选择器

上下文选择器（contextual selector）由两个或多个更多的选择器组成，这些选择器之间以空格隔开。Eg:

h1 em {

color: #F00;

}

上面所构造的上下文选择器表明，该规则只有当最后一个选择器（em）是第一个选择器（h1）的直接后代时才起作用。

6.CSS度量

CSS规则可以控制文本的高度、文本的间距、边框的宽度以及元素之间的间隔等。所有这些都需要定义相应的度量机制。

CSS提供了两套度量机制——绝对（absolute）和相对（relative）。前者试图固化设计，而后者使得用户或者浏览设备能够控制网页。

1）绝对度量

绝对值是一个固定的特定单位。它能够精确地控制网页的显示。绝对单位信息如下：

单位	描述
in	绝对单位英寸
cm	绝对单位厘米
mm	绝对单位毫米
pt	绝对单位磅，1磅等于1/72英寸
pc	绝对单位pica，1pica等于12磅，等于1/6英寸

事实上，几乎所有的日常的CSS设计，都不需要绝对度量也照样能正常工作。因此，我们可以直接跳到更有意义的相对度量机制。

2）相对度量

相对度量没有固定的特定值，相反，它们是和继承到的值进行比较后，通过计算得到。如下表所示：

单位	描述
%	相对于另一个值的百分比的单位
ex	相对于x高度的单位，由该字体的小写字母x的高度决定
em	相对于元素字体的高度
px	在屏幕上，相对度量的像素单位

虽然相对度量不允许设计人员实施很多的绝对控制，但是它们为终端用户创造了更好的体验。

3）像素

像素（pixel）为用户布局提供了最好的控制。

基于像素控制文本大小能够提供跨越大多数终端设备的一致性。IE/Win用户不能使用浏览器中重新设置大小的工具来重新设置用像素描述的文本的大小。

为了确保所有的终端用户能够基于自己的浏览器偏好来浏览网页，强烈建议使用em单位来声明字号。

4）百分比

百分比值总是相对于另外一个值而言的，如父元素的宽和高等。换言之，百分比只能声明为和前面的规则已经定义的尺寸相关，或者是和浏览器窗口相关的尺寸。

需要注意的是，使用百分比时，集成将会带来麻烦，由于像素和em保留了一些控制，通过浏览器计算的百分比值的结果将与你所期望的有所不同。

5）em

在CSS中，由于最具灵活性，em是最容易被错误理解的相对度量。它非常适用于终端用户的浏览设备和文本偏好难以预测的设计原则。

em是传统的印刷单位，em使得样式表具有可伸缩性。和传统印刷中的em不一样，CSS的em几乎可以用来定义所有的CSS属性的长度。

em是等于一个打印字号的单位。因此，在给定的元素中，字号设为11像素，那么1em就等于11像素；如果在另外一个元素中字号为30像素，那么1em就等于30像素。

下面再来看一个例子：

body {

font-family: Helvetica, Arial, sans-serif;

font-size: 0.8em;

color: #000;

}

三．CSS构造块

1．div

部分（division）——<div>元素，经常以div形式引用——是(X)HTML的元素，用于定义(X)HTML文件中的区域。你可以让div包含任何在页面<body>部分的一些额外元素，如文本、图形等——实际上，这些元素可以是任何元素，甚至十一些不同区域中的特殊元素，如页眉、页脚、导航栏等。

Eg.在HTML中构造一个div元素：

<div id=”container”>

<p>这是我们的内容区域</p>

</div>

为id为container的div元素添加CSS样式代码如下例：

#container {

padding: 20px;

border: 1px solid #000;

background: #CCC;

}

下面让我们来看一个添加子div的例子：

<div id=”container”>

<p>这是我们的内容区域</p>

<div class=”box”>

<p>我在盒子中!<p>

</div>

<div class=”box”>

<p>我也在盒子中!<p>

</div>

</div>

定义box类的样式如下：

.box {

margin: 10px;

padding: 20px;

border: 1px solid #000;

}

2．维度：宽度和高度

设定值可以使长度、百分比或auto。所有这些值会受到样式表里其他规则的负面影响，也受到(X)HTML中它们包含的元素的影响。例如，margin、padding、border或者自元素都可能对结果产生连锁反应。

3．外边距

外边距（margin）属性的功能正如它本身表示的意义，用于设定(X)HTML元素和它外部的元素之间的外边距。外边距属性可以为给定的元素设定上外边距、下外边距、左外边距和右外边距四个属性。注意外边距值不从父元素中继承。

下面来看一个外边距CSS定义的例子：

#container {

width: 300px;

margin-top: 20px;

margin-left: auto;

margin-right: auto;

margin-bottom: 1em;

border: 1px solid #000;

padding: 20px;

background: #CCC;

}

对外边距可缩写成如下：

#container {

margin: 20px auto 1em auto;

}

属性值的排列顺序为：上外边距、右外边距、下外边距、左外边距。

CSS中将元素居中的最好的方法是把元素恶左右外边距属性值设定为auto。对于常用的浏览器，这只需要设定width规则，左外边距话和右外边距都为给定的auto值。

4．内边距

内边距（padding）是(X)HTML元素的边框与元素之间的距离，适用于任何元素。

Eg.

#container {

width: 300px;

padding-top: 20px;

padding-left: 10%

padding-right: 1em;

padding-bottom: 0;

background: #CCC;

}

可以将它缩写成如下代码：

#container {

padding: 20px 1em 0 10%;

}

与margin属性一样，数值的排列顺序为：上、右、下和左。

下面来讨论一下：border-width、border-top-width、border-right-width、border-bottom-width和border-left-width。Eg.

#container {

width: 400px;

margin: 10px auto 10px auto;

padding: 20px;

border-style: dashed dotted solid ridge

border-top-width: thin;

border-right-width: 20px;

border-bottom-width: medium;

border-left-width: thick;

}

设置边框颜色的属性设置如下：

#container {

border-color: #000 #999 #333 #CCC;

}

用border、border-top、border-right、border-bottom和border-left属性可以将给定的border-style、border-width和border-color属性的值集中到一个属性中，eg.

#container {

width: 400px;

margin: 10px auto 10px auto;

padding: 20px;

border-top: #000 thin dashed;

border-right: #999 20px dotted;

border-bottom: #333 medium solid;

border-left: #CCC thick ridge;

}

文章转自：http://www.blogjava.net/amigoxie/archive/2007/09/10/143942.html