Html/CSS属性顺序和规则

老王 2020-05-14 1.11w ℃ 本文3247个字，预计阅读11分钟。
手机扫码浏览
Html/CSS属性顺序和规则

参考实例

CSS

.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: ;
}

1 2 3
那年 • 今日
  • 2023年 第十四届蓝桥杯青少组省赛Python中级真题题解
  • 2021年 熟悉Python中if-else分支语句，利用for - if嵌套格式完成循环判断逻辑
    • 网页设计
    老王发布于2020-05-14 15:27
    楚客追梦情难休，万里追寻志未酬。

    赞助 点赞 0

    推荐阅读

    网站注册登陆弹框和作者列表
    常用的HTML和CSS(content)特殊字符图标
    Darkmode.Js – 网站支持炫酷暗黑模式/夜间模式
    Fong, Fong., heson, 卡卡讯, 伍子蛇, 程志辉, Mr.Chou, 阿和等人对本文发表了29条热情洋溢的评论。
  • Fong.说道： LV.0
    回复
    2021-02-08 11:14 广东省广州市 Chrome MacOS 10

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

    1. 老王说道：
      回复
      2021-02-08 11:43 广东省广州市 Safari MacOS 10

      回复 Fong.: 嗯，涨姿势了！
      有好用的推荐不？

      1. Fong.说道： LV.0
        回复
        2021-02-11 02:49 广东省广州市 Chrome MacOS 10

        回复 老王: 看这 "stylelint-config-concentric-order"。

        1. 老王说道：
          回复
          2021-02-11 14:54 中国 Safari MacOS 10

          回复 Fong.: 嗯，谢谢！

          1. Fong说道： LV.0
            回复
            2021-07-03 12:58 广东省广州市 Firefox MacOS 11

            回复 老王: 最近写文章我又重新理了一遍，上次留言一说得太简单，准确来说应该是 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. 老王说道：
              回复
              2021-07-03 17:18 广东省 Safari MacOS 10

              回复 Fong: 谢谢大神，一直用的SublimeText，马上安装一个VSC试一下！ ::alu:flower::

              1. Fong说道： LV.0
                回复
                2021-07-03 17:27 广东省广州市 Firefox MacOS 11

                回复 老王: SublimeText 也有的，具体怎么用我没试。

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

  • heson说道： LV.0
    回复
    2020-12-28 21:41 江西省赣州市 Globe QQ浏览器 Android

    优秀博客，万花筒。

    1. 老王说道：
      回复
      2020-12-28 23:01 广东省 Safari MacOS 10

      回复 heson: 谢谢 🍵

  • 卡卡讯说道： LV.0
    回复
    2020-05-28 17:55 四川省成都市 Chrome Android

    :jx: 学习学习

    1. Lvtu说道：
      回复
      2020-05-28 18:54 广东省 Safari MacOS 10

      回复 卡卡讯: :wl: 向大佬你学习 :razz:

  • 伍子蛇说道： LV.0
    回复
    2020-05-17 12:41 湖北省襄阳市 Chrome MacOS 10

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

    1. Lvtu说道：
      回复
      2020-05-17 13:43 广东省 Safari MacOS 10

      回复 伍子蛇: 嗯，你那个非常详细 :zan:

    2. heson说道： LV.0
      回复
      2020-12-28 21:43 江西省赣州市 Globe QQ浏览器 Android

      回复 伍子蛇: 偶遇伍兄

  • 程志辉说道： LV.0友邻
    回复
    2020-05-16 23:04 亚太地区 Chrome Windows 10

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

    1. Lvtu说道：
      回复
      2020-05-16 23:16 广东省 Safari MacOS 10

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

  • Mr.Chou说道： LV.4
    回复
    2020-05-16 14:50 广东省惠州市 Chrome Windows 10

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

    1. Lvtu说道：
      回复
      2020-05-16 18:25 广东省 Safari MacOS 10

      回复 Mr.Chou: 我也是一样，边折腾边摸索 :wl:

  • 阿和说道： LV.6
    回复
    2020-05-15 10:25 浙江省温州市 Globe QQ浏览器 Windows 7

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

    1. Lvtu说道：
      回复
      2020-05-15 10:44 广东省广州市 Safari MacOS 10

      回复 阿和: 可以利用CSS定位呀

      1. 阿和说道： LV.6
        回复
        2020-05-15 10:52 浙江省温州市 Globe QQ浏览器 Windows 7

        回复 Lvtu: 这个不会搞啊，感觉工程浩大。

  • 阿和说道： LV.6
    回复
    2020-05-14 16:13 浙江省温州市 Globe QQ浏览器 Windows 7

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

    1. Lvtu说道：
      回复
      2020-05-14 16:21 广东省广州市 Safari MacOS 10

      回复 阿和: 从百度百科上扒下来的。。。 :lol:

      1. 阿和说道： LV.6
        回复
        2020-05-14 16:21 浙江省温州市 Globe QQ浏览器 Windows 7

        回复 Lvtu: 越玩越高端了 :zan:

        1. Lvtu说道：
          回复
          2020-05-14 16:29 广东省广州市 Safari MacOS 10

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

          1. 阿和说道： LV.6
            回复
            2020-05-14 16:31 浙江省温州市 Globe QQ浏览器 Windows 7

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

            1. Lvtu说道：
              回复
              2020-05-14 16:39 广东省广州市 Safari MacOS 10

              回复 阿和: 全站整成响应式得了。。。

          2. 阿和说道： LV.6
            回复
            2020-05-15 08:46 浙江省温州市 Globe QQ浏览器 Windows 7

            回复 Lvtu: 那可不要，我还舍不得现在的卡通版面呢

            1. Lvtu说道：
              回复
              2020-05-15 10:16 广东省广州市 Safari MacOS 10

              回复 阿和: 卡通用来做背景图就可以了，不影响呀。。。

    • 发表回复

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