HTML+CSS编写规范

名人名言:如果我们选择了最能为人类福利而劳动的职业,那么,重担就不能把我们压倒,因为这是为大家而献身;那时我们所感到的就不是可怜的、有限的、自私的乐趣,我们的幸福将属于千百万人,我们的事业将默默地、但是永恒发挥作用地存在下去,而面对我们的骨灰,高尚的人们将洒下热泪。——马克思

在任何一个项目或者体系开辟之前都须要定制一个开辟商定和规矩,如许有利于项目标整体风格同一、代码保护和扩大。因为Web项目开辟的分离性、自力性、整合的交互性等,所以定制一套完全的商定和规矩显得尤为首要。

第一节 CSS样式文件的定名

建树样式表文件时,分类编写样式到下列样式表文件中,并同一放在【CSS】文件夹里:

首要

main.css

文字样式

font.css

表格

table.css

主题

themes.css

打印

print.css

补丁

mend.css

在项目初期,会把不合类此外样式放于不合的CSS文件,是为了CSS编写和调试的便利,在项目后期会为了网站机能上的推敲会整合不合的CSS文件到一个CSS文件,须要时可紧缩。

第二节 CSS选择符的定名

所有选择符必须有小写英文字母或“_”下划线构成,样式名必须是默示该样式的可能含义(禁止呈现如Div1、div2、Style1……),参考后面的“样式定名参考”。对CSS选择器的应用只容许派生选择器、类选择器和属性选择器,以及它们的组合应用,严禁应用ID选择器(ID是用于JavaScript的编写)。

如:li span {…}td.fancy {…}input[type="text"]{…}

当定义的样式名斗劲错杂时用下划线把层次分隔,比如:dcrm_logo{ …} dcrm_logo_ico{…}

第三节 图片的定名与书写

图片的定名原则小写英文字母名称放在头尾两项目组,用“_”下划线隔开,头部默示此图片的大类性质例如告白、标记、菜单、按钮等等;尾部默示图片的概念。设计人员在PS中保存图片时,请应用“文件”à“存储为Web和设备所用的格局”。

告白

banner

标记

logo

链接的小图片

button

装潢图

pic

题目标图片

title

banner_sohu.png 、banner_sina.png、 menu_about_us.png、menu_job.png、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg

第四节 CSS注释书写规范

4.1 提示和标签信息注释

这是注释最常用的路子,可认为本身或其他开辟人员留下提示信息可以避免后期引起的不须要的困惑和麻烦。这种应用简洁性最为首要。

.search{

border:1px solid #fff; }

重视:注释内容和前面样式语句间有3个空格,后面1个空格

4.2 批改样式注释(时候和相干人员)
4.3 文档布局

.search{

border:1px solid #fff;

color:#333; }

.menul_ul{

border:1px solid #fff; }

重视:相对自力的2段内容之间空1行。

第五节 CSS布局编码标准和建议

5.1 建树样式表索引

样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相干信息,它一般是一段格局化的CSS注释文本写在 main.css中。给出该CSS文件作者的相干信息;定义站点的布局,记录文件版本号(利于多作者协作及将来更新)

5.2 定名锚点 的应用

定名锚点是用来规划全部CSS文件布局的(就如同书签一样),从而使全部CSS文件获得杰出的组织。定名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点体系,所以我一般采取下面的小技能来完成。在头部索引拷贝你想找到的锚点,并在全部文档中查找,从而获取该CSS节。

*==STRUCTURE:===============================================

¥__header Header Definitions

¥__menu Global Site

¥__content Everything within the content

-----------------------------------------------------------------------------------------------*/

{...Header CSS Definitions...}

{...Header CSS Definitions...}

5.3 建树杰出的CSS编码次序

最后定义的 CSS 样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式,比如下面这个例子:

p { color: red; background: yellow;}

p { color: green;}

以上的段落终极将浮现绿色的字体,并带有黄色的靠山,这是因为最后定义的 color:green 将之前定义的 red 覆盖掉了,至于黄色靠山为何没有消散,那是因为第二个 p 的定义中并没有与之冲突的定义,是以它还是有效的。

5.4 合适的缩写

在CSS中经常会哄骗缩写把多个雷同类型的属性定义指定为一个。CSS缩写会使CSS文档加倍干净、简洁;缩写语法参考相干章节。

5.5 CSS图像拼合(即CSS Sprites技巧)

CSS Sprites技巧:将用到的所有小图片(图标)归并为一张图片,应用css靠山属性,来把握图片的显示地位和体式格式。CSS Sprites技巧的应用可以大大削减HTTP恳求的次数,减轻办事器压力,同时缩短了悬停加载图片所须要的时候延迟,使结果更流畅,不会平息。

5.6 CSS组合和嵌套

CSS组合

你不必反复有雷同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。

h2 { color: red; }

.w3cbbs { color: red; }

.w3cbbs_52css { color: red; }

则你可以如许写h2,.w3cbbs,.w3cbbs_52css { color: red; }

CSS嵌套

CSS布局好的话,没有须要应用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。

.top { background-color: #ccc; padding: 1em;}

.top h1 { color: #ff0; }

.top p { color: red; font-weight: bold; }

第六节 常用CSS选择符定名参考

导航

nav

页头

header

主导航

mainnav

页面主体

main

顶导航

topnav

内容

content

子导航

subnav

页脚

footer

菜单

menu

版权

copyright

子菜单

submenu

登岸

login

标记

logo

侧栏

sidebar

告白

banner

搜刮

search

迁移转变

scroll

标签页

tab

小技能

tips

合作伙伴

partner

参加

joinus

题目

title

注册

regsiter

指南

gUIld

消息

news

下载

download

按钮

button

状况

status

办事

service

投票

vote

注释

note

友情链接

friendlink

提示信息

msg

重视:定名体式格式应用“类别_功能”的体式格式(.bar_news{} .bar_product{})。

第七节 DIV+CSS页面的布局

Table布局因为代码冗余已经过期,所以HTML页面广泛采庖代码简洁Div+CSS的布局,HTML页面大体可分为top、main和bottom,在main中又可认为left和right,这些CSS的名必须是有意义的名字。如下面代码:

<body>

<div class="body">

<div class="top">

</div>

<div class="main">

<div class="left">

</div>

<div class="right">

</div>

</div>

<div class="bottom">

</div>

</div>

</body>

今朝table主如果用来显现数据表,反正在布局中尽量罕用table。

第八节 HTML代码书写规范

页面的HTML代码书写必须合适XHTML规范,XHTML 可以被所有的支撑 XML 的设备读取,同时在其余的浏览器进级至支撑 XML 之前,XHTML 使我们有才能编写出拥有杰出布局的文档,这些文档可以很好地工作于所有的浏览器,并且可以向后兼容。

XHTML与HTML的不合:

1. XHTML 元素必须被正确地嵌套。

2. XHTML 元素必须被封闭。

3. 标签名必须用小写字母。

4. XHTML 文档必须拥有根元素。

对于第1点:最有可能产生错误是在与<table>标签的连络,<table>的直接子元素只能为:<thead>、<tbody>、<tfoot>和<tr>,而 <thead>、<tbody>和<tfoot>的直接子元素只能为:<tr>,而<tr>的直接子元素只能为<td>和<th>,在<td>和<th>才可以放其它标签。此外相类似的标签有:<dl>、<ul>、<ol>、<>…。

某些标签不推荐应用,如:<b><strong><i><em> <strong> <dfn> <code> <samp> <kbd><var> <cite>……,因为这些标签有些是可以用CSS去同一把握,还有一些是不常应用的;某些标签是有特别意义的,如:<h1>…<h6>,这些标签是专门用于内容题目标,本人也欲望只容许应用<h1>…<h6>来默示内容题目。

在编写HTML代码时请重视缩进,在VS中按Ctrl+E+D可格局化文本。

第九节 网站根蒂根基CSS的定义

网站CSS必须得有个同一的架构,复用CSS,尽量削减反复CSS的定义。根蒂根基CSS就是那些常用的CSS定义,如:

.clear

{

clear: both;

}

.bold

{

font-weight: bold;

}

.left

{

text-align: left;

}

.error

{

color: Red;

}

.succeed

{

color: Green;

}

.center

{

text-align: center;

}

.fleft

{

float:left;

}

.fright

{

float:right;

}

.left15

{

margin-left: 15px;

}

.radius

{

border-radius: 5px;

}

CSS元素选择器可以对同一标签进行同一的样式定义,有些标签应当应用元素CSS定义,如:

body

{

font-size: 12px;

font-family: Arial;

margin: 0;

padding: 0;

color: #403f3f;

background:url(""../images/page_top.png"") repeat-x top #d1d2d2;

}

a, a:link

{

color: #2a5685;

text-decoration: none;

line-height: normal;

}

a:hover

{

color: #E0303A;

text-decoration: none;

cursor: pointer;

}

ul

{

margin: 0px;

padding: 0px;

}

hr

{

height: 1px;

border: none;

border-bottom: #dcdddd 1px solid;

}

h1, h2

{

font-size: 1.5em;

color: #000;

}

h3

{

font-size: 1.2em;

}

h4

{

font-size: 1.1em;

}

第十节 CSS调试心得

今朝的浏览器根蒂根基上都有客户端调试对象,所以当对页面进行设计或调试时,请尽量应用此类对象,而不是改源文件,然后再刷新页面,应用客户端对象可及时增、删、改HTML元素所对应的CSS,还可以获得HTML元素地点布局的具体数值,如:

在项目后期进行CSS调试时应,侧重于页面显现给浏览器后形成的HTML+CSS代码,而不是存眷于源文件,因为页面上很多元素是源文件里没有的,是动态生成的,对于那些动态生成的HTML元素,看看感化在它上方的CSS是哪些,再去批改其CSS或添加新的CSS。

对于CSS3,若是CSS3能达到更好的视觉结果,那就应用,不消去管那些不支撑CSS3的浏览器,毕竟成果CSS3是一成长趋势,对于静态页面的设计人员也应当熟悉CSS3的那些结果(比如圆角、文字暗影……),来庖代之前须要用图片来实现的结果。




如果我们选择了最能为人类福利而劳动的职业,那么,重担就不能把我们压倒,因为这是为大家而献身;那时我们所感到的就不是可怜的、有限的、自私的乐趣,我们的幸福将属于千百万人,我们的事业将默默地、但是永恒发挥作用地存在下去,而面对我们的骨灰,高尚的人们将洒下热泪。——马克思

转载:admin

相关推荐

  • Zen Coding: 一种快速编写HTML/CSS代码的方法 在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由SergeyChikuyonok开发。你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候
  • Zen Coding: 一种快速编写HTML/CSS代码的方法 译自:SmashingMagazine中文:ZenCoding:一种快速编写HTML/CSS代码的方法请尊重版权,转载请注明来源!在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由SergeyChiku
  • Zen Coding: 一种快速编写HTML/CSS代码的方法 Quote:http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html中文:ZenCoding:一种快速编写HTML/CSS代码的方法请尊重版权,转载请注明来源!
  • 学习静态网页开发 第二课:规范设计,规范编写 WEB标准化设计和WEB文档标准化编写给我们带来的好处是页面结构清晰,降低客户端浏览器的变革带来兼容性成本开销.另外标准化的web文档被认为对搜索引擎是友好的。W3C描述的网页基本架构分为三个构面:结构,格式与行为。(1)结构结构指的是网页
  • 让你编写HTML/CSS代码的速度超过70码 notepad++ 插件 ZenCoding用法(重点来了)1.【Ctrl+E】常规缩写比如写下div#page>div.logo+ul>li*3>a,按一下Ctrl+E,立马就可以转化成:2.【Ctrl+Shift+A】嵌套写法比如,我们想让写好
  • 6种编写HTML和CSS最有效的方法 本文分享了6种编写HTML和CSS的最有效的方法,希望能提供你的效率,为你节约时间。1.DynamicCSS(动态CSS)如果你想加速你的CSS代码编写,那么你需要学习并掌握动态CSS。大部分的动态CSS增加了nestedriles,var
  • 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示 使用eclipse自带的插件,无需另外安装插件,具体步骤如下1.打开eclipse→Windows→Preferences→Java→Editor→ContentAssist修改AutoActivationtriggersforJava的值
  • 6种编写HTML和CSS的最有效的方法 写HTML5和CSS3,以及JavaScript,前端开发者有了大大的用武之地。大家都在用很多的工具和技术来武装自己,以加快前段的开发。  本文分享了6中最有效的方法,希望能提供你的效率,为你节约时间。  1.DynamicCSS(动态CS
  • Java如何规范编码的编写 类中的每个单词的首字母都需要大写,如UserService,错误的命名方式userService、userservice测试用例以Test结尾,如UserServiceTest如果以术语缩写开头,术语缩写应全部大写,如HTMLEditor错
  • HTML+CSS编写规范(转) #租房宝#你有几条是符合的? 原文地址:http://www.cnblogs.com/Wenwang/archive/2011/09/07/2169881.html在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。
  • HTML+CSS编写规范 在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。第一节CSS样式文件的命名建立样式表文件
  • 让代码飞一会儿:快速编写 HTML 和 CSS 的工具和技术 前言你曾经考虑过想要加快HTML和CSS编码速度吗?不管你是否想过,都来看看这篇文章吧,你会从中学到很多东西。我们要讨论的不是CSS网格框架,也不是CSSReset。在这篇文章中,我们关注的是不同寻常的编码方式——CSS编译器以及HTML缩

你的评论

就没有什么想说的吗?

最新博客

关于我们 移动版

©2017传客网    琼ICP备15003173号-2    

本站部分文章来源于互联网,版权归属于原作者。
本站所有转载文章言论不代表本站观点,如是侵犯了原作者的权利请发邮件联系站长(weishubao@126.com),我们收到后立即删除。
站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

X