网站地图 | 联系我们 | 咨询热线:13999201770
您现在的位置: 新疆二域设计网络公司 >> 网页设计学院 >> 色彩理念 >> 网页理念 >> 正文

CSS样式表的规划,应该可以说是网站建立初期的一个比较基础而又重要的要点,那如何才能达到合理呢??

希望所有的朋友能够一起加入到讨论中来,可以说经验,可以说设想,可以说理论……可以从微观的单个文件的某段讲起,也可以从宏观的整站所有样式表讲起

作者:tshjds

呵呵;这个话题不错;支持一下;
我一般写样式的时候都写上注释;很多通用的样式独立一个样式表;比如:建一个ALL.css;
其他的每个页面有自己的样式;
我习惯这样书写样式这个有的也是借鉴别人的书写方式;感觉很不错;就也学习了.这样写起来虽然比较忙烦了点;但是很规范找起来也方便很多;

CODE:

body,a,strong,input,select,button,h1,h2,h3,h4,h5,h6,h7 {font:12px "Tahoma","宋体","Arial","QQ 328088873",sans-serif;}/*12px大,字体优先:Tahoma,然后:宋体,Arial.族科:sans-serif*/
html,body {height:100%;}/*设置浏览器高度为100%*/
body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 {padding:0;margin:0;}/*设置内外补丁为0*/
div,p {display:block;}/*所有div,p为块元素*/
ul,ol,dl {list-style:none;}/*所有项目符号显示无*/
img {border:0;}/*所有图片边框无*/
a {text-decoration:none;}/*所有链接无修饰[上,下划线,虚线...]*/
a:hover {text-decoration:underline;}/*所有链接鼠标放上时为下划线*/
button {cursor:pointer;}/*所有按钮鼠标放上时为手型标志*/
/* ================== 索引 ====================
#top .top_left ------------ 会员登陆
#top .top_right ----------- 分站入口
#nav ---------------------- 网站导航
============== 自定义常用样式 ==================
.no ----------------------- 隐藏对象
.indent ------------------- 首行缩进
.ul_1 --------------------- 列表设置(红)
=================== 链接 ======================
a.a333 -------------------- 深灰#33333
a.a1 ---------------------- 初始有下划线,经过时消失
================== 子链接 =====================
.b333 a ------------------- 深灰#33333
.b1 a --------------------- 初始有下划线,经过时消失
============================================== */
/* 全局设置:修饰 */
body { text-align:center; color:#333; }
#centent { border:solid #7b7b7b; }
/* 布局 */
#centent { width:800px; margin:0 auto; text-align:left; border-width:0 1px; }
#nav,
#lm,
#sn,
#links,
#copy_right { clear:both; }
/* 自定义常用样式 */
.no { display:none; }
.indent { text-indent:2em; }
.ul_1 li { background:url("../i/all/017.gif") no-repeat 0 5px; height:21px; padding-left:8px; }
.ul_3 li a,
.ul_4 li a { font-size:14px; }
.line_180 { line-height:180%; }
a.a333 { color:#333; }
a.a666 { color:#666; }
a.aab0001 { color:#ab0001; }
a.a001bc0:hover { color:#ab0001; }
a.a1 { text-decoration:none; }
a.a1:hover { text-decoration:underline; }
.b333 a { color:#333; }
.b666 a { color:#666; }
.b1 a { text-decoration:none; }
.b1 a:hover { text-decoration:underline; }
.b2 a { text-decoration:underline; }
.b2 a:hover { text-decoration:none; }
/* 通用栏目:修饰 */
#top { border:solid #c2c2c2; background:#efefef; }
/* 布局 */
#top { min-width:802px; height:33px; border-width:0 0 1px; }
#top .top_left h2,
#top .top_right h2 { display:none; }


作者:greengnn

规划站点CSS属于开发模式的范畴,可以在开始的时候规划,也可以在最后完成之后整理。

基本组成:
1.公用css组件
全局css,公用css类,css模块组件
2.布局
页面的基本布局
3.主题
页面UI
4.hack
浏览器兼容
ie6 ie5 ie7之类的条件注释

书写规范:
命名可以使用中间“-”,"_"符号连接,如text-box,text-content,text_box,或者大小写“驼峰”式书写,textBox,textContent等。
注释很重要,注释可以分为三级,大类注释用于css块的划分,如header , container , footer,二类注释,大类下面的局部模块注释,三类注释一个选择符内注释,用于一些特殊效果的注释或者hack注释。
书写格式,可以采用横排缩进的方式,显示出层级关系。
css文件的分布,如果字节小的话,可以尽量压缩降低并发连接数,如果字节过大,可以分割,防止下载速度太慢,影响样式加载。这些就是具体问题具体对待了。比如搜索引擎和门户首页这种访问量极大的页面最好将css写入页面内部。

至于几个著名的CSS framworks的使用,需要谨慎,因为CSS库本身会很大。


以上是我的一些看法,希望大家积极讨论

作者:z3333426

做好注释。

不过我CSS里面都没什么注释,
直接搜索的。

一般首页是改的最多的。首页的样式要单独出来。就算是共用的样式都得独立出来。

以前在asp开发的时候
所有的CSS都是一个文件夹下面
有一个共用的default.css 里面放共用的信息。比如td p body 分页效果 什么的

然后再有一个css专门放层自己的ID样式然后 @import default.css

现在在.net里面 每个主题也是独立的。

好处就是想改就改,想删就删,不会影响到其他的。但是样式表体积是大了点
但是加载不会缓慢。修改起来也不怎么麻烦。
唯一痛苦的就是换皮的时候要修改很多次。

<div id="***"><ul><li> -------

最好别定义这个ID下面的UL
<ul id="****">

碰到过很多这样的麻烦。
也就是别定义大容器里面的常用元素。。

类似PJ那种还是不错的,一段时间参考的就是PJ的样式分布。
伪类 单独一块。

以前项目还有打印的, 那打印又得独立一个出来 ......

其他的就习惯问题了。

作者:Satellite

css方面我不是权威,我从服务器缓存这方面来说一些css的使用体会
一般大型的网站都会设置服务器缓存 一般像css文件可能会设置成几个月 几天 几年的都有
这个时候会出现一个问题,就是万一你页面的结构变了,css文件你也更新了,但是在用户这边由于缓存的缘故,css文件并没有及时更新,这样页面就可能会乱。
这个时候就要注意了,一般来说,如果更改了页面结构,最好也更改一下引用的css文件名称,这样浏览器就不会从缓存里面读取css了,而是会去服务器上读最新的css。
这个问题有很多的解决方法,这里就不一一例举了。

作者:261509559

基本的构成

项目开发的前期你一定要为自己制定一套样式表规划文档.并且传至团队人员查看.一定要有整体流畅的思路,功能可以随时加。我曾就犯过错没规划好就开始写,结果到中期发现很糟糕。

注释一定要随手注释....

1.基本样式 (写共用属性)
2.大局面的布局样式 (用于写整体大框架的布局如header nav wrap footer)
3.表单样式 (如果做过项目开发的人肯定清楚表单真是个繁琐而又简单的事.有很多复杂的样式要处理所以单独一个。)
4.页样式 (我用来放置同一个区域的所有模块样式,如:用户操作系统,里面有很多页,而没个页又有不同的样式布局,我就会把每个功能模块在CSS里注释写功能。)

如上是我基本的样式表组成结构,但实际开发中会遇到各种各样的问题,好比如这个站里有好多信息展示页,而这些信息展示页的形式都一样,无非是样式不一样,那么我就会在建立一个专门放置信息展示页的样式表。

命名起来我尽量的都是英文命名,为表现的更清晰话,命名我通常会用到下划线 如:列表信息 list_info (listinfo),当然有时候简单的拼音我就直接用,只要是清晰用起来就好.

无论怎么做 一定要有自己一套流畅的思路.

ps:忘说啥了,想起来在补.....

作者:未知 | 文章来源:蓝色理想 | 更新时间:2007-7-23 15:00:36

  • 上一篇文章:

  • 下一篇文章:
  • 相关文章:
    实用脚本10个
    与用户体验相关的名词解释和英文缩写
    转载整理:谈用户体验,别落下商业利益
    网站最令人讨厌的几个疯狂用户体验
    如何让网民爱上你的网站
    良好用户体验的网站主页需具备12个特征
    CSS 缩写技巧…

    色彩理念
    网页制作
    美工图形
    网络编程
    数 据 库
    网站运营
    ::最近更新::
    ·兼容IE6 IE7 Firefox的浏览…
    ·框架页尽量在网页设计制作…
    ·从网站联盟到阿里妈妈--中…
    ·2007年度最不受站长欢迎的…
    ·一个源码下载站站长的网站…
    ·网站设计优劣评估的步骤和…
    ·韩国网站设计风格
    ·关于图片防盗链
    ·了解设计需求是视觉设计的…
    ·服务器托管知识总结
    ·网站设计公司创业经验谈
    ·编码大全--网页中的语言文…
    ·品牌的力量---谈网站品牌建…
    ·编码utf-8乱码问题集锦
    ·网站建设和网页制作中的中…
    ::推荐阅读::
    ·网络公司错了 设计师也错了…
    ·网页设计制作中的形式美的…
    ·合理做好网站导航结构---网…
    ·网站建设步骤之网页设计制…
    ·网页制作开发中合理制定目…
    ·网站建设和网站设计的20个…
    ·网站建设项目流程概述
    ·学习网站建设技术CSS布局心…

    关于我们 | 网站建设 | 服务帮助 | 联系我们 | 网页设计学院 | 实用工具 | 友情链接 | 新疆专题
    版权所有 © 2007 新疆二域设计网络公司 www.xjcncn.com All Rights Reserved
    网站建设总机:0991-4811639 传真:0991-4842803 ;咨询热线:13999201770. E-mail:xjcncn@gmail.com
    MSN :xjcncn@hotmail.com ; QQ:359312 ;地址:新疆乌鲁木齐市友好E时代公寓B座708 邮编:830000