CSS书写规范

合集下载

CSS样式规则及字体样式

}
字体样式应用：
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体属性</title> <style>
可以通过escape() 来测试属于什么字体。
字体名称
英文名称
Unicode 编码
宋体
SimSun
\5B8B\4F53
新宋体
NSimSun
\65B0\5B8B\4F53
黑体
SimHei
\9ED1\4F53
微软雅黑
Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
p{ font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧：
1. 现在网页中普遍使用14px+。 2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。 3. 各种字体之间必须使用英文状态下的逗号隔开。 4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。 6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

formatter中css写法

文章标题：深度解析formatter中的CSS写法一、引言在当今的网页设计和开发中，CSS作为前端开发的重要组成部分，其写法一直备受关注和讨论。

特别是在formatter中的CSS写法，更是需要我们深入了解和研究。

在本篇文章中，我们将从简到繁，由浅入深地探讨formatter中的CSS写法，以便读者能更深入地理解这一主题。

二、什么是formatter中的CSS写法？在介绍formatter中的CSS写法之前，首先我们需要了解什么是formatter。

formatter是一种用于美化、格式化代码的工具，可以使代码整齐、易读，并且符合特定的代码风格规范。

而在这些代码风格规范中，CSS写法作为前端开发的重要组成部分，需要我们深入了解和掌握。

三、为什么重视formatter中的CSS写法？1. 代码可读性在团队协作开发过程中，良好的CSS写法可以增强代码的可读性，让团队成员更容易理解和维护代码，提高工作效率。

2. 代码规范性良好的CSS写法可以保证代码的规范性，减少代码错误和bug的产生，提高代码的质量和稳定性。

3. 前端性能优化精简、高效的CSS写法可以减少页面加载时间，提高网页性能，从而提升用户体验。

四、如何在formatter中编写优质的CSS？1. 命名规范在formatter中编写CSS时，应该遵循良好的命名规范，采用有意义且简洁的类名和ID名，以便于代码的维护和扩展。

2. 嵌套规范在编写嵌套的CSS样式时，应尽量避免过深的嵌套结构，保持代码的清晰和简洁。

3. 属性顺序在书写CSS属性时，应该遵循统一的属性顺序，将相似属性进行分组，以便于代码的管理和阅读。

4. 代码缩进良好的代码缩进可以提高代码的可读性，减少代码出错的可能性，应该在formatter中注重代码缩进的规范。

五、总结回顾通过对formatter中的CSS写法的全面评估和深度探讨，我们不仅加深了对这一主题的理解，更学习到了如何编写高质量、深度和广度兼具的CSS样式。

《网页设计与制作》相关规范—网站设计通用规范

Xingtai Polytechnic College《网页设计与制作》—相关规范网站设计规范（通用）一、设计风格1、依照网站的定位确定整体的设计风格。

2、主体框架页面、内容页尽量采用方型结构。

禁用长距离的斜线及弧线结构，可允许小范围内的斜线及弧线。

封面页、专题页可不受此限制。

3、设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧，拐角可以有曲线变化。

拐角块最大不得超过18像素。

同一页面弧度尽量保持一致。

4、各主要栏目之间要求使用一致的布局，包括一致的页面元素；一致的导航形式，使用相同的铵钮，相同的顺序。

可跟首页有变化。

5、首页及各级页面都必须带有网站的LOGO(建议小于150×54)，并链接到网站首页。

6、统一按兼容分辨率800*600设计。

为了使显示更友好，建议使用778或者760 px设计。

7、网站页面长度建议1屏半到2屏。

原则上长度不超过3屏，宽度不超过1屏。

根据用户习惯和网站需要，国内中文网站综合类、门户类(包括垂直门户)网站可设计超过3屏。

二、图形设计规范1、图片标准尺寸全尺寸banner为468×60px，半尺寸banner为234×60px，小logo为88×31px 另外150×68、120×90，120×60也是标准尺寸，网站logo一般控制在150×54以内，客户要求或特殊广告图片可另定尺寸。

建议首页存储大小不得超过150K(包括图片)，其它页面经压缩后尺寸不得超过70K。

2、图片的分类及命名规则(1) 名称分为头尾两两部分，用下划线隔开。

(2) 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。

(3) 一般来说:⏹放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner⏹标志性的图片我们取名为：logo⏹在页面上位置不固定并且带有链接的小图片我们取名为buttonXingtai Polytechnic College《网页设计与制作》—相关规范⏹在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu⏹装饰用的照片我们取名：pic⏹不带链接表示标题的图片我们取名：title⏹依照此原则类推。

css书写规则

css书写规则Div+css命名规范Css的命名是区分大小写的，建议全部使用小写。

下面总结一下最好的命名准则，好的命名不仅有利于维护人员阅读对搜索搜索引擎优化(seo)有很大的好处。

其中对代码的优化是一个很关键的步骤。

为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则，并做了些补充：1.1. div+css命名规范页头: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.2. CSS的Id命名规范外套: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(如购物车，收银台)当前的：current1.3. css样式文件命名主要的:master.css布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css主题:themes.css通用：basic.css上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。

css常用字体样式

css常用字体样式
CSS中常用的字体样式包括以下几种：
1.字体类型：使用font-family属性来指定字体类型，例如"微软雅黑"、"宋体"、"Times New Roman"等。

2.字体大小：使用font-size属性来指定字体大小，可以使用像素值、百分比、em等单位来指定。

3.字体颜色：使用color属性来指定字体颜色，可以直接输入颜色值或使用预定义的颜色名称。

4.字体粗细：使用font-weight属性来指定字体的粗细程度，可以使用正常、粗体、更粗等关键字或数字值（100-900）来指定。

5.字体斜体：使用font-style属性来指定字体的斜体样式，可以使用normal、italic、oblique等关键字来指定。

此外，还可以使用一些其他字体样式属性，例如行高（line-he ight）、字母间距（letter-spacing）、文字装饰（text-decorati on）等。

CSS超全笔记（适合新手入门）

CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。

引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。

type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。

⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。

是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。

其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。

外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。

CSS无难事-常用CSS hack写法和页面布局规范

写css hack，一般地是为了让页面模块在不同的浏览器下达到兼容显示的效果。

如果你经常写Hack，说明你的html布局或者div书写有出现不合理的地方。

与其一堆hack，你有必要看看你的html结构是否合理了哦。

关于这三角恋的关系，如下图：有时候也在所难免，类似于美莱氏其中的一个布局：我们看这种瀑布流式的布局，模块之间存在边距，模块内也存在边距，div的布局设置，要从细微的地方考虑，就像搭棚架一样，好的基础，才能搭得高。

这个页面小弟还无优化它，之前开源系统的前端写得一般。

要知道搜索引起对页面的抓取，也是讲究div层布局是否合理的，好的层次结构有利于seo。

我们以margin-left为例，其他css属性是一样道理的。

.melace{margin-left:10px; //让火狐，opera，chrome等firefox家族执行margin-left:8px\9; //让ie6，ie7，ie8，ie9 执行，其他非ie家族不执行*margin-left:5px; // 让ie6，ie7 执行；ie8, ie9不执行_margin-left:3px; // 让ie6执行}1. 来分析一下，margin-left:10px; 本来ie家族也会执行，但是后边的声明会将其覆盖，就是说，像java一样，如果后边没有声明覆盖，那么ie家族会执行这个参数，现在后边的声明，就覆盖了这个参数，导致的结果是只有火狐家族执行margin-left:10px; 区分了两个阵型的浏览器识别。

2. margin-left:8px\9; 这个声明ie家族能识别，火狐家族不识别。

就是用来覆盖“ margin-left:10px; ”的。

3. *margin-left:5px; 用” * “ 星号声明，ie6和ie7执行这个参数，ie8和ie9不执行，导致的结果是：ie8和ie9 执行了margin-left:8px 。

这样便将ie6、ie7 和ie8、ie9区分了。

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分支机构Branches供求信息Supply & Demand经营理念Operation Principle产品销售Sales Sales联系我们Contact Us Contact Us信息发布Information Information返回首页Homepage Homepage产品定购order order分类浏览Browse By Category电子商务E-business公司实力Strength Strength版权所有Copy Right友情连结Hot Link应用领域Application Fields人力资源Human Resource Hr领导致辞Leader`s oration企业资质Enterprise Qualification行业新闻Trade News行业动态Trends客户留言Customer Message客户服务Customer Service新闻动态News & Trends公司名称Company Name销售热线Sales Hot-Line联系人Contact Person您的要求Your Requirements建设中In Construction证书Certificate Certificate地址ADD Add邮编Postal Code Zipcode电话TEL Tel传真FAX Fax产品名称Product Name产品说明Description Description价格Price品牌Brand规格Specification尺寸Size生产厂家Manufacuturer Manufacturer 型号Model产品标号Item No.技术指标Technique Data产品描述Description产地Production Place销售信息Sales Information用途Application论坛Forum在线订购On-line order招商Enterprise-establishing招标Bid Inviting综述General业绩Achievements招聘Join Us求贤纳士Join Us大事Great Event动态Trends服务Service投资Investment行业Industry规划Programming环境Environment发送Delivery提交Submit重写Reset登录Enter注册Login中国企业网技术支持Powered By 社区Community业务介绍Business Introduction在线调查Online Inquiry Inquiry下载中心Download会员登陆Member Entrance意见反馈Feedback常见问题FAQ中心概况General Profile教育培训Education & Training游乐园Amusement Park在线交流Online Communication专题报道Special Report[/quote]常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

CSS样式书写顺序及规范

CSS样式书写顺序及规范作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在项⽬中，⼤部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。

后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。

下⾯就开始学习吧！！各种类型属性的书写顺序及作⽤书写顺序优先级第⼀定位属性：position display float left top right bottom overflow clear z-index优先级第⼆⾃⾝属性：width height padding border margin background优先级第三⽂字样式：font-family font-size font-style font-weight font-varient color优先级第四⽂本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height优先级第五css3中新增属性：content box-shadow border-radius transform……书写顺序的作⽤减少浏览器reflow（回流），提升浏览器渲染dom的性能。

解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构构建render树：DOM树和CSS树合并之后形成的render树。

布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。

HTML,CSS编码规范

HTML、CSS编码规范1.基本原则* 遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式* 代码格式化，保持干净整洁2.HTML部分2.1.添加必须的utf-8的字符集，并且使用HTML5的简洁方式：<meta charset="utf-8" />2.2.遵循xhtml 1.0规则：1)所有标签必须小写2)标签属性必须使用成对引号（单引号或双引号）3)标签属性必须有值：<select><option selected="selected"></option></select><input type="checkbox" checked="checked" />4)特殊符号必须转义（&、<、>、©、»…）2.3.标签属性命名规范id：_连接符命名法“hello_world”class: -连接符命名法“hello-world”name：骆驼式命名法“helloWorld”1)表单元素的id必须加以下前缀label：lbltext：txtpassword：txttextarea：txtfile：txtradio：radcheckbox：chksubmit：btnreset：btnbutton：btnhidden：hid2)应使用统一的结构布局的元素id命名3)name命名一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用骆骆式命名法命名，例如id=”txt_id_card”，那么name=”idCard”。

2.4.要合理使用标签，语义化结构1)标签合理嵌套a、span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p2)避免多余的div、span、table标签，正确使用标签表现DOM结构，在文档去除css的情况下，仍然具有结构和可读性，以下是html标记的使用规范：p：文本段落；dl：定义列表，可包括标题和内容简介的列表；ul：无序列表；ol：有序列表；h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；strong/em：强调文本；img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css 处理，不使用img元素；3)合理化表单结构a)使用fieldset元素包裹相同类别的字段；b)使用legend元素表示字段类别名称；c)使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点；d)文本框不使用size属性定义宽度，而使用css的width属性；e)要添加maxlength属性限制输入字符的长度。

前端开发规范及注意事项

前端开发规范及注意事项一、CSS编码规范1、单行形式书写风格的排版约束1.1）每一条规则的大括号 { 前后加空格1.2）多个selector共用一个样式集，则多个selector必须写成多行形式1.3）每一条规则结束的大括号 } 前加空格1.4）属性名冒号之前不加空格，冒号之后加空格1.5）每一个属性值后必须添加分号; 并且分号后空格例如：div.test { width: 100px; height: 200px; }a:focus,a:hover { position: relative; right: 1px; }2、多行形式书写风格的排版约束2.1）每一条规则的大括号 { 前添加空格2.2）多个selector共用一个样式集，则多个selector必须写成多行形式2.3）每一条规则结束的大括号} 必须与规则选择器的第一个字符对齐2.4）属性名冒号之前不加空格，冒号之后加空格2.5）属性值之后添加分号;3、其他规范3.1）使用单引号，不允许使用双引号3.2）如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后，并且属性名称要对齐，例如：div.animation-demo {-webkit-animation: mymove 5s infinite;-moz-animation: mymove 5s infinite;-o-animation: mymove 5s infinite;animation: mymove 5s infinite;}4、命名规则书写规范4.1）规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _4.2）命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合4.3）命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS 命名规则4.4）不允许通过1、2、3等序号进行命名4.5）避免class与id重名4.6）id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id4.7）class用于标识某一个类型的对象，命名必须言简意赅。

css字体样式大全

css字体样式大全CSS字体样式大全在网页设计中，字体样式对于页面的整体效果和用户体验起着重要的作用。

通过CSS，我们可以轻松地改变字体的样式，从而使网页更加吸引人。

本文将为您介绍一些常见的CSS字体样式，以帮助您在设计网页时选择适合的字体风格。

1. 字体系列 (font-family)在CSS中，可以通过font-family属性来指定字体的系列。

字体系列可以包含多个字体名称，用逗号分隔。

当浏览器不支持第一个字体时，会依次尝试显示后面的字体。

以下是一些常用的字体系列示例：```font-family: Arial, sans-serif; /* 无衬线字体 */font-family: 'Times New Roman', serif; /* 衬线字体 */font-family: Verdana, Arial, sans-serif; /* 备选字体系列 */```2. 字体大小 (font-size)通过font-size属性可以设置字体的大小。

可以使用相对单位（如em、rem）或绝对单位（如px、pt）来定义字体大小。

以下是几个示例：```font-size: 16px; /* 使用像素作为单位 */font-size: 1rem; /* 使用相对单位rem */font-size: 1.2em; /* 使用相对单位em */```3. 字体粗细 (font-weight)设置字体的粗细可以传达文字的强调程度。

可取的值有：normal （默认）、bold（粗体）、bolder（更粗体）、lighter（更细体）等。

```font-weight: normal; /* 默认粗细 */font-weight: bold; /* 粗体 */font-weight: bolder; /* 更粗体 */font-weight: lighter; /* 更细体 */```4. 字体样式 (font-style)通过font-style属性可以设置字体的样式，包括斜体和正常（默认）两种。

css规则与样式表

Css规则<style type-"text/css"></style> //固定格式在<head></head>之内内部样式表<html><head><title>CSS ANATOMY</title><style type-"text/css">p{color:red;font-weight:bold //font-weight:bold设置字体为粗体background-color:gray; // background-color:gray;设置背景颜色为灰色} //最后一个分号可省略</style></head><body><h1>132</h1><p>这是一个<em>段落</em></p> //<em>表示强调,字体倾斜</body></html>外部样式表<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head><head><link href="mystyle.css" rel="stylesheet" type="text/css"></head>内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。

使用内联样式的方法是在相关的标签中使用样式属性。

样式属性可以包含任何CSS 属性。

以下实例显示出如何改变段落的颜色和左外边距。

CSS前端规范

前端CSS 规范大全本文转载自标点符，文章整理了Web前端开发中的各种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.css2、文件引入可通过外联或内联方式引入link和style标签都应该放入head中，原则上，不允许在html上直接写样式。

css文件命名规则

*类选择符：比如<div class="box"></div>，可以使用类选择符 .box
*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#id1{}可以写成#id1{}
七、默认值
通常padding和margin的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。为避免冲*突，可以在样式表一开始就先定义所有元素的
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
二、id和class的使用及区别

常用css样式

常用css样式常用CSS样式CSS是一种用于网页设计的样式表语言，它可以为网页添加样式和布局，使其看起来更美观和易于导航。

以下是常用的CSS样式。

一、文本样式1.字体大小使用font-size属性可以设置文本的大小，单位可以是像素(px)、百分比(%)或em。

例如：p {font-size: 16px;}2.字体颜色使用color属性可以设置文本的颜色，可以使用颜色名称或十六进制值。

例如：p {color: red;}3.字体样式使用font-style属性可以设置文本的样式，包括normal（默认）、italic（斜体）和oblique（倾斜）。

例如：p {font-style: italic;}4.字体粗细使用font-weight属性可以设置文本的粗细程度，包括normal（默认）、bold（加粗）和lighter（细）。

例如：p {font-weight: bold;}5.行高使用line-height属性可以设置文本行与行之间的距离。

例如：p {line-height: 1.5;}二、背景样式1.背景颜色使用background-color属性可以设置元素的背景颜色，可以使用颜色名称或十六进制值。

例如：div {background-color: #f0f0f0;}2.背景图片使用background-image属性可以为元素添加背景图片，可以使用相对或绝对路径。

例如：div {background-image: url("bg.jpg");}3.背景重复使用background-repeat属性可以设置背景图片的重复方式，包括repeat（默认）、repeat-x、repeat-y和no-repeat。

例如：div {background-repeat: no-repeat;}4.背景位置使用background-position属性可以设置背景图片的位置，可以使用关键字（如top、bottom、left和right）或像素值。

HTML／CSS代码开发规范文档

上海来去网络信息科技有限公司HTML/CSS代码开发规范文档文件状态[ ] 草稿[√] 正式发布[ ] 正在修改文件标识：RQ Report 当前版本：V 1.0作者：陈冬明完成日期：2011-04-13上海来去网络信息科技有限公司版本历史版本/状态作者参与者日期备注V 1.0 陈冬明2011-04-13目录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代码的网页程序开发人员。

css语法规则

css语法规则CSS语法规则CSS是一种用于网页设计的样式表语言，它可以为HTML文档添加样式和布局。

为了正确地使用CSS，我们需要遵循一些基本规则和语法。

下面是一个全面的、详细的CSS语法规则，以帮助您更好地掌握这门语言。

一、基本概念1. CSS指层叠样式表（Cascading Style Sheets）。

2. CSS样式定义了HTML元素的外观和布局。

3. CSS样式可以通过内部样式表、外部样式表或行内样式来定义。

4. CSS选择器用于选择要应用样式的HTML元素。

二、CSS语法1. CSS规则由选择器和声明块组成。

2. 选择器指定要应用样式的HTML元素。

3. 声明块包含一个或多个声明，每个声明由属性和值组成，属性与值之间使用冒号分隔，每个声明之间使用分号分隔。

4. 外部CSS文件必须以.css扩展名保存，并通过<link>标签在HTML 文档中引入。

5. 内部CSS可以在<head>标签中使用<style>标签来定义，并将其放置在<head>标签中间。

6. 行内CSS可以直接在HTML元素中使用style属性来定义。

三、CSS选择器1. 元素选择器：通过HTML元素名称来选择元素。

例如，p选择器会选择所有的段落元素。

2. ID选择器：通过HTML元素的ID属性来选择元素。

例如，#myid 选择器会选择ID为“myid”的元素。

3. 类选择器：通过HTML元素的class属性来选择元素。

例如，.myclass选择器会选择class为“myclass”的所有元素。

4. 属性选择器：通过HTML元素的属性来选择元素。

例如，[href]选择器会选择所有具有href属性的元素。

5. 伪类选择器：通过HTML元素的状态或位置来选择元素。

例如，:hover伪类可以在鼠标悬停在一个链接上时改变链接的颜色。

6. 组合选择器：将多个不同类型的CSS规则组合在一起，以便同时应用于一个或多个HTML元素。

css规范文档

css规范⽂档CSS书写顺序*{/*显⽰属性*/displaypositionfloatclearcursor…/*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align…/*⽂字*/colorfontcontent/*边框背景为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来⽅便，哈哈。

*/ borderbackground}下表顺序为从上到下，从左到右：========================display || visibilitylist-style : list-style-type || list-style-position || list-style-imagepositiontop || right || bottom || leftz-indexclearfloatwidthmax-width || min-widthheightmax-height || min-heightoverflow || clipmargin : margin-top || margin-right || margin-bottom || margin-leftpadding : padding-top || padding-right || padding-bottom || padding-leftoutline : outline-color || outline-style || outline-widthborderbackground : background-color || background-image || background-repeat || background-attachment || background-position colorfont : font-style || font-variant || font-weight || font-size || line-height || font-familyfont : caption | icon | menu | message-box | small-caption | status-bartext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorCSS命名规则：⼀．⽂件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；　链接样式：link.css；　打印样式：print.css；主要的 master.css专栏 columns.css主题 themes.css主要的 master.css模块 module.css基本共⽤ base.css表单 forms.css补丁 mend.css　⼆．页⾯结构容器: container页头：header内容：content页⾯主体：main页尾：footer栏⽬：column页⾯外围控制整体布局宽度：wrapper左右中：left right center　三．导航导航：nav主导航：mainbav⼦导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu⼦菜单：submenu摘要: summary四．功能标志：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版权：copyrightContainer div #container 容器Layout #layout 布局Header or banner div #head, #header 页头部分Footer div #foot, #footer 页脚部分Navigation list #nav 主导航Sub-navigation list #subNav ⼆级导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebar_a, #sidebar_b 左边栏或右边栏Main div #main 页⾯主体Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Search input #searchInput 搜索输⼊框Search output #search_output 搜索输出和搜索结果相似Search #search 搜索Search bar #searchBar 搜索条Search results #search_results 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #logo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Arrow arr/arrow 箭头Little #little 标题Website map #sitemap ⽹站地图List #list 列表Home page #homepage ⾸页Sub page subpage ⼆级页⾯⼦页⾯Toolbar #tool, #toolbar ⼯具条Next pulls #drop 下拉Next pulls menu #dorpmenu 下拉菜单Status #status 状态Container div #container 容器Header or banner div #header 页头部分Main or global navigation div #mainNav 主导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏Main div #main 页⾯主体Content div #content 内容部分The main content area #contentMain 主要内容区域Footer div #footer 页脚部分Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Sub-navigation list #subNav ⼆级导航Search input #searchInput 搜索输⼊框Search output #searchOutput 搜索输出和搜索结果相似Search #search 搜索Search results #searchResults 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #brandingLogo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Status #status 状态Products .products 产品Products prices .productsPrices 产品价格Products description .productsDescription 产品描述Products review .productsReview 产品评论Editor's review .editorReview 编辑评论New release .newsRelease 最新产品Publisher .publisher ⽣产商Screen shot .screenshot 缩略图FAQ .faqs 常见问题Keyword .keyword 关键词Blog .blog 博客Forum .forum 论坛五class的命名:(1)颜⾊:使⽤颜⾊的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体⼤⼩,直接使⽤"font+字体⼤⼩"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使⽤对齐⽬标的英⽂名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使⽤"类别+功能"的⽅式命名,如.barnews { }.barproduct { }/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/9、⿏标⼿势：在XHTML标准中，hand只被IE识别，当需要将⿏标⼿势转换为“⼿形”时，则将“hand”换为“pointer”，即“cursor:pointer;”10．注释书写规范1、⾏间注释：直接写于属性值后⾯，如：.search{border:1px solid #fff;/*定义搜索输⼊框边框*/background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/}2、整段注释：分别在开始及结束地⽅加⼊注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}/*=====搜索条结束=====*/3．协助注释⾮作者维护时所加⼊的表⽰修改时间、修改⼈等标识信息。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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”……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd“>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。

完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“/TR/xhtml1/DTD/xhtml1-strict.dtd“>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”“/TR/xhtml1/DTD/xhtml1-frameset.dtd“>理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。

因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2. 指定语言及字符集：为文档指定语言：<html xmlns=”/1999/xhtml” lang=”en”>为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：常用的语言定义：<meta http-equiv=”Content-Type” content=”text/html; 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”><!– body { background : white ; color : black ; } –> </style>外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。

例如，使用P 元素来包含文字段落，而不是为了换行。

如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；避免过渡使用div和span。

少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；5、派生选择器：可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainMenu ul li {background:url(images/bg.gif;)}6、辅助图片用背影图处理：这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。

将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;} 7、结构与样式分离：在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。

如：<div id=”mainMenu”><ul><li><a href=”#” >首页</a></li><li><a href=”#” >介绍</a></li><li><a href=”#” >服务</a></li></ul></div>/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/9、鼠标手势：在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”二．注释书写规范1、行间注释：直接写于属性值后面，如：.search{border:1px solid #fff;/*定义搜索输入框边框*/background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/}2、整段注释：分别在开始及结束地方加入注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}/*=====搜索条结束=====*/三．样式属性代码缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。

如：#mainMenu {background:url(../images/bg.gif);border:1px solid #333;width:100%;height:30px;overflow:hidden;}#subMenu {background:url(../images/bg.gif);border:1px solid #333;width:100%;height:20px;overflow:hidden;}两个不同类的属性值有重复之处，刚可以缩写为：#mainMenu,#subMenu {background:url(../images/bg.gif);border:1px solid #333;width:100%;overflow:hidden;}#mainMenu {height:30px;}#subMenu {height:20px;}2、同一属性的缩写：同一属性根据它的属性值也可以进行简写，如：.search {background-color:#333;background-image:url(../images/icon.gif);background-repeat: no-repeat;background-position:50% 50%;}.search {background:#333 url(../images/icon.gif) no-repeat 50% 50%;}3、内外侧边框的缩写：在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：.btn {margin-top:10px;margin-right:8px;margin-bottom:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom:12px;padding-left:8px;}则可缩写为：.btn {Margin:10px 8px 12px 5px;Padding:10px 8px 12px 5px;}而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：.btn {margin-top:10px;margin-right:5px;margin-bottom:10px;margin-left:5px;}缩写为：.btn {margin:10px 5px;}而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：.btn {margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;}缩写为：.btn{margin:10px;}4、颜色值的缩写：当RGB三个颜色值数值相同时，可缩写颜色值代码。