Html/CSS属性顺序和规则

近期在折腾网站时发现有时编辑的代码样式竟然无效,通过在网上查找资料时了解到标准而完美的Html和CSS属性都是有顺序要求的。所谓仓禀实而知礼仪,衣食足而知荣辱,那些很牛的大神们写代码时应该就是在满足基本的需求上追求这种更高的层次吧。

HTML 属性顺序

HTML标签具有一些属性,比如type、class或者id等。

为了提高可读性,推荐属性按照如下顺序排列

  1. class
  2. id, name
  3. data-*
  4. src, for, type, href
  5. title, alt
  6. aria-*, role
  7. disabled、checked或者selected

例如:

<input class="txt" name="txt" type="text" disabled>

CSS 属性声明顺序

属性排序规则

  1. 全局属性 [文档流相关属性](display, position, float, clear, visibility, table-layout)
  2. 基本属性 [盒模型相关属性](width, height, margin, padding, border)
  3. 基础属性 [排版相关属性](font, line-height, text-align, text-indent, vertical-align)
  4. 颜色背景属性 [装饰性相关属性](color, background, opacity, cursor)
  5. 文字排版(font, line-height, letter-spacing, color- text-align)
  6. 生成内容相关属性(background, border)

上述属性并非全部所有属性,只是一部分,分类之间使用一个空行分隔, 并不一定严格遵循上述原则。

参考实例


.xiaowangzi {
display: ;
visibility: ;
float: ;
clear: ;

position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;

width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;

margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;

border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;

border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;

border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;

outline: ;
list-style: ;

table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;

font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;

background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;

opacity: ;
cursor: ;
content: ;
quotes: ;
}

HTML标签嵌套规则

开始与结束标签嵌套

  1. 元素开始与结束标签嵌套错误,页面可以在大部分浏览器被正常解析,IE9会出现解析错误。
  2. 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误。
  3. 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常。
  4. 在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误。
  5. 在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6\IE7的解析错误。

严格嵌套约束、语义嵌套约束

通过示例发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误,这其实是W3C规范的严格嵌套约束,严格嵌套约束要求必须去遵守,不然就会导致所有浏览器的解析错误。

严格嵌套约束规则

(1)a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)。
(2)<p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

语义嵌套约束规则

每个元素基本都有自己的嵌套规则(即父元素可以是什么,子元素可以是什么),除了严格嵌套约束之外的一些规则就是语义嵌套约束,对于语义嵌套约束,如果不遵守,页面可能正常,但也可能解析错误,尽量要遵守,不过也要遵循最佳实践,比如导航菜单经常就会有<ul>元素作为<li>的子元素。

<section>与<article>都是为更为精确语义化布局而生,两者相同之处。

自然也有不同点,否则创建两个标签就多此一举了,下面详细做一下介绍。

一、两者关系阐述
(1)article:翻译成汉语具有”文章”的意思。
(2)section:翻译成汉语局域”章”或者”节”的意思。

如果说<article>标签是一篇文章的话,那么<section>标签就是其中的一个段落或者一个小章节。
当然不能因此说,<article>与<section>两者是从属关系,它们两个是可以相互嵌套的。

两个标签的异同点简单总结:
(1)<article>是一种特殊的<section>,用<article>都可以用<section>。

(2)<article>强调整体性与独立性,语义更加明确。

(3)<section>强调的是对整体内容进行划分区域,独立性和语义明确性比<article>差。

两标签都是为页面布局语义化更强,在表现上并没有任何特殊之处,和一个普通div相同。

二、 代码实例
下面通过一段代码片段对两者的区别进行一下分析。

<article>
<header>
<h1>Html/CSS属性顺序和规则</h1>
<p>发布时间:<time datetime="2020-5-14">2020/05/14</time></p>
</header>
<p>管子曰:“仓禀实而知礼仪,衣食足而知荣辱。”</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>小王子</h3>
<p><time datetime="2020-5-14">一分钟前</time></p>
</header>
<p>百姓的粮仓充足,丰衣足食,才能顾及到礼仪,重视荣誉和耻辱。</p>
</article>
</section>
</article>

关于上述代码两个标签的应用:

总体上是一篇文章,很明显具有很好的独立性,所以最外层用<article>包裹比较恰当。
文章的评论属于文章的一个一部分或者一个功能分区,所以使用<section>包裹。
文章评论的单独一条可以看做一个独立的整体,所以使用<article>更为恰当。



Html5+Css3由浅入深视频教程
所有平台 | MP4 | 6.6G

5
评论列表 (19条评论)
  1. 卡卡讯说道: 0 来自天朝的朋友 Chrome | 73.0.3683.121 MIX 2 Build/PKQ1.190118.001

    :jx: 学习学习

    1. Lvtu说道: 9 来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

      :wl: 向大佬你学习 :razz:

发表评论

电子邮件地址不会被公开。 必填项已用*标注