《css样式表的学习.doc》由会员分享，可在线阅读，更多相关《css样式表的学习.doc（4页珍藏版）》请在金锄头文库上搜索。
1、代码:按照过程功能来划分1.reset all 重设所有标签属性,并定义重要标签属性. 定义全站风格、包括链接。monality 设置全站中常用的CLASS，分页功能、HOT等。3.layout 框架布局用。支持全屏和定宽。4.form 处理表单用，包括表单出错等。5.tab room 全站TAB6.grid room 画块级格子用7.table room 处理全站表格用8.sidebar room 右边样式用9.blank 根据人民币的面值，可组合成自已想要的空白高度。.全部应用于 已应用于listing页面。单个广告页。管理中心页等。首页还没有用。一个CSS可以满足全站，包括首页，list
2、ing页面。单个广告页。管理中心页等。 大小约12K例如：http:/ all*/* html filter: expression(document.execCommand(BackgroundImageCache, false, true);* margin:0; padding:0; list-style:none;bodytext-align:center; background:#FFF; font:12px/1.8 Verdana, Arial, 宋体;color:#666imgborder:none;h1,h2,h3,h4,h5,h6,input,textareafont-siz
3、e:12px; color:#000h1font-size:16px;h2font-size:14px;tableborder-collapse:collapse;border-spacing:0;fieldset border:none;smallfont-weight:normal; color:#666; font-size:12px;address,emfont-style:normal;font-weight:normal;addressborder-left:5px solid #CCC; padding-left:8px; margin:5px 0;captionfont-wei
4、ght:bold; text-align:left;strongcolor:#000form table margin:10px;form table tdmargin:10px;vertical-align: top; color:#000img.imgBorder padding:2px; background:#FFF; border:1px solid #EBEBEB; margin:2px;img.imgBlock display:blocka:link,a:visitedcolor:#000099;text-decoration:underline;a:hover,a:active
5、color:#000;text-decoration:none;/*commonality*/.clearclear:both; height:0; overflow:hidden.hiddendisplay:none;.leftfloat:left;.rightfloat:right;.grayBorderpadding:5px;border:1px solid #EBEBEB; margin-top:10px; clear:both;height:1%;.grayBgpadding:5px; background:#F5F5F5.transverse lidisplay:inline;ma
6、rgin-right:5px;.transverse li awhite-space: nowrap;.upright lidisplay:block;margin-right:0; float:none.pager lidisplay:inline; margin-right:5px;padding:0 2px;.pager .oncolor:#FF3300; .hot,.hot acolor:#FF6600.hotGreen,.hotGreen acolor:#7AC431.paddingLeft30 padding-left:30px.font12Px font-size:12px;.f
7、ont14Px font-size:14px; color:#000/*layout*/*width 950px*/#wrappermargin:0 auto; text-align:left;#header,#contentclear:both;text-align:left;width:950px; margin:0 auto; padding:0 8px;#search,#footerclear:both;基本的构成项目开发的前期你一定要为自己制定一套样式表规划文档.并且传至团队人员查看.一定要有整体流畅的思路，功能可以随时加。我曾就犯过错没规划好就开始写，结果到中期发现很糟糕。注释一定
8、要随手注释.1.基本样式 （写共用属性）2.大局面的布局样式 （用于写整体大框架的布局如header nav wrap footer）3.表单样式 （如果做过项目开发的人肯定清楚表单真是个繁琐而又简单的事.有很多复杂的样式要处理所以单独一个。）4.页样式 （我用来放置同一个区域的所有模块样式，如：用户操作系统，里面有很多页，而没个页又有不同的样式布局，我就会把每个功能模块在CSS里注释写功能。）如上是我基本的样式表组成结构，但实际开发中会遇到各种各样的问题，好比如这个站里有好多信息展示页，而这些信息展示页的形式都一样，无非是样式不一样，那么我就会在建立一个专门放置信息展示页的样式表。命名起来我
9、尽量的都是英文命名，为表现的更清晰话，命名我通常会用到下划线 如：列表信息 list_info (listinfo),当然有时候简单的拼音我就直接用，只要是清晰用起来就好.无论怎么做 一定要有自己一套流畅的思路.ps：忘说啥了，想起来在补.代码:按照功能来划分1.设置公用的文本样式 typography.css，管理字体列表 大小行高 样式粗斜。文本媒体2.设置公用的链接样式 link.css，管理四种链接l v h a 链接媒体3.设置公用的布局样式 layout.css，这个省略 布局代码4.设置公用的广告样式 flash.css， 适用于动画媒体5.设置公用的图片样式 image.css
10、 ，适用于图片新闻内容图片媒体6.设置公用的视频样式 video.css， 适用于 播放器 播放 视频音频7.设置公用的其他样式 other.css， 适用于 未归类的媒体8.设置公用的CSS hack hack.css， 适用于浏览器bug如果是播客视频，电影网站，或者是博客相册，图片网站 一般对image.css 和 video.css要求就比较高，使用次数多。通常情况下的普通网站 文字链接广告布局四类样式代码是必须的。至于写成一个css文件还是四个css文件，那就仁者见仁智者见智了。引用:cssxp建议您使用搭积木的方式来管理！团队协作 按照功能来划分的话，建议写成四个文件。如果是个人的
11、话，cssxp也建议您写成四个文件。理由是：4个文件合成一个文件，然后用topstyle之类的整理压缩css文件，再发布。1节省体积2代码混淆拥挤让模仿者难以下手，当然dw有个整理代码功能可以轻松还原了。3源码在自己手中，而发布仅是精简代码如果是一个文件拆分成四个的话，目前没有软件可以帮助您区别分类，或者是胜任此项工作。介绍完按功能划分之后（针对全站所有页面），再介绍按页面划分（针对站点每种类型页面）复制内容到剪贴板代码:按照页面类型来划分1.首页样式index.css 省略2.子页样式page.css 放置二级栏目样式，其中包括了混合文字链接广告布局样式3.文章样式article.css 放
12、置文章内容样式，包括文字图片视频广告布局样式等等4.评论样式comment.css 评论页面样式，可以参考网易评论5.代码样式code.css 技术教程类的网站通常需要放置代码，参考csdn博客 blueidea6.演示样式demo.css 省略7.站点中其他类型的页面样式 other-page.css当然还有其他的情形，笔者才疏学浅，就等您来添加上去了。按照页面来划分，一人专注一个|一类页面即可，就好像行政区域划分一样。介绍完了按页面类型划分之后，下面开始介绍按照指定页面 | 专题页面 内的布局块来划分复制内容到剪贴板代码:按布局来划分1.头部样式header.css 省略2.面包屑样式cr
13、umb.css 省略3.广告样式ad.css 省略4.左列样式left.css （一行三列布局，很容易扩充成三行三列布局）5.中列样式middle.css 省略6.右列样式right.css 省略7.第一行样式 row1.css （三行三列布局第一行样式）8.第二行样式 row2.css （三行散列布局第二行交互样式altnate.css）8.第三行样式 row3.css （三行散列布局第三行样式 可以同第一行，或者另起样式）9.友情链接样式 friendlink.css | blogroll.css 省略10.新闻公告样式 anounce.css 省略11.底部版权样式footer.css 省略12.页面中其他的区域块 unkown-zone.css复制内容到剪贴板代码:以上三中样式分类管理是按照一、全站所有页面 all page；二、某一类型页面多个页面category page；三、特定页面一个页面specific page。这三中范围来划分的了。体验css 提示您在设计css的时候先做好计划，看是要做全站的页面，还是某个专题页面了。根据不同的需求来选择不同的方式来管理。tips:1.搭积木松耦合的方式最为灵活多变，分开来写
