CSS命名与书写规范

命名与书写规范

引入css的三种方式

1.内联样式，在HTML元素中使用"style" 属性。

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在标签中使用样式属性，样式属性可以是任何 CSS 属性。其作用范围是在当前标签内，使用较少

<body>
<div style = "color:blue; font-size:15px">文章</div>
<p>我是第一段文章内容</p>
<p>我是第二段文章内容</p>
<p>我是第三段文章内容</p>
</body>

2.嵌套样式，在HTML文档头部 head 区域使用 style 元素来包含CSS代码。

当单个文件需要特别样式时，就可以使用嵌套样式。通过在 head 部分定义 style 标签书写嵌套样式，在 style 标签中可以使用标签选择器，类选择器，id选择器等去给标签设置属性。

<title>文章</title>
<style>p{color: red;font-size: 30px;}div{font-size: 18px;}</style>......<div>内容一</div> <div>内容二</div> <p>第一段</p> <p>第二段</p>

3.外联样式，使用外部 CSS 文件。

当样式需要被应用到很多页面的时候，将会使用外联样式。通过更改一个文件来改变所以页面的样式。此时我们需要在head标签中引入link标签。href中为需要引入的css文件。

<head><meta charset="utf-8" /><title>修改用户信息</title><link href="Css/tableStyle.css" rel="stylesheet" />
</head>

单独的css文件时以css.为后缀名的文件，在该文件内可以直接设置标签样式，不要要包含在style标签中。

优先级关系
从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。

书写规范

css规则集是由选择器和声明块组成：

选择器：指明我们选中的HTML元素，也就是我们需要设置样式的元素
声明块：声明块包含一条或多条用分号分隔的声明，每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔，多条 CSS 声明用分号分隔，声明块用花括号括起来。
属性：我们需要给标签元素设置的一些元素属性的名称。
值：顾名思义，属性的值，比如说颜色：红色。

一、Css书写顺序：

1.位置属性(position, top, right, z-index, display, float等)　
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)　
4.背景(background, border等)
5.其他(animation, transition等)

二、Css语法：

命名一般为小写英文字母。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
每条声明语句的 : 后应该插入一个空格。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

连字符CSS选择器命名规范

一. 选择器命名规则

1.字符采用

实际项目中，建议只采用字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）。避免使用中文。

2.慎用数字

以字母开头，避免纯数字，避免数字开头，以保证兼容。以数字开始的类名、ID名仅在IE6/IE7/IE8下被识别，而其它浏览器下则不识别（忽略该规则）。

3.区分ID和class

一个ID名在文档中只使用一次，class类名可在文档中多次使用。

4.语义化标签

语义化标签是个很大的话题，简单点说，语义化标签就是让css选择器的命名能够反映页面结构的功能区块，如内容区域的class类名定义为content，页脚区域的class类名定义为footer。语义化标签的一个好处是让网页结构一目了然，另外一个好处是提高网页对一些特殊浏览设备的友好性。

5.区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

CSS命名规则常用单词

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
页面主体：main
登录条：loginbar
标志：logo
广告：banner
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

提示：注意使用连接符“-”和下划线“_”。
部分节选自CSS选择器命名规则