来一发CSS用款式表丑化你的网页

有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
CSS用款式表丑化你的网页

第1天:选择甚么样的DOCTYPE
媒介
人人好！这个系列文章是按阿捷本人制造这个站点的历程编写的。之前阿捷也一向没有制造过一个真正切合web尺度的网站。如今边参考外洋材料边制造，同时把过程当中的心得和履历纪录上去，但愿对人人有点匡助。好了，让我们入手下手吧
第一天
入手下手制造切合尺度的站点，第一件事变就是声明切合本人必要的DOCTYPE。
检察本站首页原代码，能够看到第一行就是：
翻开一些切合尺度的站点，比方出名web计划软件开辟商Macromedia，计划大家Zeldman的团体网站，会发明一样的代码。而另外一些切合尺度的站点(比方k10k.net)的代码则以下：
那末这些代码有甚么寄义？必定要安排吗？
甚么是DOCTYPE
下面这些代码我们称做DOCTYPE声明。DOCTYPE是documenttype(文档范例)的简写，用来讲明你用的XHTML大概HTML是甚么版本。
个中的DTD(比方上例中的xhtml1-transitional.dtd)叫文档范例界说，内里包括了文档的划定规矩，扫瞄器就依据你界说的DTD来注释你页面的标识，并展示出来。
要创建切合尺度的网页，DOCTYPE声明是必不成少的关头构成部分；除非你的XHTML断定了一个准确的DOCTYPE，不然你的标识和CSS都不会失效。
XHTML1.0供应了三种DTD声明可供选择：
过渡的(Transitional):请求十分宽松的DTD，它同意你持续利用HTML4.01的标识(可是要切合xhtml的写法)。完全代码以下：
严厉的(Strict):请求严厉的DTD，你不克不及利用任何体现层的标识和属性，比方
。完全代码以下：
框架的(Frameset):专门针对框架页面计划利用的DTD，假如你的页面中包括有框架，必要接纳这类DTD。完全代码以下：
我们选择甚么样的DOCTYPE
幻想情形固然是严厉的DTD，但关于我们年夜多半刚打仗web尺度的计划师来讲，过渡的DTD(XHTML1.0Transitional)是今朝幻想选择(包含本站，利用的也是过渡型DTD)。由于这类DTD还同意我们利用体现层的标识、元素和属性，也对照简单经由过程W3C的代码校验。
注：下面说的"体现层的标识、属性"是指那些地道用来把持体现的tag，比方用于排版的表格、背景色彩标识等。在XHTML中标识是用来暗示布局的，而不是用来完成体现情势，我们过渡的目标是终极完成数据和体现相分别。
打个例如：人体模特易服服。模特就比如数据，衣服则是体现情势，模特和衣服是分别的，如许你就能够随便易服服。而本来HTML4中，数据和体现是混同在一同的，要一次性换个体现情势十分坚苦。呵呵，有点笼统了，这个观点必要我们在使用过程当中慢慢了解。
增补
DOCTYPE声明必需放在每个XHTML文档最顶部，在一切代码和标识之上。
更多细节能够会见W3C的网站。123456789下一页

第3天:界说言语编码
第三步是界说你的言语编码，相似如许：
为了被扫瞄器准确注释和经由过程W3C代码校验，一切的XHTML文档都必需声明它们所利用的编码言语，我们一样平常利用gb2312(简体中文)，制造多国言语页面也有大概用Unicode、ISO-8859-1等，依据你的必要界说。
一般如许界说就能够了。可是要增补申明的是，XML文档并非如许界说言语编码的，XML的界说体例以下：
你在Macromedia.com的首页代码第一行就能够瞥见相似的语句，这也是W3C保举利用的界说办法。那为何我们不间接接纳这类办法呢？缘故原由是一些扫瞄器对尺度的撑持不完美，不克不及准确了解如许的界说办法，好比IE6/windows。以是在今朝过渡计划下，我们仍然保举利用meta体例。固然，你能够两种办法都写。
看本站源代码，你会发明言语编码界说的中央还多一句：
这是针对老版本扫瞄器写的，以包管各类扫瞄器都能准确注释页面。
注重：在下面声明语句的最初，你看到有一个斜杠"/"，这和我们之前的HTML4.0的代码写法分歧。缘故原由是XHTML语律例则请求一切的标识都必需有入手下手和停止。比方和、和等，关于不成对的标识，请求在标识最初加一个空格，然后跟一个"/"。比方
写成、写成，加空格的缘故原由是制止代码连在一同扫瞄器不辨认。上一页123456789下一页

第4天:挪用款式表
用web尺度计划网站，过渡的办法次要是接纳XHTML+CSS，css款式表是必不成少的。这就请求一切网页计划师必需纯熟把握CSS，假如你之前不经常使用，那末如今就入手下手进修吧。要制造切合web尺度的网站，不懂CSS是计划不出大度的页面的。
现实上，一切体现的中央都必要用CSS来完成。我们之前都习气用table来定位和结构，如今要改用DIV来定位和结构。这是头脑体例的变更，一入手下手有些不习气。呵呵，任何厘革城市有阻力的，为了享用尺度带来的"好处"，保持一些老的传统做法是值得的。
内部挪用款式表
在之前，我们一般接纳2种办法利用款式表：
页面内嵌法：就是将款式表间接写在页面代码的head区。相似如许：

内部挪用法：将款式表写在一个自力的.css文件中，然后在页面head区用相似以下代码挪用。
在切合web尺度的计划中，我们利用内部挪用法，优点不问可知，你能够不修正页面只修正.css文件而改动页面的款式。假如一切页面都挪用统一个款式表文件，那末改一个款式表文件，能够改动一切文件的款式。
双表法挪用款式表
检察某些切合尺度站点的原代码，你大概看到，在挪用款式表的中央有以下2句：
@importurl(css/style01.css);
为何要写两次呢？
实践上一样平常情形下用外联法挪用(就是第一句)就充足了。我这里利用双表挪用只是一种示例。个中的"@import"命令用于输出款式表。而"@import"命令在netscape4.0版本扫瞄器是有效的。也就是说，当你但愿某些效果在netscape4.0扫瞄器中埋没，在4.0以上或别的扫瞄器中又显现的时分，你能够接纳"@import"命令办法挪用款式表。上一页123456789下一页

第5天:head区的其他设置
这些技能次要讲meta标签设置的，实在与切合web尺度干系不年夜，只需注重在最初加"/"封闭标签就能够，可是既然是进门教程，就写得具体一点吧。
保藏夹小图标
假如你将本站到场保藏夹，能够看到在保藏夹网址之前的IE图标酿成了本站出格的图标。要完成如许效果很复杂，起首制造一个16x16的icon图标，定名为favicon.ico，放在根目次下。然后将上面的代码嵌进head区：
为搜刮引擎筹办的内容
代码以下，交换成你本人站点的内容就能够：
同意搜刮呆板人搜刮站内一切链接。假如你想某些页面不被搜刮，保举接纳robots.txt办法
设置站点作者信息
设置站点版权信息
站点的扼要先容(保举)
站点的关头词(保举)
先先容这么多。增补申明，后面花了5节都是讲head区的代码，实践页面内容还一字未提，呵呵，不要急，实在head区长短常主要的，看一个页面的head的代码就能够晓得计划师是不是够专业。上一页123456789下一页

第6天：XHTML代码标准
在入手下手正式内容制造之前，我们必需先懂得一下web尺度有关代码的标准。懂得这些标准能够匡助你少走弯路,尽快经由过程代码校验。
1.一切的标志都必需要有一个响应的停止标志
之前在HTML中，你能够翻开很多标签，比方和而纷歧定写对应的和来封闭它们。但在XHTML中这是分歧法的。XHTML请求有松散的布局，一切标签必需封闭。假如是独自不成对的标签，在标签最初加一个"/"来封闭它。比方:
2.一切标签的元素和属性的名字都必需利用小写
与HTML纷歧样，XHTML对巨细写是敏感的，和是分歧的标签。XHTML请求一切的标签和属性的名字都必需利用小写。比方：必需写成。巨细写同化也是不被承认的，一般Dreamweaver主动天生的属性名字"onMouseOver"也必需修正成"onmou搜索引擎优化ver"。
3.一切的XML标志都必需公道嵌套
一样由于XHTML请求有松散的布局，因而一切的嵌套都必需按按次，之前我们如许写的代码：
必需修正为：
就是说，一层一层的嵌套必需是严厉对称。
4.一切的属性必需用引号""括起来
在HTML中，你能够不必要给属性值加引号，可是在XHTML中，它们必需被加引号。比方:
必需修正为：
特别情形，你必要在属性值里利用双引号，你能够用"，单引号可使用，比方：
5.把一切），不是标签的一部分，都必需被编码为>
任何与号（&），不是实体的一部分的，都必需被编码为&
注：以上字符之间无空格。
6.给一切属性赋一个值
XHTML划定一切属性都必需有一个值，没有值的就反复自己。比方：

必需修正为：

7.不要在正文内容中使“--”
“--”只能产生在XHTML正文的开首和停止，也就是说，在内容中它们不再无效。比方上面的代码是有效的:
用等号大概空格交换外部的虚线。
以上这些标准有的看上往对照奇异，但这统统都是为了使我们的代码有一个一致、独一的尺度，便于今后的数据再使用。上一页123456789下一页

第7天:CSS进门
在懂得XHTML代码标准后，我们就要举行CSS结构。起首先先容一些CSS的进门常识。假如你已很熟习了，能够跳过这一节，间接进进下一节。
CSS是CascadingStyleSheets(层叠款式表)的缩写。是一种对web文档增加款式的复杂机制，属于体现层的结构言语。
1.基础语律例范
剖析一个典范CSS的语句：
p{COLOR:#FF0000;BACKGROUND:#FFFFFF}
个中"p"我们称为"选择器"(selectors)，指明我们要给"p"界说款式；
款式声明写在一对年夜括号"{}"中；
COLOR和BACKGROUND称为"属性"(property)，分歧属性之间用分号";"分开；
"#FF0000"和"#FFFFFF"是属性的值(value)。
2.色彩值
色彩值能够用RGB值写，比方：color:rgb(255,0,0)，也能够用十六进制写，就象下面例子color:#FF0000。假如十六进制值是成对反复的能够简写，效果一样。比方:#FF0000能够写成#F00。但假如不反复就不成以简写，比方#FC1A1B必需写满六位。
3.界说字体
web尺度保举以下字体界说办法：
body{font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
字体依照所列出的按次选用。假如用户的盘算机含有LucidaGrande字体，文档将被指定为LucidaGrande。没有的话，就被指定为Verdana字体，假如也没有Verdana，就指定为Lucida字体，依此类推，；
LucidaGrande字体合适MacOSX；
Verdana字体合适一切的Windows体系；
Lucida合适UNIX用户
"宋体"合适中文简体用户;
假如所列出的字体都不克不及用，则默许的sans-serif字体能包管挪用;
4.群选择器
当几个元素款式属性一样时</p>

1234下一页

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。

你可以轻松地控制页面的布局。
，能够配合挪用一个声明，元素之间用逗号分开，：p,td,li{font-size:12px;}
5.派生选择器
可使用派生选择器给一个元素里的子元素界说款式，比方如许：
listrong{font-style:italic;font-weight:normal；}
就是给li上面的子元素strong界说一个斜体不加粗的款式。
6.id选择器
用CSS结构次要用层"div"来完成，而div的款式经由过程"id选择器"来界说。比方我们起首界说一个层
然后在款式内外如许界说：
#menubar{MARGIN:0px;BACKGROUND:#FEFEFE;COLOR:#666;}
个中"menubar"是你本人界说的id称号。注重在后面加"#"号。
id选择器也一样撑持派生，比方：
#menubarp{text-align:right;margin-top:10px;}
这个办法次要用来界说层和那些对照庞大，有多个派生的元素。
6.种别选择器
在CSS里用一个点开首暗示种别选择器界说，比方：
.14px{color:#f60;font-size:14px;}
在页面中，用class="种别名"的办法挪用：
14px巨细的字体
这个办法对照复杂天真，能够随时依据页面必要新建和删除。
7.界说链接的款式
CSS顶用四个伪类来界说链接的款式，分离是：a:link、a:visited、a:hover和a:active，比方：
a:link{font-weight:bold;text-decoration:none;color:#c00;}
a:visited{font-weight:bold;text-decoration:none;color:#c30;}
a:hover{font-weight:bold;text-decoration:underline;color:#f60;}
a:active{font-weight:bold;text-decoration:none;color:#F90;}
以上语句分离界说了"链接、已会见过的链接、鼠标停在上方时、点下鼠标时"的款式。注重，必需按以上按次写，不然显现大概和你料想的纷歧样。记着它们的按次是“LVHA”。
呵呵，看了这么多，有摇头晕吧，实践上CSS的语律例范另有良多，这里列的只是一些经常使用的，究竟我们是循规蹈矩，不成能一口吃成瘦子

登录/注册后可看大图

上一页123456789下一页

第8天:CSS结构进门
CSS结构与传统表格(table)结构最年夜的区分在于：本来的定位都是接纳表格，经由过程表格的间距大概用无色通明的GIF图片来把持文结构版块的间距；而如今则接纳层(div)来定位，经由过程层的margin,padding,border等属性来把持版块的间距。
1.界说DIV
剖析一个典范的界说div例子：
#sample{MARGIN:10px10px10px10px;
PADDING:20px10px10px20px;
BORDER-TOP:#CCC2pxsolid;
BORDER-RIGHT:#CCC2pxsolid;
BORDER-BOTTOM:#CCC2pxsolid;
BORDER-LEFT:#CCC2pxsolid;
BACKGROUND:url(images/bg_poem.jpg)#FEFEFEno-repeatrightbottom;
COLOR:#666;
TEXT-ALIGN:center;
LINE-HEIGHT:150%;WIDTH:60%;}
申明以下：
层的称号为sample，在页面顶用就能够挪用这个款式。
MARGIN是指层的边框之外留的空缺，用于页边距大概与别的层打造一个间距。"10px10px10px10px"分离代表"上右下左"(顺时针偏向)四个边距，假如都一样，能够缩写成"MARGIN:10px;"。假如边距为零，要写成"MARGIN:0px;"。注重：当值是零时，除RGB色彩值0%必需跟百分号，其他情形前面能够不跟单元"px"。MARGIN是通明元素，不克不及界说色彩。
PADDING是指层的边框到层的内容之间的空缺。和margin一样，分离指定上右下右边框到内容的间隔。假如都一样，能够缩写成"PADDING:0px"。独自指定右边能够写成"PADDING-LEFT:0px;"。PADDING是通明元素，不克不及界说色彩。
BORDER是指层的边框，"BORDER-RIGHT:#CCC2pxsolid;"是界说层的右侧框色彩为"#CCC"，宽度为"2px"，款式为"solid"直线。假如要虚线款式能够用"dotted"。
BACKGROUND是界说层的背景。分2级界说，先界说图片背景，接纳"url(../images/bg_logo.gif)"来指定背景图片路径；其次界说背景致"#FEFEFE"。"no-repeat"指背景图片不必要反复，假如必要横向反复用"repeat-x",纵向反复用"repeat-y",反复展满全部背景用"repeat"。前面的"rightbottom;"是指背景图片从右下角入手下手。假如没有背景图片能够只界说背景致BACKGROUND:#FEFEFE
COLOR用于界说字体色彩，上一节已先容过。
TEXT-ALIGN用来界说层中的内容分列体例，center居中,left居左,right居右。
LINE-HEIGHT界说行高，150%是指高度为尺度高度的150%，也能够写作：LINE-HEIGHT:1.5大概LINE-HEIGHT:1.5em，都是一样的意义。
WIDTH是界说层的宽度，能够接纳流动值，比方500px，也能够接纳百分比，象这里的"60%"。要注重的是:这个宽度仅仅指你内容的宽度，不包括margin,border和padding。但在有些扫瞄器中不是这么界说的，必要你多尝尝。

                               
登录/注册后可看大图

</p>

上一页1234下一页

更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
<divclass="start">
我们能够看到边框是2px的灰色，背景图片在右下没有反复，内容间隔上和右边框20px，内容居中，统统和料想的一样。hoho，固然欠好看，但它是最基础的，把握了它，你就已学会一半的CSS结构手艺了。就是如许，不算难吧！(另外一半是甚么？另外一半是层与层之间的定位。我会在前面慢慢解说。)
2.CSS2盒模子

                               
登录/注册后可看大图

自从1996年CSS1的推出，W3C构造就倡议把一切网页上的对像都放在一个盒(box)中，计划师能够经由过程创立界说来把持这个盒的属性，这些对像包含段落、列表、题目、图片和层。盒模子次要界说四个地区：内容(content)、边框距(padding)、界限(border)和边距(margin)。下面我们讲的sample层就是一个典范的盒。关于初学者，常常会弄不分明margin，background-color，background-image，padding，content，border之间的条理、干系和互相影响。这里供应一张盒模子的3D表示图，但愿便于你的了解和影象。
3.帮助图片一概用背景处置
用XHTML+CSS结构，有一个手艺一入手下手让你不习气，应当说是一种头脑体例与传统表格结构纷歧样，那就是：一切帮助图片都用背景来完成。相似如许：
BACKGROUND:url(images/bg_poem.jpg)#FEFEFEno-repeatrightbottom;
只管能够用间接插在内容中，但这是不保举的。这里的"帮助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于润色、距离、提示的图片。比方：相册中的图片、图片旧事中的图片，下面的3d盒模子图片都属于内容的一部分，它们能够用元素间接插在页面里，而别的的相似logo，题目图片，列表前缀图片都必需接纳背景体例大概其他CSS体例显现。
如许做的缘故原由有2点：
将体现与布局完全相分别(参考浏览另外一篇文章：《了解体现与布局相分别》)，用CSS把持一切的表面体现，便于改版。
使页面更具有易用性，更有亲和力。比方：瞽者利用屏幕浏览机，用背景手艺完成的图片就不会被朗诵出来。上一页123456789下一页

第9天:第一个CSS结构实例
接上去入手下手要真正计划结构了。和传统的办法一样，你起首要在脑海里有大抵的表面构思，然后用photoshop把它画出来。你大概看到有关web尺度的站点多数很朴实，由于web尺度更存眷布局和内容，实践上它与网页的美妙没有基本抵触，你想怎样计划就怎样计划，用传统表格办法完成的结构，用DIV也能够完成。手艺有一个成熟的历程，把DIV当作和TABLE一样的工具，怎样使用就看你的设想力了。
注：在实践使用过程当中，DIV在有些中央切实其实不如表格便利，好比背景致的界说。但任何事变都有得有掉，弃取在于你的代价判别。好，不罗嗦了，我们入手下手：
1.断定结构

                               
登录/注册后可看大图

2.界说body款式
先界说全部页面的body的款式,代码以下：
body{MARGIN:0px;
PADDING:0px;
BACKGROUND:url(../images/bg_logo.gif)#FEFEFEno-repeatrightbottom;
FONT-FAMILY:LucidaGrande,LucidaSansUnicode,宋体,新宋体,arial,verdana,sans-serif;
COLOR:#666;
FONT-SIZE:12px;
LINE-HEIGHT:150%;}
以上代码的感化在上一天的教程有具体申明，人人应当一看就分明。界说了边框边距为0；背景色彩为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不反复；界说了字体尺寸为12px；字体色彩为#666;行高150%。
3.界说次要的div
初度利用CSS结构，我决意接纳流动宽度的三列结构(比自顺应分辩率的计划复杂,hoho，别说我偷懒，先完成复杂的，增添点信念嘛！)。分离界说左中右的宽度为200:300:280，在CSS中以下界说:
/*界说页面左列款式*/
#left{WIDTH:200px;
MARGIN:0px;
PADDING:0px;
BACKGROUND:#CDCDCD;
}
/*界说页面中列款式*/
#middle{POSITION:absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN:0px;
PADDING:0px;
BACKGROUND:#DADADA;
}
/*界说页面右列款式*/
#right{POSITION:absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN:0px;
PADDING:0px;
BACKGROUND:#FFF;}
注重：界说中列和右列div我都接纳了POSITION:absolute;，然后分离界说了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个结构的关头，我接纳了层的相对定位。界说两头列间隔页面右边框200px，间隔顶部0px；界说右列间隔页面右边框500px，间隔顶部0px；。
这时候候全部页面的代码是：
接待进进新《网页计划师》:web尺度教程及推行
页面左列
页面中列
页面右列
这时候候页面的效果仅仅能够看到三个并列的灰色矩形，和一个背景图。可是我但愿高度是满屏的，怎样办呢？
4.100%自顺应高度?
为了坚持三列有一样的高度，我实验在#left、#middle和#right中设置"height:100%;"，但发明完整没有料想的自顺应高度效果。经由一番实验后，我只好给每一个div一个相对高度:"height:1000px;"，而且跟着内容的增添，必要不休修改这个值。岂非没有举措自顺应高度了吗？跟着阿捷本人进修的深切，发明一个变通的办理举措，实践上基本不必要设置100%，我们已被table头脑监禁太深了，这个举措鄙人一节的进修中具体先容。上一页123456789下一页

第10天:自顺应高度
假如我们想在3列结构的最初加一行页脚，放版权之类的信息。就碰到必需对齐3列底部的成绩。在table结构中，我们用年夜表格嵌套小表格的办法，能够很便利对齐三列；而用div结构，三列自力分离，内容上下分歧，就很难对齐。实在我们完整能够嵌套div，把三列放进一个DIV中，就做到了底部对齐。上面是完成例子(红色背景框摹拟一个页面)：

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。