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)

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

Html5+Css3由浅入深视频教程
所有平台系统 | MP4版本 | 6.6G大小 | 下载15次

1 2 3
Fong, Fong., heson, 卡卡讯, 伍子蛇, 程志辉, Mr.Chou, 阿和等人对本文发表了29条热情洋溢的评论。
  1. Fong.说道: 0 来自天朝的朋友 Chrome Mac OS X Lion 10_15_7

    CSS 属性声明用可以自动化工具自动排序成标准顺序。

    1. 老王说道: 来自天朝的朋友 Safari Mac OS X 10_15_6

      嗯,涨姿势了!
      有好用的推荐不?

      1. Fong.说道: 0 来自天朝的朋友 Chrome Mac OS X Lion 10_15_7

        看这 "stylelint-config-concentric-order"。

        1. 老王说道: 来自天朝的朋友 Safari Mac OS X 10_15_6

          嗯,谢谢!

          1. Fong说道: 0 来自天朝的朋友 Firefox Mac OS X 11.2.3

            最近写文章我又重新理了一遍,上次留言一说得太简单,准确来说应该是 CSS 代码修复,规范风格化的东西。

            如果你用 Visual Studio Code 可以安装一个名为 stylelint 的扩展,然后在工作取目录下新增一个 .stylelintrc 文件。

            {
            "extends": [
            "stylelint-config-concentric-order"
            ]
            }

            但是这还没完,你还得用 NPM 安装 stylelint-config-concentric-order

            然后工作区或全局配置 setting.json 加入如下配置

            "editor.codeActionsOnSave": {
            "source.fixAll.stylelint": true
            }

            即可排序回到 css 或 scss 里面看,具体看扩展配置。

            粗略一写,你可以试试看。

            1. 老王说道: 来自天朝的朋友 Safari Mac OS X Lion 10_15_7

              谢谢大神,一直用的SublimeText,马上安装一个VSC试一下! ::alu:flower::

              1. Fong说道: 0 来自天朝的朋友 Firefox Mac OS X 11.2.3

                SublimeText 也有的,具体怎么用我没试。

                官网给出有的编辑器 : https://stylelint.io/user-guide/integrations/editor/

  2. heson说道: 0 来自天朝的朋友 QQ浏览器 Linux

    优秀博客,万花筒。

    1. 老王说道: 来自天朝的朋友 Safari Mac OS X 10_15_6

      谢谢 🍵

  3. 卡卡讯说道: 0 来自天朝的朋友 Chrome Linux

    :jx: 学习学习

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

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

  4. 伍子蛇说道: 0 来自天朝的朋友 Chrome Mac OS X 10_15_0

    哈哈,我也写了一篇《一天入门写网页》

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

      嗯,你那个非常详细 :zan:

    2. heson说道: 0 来自天朝的朋友 QQ浏览器 Linux

      偶遇伍兄

  5. 程志辉说道: 0 Chrome Windows 10

    html超文本标记语言,语义标签。刚学那会儿用p万能字体加大加粗就可以当标题,上下间距小了就来一个换行符。后来知道得规范,特别是盲人,他们区分不了这些,所以友好起见该用什么的时候就用什么,规范很重要。(说了这么多,header section article我还是没用惯都是divdivdiv

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

      嗯,main、header、footer、nav、article、section都是html5新增的标签吧。
      当然DIV是万能的,貌似在p标签中用div有时会有bug....

  6. Mr.Chou说道: 4 来自天朝的朋友 Chrome Windows 10

    没有系统的学习过CSS,不过能修改自己想要的效果;都靠搜索。

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

      我也是一样,边折腾边摸索 :wl:

  7. 阿和说道: 5 来自天朝的朋友 QQ浏览器 Windows 7

    卡通图暗藏链接啊,怎么不影响。。。

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

      可以利用CSS定位呀

      1. 阿和说道: 5 来自天朝的朋友 QQ浏览器 Windows 7

        这个不会搞啊,感觉工程浩大。

  8. 阿和说道: 5 来自天朝的朋友 QQ浏览器 Windows 7

    我表示看得有点晕。
    页面拉下来后,旁边有个小导航,这玩意儿怎么弄的?越来越高级了啊!

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

      从百度百科上扒下来的。。。 :lol:

      1. 阿和说道: 5 来自天朝的朋友 QQ浏览器 Windows 7

        越玩越高端了 :zan:

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

          好的东西必须拿来用撒 :ye:
          没看到你那里有啥变化呀? :idea:

          1. 阿和说道: 5 来自天朝的朋友 QQ浏览器 Windows 7

            我现在都折腾手机版的,电脑网页不想动啊,动一发牵全身的,太费神了

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

              全站整成响应式得了。。。

          2. 阿和说道: 5 来自天朝的朋友 QQ浏览器 Windows 7

            那可不要,我还舍不得现在的卡通版面呢

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

              卡通用来做背景图就可以了,不影响呀。。。

发表评论

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