CSS 文档架构——便于读取

1. 一般性样式

a)              主体样式

b)             Reset样式

c)              链接

d)             标题

e)              其他元素

2. 辅助样式

a)              表单

b)             通知和错误

c)              一致的条目

3. 页面结构

a)              标题、页脚和导航

b)             布局

c)              其他页面结构元素

4. 页面组件

a)              各个页面

5. 覆盖

时间: 2024-10-30 04:03:54

CSS 文档架构——便于读取的相关文章

CSS文档优化

首先了解下CSS的渲染逻辑,它是从标记的最后一位开始搜索的,例如:.myclass li a,首选它会遍历所有的<a>,然后看哪些<a>之前有<li>,然后再看哪些<li>之前有.myclass. 所以:1.层级太多会增加CSS渲染的工作量. 如下: 除此之外,还有哪些可以优化的呢? 2.图中样式的每个属性独占一行,行数越多,文件的大小就越大,而且找起来也不好找,进入疯狂的滚轮模式. 3.很长很长的链式定位,.myclass li a span,让不熟悉的同

css文档之盒模型阅读笔记

前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如它的颜色.背景.边框方面--及这些盒子的位置. 在CSS中,这些矩形盒子用 标准盒模型 来描述.这个模型描述了一个元素所占用的空间.每一个盒子有四条边界:外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内

对xml文档数据的读取

在短暂的C#程序开发过程中,我发现使用xml文档来存储一些数据还是很不错的!当然有了数据当然要读取,在开发过程我遇到了两种对xml文档数据进行读取的方法. 就是最基本的利用System.Xml命名空间,通过各个节点来获得xml中的数据. 例如下面的Xml数据: <?xml version="1.0"?> <BookStore> <book> <title>C#入门经典</title> <author>Karli W

CSS文档流、块级元素、内联元素

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流 将窗

完美CSS文档的8个最佳实践

  在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为CSS编写文档可以为你的项目提供很多好处:促进更好的代码实践.降低新员工的上手难度.在本文中,我将说明编写CSS文档的优点,并分享我认为的最佳实践.让文档为你工作,而不是阻碍你的工作. 1. 制定基本规则 当你和你的团队不清楚CSS文档具体需要编写哪些内容.文档应该如何工作时,你很难跟上编写CSS文档

用python从符合一定格式的txt文档中逐行读取数据并按一定规则写入excel(openpyxl支持Excel 2007 .xlsx格式)

前几天接到一个任务,从gerrit上通过ssh命令获取一些commit相关的数据到文本文档中,随后将这些数据存入Excel中.数据格式如下图所示 观察上图可知,存在文本文档中的数据符合一定的格式,通过python读取.正则表达式处理并写入Excel文档将大大减少人工处理的工作量. 1. 从gerrit获取原始信息,存入文本文档: $ssh –p 29418 <your-account>@192.168.1.16 gerrit query status:merged since:<date

CSS文档流

文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧.文字内容会围绕在浮

CSS 文档流布局

文档流布局的概念: 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是 浮动,绝对定位, 固定定位. 但是在IE6中浮动元素也存在于文档流中. 详细说明: 比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也

css 文档流中块级非替换元素水平区域的计算规则(1)

最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的时候,虽然凭感觉能猜出个大概,但是总是有点不是很靠谱.直到最近看到这一本书,觉得总觉得挺好的. 首先要知道,元素除了通过display来指定block.inline.inline-block这一些属性之外,还有一种能在的特性--替换还是非替换. 替换元素:像img.video.canvas等稳定种指定的内容只