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

所有平台 • MP4版本 • 6.6G • 下载16次

1 2 3
那年 • 今日
写于2020-05-14 15:27
酸甜苦辣咸,五味调和,共存相生,百味纷呈。

赞助 点赞 10

Fong, Fong., heson, 卡卡讯, 伍子蛇, 程志辉, Mr.Chou, 阿和等人对本文发表了29条热情洋溢的评论。
  • Fong.说道:
    CSS 属性声明用可以自动化工具自动排序成标准顺序。
    1. 老王说道:
      回复 Fong.: 嗯,涨姿势了! 有好用的推荐不?
      1. Fong.说道:
        回复 老王: 看这 "stylelint-config-concentric-order"。
        1. 老王说道:
          回复 Fong.: 嗯,谢谢!
          1. Fong说道:
            回复 老王: 最近写文章我又重新理了一遍,上次留言一说得太简单,准确来说应该是 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. 老王说道:
              回复 Fong: 谢谢大神,一直用的SublimeText,马上安装一个VSC试一下! ::alu:flower::
              1. Fong说道:
                回复 老王: SublimeText 也有的,具体怎么用我没试。 官网给出有的编辑器 : https://stylelint.io/user-guide/integrations/editor/
  • heson说道:
    优秀博客,万花筒。
    1. 老王说道:
      回复 heson: 谢谢 🍵
  • 卡卡讯说道:
    :jx: 学习学习
    1. Lvtu说道:
      回复 卡卡讯: :wl: 向大佬你学习 :razz:
  • 伍子蛇说道:
    哈哈,我也写了一篇《一天入门写网页》
    1. Lvtu说道:
      回复 伍子蛇: 嗯,你那个非常详细 :zan:
    2. heson说道:
      回复 伍子蛇: 偶遇伍兄
  • 程志辉说道:
    html超文本标记语言,语义标签。刚学那会儿用p万能字体加大加粗就可以当标题,上下间距小了就来一个换行符。后来知道得规范,特别是盲人,他们区分不了这些,所以友好起见该用什么的时候就用什么,规范很重要。(说了这么多,header section article我还是没用惯都是divdivdiv
    1. Lvtu说道:
      回复 程志辉: 嗯,main、header、footer、nav、article、section都是html5新增的标签吧。 当然DIV是万能的,貌似在p标签中用div有时会有bug....
  • Mr.Chou说道:
    没有系统的学习过CSS,不过能修改自己想要的效果;都靠搜索。
    1. Lvtu说道:
      回复 Mr.Chou: 我也是一样,边折腾边摸索 :wl:
  • 阿和说道:
    卡通图暗藏链接啊,怎么不影响。。。
    1. Lvtu说道:
      回复 阿和: 可以利用CSS定位呀
      1. 阿和说道:
        回复 Lvtu: 这个不会搞啊,感觉工程浩大。
  • 阿和说道:
    我表示看得有点晕。 页面拉下来后,旁边有个小导航,这玩意儿怎么弄的?越来越高级了啊!
    1. Lvtu说道:
      回复 阿和: 从百度百科上扒下来的。。。 :lol:
      1. 阿和说道:
        回复 Lvtu: 越玩越高端了 :zan:
        1. Lvtu说道:
          回复 阿和: 好的东西必须拿来用撒 :ye: 没看到你那里有啥变化呀? :idea:
          1. 阿和说道:
            回复 Lvtu: 我现在都折腾手机版的,电脑网页不想动啊,动一发牵全身的,太费神了
            1. Lvtu说道:
              回复 阿和: 全站整成响应式得了。。。
          2. 阿和说道:
            回复 Lvtu: 那可不要,我还舍不得现在的卡通版面呢
            1. Lvtu说道:
              回复 阿和: 卡通用来做背景图就可以了,不影响呀。。。
  • 发表回复

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