CSS技术的出现实现结构与表现分离

2020-05-05 07:49:48易采站长站整理

声明:声明主要是告诉浏览器怎样去渲染页面中的与选择符相匹配的对象。由属性与属性值组成,冒号相隔、分号结束的声明形式可以一个或者多个的组合而成。
属性:属性主要以一个单词的形式出现,并且都是CSS约定的,不可以自己定义。
属性值:属性值将根据属性改变形式,包括数值,单位等。
说理论一般都不容易让人记住,来举个例子吧。

现在我要将页面中的也就是body下的所有的文字设为红色,且要18号字体,加粗显示,可以这样写:


body
{
color:red; /*红色,以后我会专门写一下关于CSS中颜色的表现方面的东西*/
font-size:18px; /*大小18px*/
font-weight:bold; /*加粗,还有一种写法font- weight:700;这两个是相等的*/
}

怎么样很清楚吧,注释也够详尽了,但这样的做法有个弊端就是,注释很详尽,样式一多的时间,文件会很大。在HTTP请求非常奢侈的今天任何一点额外的负担都是要注意的。
所以我们下面可以再简一下,这样:


/*对body下所有的文字以红色加粗并以18像素显示*/
body{color:red; font-size:18px; font-weight:bold}

可能有的人认为这没什么,而且会带来阅读上的不便。但你想一下,我们现在做的一般互联网项目有哪个少于十个八个样式表的。不管什么东西在小的时候都无所谓,但一旦一多,就不得不考虑一些性能上的问题(当然关于CSS的执行效率方面的知识也有很多的学问,以后看情况也会介绍)。
这边就压缩CSS给大家两个有用的在线工具,可以作为参考一下,我平时一直在用非常不错:
http://www.cleancss.com/ 和 http://www.cssdrive.com/index.php/main/csscompressor
上面讲了半天,这会总结一下,所有的CSS代码都存在这么几个特点:
每个声明的属性和属性值之间都是用冒号隔开、分号结束。如:font-size:18px;font-weight:bold;
声明都是紧跟着选择符的,并被花括号包含着。如:body{…….}
属性与属性之间的空格可有可无。