CSS教程之第一天 XHTML CSS基本常识
最后你还得知道，你所用的工具，你可能认为dreamweaver很好，没错，它的确不错，但你要认识到，当你熟练使用了这门技术，你就可以在任何文本编辑器中编写网页，甚至在记事本中。[*]
[*]
接待人人进修《十天学会web尺度》，也就是我们常说的DIV+CSS。不外这里的DIV+CSS是一种毛病的叫法，倡议人人仍是称之为web尺度。
进修本系列教程需有必定html和css基本，也就是指您之前做过网页，会用表格结构。假如您刚入手下手进修网页制造，不晓得甚么是表格结构及html和css，倡议您先往充电，不然进修本教程会十分费劲大概基本就听不懂。
因为工夫干系，本教程只解说一些基本常识，让您从本来的表格结构跨进到web尺度（div+css）结构，会利用web尺度制造出罕见的页面，这也到达了本教程的目标。
本教程多以实例情势循规蹈矩解说，实例触及到哪些关头点或难点就解说甚么，较少解说观点。由于观点这些器材很难申明白，大概申明白你也纷歧定能听懂，听懂了也纷歧定能了解。以是把观点留给人人今后再深切研讨。
因为章节干系，没有把css和csshack独自分出，只是在用到的时分交叉进解说了。html基本和css基本只在第一节中先容了几点主要的。
上面我们入手下手第一天的进修
1、xhtmlcss基本常识
起首说一下我们这节课的常识点
[*]文档范例
[*]言语编码
[*]html标签
[*]css款式
[*]css优先级
[*]css盒模子构成
1）文档范例
当我们用dreamweaver新建一下html格局文档时，检察源代码，会发明代码最上部有以下这句话：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句话标明本文档是过渡范例，别的另有框架和严厉范例，今朝一样平常都接纳过渡范例，由于扫瞄器对XHTML的剖析对照宽松，同意利用HTML4.01中的标签，但必需切合XHTML的语法。很多伴侣在制造页面时，常常喜好把这句删撤除，在这里倡议人人必定要保存这句话，删除它后大概引发某些款式表生效或别的意想不到的成绩。
2）言语编码
接上去我们还会发明如许一句话：
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
它标示文档的言语编码。就像我们平常所说的汉语、英语一样。这里的gb2312告知扫瞄器，本文档接纳简体中文编码；另有一种经常使用的编码是UTF-8编码，它是国际通用的编码。不论我们接纳哪一种编码，有一点就是包括的css款式表和别的文件也必需和本文档的编码一样，要不就会呈现乱码。
3）html标签
html标签在页面中都必需停止。成对的标签以“/标署名”停止，有些单一的标签在自己的开头打上/来停止，这是xhtml代码编写的标准。
成对的标签：
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
......
单一的标签：
<imgsrc=""/>
<br/>
.......
还需申明一点的是按xhtml标准，标签必需用小写。
4）css款式
加载css款式有以下四种
[*]内部款式
[*]外部款式
[*]行内款式
[*]导进款式
<linkhref="layout.css"rel="stylesheet"type="text/css"/>
这类情势是把css独自写到一个css文件内，然后在源代码中以link体例链接。它的优点是不仅本页能够挪用，别的页面也能够挪用，是最经常使用的一种情势。
<style>
h2{color:#f00;}
</style>
这类情势是外部款式表，它是以<style>和</style>开头，写在源代码的head标签内。如许的款式表只能针对本页无效。不克不及感化于别的页面。
<pstyle="font-size:18px;">外部款式</p>
这类在标签内以style标志的为行内款式，行内款式只针对标签内的元素无效，因其没有和内容相分别，以是不倡议利用。
@importurl("/css/global.css");
链接款式是以@importurl标志所链接的内部款式表，它一样平常经常使用在另外一个款式表外部。如layout.css为主页所用款式，那末我们能够把全局都必要用的大众款式放到一个global.css的文件中，然后在layout.css中以@importurl("/css/global.css")的情势链接全局款式，如许就使代码到达很好的重用性。
5）css优先级
[*]id优先级高于class
[*]前面的款式掩盖后面的
[*]指定的高于承继
[*]行内款式高于外部或内部款式
[*]总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定章承继离它比来的
6）css盒模子构成
css盒模子是本节教程的重点。后面几个常识点，假如您会用表格结构的话，就十分好了解和把握了。这里的盒模子是和table结构的一个分歧点。进修web尺度，起首要弄懂的就是这个盒模子，这就是DIV排版的中心地点。传统的表格排版是经由过程巨细纷歧的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是经由过程由CSS界说的巨细纷歧的盒子和盒子嵌套来编排网页。这类排版体例的网页代码简便，体现和内容相分别，保护便利，能兼容更多的扫瞄器，好比PDA设备也能一般扫瞄。
那末它为何叫盒子呢？先说说我们在网页计划中常听的属性名：内容(content)、添补(padding)、边框(border)、界限(margin)，CSS盒子形式都具有这些属性。
我们能够把它想像成实际中上方启齿的盒子，然后从正上往下仰望，边框相称于盒子的厚度，内容相对盒子中所装物体的空间，而添补呢，相称于为防震而在盒子内添补的泡沫，界限呢相称于在这个盒子四周要留出必定的空间，便利掏出。是否是如许就很简单了解盒模子了。
以是全部盒模子在页面中所占的宽度是由右边界+右边框+左添补+内容+右添补+右侧框+右侧界构成，而css款式中width所界说的宽度仅仅是内容部分的宽度，这是很多伴侣简单弄混的中央
这里的界限我们也称之为：外边距、外补钉；添补也叫：内边距、内补钉。
假如如今您对CSS盒模子了解还不敷透辟，持续往下看，厥后的章节会城市使用到盒模子实例。
2、怎样入手下手进修web尺度？
1）有HTML和CSS基本
进修本系列教程前，请求您有必定的html和css基本，制造过网页，会用表格举行网页结构，如许进修起来才会很轻松。假如您对这些还不懂，倡议先进修这些常识，然后再来进修本教程。
2）变化看法
在之前我们制造网站时，老是习气于先思索表面、色彩、字体及结构等一切体现在页面上的内容。但表面并非最主要的，相反终极用户在会见网页时的体验才是优先要思索的。一个由div＋css结构且布局优秀的页面能够经由过程css界说成任何表面，在任何收集设备上（包含手机、PDA和盘算机）上以任何表面体现出来，并且用div＋css结构构建的网页以够简化代码，加速显现速率。
以是要想学好div＋css，起首要变化看法，必要丢弃传统的表格(Table)结构体例，接纳层(DIV)结构，而且利用层叠款式表(CSS)来完成页面的表面。给网站扫瞄者更好的体验。
3）多下手、多动脑
说到这点，有点小儿科了，就像我们上小学时先生经常教我们的那样。为何我在这里也做为一点列出来呢，我是经由过程批评发明，有些同砚提的成绩太没程度了，略微动下头脑就分明了，大概本人下手一试就晓得了，但他就懒得试。举个复杂的例子，拿扫瞄器兼容来讲吧，你写个款式以后，在IE和火狐分离翻开看一下不就分明了，但就是不往做。另有一个同砚留言要我把一个实例中的图片打包发给他，我一看代码，就用到一张图片，无语了，有你留言的这个工夫，本人也早把图片下载上去了。以是在这里劝诫人人，必定要多下手、多动脑，不要怕贫苦。别的在进修完一节教程后，必定要本人做一遍实例，如许能更快把握。
这便是Div的优势所在。带宽的稍多占用，完全显得微不足道，更何况一个冗余的table设计架构如果代码写的不好会占用更多的带宽。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
页:
[1]