CSS规化
网上划分:http://www.style5.cn/xhtml-css/css-layout-experience.html
我的CSS的划分:
一:简单划分(规模小时)
整站布局:layout.css /*子模块如有特殊布局,可以通过不同的名称写在一起。*/
公用样式:pubic.css /* 定义些公用字体,颜色,超链接等。*/
模块样式:module.css /*也可将其拆成子模块。如news.css,download.css等等。*/
index.css /*主页也算一个模块。*/
二:详细划分(规模较大)
a)
通用样式:
整站布局:layout.css /*子模块如有特殊布局,可以通过不同的名称写在一起。*/
公用样式:pubic.css /* 定义些公用字体,颜色,超链接等。*/
表单样式:form.css /*特殊表单样式可在表内用名称区别开。*/
区块样式:
头部区域:header.css /*特殊模块,用名称区别。各个模块都定义在一起*/
侧边栏区域:sidebar.css
主体区域:main.css
底部区域:footer.css
可以在发布的时候把这些样式组合在一起。
为了方便,使用一个CSS来包含,如global.css中使用@import url("xxx.css")来引用区块样式
b)
通用样式:
整站布局:layout.css /*子模块如有特殊布局,可以通过不同的名称写在一起。*/
公用样式:pubic.css /* 定义些公用字体,颜色,超链接等。*/
区块样式:
头部区域:header.css /*模块样式一样,使用同一个,特殊模块再另外生成一个header.css*/
侧边栏区域:sidebar.css
主体区域:main.css
底部区域:footer.css
表单样式:form.css
各模块(主页也是个模块)可以通过@import url("xxx.css")来引用区块样式。这样可以容易实现各模块的自定义。
例:
假设有三个模块新闻,下载,留言,加上主页就是4个。
下载模块的头与其它不相同;主体区域,新闻与留言相同,其它都不相同;底部、表单都一样;
新闻,留言没有侧边栏。
css\download\header.css
css\download\main.css
css\index\main.css
css\header.css
css\main.css
css\sidebar.css
css\footer.css
css\form.css
于是就有
index.css内容为
@import url("css\header.css");
@import url("css\index\main.css");
@import url("css\sidebar.css");
@import url("css\footer.css");
@import url("css\form.css");
news.css内容为
@import url("css\header.css");
@import url("css\main.css");
@import url("css\footer.css");
@import url("css\form.css");
download.css内容为
@import url("css\download\header.css");
@import url("css\download\main.css");
@import url("css\sidebar.css");
@import url("css\footer.css");
@import url("css\form.css");
guestbook.css内容为
@import url("css\header.css");
@import url("css\main.css");
@import url("css\footer.css");
@import url("css\form.css");
在发布的时候是不是可以不用 @import,而是把各个部分合到一起,减少向服务器请求的次数。
但是在网上看到有人说,单个css文件不能超过30K,影响浏览器解释CSS。
所以要视具体情况而定。
我的CSS的划分:
一:简单划分(规模小时)
整站布局:layout.css /*子模块如有特殊布局,可以通过不同的名称写在一起。*/
公用样式:pubic.css /* 定义些公用字体,颜色,超链接等。*/
模块样式:module.css /*也可将其拆成子模块。如news.css,download.css等等。*/
index.css /*主页也算一个模块。*/
二:详细划分(规模较大)
a)
通用样式:
整站布局:layout.css /*子模块如有特殊布局,可以通过不同的名称写在一起。*/
公用样式:pubic.css /* 定义些公用字体,颜色,超链接等。*/
表单样式:form.css /*特殊表单样式可在表内用名称区别开。*/
区块样式:
头部区域:header.css /*特殊模块,用名称区别。各个模块都定义在一起*/
侧边栏区域:sidebar.css
主体区域:main.css
底部区域:footer.css
可以在发布的时候把这些样式组合在一起。
为了方便,使用一个CSS来包含,如global.css中使用@import url("xxx.css")来引用区块样式
b)
通用样式:
整站布局:layout.css /*子模块如有特殊布局,可以通过不同的名称写在一起。*/
公用样式:pubic.css /* 定义些公用字体,颜色,超链接等。*/
区块样式:
头部区域:header.css /*模块样式一样,使用同一个,特殊模块再另外生成一个header.css*/
侧边栏区域:sidebar.css
主体区域:main.css
底部区域:footer.css
表单样式:form.css
各模块(主页也是个模块)可以通过@import url("xxx.css")来引用区块样式。这样可以容易实现各模块的自定义。
例:
假设有三个模块新闻,下载,留言,加上主页就是4个。
下载模块的头与其它不相同;主体区域,新闻与留言相同,其它都不相同;底部、表单都一样;
新闻,留言没有侧边栏。
css\download\header.css
css\download\main.css
css\index\main.css
css\header.css
css\main.css
css\sidebar.css
css\footer.css
css\form.css
于是就有
index.css内容为
@import url("css\header.css");
@import url("css\index\main.css");
@import url("css\sidebar.css");
@import url("css\footer.css");
@import url("css\form.css");
news.css内容为
@import url("css\header.css");
@import url("css\main.css");
@import url("css\footer.css");
@import url("css\form.css");
download.css内容为
@import url("css\download\header.css");
@import url("css\download\main.css");
@import url("css\sidebar.css");
@import url("css\footer.css");
@import url("css\form.css");
guestbook.css内容为
@import url("css\header.css");
@import url("css\main.css");
@import url("css\footer.css");
@import url("css\form.css");
在发布的时候是不是可以不用 @import,而是把各个部分合到一起,减少向服务器请求的次数。
但是在网上看到有人说,单个css文件不能超过30K,影响浏览器解释CSS。
所以要视具体情况而定。