代码学习群简易教程（19）

春天没来 2014-06-11

展开全文


认识 CSS

从本节开始，讲解css。

一、css是什么？

网页制作中，经常会用到css，那么，究竟什么是css呢？

css是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。css是W3C组织制定的用于控制网页内容显示效果的一种标记性语言。有的人把它叫做“层叠样式表”。

css是W3C组织制定的用于控制网页内容显示效果的一种标记性语言。在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。目前的最新版本是CSS3。

W3C组织是对网络标准制定的一个非赢利组织，W3C是World Wide Web Consortium（万维网联盟）的缩写，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。

根据W3C官方网站的介绍，W3C会员包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。

关于W3C组织的更多信息，请访问W3C官方网站（英文），或者通过万维网联盟香港办事处以及万维网联盟中国办事处获取有关W3C的中文介绍。

万维网联盟香港办事处成立于1998年11月13日。现设址于香港科技大学 (HKUST)。

万维网联盟中国办事处成立于2006年4月1日。现设址于北京航空航天大学(BUAA)。

二、css的作用：

css层叠样式表对html中的各个元素进行控制，达到布局和添加样式的作用，使网页更加漂亮。css层叠样式表可以同时更新多个网页的样式。css层叠样式表使网页的表示层与结构层彻底分离。css层叠样式表能够大大地减小网页文件的大小。

三、css样式表与html代码的关系：

css样式表与html代码的关系，可用一句话来概括：css控制了html标签对象的样式表现，而html标签的表现样式（美化）被css控制。

有人把css样式表比作“网页的化妆品”，用css样式表可以随意地将相同的网页内容转换成不同的网页外观。

有人把html代码比作皮影中的“人偶”，css样式就是控制“人偶”的线，用css样式控制html的摆放。

有人把html代码比作建筑房屋，css样式就是装饰房屋。建筑的房屋需要装饰，装饰起来才漂亮。

有人说：html犹如一个人，而css则是服饰。通过不同的服饰，可以打扮出不同风格的人。

还有人说：html可以没有css，但是css没有了html，狗屁不是！

四、css的继承性：

css的继承性是指被包在内部的标签将拥有外部标签的样式性质。例如我的这篇《教程》中，最外层的块区标签中设置了“背景图片”，内部被包裹的各个标签的内容就都有这个背景图片啦。

五、css层叠的含义：

css层叠的含义指的是样式的优先级，当产生冲突时以优先级高的为准。样式的优先级顺序为：“行内插入样式”→“页内插入样式”→“外连插入样式”。换句话来说，就是：“行内插入样式”优先级最高，“外连插入样式”优先级最低。例如：某篇网页中应用了“页内插入样式”,网页的某个段落中又应用了“行内插入样式”，那么，这个段落的显示样式就是“行内插入的样式”。

六、css样式表的应用方法：

应用css样式表的方法大致有三种：

1、行内插入样式：

应用内嵌样式把css插入到各个网页元素。在一个网页中几个地方用到css，采用“行内插入方式”。

2、页内插入样式：

在网页上创建嵌入的样式表。在单个网页中使用的css，采用“文档头部插入方式”。

3、外连插入样式：

将网页链接到外部样式表。当有多个网页要用到css，则采用“外连插入方式”，这样的网页，代码可大大减少，修改起来非常方便。

七、css样式表应用举例：

其实，我们制作的网页中，已经有意无意地应用了css样式表了。我已经发表的《教程》中，不少的地方，也曾经应用了css样式表。《教程》中讲解的内容，也涉及到了css样式表。

行内插入样式：

css样式表的“行内插入样式”，就是在html的标签中插入“css样式”，把“css样式”作为html标签的一个“属性”应用。凡是在html标签中有style=" "标记的，都是在行内插入了css样式。

1、文字标签中插入css样式：

代码举例：

<FONT style="LINE-HEIGHT: 1.5em; BACKGROUND-COLOR: rgb(0,255,0); LETTER-SPACING: 3px; FONT-FAMILY: 黑体; COLOR: rgb(0,0,250); FONT-SIZE: 25px">文字标签中的css样式:行高、背景颜色、字距、字体、文字颜色与字号。</FONT>

上面的文字标签中用css样式设置了行高、背景颜色、字距、字体、文字颜色与字号。

2、图片标签中插入css样式：

代码举例：

上面的图片标签中用css样式设置了图片的宽度与高度。

3、段落标签中插入css样式：

代码举例：

<P style="BORDER-BOTTOM: rgb(153,253,255) 4px solid; BORDER-LEFT: rgb(153,253,255) 4px solid; BORDER-TOP: rgb(153,253,255) 4px solid; BORDER-RIGHT: rgb(153,253,255) 4px solid">这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。 </P>

上面的段落标签中用css样式设置了四条边框线的颜色、宽度与样式。

4、块区标签中插入css样式：

代码举例：

<DIV style="TEXT-INDENT: 2em; COLOR: rgb(0,250,0); FONT-SIZE: 20px">行块区标签也是一套标签，用了其首标签，必须用其尾标签收尾。否则的话，网页就不能正常显示啦。</DIV>

上面的块区标签中用css样式设置了首行缩进、文字颜色与字号。

5、移动标签中插入css样式：

代码举例：

<MARQUEE style="LINE-HEIGHT: 50px; WIDTH: 680px; FONT-FAMILY: 黑体; BACKGROUND: url(http://image50.360doc.com/DownloadImg/2012/03/1806/22396667_14.jpg); HEIGHT: 50px; COLOR: rgb(0,0,250); FONT-SIZE: 25px">移动标签是有趣的标签，是神奇的标签，是制作网页很重要的一个标签。文字、图片、边框、音画，甚至整个网页，都可以应用移动标签让它们动起来。</MARQUEE>

上面的移动标签中用css样式设置了文字的行高、字体、字号与颜色，移动屏幕的宽度与高度。

6、表格标签中应用插入样式：

代码举例：

上面的表格标签中用css样式设置了背景图片、边框线宽度、样式与颜色、表格的宽度与高度。

7、多媒体标签中插入css样式：

代码举例：

上面的多媒体标签中用css样式设置了绝对定位的“起始点”，即：“居上值”与“居左值”；设置了图片的“宽度”与“高度”。

☆更多的“行内插入样式”的应用，请您多观察网络中各篇网页的代码。

作业：

一、填空：

1、css是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的（）。css是W3C组织制定的用于控制网页内容显示效果的一种（）。有的人把它叫做（）。css目前的最新版本是（）。

2、W3C组织是对网络标准制定的一个（）组织，是（）的缩写。万维网联盟中国办事处成立于（）年（）月（）日。现设址于（）。

3、css样式表的“行内插入样式”，就是在html的标签中插入（），把“css样式”作为html标签的一个（）应用。

二、简述css的作用。

三、简述css样式表与html代码的关系。

四、什么是css的继承性？

五、为什么把css叫做css层叠样式表？

六、写出css层叠样式的优先级顺序。

七、css样式表的应用方法大致有哪几种？

八、怎样辨别网页代码中是否应用了css样式表的“行内插入样式”？

九、熟悉本节讲解的各种标签中css样式表的“行内插入样式”。

“学而不思则罔，思而不学则殆。”这句话是孔子所提倡的一种读书学习方法。指的是一味读书而不思考，就会因为不能深刻理解书本的意义而不能合理有效利用书本的知识，甚至会陷入迷茫。而如果一味空想而不去进行实实在在的学习和钻研，则终究是沙上建塔，一无所得。告诫我们只有把学习和思考结合起来，才能学到切实有用的知识，否则就会收效甚微。

“春天没来”谨启

2014年6月7日于北京

“春天没来”编撰

2014年6月11日于北京