系列教程 Discuz模板内置常用CSS代码分析

2018-6-13 11:29| 发布者: 猪八戒| 查看: 486| 评论: 0

摘要: 制作模板时必须学会的就是css语法，css是一种相对比较简单的前台HTML基础语言(css2中文手册下载)。学会使用内置常用CSS，可以减少代码，优化网页结构一、CSS书写规范1、属性写在一行内，属性之间、属性名和值之间以 ...

制作模板时必须学会的就是css语法，css是一种相对比较简单的前台html基础语言(css2中文手册下载)。学会使用内置常用CSS，可以减少代码，优化网页结构

一、CSS书写规范

1、属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：.class { width: 400px; height: 300px; }

2、属性的书写顺序：

针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

3、按照元素模型由外及内，由整体到细节书写，大致分为五组：

位置：position,left,right,float

盒模型属性：display,margin,padding,width,height

边框与背景：border,background

段落与文本：line-height,text-indent,font,color,text-decoration,...

其他属性：overflow,cursor,visibility,...

4、谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式。

选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix

5、勿使用冗余低效的 CSS 写法，例如：ul li a span { ... }

6、慎用 !important

7、建议使用在 class/id 名称中的词语

表示状态：a->active

表示结构：h->header,c->content,f->footer

表示区域：mn->main,sd->side,nv-navigation,mu->menu

表示样式：l-list,tab,p_pop

8、命名方式尽量不通用，使用自己的前缀。例如:（.header => .archy_hd / .footer => .archy_ft / ......）

二、CSS多IE下兼容HACK写法

所有 IE浏览器适用： .ie_all .foo { ... }
IE6 专用： .ie6 .foo { ... }
IE7 专用： .ie7 .foo { ... }
IE8 专用： .ie8 .foo { ... }

三、常用CSS

1、左浮动、右浮动

.z { float: left; }

.y { float: right; }

2、因为左右浮动造成的父级浮动溢出，及使用方法

.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

</div>

3、大标题字体

.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }

4、行内分割竖线

.pipe { margin: 0 5px; color: #CCC; }

5、文字字体大小

.xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }

.xs1 { font-size: 12px !important; }