CSS教程之初学CSS的基本教程:在网页中利用CSS
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。网页制造Poluoluo文章简介：初学CSS的基本教程:在网页中利用CSS.
教程申明：
本教程系团体抽事情之余所作，依照我团体的设法我是想将一些基础的器材以较为轻松的言语形貌出来，做成一个系列教程（这必要工夫，我会勉力抽暇更新的），争夺让每个看这个东东的人都能有所劳绩，可是因作者自己程度无限，不当当的地方敬请留言品评斧正。
本教程假定您没有任何CSS款式表言语的基本，乃至，您能够完整不晓得CSS是甚么东东，可是，我们一样假定您已把握了基础的HTML/XHTML语法。好比，您一定晓得<head></head>是标明页面的头部，<p></p>是暗示页面的一个段落。
------------------------------------------------------支解线----------------------------------------------------------
1、正式入手下手进修之前的几句禄埃
lCSS不是甚么深邃的东东，它的编写情况也很复杂，你只必要在WINDOWS自带的记事本中编写，然后在扫瞄器中检察效果就能够了，不要以为你是在编程，实践上css独一的感化是用来把持网页中各类工具的体现情势罢了，so…你要有充分的信念信任你必定能够学好。
l固然CSS进修起来其实不坚苦，可是它也考究一个下手才能和实践操纵履历。我以为一切考究下手才能和实践操纵履历的常识进修起来最好的办法就是下手往理论，以是，我们为何不实践实习一下呢？记着一点：看100页书，不如下手写10行代码。
2、本小结您将进修的内容：
lCSS究竟是甚么东东，它有何感化？
l在网页中到场CSS的办法。
-------------------------------------------------华美的支解线------------------------------------------------------
第一个成绩：CSS究竟是甚么东东，有何感化？
在办理这个成绩之前，我们先来看看网站中一个页面的基础构成：一般，一个页面（前台）由一下三个部分构成：布局，体现和举动。
注：
布局：一般指布局化的文本，普通点了解就是经由布局化了的页面内容。用于布局化WEB尺度手艺有HTML、XHTML、XML等。
体现：指将页面中的元素用甚么样的表面展现出来，好比笔墨的字体，字号，色彩，巨细，是不是有下划线，页面的背景色彩（图片），段落的对齐体例，元素在页面的摆放地位等等。一般用于体现的尺度手艺就是我们这个教程要讲的CSS（层叠款式表）手艺。
举动：普通了解为人（用户）与网页的交互，好比：我在页面的某个元素上单击一下鼠标，页面会给我甚么反响——这就是一个复杂的人与网页的交互，我们也能够大致了解为人与呆板的交互，交换，相同（这几个词大概不太正确，请包涵偶在汉语辞藻方面的枯窘）。今朝次要体现举动的手艺是各类所谓的剧本手艺，好比：javascript（以后那是相称盛行啊）。
有了下面的常识展垫，我们晓得了CSS是用来把持页面体现的，也就是说是用来把持网页终极展现出来的表面的。CSS的英文全称是CascadingStyleSheets，翻译过去就是层叠款式表。我们为何要利用CSS呢？先来看看不利用CSS的网页页面代码：
从下面我们能够看出，用于把持内容体现情势的代码（白色部分）是和内容部分混同在一同的，也就是说，两者相互混同，不成支解。如今我们再来看看利用css后的代码：
注：下面的代码假如看不懂也不妨，前面我们会深切的解说。
从上我们能够看出，利用CSS后能够将内容（白色部分）和体现（css部分）辨别开来，只需你乐意，你乃至能够将CSS部分和HTML部分分离做成2个分歧的文件，寄存在分歧的文件夹下。很明显，利用CSS将布局和体现分别后的代码保护便利，逻辑明晰，有层次，并且，我们乃至还能够把一个CSS文件使用给多个分歧的HTML文件，来把持他们的表面，能够无效减小站点的体积。
下面我们复杂先容了CSS是甚么和它能用来干甚么的成绩，那末我们怎样才干在网页制造中利用CSS手艺呢？
---------------------------------------------加倍华美的支解线--------------------------------------------------
第二个成绩：在网页制造中使用CSS手艺的几种办法：
CSS按其范例能够分为3类：
•内嵌款式
•外部款式
•内部款式
这三类也分离代表了使用CSS的3种分歧办法，起首来看第一种办法：
1、内嵌款式(InlineStyle)
InlineStyle是写在标签内里的，内嵌款式只对地点的标签无效。
看以下例子：
<html>
<head><title>内嵌式款式(InlineStyle)</title></head>
<body>
<Pstyle="font-size:20pt;color:red">这个内嵌款式(InlineStyle)界说段落
内里的笔墨是20pt字体，字体色彩是白色。</p>
<P>这段笔墨没有利用内嵌款式。</p>
</body>
</html>
本例在扫瞄器中显现效果以下：
如上图，我们能够看到，这类体例利用CSS是将style作为HTML标签的一个属性到场的，也就是说，它仍是没有真实的把布局和体现分隔，以是，这类办法用的对照少。上面我们来看第二种办法：
2、外部款式(InternalStyleSheet)
外部款式是写在网页的<head></head>标签对中的，外部款式只对以后使用该款式的网页无效，在网页中利用外部款式的基础语法以下：
注：上图绿色部分就是CSS代码，注重它是怎样到场到页面中的，至于详细这些CSS代码怎样誊写，这个是我们前面要进修的内容，如今能够先不论它。上面我们来看第三种办法：
3、内部款式(ExternalStyleSheet)
假如良多网页必要用到一样的款式（回忆我们之前在DREAMWEAVER中进修的模板），用甚么办法呢？我们能够将款式写在一个以.css为扩大名的文件中，然后在每一个必要用到这些款式的网页中援用该文件就能够了，这类办法就是内部款式表办法。那末，我们怎样才干在一个页面中援用事前筹办好的款式表文件呢？一般我们有2种办法，一种称为“链接”，另外一种称为“导进”，这里我们先先容“链接”的办法，另外一种在前面的进修中再往剖析。在一个页面中“链接”一个款式表文件的语法格局以下：
注重：上图中的URL是指的被援用的CSS文件的URL，并且LINK语句另有其余属性，这里临时先不加以申明，前面我们进修到的时分再具体会商。
增补申明：被援用的CSS款式文件中应当只要基础的CSS语句，不要其他任何东东。比方我们要完成和第一个例子一样的效果，我们能够新建一个记事本文件，输出以下代码：p{font-size:20pt;color:red}然后将这个文件的扩大名改成"css"，如许就做好这个款式文件了。至于这条语句事实是甚么意义，信任伶俐的你已猜到了，对的，没错，它的意义是将一切的P标签（段落）中的文本表面变成字号：20PT，色彩：白色，固然了，假如其实不分明也不妨，前面我们会逐一先容。
---------------------------------------------本大节最初一条支解线--------------------------------------------------
3种款式表利用办法对照：
利用内部(Extenal)款式表，相对内嵌(Inline)和外部式(Internal)的，有以下长处：
a.款式代码能够复用。一个内部CSS文件，能够被良多网页共用。
b.便于修正。假如要修正款式，只必要修正CSS文件，而不必要修正每一个网页。
c.进步网页显现的速率。假如款式写在网页里，会下降网页显现的速率，假如网页援用一个CSS文件，这个CSS文件多数已在缓存区(别的网页早已援用过它)，网页显现的速率就对照快。
---------------------------------------------SORRY，另有一条支解线，哇哈哈哈-------------------------------
课外实习：
将下面先容的几种办法一一完成，了解每种办法的道理，脑壳内里多问本人几个成绩，想一想每种办法各自有甚么优弱点。
</p>
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。 Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）
页:
[1]