关于CSS如何写的总结（Basic）

最新推荐文章于 2024-11-08 13:57:42 发布

chuozou0913

最新推荐文章于 2024-11-08 13:57:42 发布

阅读量127

点赞数

文章标签：后端 c/c++

原文链接：https://my.oschina.net/pangyangyang/blog/214901

版权

全局观念

• 首先，需要明确自己想要的效果，有草图或者参考物，能够把整体框架把握住。
• 在书写css之前，应该完成html的文档。到这里就应该完成了文档结构的构思，换句话说想清楚了如何布局。
• 审视html文档，确定不存在任何多余的元素，不缺少任何必须的元素。
• 我倾向于先横线后纵向地把页面切分成大大小小的“盒子”，比如一个“品”字的页面可以划分为4个“盒子”——上面一个，下面一个容器盒子，容器内两个小盒子。

样式重置

重置浏览器预设的各种效果：body、html、ul等边框、缩进、margin等。
• 最基本的html、body、h1~6、div、span、ul、li、ol、dl、dt、dd、table、tr、td、blockquote、p、form、fieldset等，改为{margin: 0; padding: 0}。我认为做到这一步就算完成基本的了。
• ul、li的list-style：none
• a标签一般会改变字体颜色和下划线，所以添加{color: inherit; text-decoration: none}。
• table通常的样式都是希望边框折叠的 table{border-collapse: collapse; border-spacing: 0}
• 更多的可以参考YUI的reset。

CSS的结构

• reset：用于重置的css。
• basic：定义基本元素，body、div、p、span、ul、li、hn。
• generic：通用样式。这里和concrete相对，比较偏形容词的留在这里（left-align、blue-color），偏名词的放在concrete里（product-title）。
• header：页面头的样式。
• content：页面主要内容的样式。
• footer：页脚的样式。
• concrete：一些具体的不能通过公用样式表示的样式。

公共样式划分

我喜欢追求最大程度的合理共用。要视网站的风格而定，比如你的“盒子”都是有边框的那就可以一个full-border搞定这个问题，但如果“盒子”的边框是不统一的，那就可以分割出多个边框样式。
• border：一般是有边框或者没有，也可能是某一侧的边框样式，比如我可能只希望两侧或者底边通过一条细线分割元素。
• padding、margin：缩进或者是段落（“盒子”）边距，我喜欢分开各侧来处理。
• float：left-float、right-float和clear的设置，喜欢分成多个样式。
• width、height：我会定义.full-panel{width: 100%}、.half-panel {width: 48%}等，用于控制“盒子”，必要时会选择直接指定数值的样式。
• font-style：文档文本样式一般都是几种，这里关注下划线、删除线、斜体、加粗等。
• h1、h2、h3：配合上面这里控制文字大小，再加上normal共四种大小字体一般情况够用了。
• color：配合上面用来指定颜色，一旦风格确定了字体颜色也不会多的很过分。
• container：被我用了做float元素的容器，重点是关注子的高度。一般是{display: block; overflow: hidden}，偶尔{display: table}。
• text-align、vertical-align：我会设置左中右对其和上标、下标几个样式。
整理模板：最后写好的css可能能够应对一个系列的站点样式，整理出来作为将来的模板。