CSS规范命名 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了7463字，被0人关注，获得了0个喜欢
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等)
显示属性：display/list-style/position/float/clear...自身属性（盒模型）：width/height/margin/padding/border背景：background行高：line-height文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...其他：cursor/z-index/zoom/overflowCSS3属性：transform/transition/animation/box-shadow/border-radius链接样式严格按照顺顺序：a:link-&a:visited-&a:hover-&a:active
常用的命名
&页面&page &包&wrap latout
&页头&header(head)&页尾&footer(foot ft) &内容&content(cont) &菜单&menu &导航&nav&主体&main &子主体&submain &侧栏&sidebar(side) &标志&logo&广告&banner &标题&title(tit) popo(pop) &图标&icon &注释&note&按钮&btn
&文本&txti &块&block &窗口&window(win) &顶端&tips
页面结构：
&容器&--container &头&--header &内容&--content、container&页面主体&--main
&页尾&--footer
&导航&--nav
&侧栏&--sidebar&栏目&--column
&页面外围控制整体布局宽度&--wrapper&左右中&--left
right center
&标志&--logo
&广告&--banner
&登陆&--login
&登陆条&--loginbar&注册&--regsiter
&搜索&--search
&功能区&--shpo
&标题&--title&加入&--joinus
&状态&--status
&按钮&--btn
&滚动&--scroll&标签页&--tab
&文章列表&--list
&提示信息&--msg
&当前的&--current&小技巧&-- tips
&图标&--icon
&注释&--note
&指南&--guild&服务&--service
&热点&--hot
&新闻&--news
&下载&--download&投票&--vote
&友情链接&--link
&版权&--copyright
&主导航&mainnav
&子导航&subnav
&顶导航&topnav& 边导航&sidebar
&左导航&leftsidebar
&右导航&rightsidebar&菜单&menu
&子菜单&submenu
&标题&title
&摘要&summary
为了防止文件合并及编码转换时造成问题，字体使用英文名字：黑体（SimHei）、宋体（SimSun）微软雅黑（Microsoft Yahei。几个单词中间有空格组成的必需加引号）
字体粗细采用具体数值，粗体bold写为700，正常normal写为400.
font-size必须以px或者pt为单位，推荐用px（pt为打印字体大小设置）。
class的命名：
颜色：使用颜色的名称或者16进制代码，如：
.red{color:}.f60{color:#f60;}.ff6600{color:#ff6600;}
字体大小，直接使用font+字体大小作为名称，如：
.font2px{font-size:12}.font9pt{font-size:9pt}
对齐样式，使用对齐目标的英文名称，如：
.left{float:left}.bottom{float:bottom}
标题栏样式，使用“类别+功能”的方式命名。
注意事项：
主要的：master.css模块 ：module.css基本公用：base.css布局，版面：layout.css主题：themes.css专栏：columns.css文字：font.css表单：forms.css补丁：mend.css打印：print.css
10个常用的CSS class
class="fixed"用在包含浮动子元素的容器元素清除浮动：
.fixed:after{
content:"...";
visibility:
class="alt"交替的简称这个class用在一组样式一样的元素，需要为其中的某几个设定单独的样式，比如一组向左浮动的图片中有一张需要向右浮动，就可以使用这个class。#content img{
margin-rigth:10
border:1px solid #
padding:1em 0;
background:#
}#content img.alt{
margin-right:0;
margin-left:10
class="selected" 经常用的，用于处理mouseover活选中元素的效果。&li class="selected"&
&a href="/about"&About Us&/a&
class="first",class="last" 浏览器支持first-child和last-child这两个伪类之前，用class="first",class="last" 用的地方很多。
class="image"用于包含图片的容器元素。
class="inner" 大部分用来制造视觉上的额外效果。用来嵌套在容器里的子容器定义样式，（比如制作双背景图片效果）
class="link" 用来嵌套一个a标签，和image类似。
class=“one”,class="two",class="three"...用于需要区别每个元素的列表项，比如用移动背景图片来制作导航的菜单。
class=“even”,class="odd" 用来实现隔行换样式，一般用在表格和列表·&ul&
&li class="even"&Content&/li&
&li class="odd"&Content&/li&
&li class="even"&Content&/li&
&li class="odd"&Content&/li&
class="section" 一般用在为指定内容中特定部分添加特定的样式
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：DIV+CSS网页布局常用的一些命名规则和书写_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
DIV+CSS网页布局常用的一些命名规则和书写
上传于||文档简介
&&无&#8203;规&#8203;矩&#8203;不&#8203;成&#8203;方&#8203;圆&#8203;,&#8203;遵&#8203;守&#8203;作&#8203;网&#8203;站&#8203;规&#8203;则&#8203;,&#8203;事&#8203;半&#8203;功&#8203;倍&#8203;。
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩11页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢如何规范 CSS 的命名和书写？_webapp吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：234贴子：
如何规范 CSS 的命名和书写？收藏
via: 全局：global.css全局样式为全站公用，为页面样式基础，页面中必须包含。结构：layout.css页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。私有：style.css独立页面所使用的样式文件，页面中必须包含。模块 module.css产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。主题 themes.css实现换肤功能时应用。补丁 mend.css基于以上样式进行的私有化修补。CSS命名规范头：header 内容：content/containe 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partnerXHTML文件中id的命名(1)页面结构容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center (2)导航导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary (3)功能标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或CSS命名规范与书写规范及方法；一、文件命名规范；全局样式：global.css；；框架布局：layout.css；；字体样式：font.css；；链接样式：link.css；；打印样式：print.css；；二、常用类/ID命名规范；页眉：header；内容：content；容器：container；页脚：footer；版权：copyright；导航：me
CSS命名规范 与 书写规范及方法
一、文件命名规范
全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
二、常用类/ID命名规范
页 眉：header
内 容：content
容 器：container
页 脚：footer
版 权：copyright
导 航：menu
主导航：mainMenu
子导航：subMenu
标 志：logo
标 语：banner
标 题：title
侧边栏：sidebar
图 标：Icon
注 释：note
搜 索：search
按 钮：btn
登 录：login
链 接：link
信息框：message
常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”。
CSS书写规范及方法
一. 常规书写规范及方法
1. 选择DOCTYPE：
XHTML 1.0 提供了三种DTD声明可供选择：
过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&
严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如&br&。完整代码如下：
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“&
框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“&
理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。
2. 指定语言及字符集：
为文档指定语言：
&html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”&
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：
常用的语言定义：
&meta http-equiv=”Content-Type” content=”text/ charset=utf-8″ /&
标准的XML文档语言定义：
&?xml version=”1.0″ encoding=” utf-8″?&
针对老版本的浏览器的语言定义：
&meta http-equiv=”Content-Language” content=” utf-8″ /&
为提高字符集，建议采用“utf-8”。
3. 调用样式表：
外部样式表调用：
页面内嵌法：就是将样式表直接写在页面代码的head区。 如：
&style type=”text/css”&&!C body { background : color : } C& &/style&
外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
&link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” /&
在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。
4、选用恰当的元素：
根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；
避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；
尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；
5、派生选择器：
可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：
.mainMenu ul li {background:url(images/bg.)}
6、辅助图片用背影图处理：
这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：
#logo {background:url(images/logo.jpg) #FEFEFE no-}
7、结构与样式分离：
在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。
8、文档的结构化书写：
页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：
&div id=”mainMenu”&
&li&&a href=”#” &首页&/a&&/li&
&li&&a href=”#” &介绍&/a&&/li&
&li&&a href=”#” &服务&/a&&/li&
/*=====主导航=====*/
#mainMenu {
width:100%;
background:url(images/mainMenu_bg.jpg) repeat-x;
#mainMenu ul li {
line-height:30
margin-right:1
/*=====主导航结束=====*/
9、鼠标手势：
在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:”
二．注释书写规范
1、行间注释：
直接写于属性值后面，如：
border:1px solid # /*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333; /*定义搜索框的背景*/
包含各类专业文献、外语学习资料、中学教育、幼儿教育、小学教育、专业论文、生活休闲娱乐、31CSS命名规范 与 书写规范及方法等内容。　
　CSS命名规范和CSS书写规范及方法 CSS 命名规范一.文件命名规范 全局样式:global. 框架布局:layout. 字体样式:font. 链接样式:link. 打印样式:pr... 　CSS常用命名规范及写法详解_IT/计算机_专业资料。由于项目中编写文档结构、编写 ...盒模型尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值 ... 　CSS 命名规范和 CSS 书写规范 CSS 命名规范一、 文件命名规范 全局样式: 全局...CSS 书写规范及方法常规书写规范及方法一、 选择 DOCTYPE: XITML 1.0 提供了... 　CSS 命名规范和 CSS 书写规范 CSS 命名规范 一.文件命名规范 全局样式:global....常规书写规范及方法 1. 选择 DOCTYPE: XHTML 1.0 提供了三种 DTD 声明可供... 　dir CSS 规则一、CSS 书写顺序 1.位置属性(position,top,right,z-index,...除非一看就明白的单词; DIVCSS5 给大家介绍常见 CSS 命名和 DIVCSS 命名方法... 　CSS命名规范参考及书写注意事项_计算机软件及应用_IT/计算机_专业资料。网页创建前端...常规书写规范及方法 1. 选择 DOCTYPE: XHTML 1.0 提供了三种 DTD 声明可供... 　CSS_命名规范参考及书写注... 3页 免费 CSS命名规范和CSS书写规范 5页 20财富...CSS 书写规范及方法 一. 常规书写规范及方法 1. 选择 DOCTYPE: XHTML 1.0 ... 　css命名及书写规范css命名及书写规范隐藏&& CSS 命名及书写规范 一.文件命名规范全局样式:global. 框架布局:layout. 字体样式:font. 链接样式:link.... 　css书写规范及顺序_计算机软件及应用_IT/计算机_专业资料。css书写规范及顺序对于...CSS书写规范及方法 7页 免费
Css写法顺序 1页 免费
CSS命名规范和CSS书写规...