一个网页一般由3部分组成:HTML、CSS和JS,其中html负责数据内容,CSS负责样式外观,JS负责行为,从而有效地将数据、样式和行为隔离,降低耦合度。
1.1 CSS的概念
CSS(CascadingStyle Sheet),中文为层叠样式表,用来控制网页样式并将样式外观和网页内容分离的一种标记语言。1996年由W3C组织审核并推荐。一句话概括CSS的功能就是让网页更好看。
1.1.1 传统HTML的缺点
- 维护困难
举个例子:
<h1><fontcolor=”red”>css概念</font><h1><br/>
<h1><fontcolor=”red”>css概念</font><h1><br/>
<h1><fontcolor=”red”>css概念</font><h1><br/>
现在需要将上面的字体颜色改成蓝色,则需要改3处。假如整个页面字体颜色都要改呢?甚至是多个页面都要改呢?很难想象,这个工作量多么艰巨。
- 标记不足
HTML标记基本上都是为了内容服务的,而关于样式的标记很少
- 网页过胖
由于没有统一的样式标记,导致网页传输时占用了较大带宽
- 定位困难
缺乏灵活的定位标记,而只能通过table标签进行定位,造成后期维护困难
1.1.2 CSS开发工具
notepad
dreamweaver
notepad++
aptana studio
myeclipse + aptana插件
推荐aptana studio或myeclipse+aptana插件,aptana具有非常友好的提示功能。
1.1.3 浏览器兼容性
不同的浏览器对CSS的支持力度不一样,请写完CSS后,一定要在各个浏览器上进行调试,以满足要求。
1.2 CSS的使用
在HTML页面中使用CSS有4种方式,分别为:行内样式、链接式、内嵌式、导入式。
CSS采用用/* */进行单行或多行注释。
1.2.1 行内样式
行内样式直接在标签中使用style属性,如下所示:
<pstyle=”color:red”>CSS行内样式</p>
这种方式有如下两个缺点:
-
-
-
-
不符合W3C规范(内容、样式、行为三者分开),并且代码乱,不好维护。
代码冗余,相同的style得写多次,不可复用。
-
-
-
1.2.2 内嵌式
内嵌式将CSS代码写在标签<style>和</style>之内,如下所示:
<head>
<style type=”text/css”>
<!—
P{
color:red;
}
-->
</style>
</head>
其中<!-- à是为了解决某些浏览器不支持CSS的问题;<style>css代码</style>一般放在head标签内。
这种方式仅适合于一个页面特殊样式的设置,但如果多个页面有同样的样式就不满足了。
1.2.3 链接式
链接式将CSS代码写到一个单独的CSS文件中,然后通过link标签将CSS文件链接到HTML文件中,如下所示:
<head>
<link href=”1.css” type=”text/css” rel=”stylesheet”>
</head>
1.css文件内容
P{
color:red;
}
这种方式是目前最常用的使用方式,它的优势在于:内容和样式完全分离,可以将一个css文件应用于多个页面,可以在浏览器本地缓存。不足之处:太多的css文件下载会导致服务器连接压力增大。
1.2.4 导入式
导入式将CSS代码写到一个单独的CSS文件中,然后通过import将CSS文件导入到HTML文件中,如下所示:
<head>
@import1.css
</head>
1.css文件内容
P{
color:red;
}
导入方式有如下6种方式:
@import1.css
@import‘1.css’
@import“1.css”
@importurl(1.css)
@importurl(‘1.css’)
@importurl(“1.css”)
可以在一个HTML文件中用导入式导入多个CSS文件,也可以在某个CSS文件内部导入其它的CSS文件。
1.2.5 各种方式比较
若四种方式同时使用,那么他们都会生效果;
若碰到相同的属性,且都修改了同样属性,后定义的生效;
如何选择使用内嵌式还是链接式?
内嵌式虽然没有解决多个html页面服用一个css样式的问题,但是浏览器在加载的时候只需要加载这一个css样式,速度比较快。而链接式,若一个html页面用多个css样式,那么在浏览器加载的时候每个css文件都得单独下载,速度相对内嵌式较慢。根据实际情况考虑,若追求的是速度,对代码复用问题不较真,推荐使用内嵌式若追求的是代码的可服用,那么就得舍弃一点速度,来使用链接式来嵌入CSS样式。
如何选择使用链接式还是导入式?
链接式是将CSS文件下载完成后再将HTML内容和CSS样式一起渲染。而导入式是先渲染HTML,再渲染CSS,因此在网络不好的情况下,会让用户看到一个毫无美感的页面。这也是现在大部分网站的CSS都采用链接方式的最主要原因;
导入样式可以避免过多页面指向一个css文件。当网站中使用同一个CSS文件的页面不是非常多时,这两种方式在效果方面几乎是没有不同的,但网站的页面数达到一定程度时(比如新浪等门户),如果采用链接的方式可能就会使得由于多个页面调用同一个CSS文件而造成速度下降,但是一般页面能达到这种程度的网站也会有资本用最好的硬盘,所以这方面的因素也不用怎么担心。