CSS基础教程（下）

今天把看《CSS基础教程》的下半部分笔记贴出来，嘿嘿，希望也对大家有点好处。

一．文本

1.基本字体属性

下面看看字体的几个属性：

1）font-family

该属性是针对某个元素的字体名称和字体系列名称的一个列表，该列表按有限顺序排列。Eg：

Body {

Font-family: “Lucida Grande”, Arial, Sans-serif;

}

2）font-size

用于定义字体的大小，eg：

body {

font-size: 12px;

}

可以对字体声明进行如下缩写，如：

body {

font: 12px “Lucida Grande”, Arial, Sans-serif;

}

2.可用字体

1）web安全字体

当选定某种自体时，必须保证选定的字体不但要在所选定的平台上看起来不错，而且还要保证在其他的平台上也能显示。

已有如下的web安全字体：Verdana、Georgia、Times New Roman、Times、Arial、Helvetica、Tahoma、Comic Sans MS、Trebuchet和Courier。

2）有趣的替代字体

现在又出现了一些新的有趣的字体。如下所示：Lucida Grande、Lucida SansUnicode、Futura、Helvetica Neue、Gill Sans和Palatino。

3.应用样式

对于一个全新的网站，首先要考虑的是在body选择器中声明一般的规则。除非特别说明，则body中的所有元素都将继承这些值。Eg：

body {

margin: 10px;

border: 1px solid #000;

padding: 10px;

font: 12px Verdana, Arial, Sans-serif;

}

4.请务必使用line-height属性

调整文本行与行之间的间距将使文本看起来大不一样，可以增强文本的可读性。因此，务必使用这一属性。

1）用百分比设置line-height

如果line-height设置为100%，则间距没有变化；如果为150%，则间距为字号的一半；如果为200%，则间距等于字号。Eg：

body {

margin: 10px;

border: 1px solid #000;

padding: 10px;

font: 12px Verdana, Arial, Sans-serif;

line-heightL 200%

}

2）其他line-height值

normal：用于设定专家称为的“行之间合理的间距”；

数字：用数字设定间距时，行距将等于数字乘以当前的font-size值。Eg. line-height: 2;

长度：将行距设定为固定值。这种方法精度很高。注意：在这种情况下，如果重新设置文本的大小，行距不会以文本中相同的比率增加或减小。Eg. line-height: 8px;为保证重新设置文本大小时，行距仍能正常调整，建议采用em和百分比。

5.letter-spacing属性

使用该属性使得设计者能够依此实现对文本的紧性控制，eg：

h1, h2 {

letter-spacing: 3px;

}

6.其他的关键字体属性

1）font-weight

设置文本中字符显示的粗细程度。通常声明为正常或粗体。

2）font-style

字体的样式，normal（默认）、Italic（斜体）、oblique。

3）font-variant

用于将文本显示为小型大写字母字体，也就是所有的小写字母都将转换为大写字母。

4）text-transform

它是font-variant的补充。它可以将所有的字符显示为大写字母但是不缩写字号。text-transform: uppercase声明非常适用于标题。

5）段落缩进

Eg:

p {

text-indent: 15px;

}

二．颜色、背景与图像

1．颜色简史

设定颜色的方法有很多种，以下的几种方法都是正确的：

#f00 /* #rgb*/

#ff0000 /* #rrggbb*/

red /*常用英文名*/

rgb(255, 0, 0) /*颜色范围：0-255*/

rgb(100%, 0%, 0%) /*浮点范围：0.0%-100.0%*/

十六进制三元组是在(X)HTML和CSS中用来表示颜色的十六进制数，由3个字节6个数字组成，这3个字节分别表示：红色、绿色和蓝色的值。

CSS语言和HTML4规范一样都定义了16种具名颜色，如下表所示：

颜色	十六进制参考值
黑色（black）	#000000
藏蓝色（navy）	#000080
绿色（green）	#008000
海蓝色（teal）	#008080
银色（silver）	#c0c0c0
蓝色（blue）	#0000ff
酸橙色（lime）	#00ff00
浅绿色（aqua）	#00fffff
绛紫色（maroon）	#800000
紫色（purple）	#800080
橄榄色（olive）	#808000
灰色（gray）	#808080
红色（red）	#ff0000
紫红色（fuchsia）	#ff00ff
黄色（yellow）	#ffff00
橙色（orange）	#ffa500
白色（white）	#ffffff

2．文本颜色

例如要将某段落的文本变成红色，代码如下：

p {

color: #F00;

}

或者写成如下所示：

p {

color: red;

}

针对文本，需要使用Web安全颜色。这样颜色将可以正确的映射到不同平台上，从而即使在颜色有限的显示器上也不会被打乱，依然便于阅读。

3．背景色

我们用background-color属性来设定(X)HTML元素的背景色。如果你希望网站具有单色背景，那么请选择一种Web安全颜色。这将保证即使网页在其它平台上显示，颜色也不会给你带来麻烦。

下面来看一个为文本添加背景色的例子：

p {

color: #000;

background-color: #FF0;

line-height:150%;

}

接着来看一个为标题添加背景色的例子：

h2 {

color: #000;

background-color: #808080;

padding: 0.3em;

}

我们还可以为body元素添加背景色，代码如下：

body {

margin: 10px;

padding: 10px;

background-color: #CCC;

font: normal 12px Verdana, Arial, Sans-serif;

}

我们还可以为指定id的元素设定背景色，例如给id为container的div元素设定背景色。代码如下：

#container {

padding: 10px;

border: 1px solid #000;

background-color: #FFF;

}

4．背景的图像格式

在Web设计中，三种主要图像格式广为接受，即GIF、JPEG和PNG。最后一种与前两种相比，使用相对较少。

GIF(大多数人念为“whiff”，也有人念为“jif”)格式无疑是北京图像最理想的图像格式。它通过使用特定的压缩模式使得文件大小达到最小。

GIF的最大优点就是它拥有一定的透明度。

JPEG(发音为“jay-peg”)图像非常灵活，但是JPEG图像分析颜色的方法与GIF不同，它一般采用照片的有损压缩的标准方法。在反复地编辑和保存过程中。JPEG文件将逐渐退化。这一点和对照片副本进行再复制有点像。照片图像最好是以无损失的非JPEG格式保存，如TIFF。这样在将来需要重新编辑时可以避免图像不清晰。

JPEG不适用于素描，也不适用于包括文本的图像（GIF非常适合这种情况）。但是如果需要为网页保存照片的话，这种格式就非常合适了。

PNG格式（读为“ping”）的开发主要是为了改善GIF格式中的一些不足，利用它，能够显示百万颜色的机器就不会再局限于256色了。大部分人都会选择PNG来提供一些更复杂的透明图像。但有个问题：IE不支持透明的PNG。

5．背景图像

对于采用大图片作为背景图像的网页，用户浏览网页时的速度会大大降低。在任何情况下，在背景图像无法显示或者用户手动关闭背景时，如果没有可替换的手段来表示背景图像所表达的信息的话，就不要用背景来表达一些重要信息。

下面让我们来看一个为id为container的div元素来设置背景图像的例子，如下：

#container {

height: 200px;

border: 1px solid #000;

background-color: #FFF;

background-image: url(tile.gif);

}

如果需要关闭背景图像的平铺，需要使用no-repeat值。如下：

#container {

height: 200px;

border: 1px solid #000;

background-color: #FFF;

background-image: url(tile.gif);

background-repeat: no-repeat;

}

如果想要图片在水平或垂直方向平铺，可使用background-repeat: repeat-x和background-repeat: repeat-y;

默认情况下，background-image属性将图像放置（或者开始平铺过程）在容器的左上角。幸运的是，background-position属性为此提供了更多的灵活性。该属性允许你根据背景和容器的关系，精确地设定图像放置的位置。例如：

background-position: 50px left;

background-position: 10% 50%;

background-attachment属性使用相对较少，但非常有用，它用来实现粘连的效果，该属性有两个值：scroll（默认）和fixed。

有很多和北京相关的属性，可以使用一些缩写来将其合成一行CSS，例如，将图像和颜色组合的缩写：

background: #FFF url(tile.gif);

颜色、图像以及位置的缩写：

background: #FFF url(tile.gif) right top;

颜色、图像、位置和重复的缩写：

background: #FFF url(tile.gif) right no-repeat;

三．列表

1.无序列表

下面来看一个无序列表的例子，代码如下：

<div id=”container”>

<ul>

<li>Drinks Menu</li>

<li>Beer</li>

<li>Cola</li>

<li>Tea</li>

<li>Coffee</li>

</ul>

</div>

默认情况下，列表以小实心圆作为列表项目符，以仿效Word中所用到的典型列表。

1）list-style-type

该属性可以从多个可能的列表项目符中为列表设定一个特定列表项目符，使得列表不采用默认的disc。下面5中项目符用得最多：

none、disc、circle、square、latin。

其它还有upper-alpha、lower-alpha、upper-roman。

使用举例为：

ul {

list-style-type: circle;

}

2）外边距和内边距

举例如下：

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

3）list-style-position

如果需要项目符号内联在文本中时，使用该属性。Eg.

ul {

list-style-position: inside;

}

4）list-style-image

该属性用来自定义图片来代替实心圆、空心圆等。使用举例如下：

ul {

list-style-image: url(images/list.gif);

}

5）list-style缩写

列表属性可以缩写为一个声明语句，即用list-style属性。List-style-type、list-style-position和list-style-image可以任意排列，例如：

list-style: none inside url(images/list.gif);

下面让我们来看一个以背景图像作为列表项目符的例子：

ul {

list-style: none;

}

li {

background: transparent url(images/list.gif) no-repeat left center;

padding: 0 0 0 25px;

}

有时我们还需要建立内联列表，如下例：

ul {

list-style: disc;

}

li {

display: inline;

}

2．有序列表

有序列表是一种用来按顺序标记列表项的方便方法。见下例：

<ol>

<li>Beer</li>

<li>Tea</li>

<li>Coffee</li>

</ol>

四．链接

1．链接标记

不管你是用文本还是图像来作为链接，链接都是代码中我们必须对其进行认真处理的元素之一。下面看一个链接的例子：

<a href=”http://www.google.com” title=”访问Google” alt=”Visit Google”>Google</a>

2．默认链接样式

默认的浏览器样式表是没访问过的链接呈现为深蓝色，访问过的链接呈现为紫色等等。

3．简单CSS规则

下面来看一个改变链接颜色的例子：

a:link {

color: #F00;

}

接着来看一个改变访问过的链接的颜色的例子：

a:visited {

color: #999;

}

还可以通过修改样式来改变鼠标放到链接上时将所有的链接文本设置成某颜色，如下：

a:active {

color: #000;

}

而:active伪类主要关注鼠标真正点击时链接样式，该伪类可以提高网页的可用性，如下：

a:active {

color: #000;

}

4．其他有用的链接属性

使用text-decoration可以很容易的去除链接下划线，该属性的可能值有：none、underline（默认值）、overline、line-through和blink。该属性可以用到4种链接状态中的任何一种，eg：

a:hover {

color: #333;

text-decoration: none;

}

下面再来看一个为链接加上边框的例子：

a:link {

color: #F00;

text-decoration: none;

border-bottom: 1px dashed #333;

line-height: 150%;

}

为链接的背景图像加上记号的例子如下：

a:link {

color: #F00;

padding: 0 15px 0 0;

background: url(images/arrow.gif) no-repeat right center;

}

a:visited {

color: #999;

padding: 0 15px 0 0;

background: url(images/checkmark.gif) no-repeat right center;

}

5．利用派生选择器来影响链接

让我们来看一个利用派生选择器来影响链接的例子：

p a:link, p a:visited, p a:hover, p a:active {

color: #F00;

padding: 2px;

border: 1px dashed #999;

text-decoration: none;

}

6．利用链接来转换导航栏

通过使用简单的CSS规则将一个简单的无序列表变成一个垂直的导航栏。下面来看一个对应的例子。(X)HTML中相应代码如下：

<ul>

<li><a href=”#”>Beer</a></li>

<li><a href=”#”>Tea</a></li>

<li><a href=”#”>Coffee</a></li>

</ul>

接着我们可以开始创建linkslist.css文件，其内容如下：

ul {

list-style-type: none;

margin: 5px;

padding: 2px;

border: 1px solid #333;

width: 160px;

font: bold 12px ‘Lucida Grande’, Verdana, sans-serif;

}

li {

background: #DDDDDD;

margin: 0;

padding: 2px 10px;

border-left: 1px solid #fff;

border-top: 1px solid #fff;

border-right: 1px solid #aaa;

border-bottom: 1px solid #666;

}

ul a:link, ul a:visited, ul a:hover, ul a:active {

display: block;

padding: 2px 10px;

text-decoration: none;

}

ul a:link {

color: #000;

}

ul a:visited {

color: #666;

}

ul a:hover {

color: #F00;

background: #FFF;

}

ul a:active {

color: #333;

}

最后一个诀窍是，当你真正浏览某个页面时，突出相应链接，修改如下：

<ul>

<li><a href=”#”>Beer</a></li>

<li id=”current”><a href=”#”>Tea</a></li>

<li><a href=”#”>Coffee</a></li>

</ul>

在CSS文件中增加如下内容：

#current a:link {

color: #FFF;

background: #333;

}

五．表格和定义列表

1．表格

表格生来就很复杂。数据按规则放置在行和列中，它们之间的特定的关系已直接地表示出来。本质上，表格适用于列表数据并且只适用于列表数据。

1）基本表格

在(X)HTML中，<table>用来定义父元素，<tr>元素则用来定义表格中新的行，而大量的<td>元素则用来创建单元格。<th>元素表示行或列的标题，默认用粗体。下面来看一个基本表格的例子：

<table>

<tr>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>阿蜜果</td>

<td>24</td>

</tr>

</table>

2）过去如何使用样式

使用celpadding和cellspacing这两个我们熟知的属性是件很有诱惑的事。将它们添加到表示起始标签中，从而得到<table cellpadding=”5” cellspacing=”5” border=”1”>。

然而，这些属性是纯表现性的，因此完全没有使用的必要。理论上说，不要在表格元素中添加表现标记，仅仅使用一些简单的CSS选择器就可以轻松但更有效的控制表格的样式。

3）用CSS来挽救

下面用CSS来为上面的简单表格加上样式，CSS代码如下所示：

table {

border: 1px solid #333;

font: normal 12px ‘Lucida Grande’, Verdana, sans-serif;

}

th, td {

border: 1px solid #333;

padding: 3px;

}

th {

text-align: left;

color: #FFF;

background-color: #333;

boder-style: solid;

border-width: 1px;

border-color: #CCC #666 #000 #CCC;

}

td {

background-color: #DDDDDD;

border-style: solid;

border-width: 1px;

border-color: #FFF #AAA #666 #FFF;

}

4）border-collapse

border-collapse属性是一个功能强大的工具，可替代HTML中过时的cellspacing属性。这种属性可以用于减少单元格之间的默认间隔。

可在上面CSS代码中的table中添加如下内容：

border-collapse: collapse;

5）自定义元素

可以为th元素设定北京图像，修改后的th的CSS定义如下：

th {

text-align: left;

background: #FFF url(images/tablefade.gif) repeat-x;

border-bottom: 1px solid #000;

}

2．定义列表

在某种意义上，列表主要是为了弥补基本列表和表格之间的鸿沟，以提供另外一种方法来展示一些简单的数据对。但是，它既没有无需列表的限制也不像表格那样复杂。

所有的定义列表都包括两个组成部分：项和描述。由三个基本元素组成，容器（<dl>）、定义项（<dt>）和定义描述（<dd>）。见下例：

<dl>

<dt>China</dt>

<dd>Guangzhou</dd>

<dt>England</dt>

<dd>Terrible soccer team</dd>

</dl>

定义列表具有灵活的继承性，因此，在一个定义列表中可以使用多个<dt>和<dd>。

在列表的定义描述中还可以结合块级元素使用，例如<p>和<ul>元素等，见例：

<dl>

<dt>England Soccer Team</dt>

<dd><p>Terrible soccer team…</p></dd>

</dl>

下面再来看一个定义列表中的列表的例子：

<dl>

<dt>England Soccer Team</dt>

<dd>

<ul>

<li>David Becknam</li>

<li>Wayne Rooney</li>

<li>Steven Gerrard</li>

</ul>

</dd>

</dl>

下面我们使用一些CSS样式来修饰这个列表，CSS代码如下：

ul {

list-style-type: none;

margin: 5px;

padding: 0;

}

li {

background-color: #DDDDDD;

margin: 0;

padding: 0;

border-style: solid;

border-width: 1px;

border-color: #FFF #AAA #666 #FFF;

}

dd {

margin: 0;

}

dl {

width: 160px;

margin: 0;

padding: 2px;

border: 1px solid #333;

font: bold 12px ‘Lucida Grande’, Verdana, sans-serif;

}

dt {

color: #FFF;

background-color: #333;

padding: 2px;

border-style: solid;

border-

}

需要注意的是定义列表非常灵活。虽然它不是很常用，但这种方式对于将数据分解若干小块而言，非常有用。

六．表单

1．标记回顾

表单的伟大之处在于，一个正确标记的表单能够提供大量元素来使用CSS。

1）表单元素

ltext

eg. <input type=”text” name=”email” id=”email” />

lmaxlength和size

eg. <input type=”text” name=”email” id=”email” maxlength=”50” size=”20” />

lcheckbox

eg. <input type=”checkbox” name=”checkbox” id=”checkbox” value=”n” />

lradio

eg. <input type=”radio” name=”radio” id=”radio” value=”n” />

lsubmit

eg. <input type=”submit” value=”submit” />

ltextarea

eg. <textarea name=”message” id=”message” rows=”11” cols=”30”></textarea>

lselect

eg. <select name=”subject” id=”subject”>

<option value=””>Select</option>

<option value=” Option1”>Option1</option>

</select>

2）提高可访问性

CSS设计者喜欢用<fieldset>，因为它也创建一个完美的容器。一般情况下，在CSS中容器的创建都需要一个额外的<div>。eg:

<fieldset>

Form tags go here;

</fieldset>

在默认情况下，<fieldset>在内容周围画一个简单的边框，以定义表单节。不用说，由于<fieldset>但当了主父元素，它需要承担很多应用到表单的样式。

<legend>元素的功能与用于识别表格的<caption>元素作用很相似。它还是另外一个简单CSS的连接点。使用举例如下：

<fieldset>

<legend>Enquiry Form</legend>

Form tags go here;

</fieldset>

如果你希望使用屏幕阅读器的人能够成功的导航你的表单，那么在<input>的<label>元素和相应的ID之间创建关系很重要。Eg：

<label for=”email”>Email</label><input type=”text” name=”email” id=”email” />

tabindex属性允许用户只用键盘（通常是Tab键）来导航表单的输入焦点，通常按照数字顺序，为每个属性给定一个数字值。Eg：

<label for=”firstname”>First Name</label><input type=”text” name=”firstname” id=” firstname” tabindex=”1” />

<label for=”surname”>Surname</label><input type=”text” name=” surname” id=”surname” tabindex=”2” />

accesskey属性是另外一个保证灵活性较差的用户能够完成表单导航的好方法，eg:

<label for=”email” accesskey=”3”>Email</label><input type=”text” name=”email” id=”email” />

现在，如果按下Alt+3键，表单焦点直接切换到<input>域，并与label相联系并指向email。

3）使用ID

Eg:

<form action=”” method=”post” id=”enquiryform”>

定义如下CSS:

#enquiryform input {

width: 100%

}

2．表单样式基础

1）去除默认的表单间隔

form {

margin: 0;

padding: 0l

}

2）为文本的<input>和<textarea>添加漂亮的边框

input, textarea {

border: 3px double #333;

}

3）<input>和<textarea>的宽度

input, textarea {

width: 100%;

border: 3px double #333;

}

4）<label>

label {

font-weight: bold;

}

5）<fieldset>

fieldset {

margin:0 0 10px 0;

padding:5px;

border:1px solid #333;

}

6）<legend>

legend {

background-color:#DDDDDD;

margin:0;

padding:5px;

border-style:solid;

border-width:1px;

border-color:#FFF #AAA #666 #FFF;

}

本文转自：http://www.blogjava.net/amigoxie/archive/2007/09/13/144684.html