马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
缩短改版时间。只要简单的修改几个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种分歧办法，起首来看第一种办法：
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，所以我一直建议一个提交按钮就不要用图片带代替了。 | 
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:31:52
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜