• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!
首页 > IT技术 > DIV+CSS > 内容

HTML页面CSS书写规范

2015-06-11 21:10:37   来源:叶景网络
        叶景网络(www.cngxit.com),致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发, 与其他网站建设等。叶景网络为您分享:CSS中一种简单的方法让文字与图片平行
    一、 结构说明
    1.1、<link type=”text/css” rel=”stylesheet” href=”css/common.css” media=”all” />为调用外部样式表。
    1.2、<script type=”text/javascript” src=”js/prototype.js”></script>为调用外部的javascript文件。
    1.3、页面内嵌样式表请在html中的<head></head>之间自行添加。<style type=”text/css”>……</style>
    1.4、页面内嵌javascript请在html中的<head></head>之间自行添加<script type=”text/javascript”>……</script>
    1.5、如无特殊需要,请尽量避免在html内部添加css和javascript,应统一采用外部链接的方式进行调用。
    二、 代码说明
    2.1、所有标签必须关闭,如果是单独不成对的标签,在标签最后添加” / ”来关闭。例如:成对标签 <strong></strong>,<tr></tr>不成对标签 <br /> ,<hr />, <input type=”text” />,<img src=”logo,gif” alt=”logo“ />
    2.2、标签的元素和属性名必须小写,避免大写及大小写夹杂。<BODY>必须写成<body>, “onMouseOver”必须写成 “onmouseover”
    2.3、所有标签必须采用合理嵌套。例如:<p><b></p></b> 必须改为 <p><b></b></p>
    2.4、所有属性必须添加引号,例如: <div id=mainFrame></div> 必须写成 <div id=”mainframe”></div>
    2.5、所有html页面都必须调用此共享css文件。common.css
    2.6、所有css属性和值必须采用小写的形式如:FONT-SIZE:12PX;必须改为font-size:12px;
    2.7、所有css值的后面必须加分号结束,如:background:#FFF 必须写成 background:#FFF;
    2.8、定义字体大小时,如果值是0的时候,可以省略单位(px,em,%等),其余情况必须添加相应的单位。统一使用:px
    三、CSS命名参考
    1、常用的CSS命名规则:
    头:header
    内容:content/container
    尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    2、直观命名
    当在设计Web页面以及需要对一个div进行标识的时候,最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示:
    自上而下小组:top-panel
    横向:horizontal-nav
    左面:left-side
    中心-栏目:center-column
    右面:right-col
    这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义,因此满足了标识页面元素以及相应的CSS样式的需要。
    但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置,因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时,这些命名没有涉及文档内容的结构。因此,下面给出了对CSS类以及ID命名更好的方法。
    3、结构化命名
    结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记(markup)中的类和id名称。
    有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容(content)以及标记(markup)进行重用。当你理解这种方式时,很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频(audio)等外观格式上显得非常不合适。因此,应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
    可以按照如下所示的结构化方式来对类以及id名称命名:
    顶部抢眼部分:branding
    导航部分:main-nav
    主要内容部分:main-content
    这些名字同直观命名方式一样非常易懂,但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记(structural markup)的初衷,即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
    即使你不打算在其他的媒体上对Web页面进行格式修改,使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如,结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当,因为无论它出现在页面的哪一边,这个名字仍然对开发人员来说直观易懂。
    4、惯例
    Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一,但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表:
    header
    content
    nav
    sidebar
    footer
    如果要查看完整的列表,可以看看最常见命名惯例表
    这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢?尽管这是我所希望的,但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时,使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便,尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。
    review:
    大的布局div可以以外观的方式命名(如header,footer),其他的我觉得还是应该以描述所含内容的标准来命名(如menu,news)
    5、自定义命名:
    根据w3c网站上给出的,最好是用意义命名
    比如:是重要的新闻高亮显示(像红色)
    有两种
    .red{color:red}
    .important-news{color:red}
    很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字
叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
table+div+iframe打造高度自适应的后台框架 table+div+iframe打
HTML页面CSS书写规范 HTML页面CSS书写规范
CSS中一种简单的方法让文字与图片平行 CSS中一种简单的方
CSS兼容IE6问题汇总 CSS兼容IE6问题汇总
关注排行RANKING
1

table+div+iframe打造高度自适应的后台框架

table+div+iframe打造高度自适应的后台框架 第一个tr是固定高度,用于顶部的导航菜单,所以无论是td还是里面的div header,其高度...

2

HTML页面CSS书写规范

HTML页面CSS书写规范 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建设、...

3

CSS中一种简单的方法让文字与图片平行

CSS中一种简单的方法让文字与图片平行 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

4

CSS兼容IE6问题汇总

CSS兼容IE6问题汇总 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领...

5

DIV+CSS图片和文字如何显示同一行

DIV+CSS图片和文字如何显示同一行 需要把图片和单行文字垂直居中对其,可以给图片 的CSS 定义一个vertical-align: midd...

6

关于IE中18px的默认行高

关于IE中18px的默认行高 在IE中定义height时,如果值小于18px的默认行高时,得到的结果总是18px的高,这...

7

DIV CSS 网页兼容全搞定 (IE6 ...

DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌) 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明。

8

常用的CSS命名规范

常用的CSS命名规范 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领...

9

DIV+CSS浏览器兼容模式

DIV+CSS浏览器兼容模式 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行...