【转载】CSS 入门精要（一）

来源：互联网发布：西安淘宝网编辑：程序博客网时间：2024/06/04 00:51

本教程取名为"入门精要"，首先是为入门读者准备的，如果你想在本文中找到关于CSS的高级知识，请绕行！其次，"精要"二字表明本文只讲述关于CSS的入门要点，力求精简，不求广博。

我假设你已掌握HTML，并有所实践。若假设不成立，请先学习并实践HTML……

本教程分为四个部分，第（一）部分是基础知识，第（二）部分介绍浮动（float）与盒模型，第（三）部分介绍CSS选择符，第（四）部分则是一个简单的综合示例。

边看教程边实验大概需要3 ~ 5小时，剩下的就需要读者大量的实践与经验积累了。

个人观点：HTML主要用于描述网页里的元素"是什么（内容）"，CSS主要用于描述网页里的元素"什么样（外观）"，而JavaScript用于增强网页的交互能力和逻辑控制能力。因此，应只使用HTML来说明网页中的元素是什么，而尽量避免使用HTML来描述元素的外观。极端点说，诸如：、、、这样的标签就是HTML标签中的"怪胎"，应避免使用。

曾经听到两位同学的这样一段对话：

A：标签是干什么用的？

B：就是让文字另起一行……

笔者认为，B同学完全忽视的标签真正的作用是"定义一个段落"，换句话说是说明"这是一个段落"。而"让文字另起一行"这只是标签作为块标记的一个"副作用"而已，我们完全可以使用CSS令其不另起一行。况且，"让文字另一起行"这是在控制元素显示效果（外观），这不应该是HTML标签的主要作用，而应该由CSS来承担。

（上述绿色部分言论完全是个人观点，若有异议，欢迎讨论，若打击到了某人，敬请海涵 :)

OK，进入正题（请边阅读，边实验）……

CSS是英文Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言，CSS目前最新版本为CSS3。CSS与HTML、JavaScript构成了网页设计的三大基础。

1. CSS基本使用方法与语法

首先，为保证你所写的代码在各个浏览器中均可以正常显示，请在页面的开关部分写入如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

上述代码为DTD声明，目的在于告诉浏览器，你使用的是XHTML 1.0标准，这样浏览器才能较好地支持后续我们将要学习的东东。（事实上，若你使用Dreamweaver，新建一个HTML文档时它会自动帮你写下上面那段代码）

OK，下面看例子：

段落中文字是红色，大小为18像素

上述代码告诉浏览器，中的文字显示为红色，大小为18像素。（快试一下吧！）

我们看到，要为一个标签说明样式，只需在标签中插入"style"属性即可。上例中红色部分即为样式说明。

语法格式：样式属性1:值1;样式属性2:值2;……

属性与值之间使用冒号分隔，多个样式说明之间使用分号分隔。

好了，现在的问题是，到底有些什么样式属性可以使用呢？关于这个问题，本文不作阐述，读者可以查阅别的资料。或者，最简单的办法，使用Dreamweaver的提示功能，如下图所示：

相信你在实验上面的例子时已经发现了怎么把这个提示框调出来了吧……

从头至尾浏览一下提示框中显示的所有样式属性，中学英语水平应该可以足以看懂了，不行就查下字典嘛！（花5~10分钟时间浏览完了再继续往下读...）

浏览的目的在于了解有些什么样式属性可用。就像你知道了有些什么材料，当你要盖房子时你就能灵活使用了。

当然能逐个试一下就更好了 :)

本人非常反对一开始就找一本厚厚的参考书，看完了才来实践！大胆猜测、大胆实验才是王道，又不会把电脑试坏了。别成天抬着嘴到处问，动不动就问别人"推荐一本书"。（哎，又上火了，打击到你的话，我只能说 sorry了:）

应该注意，Dreamweaver的提示框里出现的那些样式属性不是所有属性在所有浏览器里都有效，所以要避免使用那些"非主流"的样式。

下面是本人小结的"主流"样式属性，分了类，方便记忆：("*"表示0个或任意多个字符)

序号

类别

说明

background*

以background开头的一组，修饰元素的背景

font*

修饰元素中的文字外观

text*

修饰文字

border*

修饰元素的边框

margin*

设置元素外边距宽度

padding*

设置元素内边距宽度

list*

设置<li>的外观

其它

left/right/top/bottom、width/height、display/visibility

color、line-height、overflow、cursor、float、clear、position、z-index

下文依次对常用属性简要说明。让我们直接举例，请对照实践，并注意观察和总结。

（1）background*

以background开头的这一组样式属性主要说明元素的背景。例：

代码

说明

background-color : red;

背景为红色，支持RGB表示的颜色，如:#FF00AB

background-image : url("bg.jpg");

设置背景图片为bg.jpg（相对路径表示）
设置了背景图，背景色就看不到了，除非背景图片失效

background-repeat : repeat-x;

背景图只在X方向（水平方向）上重复，还有其它几个值，请自行实验

background-attachment : fixed;

背景图固定，不随滚动条滚动

background-position : 5px 10px;

设置背景图相对于元素左上角向右移动5px,向下移动10px。可取负值。
注意善用此属性，可有意外惊喜！

可以把上面的代码简写为： background : red url('bg.jpg') repeat-x fixed 5px 10px;

（2）font*、text*、color、line-height

这一组属性均是说明文字的表现形式，因此就一起举例说明了：

代码

说明

font-size : 12px;

设置文字大小为12像素 (请查阅其它资料了解其它单位)

font-family : 宋体;

设置文字字体为"宋体"。应避免使用非主流字体，原因此处暂略，请自行思考

font-weight : bold;

文字加粗

text-align : center;

文字水平居中

text-decoration : underline;

文字加下划线

text-indent : 24px;

首行缩进24像素

color : red;

文字为红色，支持RGB表示的颜色，如:#FF00AB

line-height : 24px;

每行文字的行高为24像素

请实验下面2段代码（省略号部分请自行填充不少于200字的一段文字）：

……

……

第二段是否比第一段要美观，呵呵，自行小结一下吧！

再实验下面这段代码：

文字是否在div里居中了? 注意红色部分代码，又可以小结一下了！

（3）border*

以border开头的这一组修饰元素的边框。边框分上、右、下、左四个方向，每个方向的边框可分别修饰"型"、"色"、"宽"。

看例子(例子中要同时说明"型"、"色"、"宽"才有效)：

代码

说明

border-left-color: red;

border-left-style: solid;

border-left-width:2px;

设置元素左边框为2像素宽的红色实线边

border-left : 2px solid red;

设置元素左边框为2像素宽的红色实线边(上例的简写形式)

border : 1px dotted red;

设置元素四周边框为1像素宽的红色虚线边

border : 1px solid red;

border-width : 2px 5px 10px 15px;

四周边框均为红色实线边，上、右、下、左边框宽度分别为2px、5px、10px、15px

小结：

(1) 第2行的代码覆盖了第1行中关于宽度的说明（后说明的样式会覆盖先说明的样式）

(2) 四个方向的边框可属性可一起简写说明，中间以空格分隔，顺序为从"上"开始顺时针方向一周

border : 1px solid red;

border-width : 5px 10px;

四周边框均为红色实线边，上下边为5px宽，左右边为10px。

（发现了什么规律? 自己小结一下！）

border : 1px solid red;

border-width : 5px 10px 15px;

等同于 border-width : 5px 10px 15px 10px;

（4）margin*、padding*

margin指的是元素边框之外的空白，而padding则指元素边框之内与内容之间的空白。

是不是看得一头雾水? 没关系，暂时放一下，我们继续往下看，等读完"CSS入门精要（二）"就明白了。

（5）list*

以list开头的这一组属性修饰<li>的外观，其中，list-style-type和list-style-image由字面即可猜到其用途，不行么试一下就知道了。

下面只讨论list-style-position，直接看图：

左图为list-style-position:outside的情形，右图为list-style-position:inside的情形。

可以看到，未设置margin、padding时：

a) outside（默认值）：li元素内容紧靠相邻元素，项目符（那黑点）深入到了相邻元素内部

b) inside: li元素项目符紧靠相邻元素，内容相应后缩。

（6）其它

这一组相对零散，下面配合例子说明：

代码

说明

width:50px;height:100px;

定义元素宽50px，高100px

color: red;

设置元素中文字为红色，支持RGB表示的颜色，如:#FF00AB

line-height:24px;

设置元素中文字行高24px

cursor: pointer;

鼠标处于元素上方时显示为手指形状，类似处于超链接上方的效果

display: none;

隐藏元素。

注意下面2行代码的作用：

display: block; 设置元素以块标签方式显示

display: inline; 元素以行内标签方式显示

还记得本文开头那两位同学的对话吗? 实验一下：

段落文字1

段落文字2

现在P标记不再是换行的作用了吧……

visibility: hidden;

隐藏元素。

与display: none的区别在于：

使用visibility: hidden隐藏元素后元素原来占据的空间仍然保留，相邻元素并不侵占若原有空间。

而display: none将元素隐藏后，原来占据的空间不再保留（试试就知道了）

position: absolute;

设置元素的定位方式为绝对定位。

关于position属性的几个取值及作用相对复杂，本文作为精简入门不再赘述，请参阅其它资料。

left:50px;

设置元素左外边距边界与其父容器左边界之间的偏移为50px

left、top、right、bottom 4个属性的效果与position属性的取值有很大关系

z-index:999;

设置元素的叠放层次，z-index值越大，就越靠上层。

float:left;

元素向左浮动。（参阅CSS入门精要（二））

clear:both;

清除浮动效果（参阅CSS入门精要（二））

overflow:scroll;

若元素中的内容超出了元素本身的大小，则显示滚动条。

关于此属性的几个取值有一些让人很迷惑的效果和用途，读者可先实验，再上网搜索别的文档看看。

好了，至此我们已经初步了解了CSS的基本语法，以及常用样式属性的用途。

还是那句话，由于是精要入门教程，所以未对所有样式属性进行说明，即使文中提到的样式也未对其每一个取值用途进行详述，读者可自行实验、总结或查阅别的资料以学习本文未尽之处……

前文中提到的的float、clear、border、margin、padding几个属性还有更多的内容需要讨论，如果你已经基本理解了前文所述内容，那就继续看"CSS入门精要（二）"吧！

0 0