HTMLcss样式表优先级最高 基本格式：
〈!DOCTYPE html〉
<html lang="en">
<head〉
〈meta charset= ”UTF-8">
〈title>标题</title〉
〈/head〉
〈body〉
</body〉
</html>
注释:/*header start*/
内容区域
/＊header end*/
CSS 书写规范
1、用两个空格代替 tab 键.
2、不要在自闭合的元素尾部添加斜线。不要省略可选的结束标签。
3、对于属性的定义，确保全部用双引号,不要用单引号。
4、指定HTML 的根元素的lang 属性。
5、IE 通过<meta>指定 edge mode 。通知 IE 采用其所支持的最新模式.
列： <meta http—eqauiv= ”x— UA-Compatible ”content= ”IE=Edge，chrome=1 ”>
。
6、必须声明字符编码，一般采用 UTF-8
7、引入 CSS 与 JS 时不指定 type 属性, 因为它们都有默认值。
8、属性顺序：
8 。1    class
8.2    Id、name
8 。3    data—*
8 。4    src、for、type、href

8.5    title、alt
8.6    aria—*、role
9、书写顺序：
9.1    位置属性(position，top，right，z-index,display，float  等)
9 。2   大小(width,height，padding，margin)
9 。3    文字系列(font，line—height,letter—spacing，color—text-algin  等)
9.4    背景(background,border  等)
9 。5    其他(animation,transition 等)
10、尽量缩写属性.
11、去掉小数点前的“0 ”。
12、不建议使用下划线,为了和js 区分， IE6 中无效而且输入的时候少按 shift 键.
13、不要随意使用 id (应按需要使用，而不能滥用)
14、减少标签数量。
15、尽量避免使用js 生成标签。通过js 生成的标签让内容变得不易查,编辑，并且降低性能。
16、对于从逗号分隔的属性值，每个逗号后面都应该插入一个空格(，  box_shadow )  。
17、不要在rgb(  ) ,rgba ( )， hsl ( ) ，hsla ( )  或 rect ( )值的内容逗号后插入空名(只要逗号,不加空格) . 18、十六进制全部小写(#fff)，尽量简写 .
19、为选择器中的属性添加双引号(input[type="text ”]) .
20、避免为 0 值指定单位.如 margin:0；
21、不要用 @import  ，会增加额外的请求次数。应用一下代替：
21 。1    使用多个〈link〉
21.2    通过 sass 或 less 将多个 css 文件编译为一个文件。
21  3
。    通过 Rails ，Jekyll 或其他系统提供过 css 文件合并功能。
22、媒体查询应放在尽可能相关规则的附近，不要将他们打包放在一个单一的样式文件中 .
23、带前缀的属性，通过缩减方式,让每个属性的值在垂直方向对齐。
列：    .div{
-webkit-box—shadow ：10px 10px 5px  ＃888;
box-shadow：10px 10px 5px #888；

}
24、对于只包含一条声明语句的样式,建议语句放在同一行.
25、将最近的父class 或基本(base ) class 作为新 class 的前缀.
26、在文件的结尾添加一个空白行。
27、对为选择器分组时，将单独的选择器单独放在一行。
28、选择器的个数尽量不要超过 3 个。
29、每一条规则的大括号  {  前后加空格。
30、如果使用 CSS3 的属性,如果有必要加入浏览器前缀，则按照webkit- / -moz- /  —ms- /  —o— / std 的顺序进行添加，标准属性写在最后，并且 属性名称要对齐。
31、命名中尽量使用小写。
32、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合 .
33、避免 class 与 id 重名。
CSS 优先级
1、添加了!important  的属性.
2、Style  属性嵌入。
3、具有一个或多个 id 选择器。
4、具有一个或多个类，属性或伪类选择器。
5、具有一个或多个元素选择器。
6、通配选择器。
7、优先级由高到低排列的 6 个位置。
7 。1    最高优先级的位置是 HTML 文档头部的〈style〉元素.
7 。2  style 元素中＠import 语句所导入的样式表。
7.3      〈link〉元素。
7 。4      〈link>样式表中的@import 语句导入的。
7.5    第五优先级的位置是最终用户附加的样式表。
7.6    最低是浏览器默认样式表。

框架布局： layout.css
链接样式:link 。css
打印样式:print 。css
补丁:mend 。css
表单： forms 。css
模块： module.css]
私有： style。css
全局样式： global 。css/base 。css
字体样式： font.css
专栏： columns 。css
主题:themes。css
主要的:master。css
清除浏览器样式： reset.css
清除浏览器部分样式:mormalize.css
CSS class 命名
整体页面:wrapper/container/page 容器背景:containerbg
内容： content
菜单： menu
菜单内容:menucontent
子菜单： submenu
子菜单内容:submenucontent 登录:login
登录条： loginbar
搜索： search
搜索关键字:keyword
搜索范围:range
标志 logo
标题:title
侧栏： sidebar
小技巧:tips
广告:banner
报头： masthead
页头:header
页尾： footer
导航:nav
子导航:subnav
面包屑： breadcrumb
返回:back
返回顶部： back-top
图标： icon
滚动:scroll
左中右： left,center,right
标签页： tag
标签内容： tagcontent
当前标签： tagcurrent
当前位置： currentpath
列表： list
图片列表:piclist
提示信息:mes/message
加入： joinus

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。