CSS初级指南(CSS教程)

2005年11月02日 00:00 6071

就如 HTML初级指南,CSS初级指南假设你对CSS一无所知。这个指南的目的是教授CSS的骨干元素──已经可以足够让你来开始学习了。CSS中级指南和CSS高级指南将探讨CSS的更深层次。

CSS,或Cascading Styles Sheets,中译层叠样式表或级联样式表,是样式化HTML的一种方法。HTML是文档的内容,则样式表是文档的表现,或者说外观。

无论闻起来还是尝起来,样式表一点都不像HTML。它们有着这样的格式:“属性:值(property: value)”,而且大部分属性可以应用到HTML标签中去。


 

一、应用CSS──把CSS 应用到HTML 中的不同方法

有三条途径可以把CSS应用到HTML中去。


内联

内联样式通过style属性直接套进HTML中去。
看起来像这样:

<p style="color: red">text</p>


这将会是指定的段落变成红色。

我们的建议是,HTML应该是独立的、样式自由的文档,所以内联样式无论在什么情况下都应该尽量避免。


内部

内部样式服务于整个当前页面。在头标签head里面,样式标签style里包含当前页面的所有样式。
看起来像这样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
...

这将使这个页面的所有段落都是红色的,所有的连接都是蓝色的。

与内联样式类似,你应该是HTML文档和CSS文档分离开来,下面,我们的救世来了……


外部

外部样式为整个网站的多个页面服务。这是一个独立的CSS文档,简单的一个范例如下:

p {
color: red;
}
a {
color: blue;
}


如果这个文档存为“web.css”的话,它可以这样跟HTML文档连接起来:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...


在CSS高级指南中,我们还将看到其他连接外部样式表的方法,但到目前,这已经足够了。

想从本指南中收获更多,尝试着在你的文本编辑器中新建一个文档,在HTML文档相同的目录中,把这些代码保存为“web.css”。

现在像下面一样改进你的HTML文档:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...


保存HTML文档。现在已经把HTML和CSS连接起来了,但还是空白一片,没有改变什么东西。随着进一步学习CSS初级指南,你可以增添或者改变CSS文档,通过刷新浏览器里的HTML文档,方便地看到效果,像我们以前做的一样。


 

二、 选择符、属性和值──构建CSS的单元

HTML有标签(tag),CSS就有选择符(selector)。选择符就是赋予内部或者外部样式表的名字。在 CSS初级指南中,我们致力于HTML选择符,即是HTML的标签,用来改变一个指定标签的样式。

每个选择符都有属性(properties)在大括号{}中,里面包括诸如color、font-weighth或者 background-color形式的字样。

值(value)在半角英文冒号:后面,用半角英文分号;隔离。

body {
font-size: 0.8em;
color: navy;
}


如上,这给body选择符里的font-size和color属性赋值。

基本上,这应用在HTML文档的话,在body标签之间(整个窗口的内容)文本将会有0.8em大小,显示为深蓝色。


长度和百分比

CSS中有很多专有的属性单位,也有很多能够用在大量属性的常规单位,在你继续学习之前,它们值得你熟悉一下。

em(比如font-size: 2em)是一个大致与一个字符高度相同的单位。

pxfont-size: 12px)是一个像素的单位。

ptfont-size: 12pt)是一个磅的单位。

%font-size: 80%)是一个……单位,等等,哦,是百分比。

其他单位还包括pc(活字),cm(厘米),mm(毫米)和in(英寸)。

一个值是0的时候你不必为它声明一个单位。比如,你不想要边界,可以这样设置:border: 0

注意:网页不是静态、绝对的媒体。这意味着,网页具有灵活性,用户被允许按他们的喜好方式浏览网页,包括字体尺寸和屏幕的大小等等。因此,为font-size属性赋值的单位中,最佳的是em或者%,而px在多数浏览器中会导致文本具有不可缩放性,也会导致贫乏、乏味的文本。

三、 颜色──如何运用颜色

CSS拥有1677216色供你处置,可以用名字,rgb(红绿蓝)值或者十六进制代码(hex)值来表示。

红色red
相同于
rgb(255,0,0)
相同于
rgb(100%,0%,0%)
相同于
#ff0000
相同于
#f00

有16中合法的预定义颜色名字。它们是:aqua水绿)、 black(黑)、blue)、 fuchsia紫红)、 gray)、 green绿)、lime浅绿)、 maroon)、navy深蓝)、 olive橄榄)、purple)、 red)、silver)、 teal深青)、white)和 yellow)。

透明transparent也是一个合法值。

在rgb的从0至255的三个值中,0是最低阶的(如没有红色),255是最高阶(如全是红色)。这些值也可以是百分比。

十六进制Hexadecimal(以“Sexadecimal”更为人知和更正确的用法)是16位的系统。我们日常生活中常用的是十进制系统(基于10,从0到9),但十六进制有16个数字,从0到f。

在CSS中的十六进制用半角英文井号#来定义,后面跟随3或6位数字。基本上,3位是6位的压缩版(#f00就是#ff0000#c96就是#cc9966等等)。3位版本比较容易解释(第一个数字,像rgb的第一个值,是红色的,第二个绿色,不用说,第三个就是蓝色了),但6位版本给你更多的颜色精确控制权。


前景色和背景色

颜色可以用colorbackground-color(注意这必须用美式英语中的color而不是colour)来应用。

下面演示一段有蓝色背景和黄色前景的文本的CSS:

h1 {
color: yellow;
background-color: blue;
}

这些颜色让人感到有点粗糙,所以你可以进一步改进CSS代码,使文本看起来清爽一点:

body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}


保存这个CSS文档,然后刷新浏览器。你可以看到第一级标题(h1元素)已经变成介于黄蓝之间的混色。

你可以应用colorbackground-color的属性到大部分的HTML元素中,包括body,它可以改变整个页面所有东西的颜色。


四、 文本──如何操作文本的大小和样式

你可以用大量的属性来改变文本的大小和形态,概括如下:


字体族font-family

这是字体本身的名称,如“Times News Roman”,“Arial”或者“Verdana”(又如“宋体”等中文字体名称--译者著)。

你指定的字体必须存在在用户的电脑上,所以在CSS使用字体会存在某种程度上的不确定性。有少量“安全”的字体(最常用的是Arial,Verdana和Times New Roman)。但你可以指定不止一种字体,只要用半角英文逗号,隔开就行。这样做的目的是如果用户的电脑上没有你指定的第一个字体,浏览器会逐遍寻找罗列的字体直到找到电脑上安装有的字体为止。这很有用因为不同的电脑有时侯有不同的安装字体。所以,例子font-family: arial, helvetica的目的就是用在PC(一般情况下有arial字体而没有helvetica字体)和Apple Mac上(一般有helvetica字体而没有arial字体)。

注意:如果一个字体的名称超过一个单词,它应该用英文双引号括起来,如:font-family: "Times New Roman"。


字体尺寸font-size

定义字体的尺寸。必须小心──像标题一样的文本不应该是段落中的大字体而已,你应该使用标题标签(h1h2 等)。甚至,在练习中,你可以使段落文本字体尺寸大于标题(不推荐使用,如果你明智的话)。


字体加粗font-weight

这用来声明文本粗细与否。实际应用中一般只有两种形式:font-weight: bold(粗体)和font-weight: normal(普通)。在理论上,它们的值有bolder(更粗),lighter(更细),100,200,300,400,500,600,700,800或者900,但许多浏览器会摇摇头,说:“我不认为这样”,所以使用boldnormal是比较安全的。


字体样式font-style

这定义文本正斜与否。可以这样使用 font-style: italic(倾斜)或者font-style: normal(正常)。


文本装饰text-decoration

这用来声明文本是否有划线。可以这样使用:
* text-decoration: overline──文本上面的划线。
* text-decoration: line-through──穿过文本的删除线。
* text-decoration: underline──这应该只使用在连接中,因为用户一般认为连接才有下划线。
这个属性通常用来装饰连接,而 text-decoration: none则是表示没有任何划线。


文本转换text-transform

这可以转换文本的大小写。
text-transform: capitalize把每个单词的首字母转换成大写。
text-transform: uppercase把所有的字母都转换成大写。
text-transform: lowercase把所有的字母都转换成小写。
text-transform: none?你自己试一试啦。

body {
font-family: arial, helvetica, serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}



文本间距

字母间隔letter-spacing和文本间隔 word-spacing属性分别用在字母间和单词间的距离。它们的值可以是长度或者默认的普通normal

line-height属性为比如段落等元素设置行高,它并不改变字体的尺寸。它的值可以是长度,百分比或者默认的normal

文本水平对齐text-align属性将对元素里的文本向左、右、中间或者两端对齐,自然,它们的值分别left(左)、 right(右)、center(中间)或者 justify(两端)。

文本缩进text-indent属性依据你设置的长度或者百分比值对文本段落的第一行进行缩进。在印刷中经常会用到这样的格式,然而在像网页这样的电子媒体中并不常用。

p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5em;
text-align: center;
}




五、 边界和补白──如何隔开元素

边界margin和补白padding(依据国内出版社的翻译惯例,margin被翻译成边界,padding被翻译成补白,译者依照习惯翻译。但译者认为,margin翻译成外边距,padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——译者注)是隔开元素最常用的两个属性。边界是元素外边的距离,而补白则是元素内部的距离。

h2改进代码如下:

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}


你可以看到二级标题外围有一个字符的宽度,还很臃肿,因为在二级标题内部有3个字符宽度的补白。

元素的四边可以设置不同的值。margin-topmargin-rightmargin-bottommargin-leftpadding-toppadding-rightpadding-bottompadding-left是无需解释的属性(看看英文字面意思啦)。


盒状模型

边界、补白和边框(见下一节)是人尽皆知的盒状模型的组成所有部分。盒状模型是这样工作的:中间是元素盒子(在脑海中想像一下情形),从里到外依次包围着补白盒子、边框盒子和边界盒子。很显然地,如下所示:


 

Margin box(边界盒)
Border box(边框盒)
Padding box(补白盒)
Element box(元素盒)

 

没有必要全部使用上述三个外围的“盒子”,但如果你能记住盒状模型,你可以把它们应用到页面的每一个元素。

六、 边框──嗯,边框。包围元素的元素

边框可以应用到在主体元素body中的绝大部分HTML元素中。

创建一个包围着元素的边框,你所需要的是边框样式border-style。它们的值可以是 soliddotteddasheddoublegrooveridgeinsetoutset。(你有必要每个值都试一试,看看效果如何——译者注)

边框宽度border-width为边框设置宽度,通常用像素来表示。当然,还可以单独设置四个方向的边框属性,它们是border-top-widthborder-right-widthborder-bottom-widthborder-left-width

最后,边框颜色border-color设置颜色。

为下面的CSS文档添加如下代码:

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

这将会使所有的HTML二级标题(h2)产生红色的破折号(dashed)边框,上下各3像素宽,左右则各10像素宽(取代了3像素宽的全局设置)。


七、 综合──把所有东西大杂烩

你应该已经在HTML初级指南的综合中创作了一个HTML文档,而且在CSS初级指南的的开始中增加了一行,用以把HTML文档和CSS文档联系起来。

下面的代码包括了所有我们在初级指南中所学习的方法。只要你把下面的保存起来作为CSS文档,然后在浏览器中查看HTML文档,你就可以理解每一个CSS的属性的表现和怎么应用。最好的方法就是花费时间修改CSS文档和HTML文档上的代码,然后在浏览器中查看到底发生了什么。

body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffc;
margin: 1em;
padding: 0;
}
/* 顺便说一句,这是注释 */
p {
line-height: 1.5em;
}
h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}
h3 {
color: #999;
font-size: 1.25em;
}
img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
li {
color: #900;
font-style: italic;
}
table {
background-color: #ccc;
}


 

(以上文字版权归原作者所有)

相关链接:CSS中级指南     CSS高级指南