传说中的裸奔节--认识及体验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的标准结构,以及什么是选择器,什么是声明.分别有什么用,怎么用?
    
    请听下回分解...............................
 
 
 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值