传说中的裸奔节--认识及体验CSS
首先在这里强调一下为什么要出这个类别的文章:
目前得到国内大部分网工重视的网络应用技术,要么服务系统\要么路由交换\要么网络监控管理\要么网络安全. 想要说的是除了这些技术,值得网工去发觉的 还有我们的WEB技术.WEB技术并不是程序员的专利.因为我们搭建的web服务器跑什么样的web站点最安全高效,我们才是最清楚的人.因为从低层的比特流\数据 帧\数据报文\ 到上层的数据流.的服务的搭建,我们最清楚其云做过程.
好了,再说一个具有征服力的例子:前不久一个学生毕业了,去一家外企面试 100多人去竞争的职位,最终他得尝所愿了.之后很兴奋的告诉我,成功的秘诀是自己会一点web的基础维护和制作技术,并且很清楚html结构.
-------------------------------------今天的重头戏上场--------------------------------------------------
什么是CSS? 层叠样式表到底是什么有什么用?
这个要从CSS 裸奔节说起.
每年的4月9日 也就是我们经常看到的
CSS Naked Day .
每年到这个日子就会看到大大小小的网站、Blog去掉CSS样式表，让网站”裸奔”，故这天也叫”CSS裸奔节”。
这个日子是为了推广CSS及XHTML等W3C标准页面代码而设的，更能突出网站在没有CSS的情况下代码结构是不是够清晰.
标准问题就需要标准化组织来定义,更重要的是需要我们来执行.
而W3C (
The World Wide Web Consortium)就是这样的组织.
那么CSS 有什么样的作用呢?
我们会发现CSS就象衣服一样,甚至象域环境中的策略一样,可以定义一个站点中每个页面是否漂亮.是否能够让浏览者驻足.
而更重要更强大的是,CSS可以实现页面内容和样式的分离,从而减少html页面制作时的大小,并且从定义的角度统一整个网站的风格,并且大大减少了html设计人员的工作量,而且从职位分工上讲web的前台设计和后台程序设计 彻底的分开.成为目前web2.0时代的主流前台设计手段.
下面写一段简单的CSS代码来体验一下CSS的好处:
[方法一]
首先看一下没有CSS的html代码:
----------------------------页面中的那句话被font标记定义了颜色-----------------------------------------
<html>
<head>
<title>没有CSS的HTML</title>
</head>
<body>
<p><font color="red">大家好!这个是没有CSS的html页面!</font></p>
</body>
</html>
----------------------------页面中的那句话被font标记定义了颜色-----------------------------------------
[方法二]
再来看一下用CSS 定义后的页面:
------------------------在CSS文件中用CSS语句定义了这句话的颜色------------------------------
p{
color:red
}
------------------------在CSS文件中用CSS语句定义了这句话的颜色------------------------------
------------------------而HTML页面中只需要写内容------------------------------------------------------
<html>
<head>
<title>有CSS定义的HTML</title>
</head>
<body>
<p>大家好!这个是没有CSS的html页面!</p>
</body>
</html>
------------------------而HTML页面中只需要写内容------------------------------------------------------
现在来对比两中方法,其中用CSS定义的页面实现了内容和样式的分离.以后想更改页面样式,只需要单独修改CSS文件就好:)
接着再来看这段CSS语句:
p{
color:red
}
其中"p"(选择器的一种)代表下面html页面中的p(段落)标记,而"{color:red}"表示针对p标记所做的声明.
至于CSS的具体写法,以及CSS的标准结构,以及什么是选择器,什么是声明.分别有什么用,怎么用?
请听
下回分解...............................