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书写规范使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0”
简写命名
很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦!
16进制颜色代码缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
连字符CSS选择器命名规范
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，为什么呢?
输入的时候少按一个shift键;
浏览器兼容问题(比如使用_tips的选择器命名，在IE6是无效的)
能良好区分JavaScript变量命名(JS变量命名是用“_”)
不要随意使用Id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
CSS命名规范(规则)常用的CSS命名规则
头：header header-one
内容：content/container
尾：footer
导航：nav nav-one
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper 左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
注释的写法:
/* Header */
内容区
/* End Header */
Id的命名:
1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary (3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。CSS样式表文件命名
主要的master.css
模块module.css
基本共用base.css
布局、版面layout.css 主题themes.css
专栏columns.css
文字font.css
表单forms.css
补丁mend.css
打印print.css
css样式定义规范
为了更好的符合seo规范，请参考css样式定义规范 CSS规范 搜索引擎优化(seo)有很多工作要做，其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则： 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单:subMenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 友情链接:friendLink 页脚:footer 加入:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态:status 按钮:btn 投票:vote 合作伙伴:partner 版权:copyRight 1.CSSID的命名 外套:wrap 主导航:mainNav 子导航:subnav 页脚:footer 整个页面:content 页眉:header
页脚:footer 商标:label 标题:title 主导航:mainNav(globalNav) 顶导航:topnav 边导航:sidebar 左导航:leftsideBar 右导航:rightsideBar 旗志:logo 标语:banner 菜单内容1:menu1Content 菜单容量:menuContainer 子菜单:submenu 边导航图标:sidebarIcon 注释:note 面包屑:breadCrumb(即页面所处位置导航提示) 容器:container 内容:content 搜索:search 登陆:login 功能区:shop(如购物车，收银台) 当前的current 2.样式文件命名 主要的:master.css 布局版面:layout.css 专栏:columns.css 文字:font.css 打印样式:print.css 主题:themes.css
CSS代码规范#(精选.)
HTML基本格式:
CSS设计(代码)规范
UI设计（代码）规范 一．目录结构与命名规则 （1）目录结构规范 1、目录建立的原则：以最少的层次提供最清晰简洁的页面结构。 2、根目录一般只存放index.htm以及其他系统必须的文件 3、在根目录中应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用来放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片 4、所有JS,ASP,PHP等脚本存放在根目录下的scripts目录 5、所有CGI程序存放在根目录下的cgi-bin目录 6、所有CSS文件存放在根目录下style目录 7、每个语言版本存放于独立的目录。例如：简体中文gb 8、所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录 9、temp 子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。 （2）文件和目录命名规范 1、文件命名的原则：以最少的字母达到最容易理解的意义。 2、每一个目录中包含的缺省html 文件，文件名统一用index.htm 3、文件名称统一用小写的英文字母、数字和下划线的组合，不得包含汉字、空格和特殊字符
4、尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们) 不到万不得已不要以拼音作为目录名称 5、多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数与文件个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm （3）图片的命名规范 1、名称分为头尾两两部分，用下划线隔开。 2、头部分表示此图片的大类性质。 例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。 3、尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg. （4）css的命名规范 1，全局定义 /*{}（大括号）内为空时，除ul元素外，其他均自己定义*/ body,ul,ol,p,span,dd,dt,h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px;}/*初始化元素的内联及外联*/ div{ overflow:hidden}
HTML／CSS代码开发规范文档
HTML/CSS代码开发规范文档
目录 1、前言 (4) 2、HTML编码规范 (4) 2-1HTML标记的关闭规范 (4) 2-2HTML文件头基本标记 (4) 2-2HTML正文代码标记元素 (5) 2-3HTML标记的缩进规范 (6) 3、HTML文件引入CSS样式代码和Javascript代码规范 (6) 3-1引入css样式代码规范 (6) 3-2引入Javascript代码规范 (7) 4、HTML注释标签 (8) 5、CSS编码规范 (8) 5-1 CSS编码要求 (8) 5-2 CSS样式表规范 (8) 5-3 CSS命名规范 (9) 5-4样式文件命名 (10) 5-5样式文件布局 (11) 6、CSS常规书写规范及方法 (11) 6-1文件调用方法: (11) 6-2 CSS结构化书写 (11) 6.2.1派生选择器： (11) 6.2.2辅助图片用背影图处理： (12) 6.2.3结构与样式分离： (12) 6.2.4文档的结构化书写 (12) 6-3 HACK CSS书写规范 (13) 6.3.1 IE6、IE7、Firefox之间的兼容写法 (13) 6.3.2屏蔽IE浏览器 (14) 6.3.3清除浮动 (14) 6.3.4鼠标手势 (15) 7、CSS性代码缩写 (15) 7.1不同类有相同属性及属性值的缩写 (15) 7.2同一属性的缩写 (16) 7.3内外侧边框的缩写 (16) 7.4颜色值的缩写 (18) 8、CSS注释书规范 (18) 8.1行间注释 (18) 8.2整段注释 (18)
1、前言 本编程规范适用于需要编写HTML/CSS代码的网页程序开发人员。本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。 2、HTML编码规范 HTML是一种标记语言, HTML没有任何真正的编程语言中的循环或是流程控制语句。然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局,增强可读性，而使其易懂和易于维护。HTML代码本身是不区分大小写的，但是为了更好的统一代码布局，项目中HTML文件标记都以小写为主。 2-1HTML标记的关闭规范 HTML文档的正文都应在
标记中间，而标记则应包含在和标记之间。如： 正文 不同类的标记不能交叉编码： eg: 内容 正确编码应为：内容 开始和关闭标记放在一行的标记有: eg: 和 和 和 各种标题标记，如…
等 和 2-2HTML文件头基本标记 ① ②前端规范CSS规范
来源：NEJ-更好的JS解决方案 搬运工：陈晓勉 CSS规范- 分类方法 CSS文件的分类和引用顺序 通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。 我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。 1.公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图 和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。 2.特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可 以独立引用一个样式：“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”，也可以是某个大型控件或模块的独立样式。 3.皮肤型样式：如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在 这里。 CSS内部的分类及其顺序 1.重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分 标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！ 2.统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的 图）和清除浮动（这里指通用性较高的布局、模块、元件内的清除）等统一设置处理的样式！ 3.布局（grid）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！ 4.模块（module）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登 录、注册、各种列表、评论、搜索等！ 5.元件（unit）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！ 比如按钮、输入框、loading、图标等！
css样式表ID命名规则
一．文件命名规范[b]样式文件命名[/b] [quote]主要的master.css 布局，版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote]页头：header 登录条：loginbar 标志：logo 侧栏：sidebar 广告：banner 导航：nav 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：copyright 外套：wrap
主导航：mainnav 子导航：subnav 页脚：footer 整个页面：content 页眉：header 页脚：footer 商标：label 标题：title 主导航：mainbav（globalnav） 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 旗志：logo 标语：banner 菜单内容1：menu1content 菜单容量：menucontainer 子菜单：submenu 边导航图标：sidebarIcon 注释：note 面包屑：breadcrumb(即页面所处位置导航提示）容器：container 内容：content 搜索：search 登陆：Login 功能区：shop(如购物车，收银台) 当前的current[/quote] [b]网站常用中英文对照表[/b] [quote]网站导航Site Map 公司简介Profile or Company Profile or Company 公司设备Equipment Equipment 公司荣誉Glories Glories 企业文化Culture Culture 产品展示Product Product 资质认证Quality Certification 企业规模Scale Scale 营销网络Sales Network 组织机构organization organization 合作加盟Join In Cooperation 技术力量Technology Technology 经理致辞Manager`s oration 发展历程Development History 工程案例Engineering Projects 业务范围Business Scope
CSS规范
CSS规范 1.0版2009-10-10 Carter@https://www.360docs.net/doc/826915567.html, 一、总则 (2) 1.1目的及效力 (2) 1.2 CSS书写原则 (2) 二、样式重置 (2) 2.1重置代码 (2) 2.2注意事项 (3) 三、CSS书写顺序 (3) 3.1样式 (3) 3.2注意事项 (3) 四、CSS Hack (4) 4.1样式 (4) 4.2书写顺序 (4) 4.3注意事项 (4) 按住CTRL并单击目录可直接定位
一、总则 1.1目的及效力 1.制订本规范的目的：使css样式表文件标准化，具有较高的可读性，便于后期自己或他人 阅读、修改，使之开发效率提高。 2.页面制作人员必须严格遵守此规范。 3.本规范应用于2009年11月1日以后制作的项目中，不溯及以往。 4.本规范随时根据需要修订，请注意版本号的变化。当前为1.0版。 1.2 CSS样式书写总规范 1.普通企业网站样式表文件统一命名为“main.css”，对于门户型网站或大型企业网站根据 实际情况进行命名、细分。 2.由于页面采用utf-8编码所以必须在样式表文件顶部加上“@charset "utf-8";”。 3.书写样式时必须先进行样式重置。 4.书写样式时必须按照规定的顺序。 5.不同浏览器对于CSS解析认识不一样，为保证页面在各个浏览器下基本一致需要针对不 同浏览器去写不同的CSS。 6.书写样式时可以缩写的样式推荐使用缩写。 二、样式重置 2.1重置代码 /* 样式重置*/ body { margin:0; padding:0; font-size:12px; font-family:Arial,"宋体"; } form,ul,li,p,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; } img { border:0; vertical-align:absbottom; } ul,li { list-style-type:none; } input, select, textarea { font-size:12px; font-family:Arial; vertical-align:absmiddle; } /* 常用功能样式*/
前端CSS规范整理
一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解： 所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： ?基本样式库 /css/core ?通用UI元素样式库 /css/lib ?JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件，放在如下目录中： ?读书 /css/book/ ?电影 /css/movie/ ?音乐 /css/music/ ?社区 /css/sns/ ?小站 /css/site/ ?同城 /css/location/ ?电台 /css/radio/ 外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。另外一对具体的CSS进行文档化的整理。如： ?util-01 reset /css/core/reset.css ?util-02 通用模块容器 /css/core/mod.css ?ui-01. 喜欢按钮 /css/core/fav_btn.css ?ui-02. 视频/相册列表项 /css/core/media_item.css ?ui-03. 评星 /css/core/rating.css ?ui-04. 通用按钮 /css/core/common_button.css ?ui-05. 分页 /css/core/pagination.css ?ui-06. 推荐按钮 /css/core/rec_btn.css ?ui-07. 老版对话框 /css/core/old_dialog.css ?ui-08. 老版Tab /css/core/old_tab.css ?ui-09. 老版成员列表 /css/core/old_userlist.css ?ui-10. 老版信息区 /css/core/notify.css ?ui-11. 社区用户导航 /css/core/profile_nav.css ?ui-12. 当前大社区导航 /css/core/site_nav.css ?ui-13. 加载中 /css/lib/loading.css 2、文件引入可通过外联或内联方式引入。 ?外联方式：（类型声明type=”text/css”可以省略） ?内联方式：（类型声明type=”text/css”可以省略）
WEB前端开发规范文档+CSS命名规范
WEB前端开发规范文档+CSS命名规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面; 3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.; 4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名. html书写规范 1. 文档类型声明及编码: 统一为html5声明类型; 编码统一为, 书写时利用IDE实现层次分明的缩进; 2. 非特殊情况下样式文件必须外链至
...之间;非特殊情况下JavaScript文件必须外链至页面底部; 3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下: Example Source Code [https://www.360docs.net/doc/826915567.html,]css标准版格式
CSS3 Media Queries模板 CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设 备的分辨大小与样式表所设条件是否满足，如果满足就调用相应的样式。打个比方来说，如 果你的Web页面在960px的显屏下显示，那么首先会通过CSS3 Media Queries进行查询， 看看有没有设置这个条件样式，如果找到相应的，就会采用对应下的样式，其他的设备是一 样的道理。下面具体看看“max-width”和“min-width”模板： 使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (min-width: 900px) { //你的样式放在这里... } max-width和min-width的混合使用 @media screen and (min-width: 600px) and (max-width: 900px) { //你的样式放在这里... } 同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用，这个 主要用在iPhone,iPads设备上，比如像下面的应用： iPhone和Smartphones上的运用 /* iPhone and Smartphones (portrait and landscape) */ @media sc max-device-width指的是设备整个渲染区宽度（设备的实际宽度） iPads上的运用 /* iPads (landscape) */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { //你的样式放在这里... } /* iPads 针对移动设备的运用，如果你想让样式工作得比较正常，需要在“
”添加“viewport” 的meta标签： 有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。web前端规范-CSS的命名
原则：整个项目的命名风格要统一，id说明特殊性，class说明普遍性。从模块重用和节约文件体积的角度看，建议id类应尽量减少使用。class类的命名向模块化发展。 命名风格： 常见的命名风格有：1.分隔线 css-style(不推荐)；2.下划线 css_style(次推荐)；3.驼峰式 cssStyle(主推荐)。 没有强制一定用哪种风格，不过同个项目中最好只使用一种风格，除非想表达特殊作用的再用多种风格，但要写好注释说明。好的命名规范也能体现出语义化。 id 和class： 什么时候用id，什么时候用class没有一个绝对的说法。这里只是提供一个参考。 对于页面的各个结构外层或者特殊部分（比如页面的布局，各个栏目），用id 来说明这个区域是什么内容。对于页面中可重用的结构或者一些常用的从属结构（比如栏目中的标题，文章，列表等），用class来说明这个小块是什么，表现怎么样。 约定：搜索search不加bar修饰, 比如左边搜索区域, 命名为: searchL。以此类推, L(左边), R(右边), T(上方), B(下方)。不管任何模块, 为避开css 过多的命名名称, 比如选项卡tab的标题区域, 用hd命名, 写法为：" .tab .hd " 所有模块, 全部采用hd和bd模式。另外, 用"Tb"代表表格的缩写，比如表单表格: formTb。所有css命名采用Java的命名规范, 既是驼峰式的命名方式, 比如"newsList"。大量模块使用雅虎的hd和bd命名思想（见‘CSS 书写’ 部分），将内层的css类命名简化，减少起名字的次数。最好不要用id类定义html的模块外观，id类的唯一性比特殊。比如在两个div中，用了相同的 id，js拿id 交互便会出现问题。
DIV+CSS规范命名大全集合
一、命名规则说明： - TOP 1）、所有的命名最好都小写 2）、属性的值一定要用双引号("")括起来，且一定要有值如 class="divcss5",id="divcss5" 3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 4）、空元素要有结束的tag或于开始的tag后加上"/" 5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等 6）、
到的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。 7）、给每一个表格和表单加上一个唯一的、结构标记id 8）、给图片加上alt标签 9）、尽量使用英文命名原则 10）、尽量不缩写，除非一看就明白的单词 DIVCSS5给大家介绍常见CSS命名和DIV CSS命名方法。 二、相对网页外层重要部分CSS样式命名： - TOP 外套 wrap ------------------用于最外层 头部 header ----------------用于头部 主要内容 main ------------用于主体内容（中部） 左侧 main-left -------------左侧布局 右侧 main-right -----------右侧布局 导航条 nav -----------------网页菜单导航条 内容 content ---------------用于网页中部主体 底部 footer -----------------用于底部 三、DIV+CSS命名参考表： - TOP 以下为CSS样式命名与CSS文件命名参考表，DIV CSS命名集合： CSS样式命名说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或#content 容器,用于最外层 #layout 布局 #head, #header 页头部分 #foot, #footer 页脚部分 #nav 主导航 #subnav 二级导航CSS规范命名大全
CSS规范命名大全
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.使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 2.去掉小数点前的“0” 3.简写命名 很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！
4.16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 5连字符CSS选择器命名规范 1）.长名称或词组可以使用中横线来为选择器命名。 2）.不建议使用“_”下划线来命名CSS选择器，为什么呢？ 输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）
6.不要随意使用id id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与cla ss，所以id应该按需使用，而不能滥用。 7.为选择器添加状态前缀 有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
CSS样式(规则)定义对话框中英文对照
CSS样式（规则）定义对话框中英文对照1、类型 字体：font-family 大小：font－size；粗细：font-weight 样式：font-style；变体：font-variant 行高：line-height；大小写：text-transform 修饰：下划线：underline 上划线: overline
删除线: line-through 闪烁: blin 无: none 2、背景： 背景颜色：background-color 背景图像：background-image 重复：background-repeat 附件：background-attachment
水平位置：background-positon(x) 垂直位置：background-posito(y) 3、区块 单词间距：word-spacing 字母间距：letter-spacing 垂直对齐：vertical-spacing 文本对齐：text-align 文字缩进：text-indent 空格：white-space
显示：display 4、方框： 宽：width 浮动：float 高：height 清除：clear 填充：padding 边界：margin （上：top 右：right 下：bottom 左：left）
5、边框： 样式：style 宽度：width 颜色：color 6、列表
类型：list-style-type 项目符号图像：list-style-image 位置：list-style-position 7、定位：
CSS标准化命名规则
CSS标准化命名规则 一、文件命名规范 基本样式：base.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
信息框：manage …… 常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn XHTML-CSS写作建议 1、所有的xhtml代码小写； 2、属性的值一定要用双引号("")括起来，且一定要有值； 3、每个标签都要有开始和结束，且要有正确的层次； 4、空元素要有结束的tag或于开始的tag后加上"/"； 5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border 等； 6、
到的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询； 7、给每一个表格和表单加上一个唯一的、结构标记id； 8、给重要的区块加上注释； 9、给图片加上alt属性； 10、所有的标签必须进行合理的嵌套； 11、根元素前必须有元素，宣告使用那一种DTD； 12、根元素必须有xmlns属性来指定使用https://www.360docs.net/doc/826915567.html,/1999/xhtml的namespace。 三、常规书写规范及方法 1、选择DOCTYPE XHTML1.0提供了三种DTD声明可供选择： 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下： CSS规范_10
CSS规范_10
CSS规范 1.0版2009-10-10 一、总则 (2) 1.1目的及效力 (2) 1.2 CSS书写原则 (2) 二、样式重置 (2) 2.1重置代码 (2) 2.2注意事项 (3) 三、CSS书写顺序 (3) 3.1样式 (3) 3.2注意事项 (3) 四、CSS Hack (4) 4.1样式 (4) 4.2书写顺序 (4) 4.3注意事项 (4) 按住CTRL并单击目录可直接定位
一、总则 1.1目的及效力 1.制订本规范的目的：使css样式表文件标准化，具有较高的可读性，便于后期自己或他人 阅读、修改，使之开发效率提高。 2.页面制作人员必须严格遵守此规范。 3.本规范应用于2009年11月1日以后制作的项目中，不溯及以往。 4.本规范随时根据需要修订，请注意版本号的变化。当前为1.0版。 1.2 CSS样式书写总规范 1.普通企业网站样式表文件统一命名为“main.css”，对于门户型网站或大型企业网站根据 实际情况进行命名、细分。 2.由于页面采用utf-8编码所以必须在样式表文件顶部加上“@charset "utf-8";”。 3.书写样式时必须先进行样式重置。 4.书写样式时必须按照规定的顺序。 5.不同浏览器对于CSS解析认识不一样，为保证页面在各个浏览器下基本一致需要针对不 同浏览器去写不同的CSS。 6.书写样式时可以缩写的样式推荐使用缩写。 二、样式重置 2.1重置代码 /* 样式重置*/ body { margin:0; padding:0; font-size:12px; font-family:Arial,"宋体"; } form,ul,li,p,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; } img { border:0; vertical-align:absbottom; } ul,li { list-style-type:none; } input, select, textarea { font-size:12px; font-family:Arial; vertical-align:absmiddle; } /* 常用功能样式*/
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书写规范使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0” 简写命名 很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦! 16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器，为什么呢? 输入的时候少按一个shift键; 浏览器兼容问题(比如使用_tips的选择器命名，在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”) 不要随意使用Id id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
为选择器添加状态前缀 有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。 CSS命名规范(规则)常用的CSS命名规则 头：header header-one 内容：content/container 尾：footer 导航：nav nav-one 侧栏：sidebar
CSS规则定义英汉对照表
CSS规则定义英汉对照表 一、类型 font-family：字体 font-size ：字体大小 font-weight：字体浓淡 font-style ：字体风格如：斜体、正常等 font-variant ：字体变量（用来设定字体是正常显示，还是以小型大写字母显示）line-height ：行高（用来设定字行间距） text-transform：文本转换（用来设定字体的大小写转换） text-decoration(字体装饰)：underline下划线 overline 上划线 line-through 线-穿过 blink 闪光 none 无 二、背景 background-color(C) ：背景颜色 background-image(I) ：背景图片 background-repeat(R) ：背景重复 background-attachment(T) ：背景附着（用来设定背景图片是否随文档滚动）background-position(X) ：背景位置X background-position(Y)：背景位置Y 三、区块
word-spacing ：词间距 letter-spacing ：字符间距 vertical-align ：垂直对齐 text-aline ：水平对齐 text-indent ：文本缩进 white-space：空白 dispaly ：显示 四、方框 width：宽度 height：高度 float：漂浮 clear：规定元素的哪一侧不允许出现其他浮动元素padding：间隙（设定间隙的宽度） margin ：边距（用来设定边距的宽度） 五、边框
CSS规则定义
文本样式的定义 定义文本样式、保存CSS规则后系统将行动打开“CSS规则定义”对话框。 [字体]：选择所需要的字体。 [大小]：定义字体大小。 [样式]：可选择字体的特殊样式，即“正常”、“斜体”或“偏斜体”等。 [行高]：设置文本所在行的高度。也可以输入一个确切的值并选择一种度量单位。 [修饰]：在文本中添加下划线、上划线或删除线，或者使文本闪烁。[粗细]：字体应用特定或相对的粗体量。 [变体]：设置文本的变体方式。 [大小写]：将所选内容中每个单词的首字母大写，或者将文本设置为全部大写或小写。 [颜色]：设置文本颜色。 背景样式的定义 要定义背景样式可在“CSS规则定义”对话框中选择“背景”选项。[背景颜色]：设置背景颜色。 [背景图像]：设置背景图像。 [重复]：确定是否以及如何重复背景图像。 （不重复）：只在元素开始处显示一次图像。
（重复）：在元素的后面水平和垂直平铺图像。 （横向重复）和（纵向重复）：分别显示图像的水平带区和垂直带区。图像将被剪辑以适合元素的边界。 [附件]：确定背景图像是固定在原始位置还是随内容一起滚动。 [水平位置]和[垂直位置]：指定背景图像相对于元素的初始位置。这可以用于将背景图像与页面中心垂直和水平对齐。如果附件属性为“固定”，位置则相对于“文档”窗口而不是元素。 区块样式的定义 使用“CSS规则定义”对话框中的“区块”类别可以定义标签和属性的间距、对齐等设置。 [单词间距]：设置单词的间距。在下拉列表中选择“值”选项，然后输入数值可确定单词的间距，此时可在右侧的弹出式菜单中选择度量单位（例如像素、点等）。 [字母间距]：设置字母或字符间的间距。负值（例如-4）表示减小字符间距。字母间距设置可覆盖对齐的文本设置。 [垂直对齐]：指定垂直对齐方式。 [文本对齐]：设置元素中的文本对齐方式。 [文字缩进]：指定第一行文字缩进程度，并可在右侧选择数值单位。也可以使用负值创建凸出，但显示方式则取决于浏览器。 [空格]：确定如何处理元素中的空白。 （正常）：收缩空白。