DIV+CSS网页设计的基础教程

DIV+CSS⽹页设计的基础教程
这个⽂章只是为您介绍CSS的基础应⽤，指引您的⼀个⼊门的基础教程，主要⽬的是为推进web标准贡献⾃⼰的微薄之⼒。

说点我⾃⼰的体会，现在有好多⼈都在推⼴WEB标准，其实对初学者来说，不需要刚学的时候就学标准，学点简单的还是容易⼊门的，因为现在HTML还在照样⽤啊，所以我希望初学者学习时不要⾮遵循标准，当你⼊门之后，你做⽹页的时候，发现使⽤表格特⿇烦的时候你就该去寻求简单⽅法了，到时再学也不晚啊，如果你喜欢新技术那么你初学时就学标准吧，按个⼈的实际来⾏动吧。

下⾯开始学习了
⼀、如何在HTML中应⽤CSS。

您可以利⽤下列3 种⽅式将CSS 指定的格式加⼊到HTML中：
1. 在HTML ⽂件⾥加⼀个超级连结，连接到外部的CSS ⽂档。

(外部连结CSS)
这个⽅法最⽅便管理整个⽹站的⽹页风格，它让⽹页的⽂字内容与版⾯设计分开。

您只要在⼀个CSS ⽂档内（扩展名为
.CSS）定义好⽹页的风格，然后在⽹页中加⼀个超级连接连接到该⽂档，那么你的⽹页会按在CSS⽂档内定义好的风格显⽰出来了。

具体的使⽤防范是：
<
注意：style.css⽂件的位置。

2. 在HTML ⽂件内的....... 标签之间，加⼀段CSS 的描述内容。

(内定义CSS)
这个⽅法适⽤于指定某个⽹页，除了表现外部的CSS ⽂档定义好的⽹页风格外，同时还要表现本⾝HTML ⽂档内指定的CSS 。

如果内在添加的CSS 描述与外部连接的CSS 描述相冲突的话，⽹页的表现将以内在添加的CSS 描述为主，也就是外部的描述就不再起作⽤了。

具体使⽤⽅法是：
⽹页内容…
值得注意的是，为了防⽌不⽀持CSS 的浏览器误将标签间的 CSS 风格描述当成普通字串，⽽表现于⽹页上，您最好将CSS 的叙述⽂字插⼊在之间。

3. 在HTML ⽂件的⽂本内容中，随时有需要，随时加⼀⼩段CSS 的描述指定风格。

( ⽂本间CSS)
这个⽅法适⽤于指定⽹页内的某⼀⼩段⽂字的呈现风格。

外部CSS与内定义CSS如果和此定义有相同的项，那么以此定义的CSS 风格表现，外部CSS⽂档与内定义CSS和此定义的没相同的项时那么还会正常显⽰，同时还会显⽰⽂本内容间的CSS 风格。

具体使⽤⽅法是：
本页内容…
上述的3 种CSS，可以同时并⽤，也可以择您所好，单⼀或成双地使⽤。

如果各 CS S 间的叙述相冲突，则内在定义的CSS 会覆盖外部连结的 CSS ，⽂本间的 CSS 会覆盖内在定义的CSS 。

⼆、挑选者、属性和值。

先举个例⼦：H3{ COLOR : BLUE; }表⽰在⽂本中只要使⽤H3标签的⽂字的颜⾊都是蓝⾊。

其中H3为挑选者，COLOR为属性，BLUE为COLOR属性的值。

挑选者是套⽤样式的元件，通常为外部CSS或内定义CSS定义的风格的⼀个名字，在这个初级教程⾥理解为⼀个标签的名字也可以。

属性是⽤语描述挑选者的特性，相当于HTML语法中的标签的属性。

值就是属性的具体内容。

在CSS中当我们使⽤到属性值的时候，通常值是有⼀个度量依据的，也就是说值是有单位的。

⽐如我们通常说你从家到学校⾛1，1什么呢？⽶，公⾥，还是⾛1⼩时。

通常在CSS中的单位有：相对单位与绝对单位两种单位具体如下：
“em” (⽐如font-size: 2em) ：相对于字母⾼度的⽐例因⼦。

“%” (⽐如font-size: 80%)：相对于长度单位（通常是⽬前字型的⼤⼩）的百分⽐例。

'px' (⽐如font-size: 12px) ：像素（系统预设单位）。

'pt' (⽐如font-size: 12pt)：像点。

此外还有'pc' (印刷活字单位), 'cm' (公分), 'mm' (公厘) 和'in' (英⼨)等单位。

当值为0时，我们就不需要设置单位了，⽐如你不想要边框那么我们直接设置border: 0 。

在这我多说⼀句，就是强调单位的使⽤时，当我⾃⼰制作的⽹页想在分辨率改变时，字体⼤⼩也随着改变那么我们就使⽤单位%和em，如果你想时你的⽹页不管怎么调分辨率都是固定⼤⼩的那么我们使⽤px、pt等元素了。

呵呵！
三、颜⾊的设置和使⽤。

CSS提供了16,777,216种颜⾊可以供我们来使⽤，通常表现颜⾊的⽅式有三种：颜⾊名字、RGB(red/green/blue) 数值和⼗六进制数形式，具体表现如下：
红⾊可以表⽰为：red、RGB(255,0,0)、rgb(100%,0%,0%)、#ff0000 和#f00五种⽅式。

#RRGGBB：以三个00到FF的⼗六进位值分别表⽰0到255⼗进位值的红、绿、蓝三原⾊数值。

#RGB：简略表⽰法，只⽤三个0到F的⼗六进位值分别表⽰红、绿、蓝三原⾊数值。

⽽事实上，浏览器会⾃动扩展为六个⼗六进位的值，如『#ABC』将变为『#AABBCC』。

但是，显见这样的表⽰法并不精确。

rgb(R,G,B)：以0到255⼗进位值的红、绿、蓝三原⾊数值来表⽰颜⾊。

rgb(R%,G%,B%)：以红、绿、蓝彼此相对的数值⽐例来表⽰颜⾊，如rgb (60%,100%, 75%)。

Color_Name：直接以颜⾊名称来表⽰颜⾊，共有141种标准的颜⾊名称。

通常我们在设置颜⾊的时候通常是设置⽂字的颜⾊还有⼀个就是背景⾊。

如按下图进⾏设置：
我们可以保存⼀下⽂荡然后浏览你就可以看到效果了。

四、关于⽂本的设置。

我们可以使⽤多种属性来改变⽹页⽂本的⼤⼩和形状,以使⽹页⽂本内容看起来更加美观。

font-family：设定⽂字字型可以取family-name值，范例：SPAN { family-name : " 楷体" }或范例：。

font-style：设定字体样式，可以取的值有normal 普通字、italic 斜体字；范例：SPA N { font-style : italic }。

font-weight：设定字型份量；可以取的值有normal 普通字、bold 粗体字、bolder 相对于⽗元素稍粗、lighter 相对于⽗元素稍细、100,200,300,400,500,600,700,800,900 数字由⼩到⼤代表笔画由细到粗，例如：normal=400bold=700 ；范例：SPAN { font- weight : bolder }。

font-size：设定⽂字⼤⼩。

text-decoration：设定⽂字修饰，可能值有none 普通字、underline ⽂字加底线、o verline ⽂字加顶线、line-through ⽂字加删除线、blink 设定⽂字闪烁；范例：SPAN { text-decoration : blink }
text-transform：设定⽂字转换；可能值有none 普通字、capitalize 将英⽂单字地⼀个字母转换为⼤写、uppercase 将所有⽂字转换为⼤写、lowercase 将所有⽂字转换为⼩写；范例：SPAN { text-transform : uppercase }。

五、边缘和区块的设置。

MARGIN：边缘，虽然是通透的部份，但是可以藉由边缘宽度的调整来达到内容元素位置调整的⽬的。

PADDING：补⽩，也
就是内容元素与框架之间的这段距离与空间，也可以利⽤CSS指令去控制⼤⼩。

把代码改为如图：
他们的属性有：margin-top(上边缘宽度), margin-right(右边缘宽度), margin- botto m(下边缘宽度), margin-left(左边缘宽度), padding-top(上⽅补⽩宽度), padding- right(右⽅补⽩宽度), padding-bottom(下⽅补⽩宽度) 和padding-left(左⽅补⽩宽度)。

下⾯通过⼀个图来给⼤家说明：
看看上图理解点了吧！下⾯我们开始讲讲边框。

六、边框border性质设定。

边框也能应⽤到⼤多数的HTML标签中，可以来使⽹页更加美观，边框的具体属性有border-top：综合设定上边框性质、border-right：综合设定右边框性质、border-bottom ：综合设定下边框性质、border-left：综合设定左边框性质。

border-style综合设定边框样式，可能值：solid(实线), dotted(虚线), dashed( 短直线), double(双直线), groove (3d凹线), ridge (3d凸线), inset (3d嵌⼊) 和outset (3d 隆起)。

border-width综合设定边框宽度,可以设置的有border-top-width(设定上边框宽度), border-right-width(设定右边框宽度), border-bottom-width(设定下边框宽度) 和border-left-width(设定左边框宽度).
border-color综合设定边框颜⾊。

把下⾯代码加到你的⽹页中可以看到效果了：
这⽚⽂章就介绍到这⾥了，因为是⼀个初学者的⼊门教程。

学习CSS使⽤技巧教程(1)整体声明
1. 基本上，整体声明有两种⽅法，第⼀种就是针对⼀个标签，然后⼀次设定好⼏个样式。

第⼆种就是同时对好⼏个标签设定相同的样式。

下⾯这个例⼦就是：“针对⼀个标签，然后⼀次设定好⼏个样式”：
body{font-size:9pt;font-color:red;background:white}
2. 你会发现，我们同时声明了：字形⼤⼩为9pt、字形颜⾊为红⾊、背景为⽩⾊，这3个样式，为了将这三个样式分隔开，我们利⽤分号“；”来将之隔开，这样才能正常起作⽤！当然，若是你觉得这样⼀列⼀列的写出来很浪费空间，那么你也可以写成⼀⾏的形式，如下：
⼏个标签设定相同的样式
1.刚刚我们看过⼀个标签，同时设置⼏个样式的，实际上，我们也可以把好⼏个标签同时⼀起来设定，例如：
以此例⽽⾔，我们同时设定了三组标签
、
、，换⾔之，凡是被这三个标签包起来的，其⽂字⼤⼩都会变成12pt、红⾊字、并且以宋体显⽰！
分项声明
搞懂了基本声明和整体声明后，现在要来谈谈分项声明了，这个内容基本上不⽤多讲，因为并没有什么特别的⽤法，看看下例就知道了：
你会发现，我们同时对标签做了两次声明，对！这就是分项声明，也就是说，对同⼀个标签，我们可以做两次不同的声明，在CSS中，这是可以的！⾄于这样是多此⼀举？还是更加灵活？那就看你的使⽤习惯了！基本上，每个⼈的CSS编写习惯都不⼀样。

⼩⼼下⾯的情形：
在分项声明中，有种情况要特别注意，如下：
你发现了红⾊的部分吧！同⼀个标签做分项声明，结果⾥⾯的样式的属性有⼀组是⼀样的（font-color属性⼀样，但是设定值不⼀样），那么结果会怎么样呢？被标签包起来的⽂字是以蓝⾊显⽰的。

⼤家可以试试！
外部引⽤
为什么要把CSS声明做成⼀个CSS⽂件呢？这样做的好处有三个。

第⼀个好处，⽹页处理速度会更快⼀些，尤其在有很多⽹页共⽤⼀份CSS样式表时更为好⽤！因为你不⽤为每⼀页都写同样的CSS代码，⽹页⾃然就会更瘦⼀些轻快⼀些。

第⼆个好处是，可以防⽌⼀些电脑程度较低的使⽤者直接看到CSS语法（就是有⼈不喜欢被看见语法），当然指的是⽆法直接看到，⽽⾮⽆法看到，稍微有点能⼒的，要查看C SS⽂件的内容简直是易如反掌。

第三个好处当然就是维护⽅便了！你只要修改⼀个CSS⽂件，不管你有⼏千个⽹页⽂件，都会以你最新修改的版本为准了！
开始动⼿做CSS⽂件
⾸先，我们将把原来声明中的⾸先，我们将把原来声明中的去掉（去掉（CSS ⽂件⾥不需要这两个标签，因为，浏览器看到扩展名为css 就知道这是CSS ⽂件了），然后利⽤记事本程序把下⾯代码粘贴过去。

body{font-size:9pt}
然后将它保存，⽂件名的扩展名为.css ，在这⾥可以保存为style.css ，并和⽹页放在同⼀⽬录下。

在⽹页中调⽤CSS ⽂件
做好CSS ⽂件后，下⾯我们就该在⽹页中调⽤了，调⽤的⽅法如下所⽰：单独调⽤
“单独调⽤”就是加⼊STYLE 属性。

就是将CSS 声明套⽤在单独的⼀个⽹页元素上（任⼀个⽂字、图⽚、表格...等，都是⽹页元素），此时，CSS 将不再以⼀个样式表来显⽰结果了，⽽是利⽤STYLE 属性加到标签中。

为什么要“单独调⽤”CSS ？原因是：⽐较灵活...
举个简单的例⼦，我们希望让输⼊的表单的底⾊不使⽤⽩⾊了？
关于Style 属性
其实，⼏乎每个HTML 标签都有其各⾃的属性，例如
其中的al ign 是标签
的align 对齐属性」，加上align 属性后，你就可以设定段落要要居左、居中或居右。

相同的，STYLE 也可以当作是⼀个属性，⼀样加在标签之中，就我们上⾯的问题⽽⾔，其原先的语法应该是是这样的：
语法：结果：
现在，我们替这个输⼊表单加⼊STYLE 属性，也就是在
STYLE 属性：
语法：结果：
“STYLE="*****"”就是把STYLE 当作属性的⽤法，其后⼀样将CSS 声明放在""⾥⾯，⾄于⾥⾯的background-color:#ccffcc 意思就是“背景颜⾊：#ccffcc”的意思，现在不熟悉没关系，以后会继续讲解的。

什么标签都可以加⼊STYLE属性吗？
基本上，任何标签都可以加上STYLE属性。

所以，你不⽤担⼼会有标签不接受。

不过，单独调⽤针对⽹页元素加⼊STYLE属性虽然⾮常灵活，但是，却失去了CSS 的⼀个优点，那就是统⼀性。

所以说，你在使⽤时，除⾮只有部份⽹页元素需要单独使⽤CSS格式，否则，尽量在使⽤之前介绍的调⽤⽅
法，如此，⽇后在维护上会⽐较简单。

⾃定义类别
今天讲的有⼀个新知识“类别”。

其实，这知识并不陌⽣！回想⼀下，在HTML 标签中，有个属性叫class，当时没有解释这个属性是⼲什么⽤的。

其实，不是不解释，⽽是解释了也不会⽤，所以就暂时没有说，等到了今天。

这个class 属性，所以将之解释为“类别”属性，它有什么作⽤呢？它能够让我们在不同的标签中使⽤相同的CSS 设定，举个例⼦如下：我们在读书的时候，常常看到课本上有重点的地⽅，⽤红⾊或其它颜⾊标明。

如果，今天我们的⽹页上，也想将⼀些⽐较重要的地⽅⽤“红⾊、粗体字”来显⽰，你会怎么做呢？：
原始代码“⽹页教学⽹”
显⽰结果“⽹页教学⽹”
使⽤CSS实现重点突出
⽤上⾯的那种⽅法是相当不错的！简单⽤易懂！不过，试想⼀种情形...若是在我们的⽹页中有1000 多个所谓的“重点”，今天你突然想把重点通通换成“红⾊、粗体字”，那你该怎么办呢？这时，我们就讲⽤CSS来帮我们解决难题吧！⽽且，我们的“⾃定义类别”也就⽤上了！
样式语法
应⽤⽅式“⽹页教学⽹”
⾸先，我们在在CSS表中⾃⼰做⼀个叫做important 的类别，然后利⽤class
属性，套⽤在⽹页中，不难吧！以后若是要将“红⾊”改成“蓝⾊”，那么只要改类别⾥的设置就⾏了！不管⽹页中有⼏万个“重点”，都不⽤怕了！
⾃定义类别的⽤法
看过了⾃定义类别的⼤概⽤法后，再来做详细的解说，如何⾃定义类别？⾃定义类别⽅法很简单，⽅法和⼀般的CSS声明没什么区别！唯⼀的不同
是，CSS声明是针对某个标签的；⽽⾃定义类别则是不针对某个标签，⽽是
要⾃⼰命名！
样式语法
以上为例，.important { color:red ; font-weight:bold }就是我们⾃定义的类别，其中的{}部份和⼀般的CSS 声明⽅法⼀模⼀样！差别就在前⾯
的.important，没错！important
就是我们⾃定的名称，有了名称，才能调⽤。

注意！前⾯记得在⾃定义名称前加⼀个⼩点“.”，这样就完成了⾃定义的⼀个类别！这个类别可以利⽤class 来调⽤！套⽤到任何标签中！
⽂字属性
⽂字属性是可以设置⽂字的颜⾊、⼤⼩、字型、粗细等等。

原始代码
A
B
C
D
显⽰结果A
B
C
D
⽂字颜⾊{ COLOR }
语法：{ COLOR : ( color ) }
原始代码
A B C D
显⽰结果A B C D
⽂字类别{ FONT }
设置字体样式、⼤⼩写变化、粗细、⼤⼩、⽂字⾏列⾼度、字型
语法：{ FONT : ( font-style )︱( font-variant )︱( font-weight )︱( font-size )︱( font-family )︱/ ( line-height ) }
原始代码
A B C D
显⽰结果A B C D
下载字型{ @FONT-FACE }
语法：@FONT-FACE { FONT-FAMILY : ( font-family ) ; SRC : URL ( url ) }
原始代码
显⽰结果没有结果
⽂字字型{ FONT-FAMILY }
语法：{ FONT-FAMILY : ( font-name )︱( generic-family ) }
原始代码
A B C D
显⽰结果
⽂字⼤⼩{ FONT-SIZE }
设定字体⼤⼩( 可设单位属性: 点pt、英⼨in、公分cm、像素px、百分⽐% )语法：{ FONT-SIZE : LARGE︱MEDIUM︱SMALLER︱( length )︱( percentage ) }
原始代码
A B C D
E F G H
I J K L
显⽰结果
⽂字样式{ FONT-STYLE }
设定字体样式( 分为: 正常、斜体)
语法：{ FONT-STYLE : NORMAL︱ITALIC }
原始代码
A B C D
显⽰结果A B C D
⽂字变化{ FONT-VARIANT }
设定字体变化( 分为: 正常、⼩字体)
语法：{ FONT-VARIANT : NORMAL︱SMALL-CAPS } 原始代码
A B C D
显⽰结果A B C D
⽂字粗细{ FONT-WEIGHT }
设定字体粗细( 分为: 正常、粗字体)
语法：{ FONT-WEIGHT : NORMAL︱BOLD }
原始代码
A B C D
显⽰结果A B C D
连接属性
在HTML ⽂件⾥的超连接⽂字经过浏览器的解释后都会以加下划线的⽅式来显⽰，并没有动态的效果，通过CSS 之Anchor Pseudo Classes，⼤家可以将超连接⽂字的显⽰⽅式做到⼏种不同的变化。

例如：/doc/8cd2612e453610661ed9f4f4.html
以上的超级连接经过在浏览器页⾯上是以加下划线的⽅式显⽰。

但如果利⽤CSS 之Anchor Pseudo Classes 则可以做出动态的效果，其标签如下：记得两个属性见" ; " 隔开，详细属性值设定请参阅CSS 常⽤属性( Properties ) 与
设定值⼀览表。

原始代码A:link{color:blue; font-size:9pt; text-decoration:none} A:visited{color:blue; font-size:9pt; text-decoration:none}
A:hover{color:red; font-size:9pt; text-decoration:underline} A:active{color:red; font-size:9pt; text-decoration:underline}
显⽰结果Click Here !
属性分类
A:link 是代表普通状态的连接
A:visited 是代表访问过的连接
A:hover 是代表⿏标移到连接
A:active 是代表按下去连接
color 是代表连接颜⾊
font-size 是代表连接⽂字⼤⼩，适⽤point(pt) 或是pixels(px) text-decoration 是代表⽂字样式，none 代表没有下划线。