位置: 编程技术 - 正文

CSS样式表规划与管理的经验总结(css样式表规则由什么组成)

编辑:rootadmin
彻底放弃表格布局,使用xhtml+CSS建站也已经有一年多了。一年多的实践也积累了一定的经验,现在写这篇文章来总结一下。在使用xhtml+CSS建站的过程中有一个比较关键的问题:网站的CSS样式表规划与管理。 我的CSS管理进化史   在最初使用CSS来控制网站样式的时候,并不清楚CSS管理规划之类的东西,所写的CSS基本上都是按照需要,随时添加,刚开始还不觉得有什么不好,但是后来越加越多,越改越乱,虽然有一些注释,但到最后还是变得让我自己看着都头疼。那个时候,一个网站所有的CSS都在一个文件中,没有规划,并且排序也没多少规律,于是只能在html页面中找到class的名称,然后在上千行的css代码中搜索自己想要的那个。   过了一段时间,思考总结之后,我对站点的CSS样式表进行了初级的规划。在样式表中初步划分了三个区域: Example Source Code [www.css.com] base 样式表 layout 样式表 class 样式表   其中“base 样式表”用来描述一些公共性的东西,比如全局性的body、a样式等;“layout 样式表”用来描述具有唯一性的id布局,属于整个页面的框架式布局;“class 样式表”用来描述剩下的class类的样式,这类样式分为可复用样式和通常只在特殊页面出现一次或几次的样式。   按照这种方法布局的确提高了不少的效率,但这种方式只适合中小型网站,在大型网站上应用还是略显单薄,至少在多人协作的时候并不能达到最佳效率。于是就有了下面总结的较完善的CSS管理规划模式。 较完善的CSS样式表管理模式   step1:个人或者团队需要将主要页面的布局用DIV图的模式按层次画出来,这个DIV图就是在设计原型的基础上,将页面中的主要模块使用的ID名、class名标注出来,方便建立维护文档以便将来进行修改与升级。   step2:划分CSS结构,建立全局css及各模块css。在html页面中引用全局css,在全局css中引用各模块css。 Example Source Code [www.css.com] 建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式。 在全局样式中通过“@import url(”xxx.css”);”引入模块css。   关于模块CSS的划分,我比较喜欢类似wordpress中的css划分方式,一般情况下通过类似下列结构划分: Example Source Code [www.css.com] layout.css /* 整站布局 */ public.css /* 公用组合样式 */ header.css /* 页面头部区域样式 */ sidebar.css /* 侧边栏区域样式 */ main.css /* 主体区域样式 */ footer.css /* 底部区域样式 */ index.css /* 首页区域特有样式 */ form.css /* 表单类样式 */   解释一下,layout.css负责整个网站的布局,比如#header, #footer等布局的基本位置及样式设计;public.css负责一些公用样式定义,因为一个class中可以使用class=”navbar fontpx”这种利用中间空格分隔的方法来应用多个class样式,所以可以定义一些比较常用的或者在特殊情况下需要修改的公用class,方便局部微调;header.css、sidebar.css、footer.css等模块是对应头部、侧边栏、底部模块的css样式表,可以根据网站的具体需求来增减模块;index.css是一些首页特有元素的css,因为首页的特殊性,我们在设计css的时候通常对首页进行特殊处理,一般情况下,首页是css最复杂的一个页面,有必要对首页的独有css元素进行归类放置,也可以不用@import引入index.css,而把它单独放到首页引用;form.css是表单元素的样式表,表单虽然不难,但控制起来还是比较麻烦的,单独放到一个css文件里方便控制,当然,类似的其他元素你也可以这么处理。   step3:在各个样式表文件中写入样式。

推荐整理分享CSS样式表规划与管理的经验总结(css样式表规则由什么组成),希望有所帮助,仅作参考,欢迎阅读内容。

CSS样式表规划与管理的经验总结(css样式表规则由什么组成)

文章相关热门搜索词:css样式表及其作用和种类,css样式表及其作用和种类,css样式表规则定义,css样式表技术,css样式表规则由什么组成,css样式表规则定义,css样式表及其作用和种类,css样式表规则由什么组成,内容如对您有帮助,希望把文章链接给更多的朋友!

CSS标签切换代码实例教程 比较漂亮 我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容。与此同时我们发现一些问题,内容的简单排列总使页面很长。滚屏很多

CSS的margin边界叠加深度剖析图文演示 边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇时,它们将形成一个边界。

CSS中Float(浮动)相关技巧文章 Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然

标签: css样式表规则由什么组成

本文链接地址:https://www.jiuchutong.com/biancheng/375141.html 转载请保留说明!

上一篇:CSS注释、命名、继承性、样式排序等CSS技巧的小结(css里注释)

下一篇:CSS标签切换代码实例教程 比较漂亮(标签栏切换代码js)

  • 税控盘抵扣税款
  • 哪些情况下可以无偿提供法律援助
  • 城建税是什么税率
  • 企业流动资产周转率下降的原因
  • 个体户没做过账怎么办
  • 对公账户余额和实际不符
  • 计入存货成本的税费
  • 小规模报企业所得税吗
  • 应收票据背书转让分录
  • 附加税费计税依据
  • 企业筹办期间发生的开办费会计分录
  • 企业外部风险包括
  • 支票承兑是什么意思要带什么材料
  • 会计凭证可分为哪三类
  • 不再认证时段内
  • 税局代开的法律顾问费能否抵扣
  • 出口货物退税率查询
  • 企业合并以外
  • 机械设备增值税税率
  • 没有三方协议怎么缴纳社保
  • 企业所得税税率2023年最新税率表
  • 资本公积转增股本会计处理
  • 未确认融资费用摊销额怎么计算
  • 企业开办费摊销期限的税法规定
  • 出口退税率为0%退税收入怎么算
  • 一个产品要有什么认证
  • 建筑企业自持商是指
  • 事业单位收受礼品怎么处理
  • 长期借款利息如何做账
  • 0x00000024蓝屏怎样解决
  • php tr td
  • cpqdfwag.exe是什么进程 能结束吗 cpqdfwag进程查询
  • 在途物资什么类科目
  • vue ui怎么用
  • Maximum call stack size exceeded错误
  • PHP:imagecreatefromgd2()的用法_GD库图像处理函数
  • 阳光照耀下的人
  • 微信小程序开发完整项目
  • 服务器部署环境
  • it云化
  • 关于存货跌价准备
  • java一天速成
  • 不动产投资应该怎么做账
  • 附加税费怎么计算
  • 稳岗补贴缴纳社保个人部分还是公司部分
  • 暂估管理费用跨年账务处理
  • 公司社保外包了,没给我社保卡怎么办?
  • 公司对员工的罚款有什么标准
  • 无形资产摊销的会计科目
  • 开票后收不回来款怎么办
  • 未取得增值税发票措施有哪些
  • 火车票抵扣进项税怎么申报
  • 为什么规定视同销售?
  • 如何计提五险一金比例
  • mysql常用命令语句
  • mysqlw3school
  • 详谈是什么意思
  • ubuntu配置yum
  • acer笔记本重装系统教程
  • windows无法运行
  • xp局域网文件共享设置
  • msoia.exe是什么程序
  • win10系统关闭安全中心
  • 欢迎使用来电提醒业务,本次呼叫将以点对点
  • 安卓手机键盘怎么调出来
  • cocos2d schedule
  • Node.js中的全局对象有
  • 你miu的
  • node.js可以跨平台吗
  • 安卓实现代理
  • Python的requests网络编程包使用教程
  • 深圳龙岗有几个街道
  • 正外部性与负外部性的定义
  • 吉林省耕地占用税实施办法
  • 车辆购置税完税证明有用吗
  • 深圳税务局实名注册
  • 郑州市区税务局
  • 黄金消费税如何征收
  • 进项税发票过期了怎么办
  • 江苏税务局人工电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设