7

CSS 声明中的属性顺序是否会影响 HTML 的呈现？

4

5 回答 5

11

这确实是一个比我最初想象的更棘手的问题。我的第一反应是：

在 CSS规则（也称为“规则集”）中，声明的顺序（表单属性：值）是无关紧要的。所以foo { color: red; background: white; }等价于foo { background: white; color: red; }。规范中没有关于此的单独声明（我想）；这是因为没有任何声明可以使该命令变得重要。

再想一想，我们也可以有

* { font: 100% Calibri; font-weight: bold; }

如果切换顺序会发生什么？在浏览器中，它确实有效果。我不确定这应该如何根据 CSS 规范来解释，但浏览器显然并且自然地按顺序处理声明。所以规则使文本加粗，但如果你改变顺序，

* { font-weight: bold; font: 100% Calibri; }

然后事情发生了变化。font速记设置font-weight为其初始值，因此normal文本不是粗体。

第三个想法，有许多基于顺序的方法和技巧。所以是的，声明的顺序很重要。

规则顺序的影响是一个完全不同的问题。

于 2012-10-25T18:14:50.760 回答
5

显然顺序对结果没有任何直接影响。这里已经提到了这个主题：http: //css-tricks.com/new-poll-how-order-css-properties/

根据这里它确实有影响：http: //css-tricks.com/ordering-css3-properties/

这是另一个趋势： http: //perishablepress.com/obsessive-css-code-formatting-patterns-and-trends/

最终判决：安排你判断最好的方式，它会起作用。

于 2012-10-26T03:14:32.177 回答
4

主要是 5 种 CSS 属性顺序：

  1. 随机
  2. 分组依据
  3. 按字母顺序
  4. 按线长
  5. CSS 属性的重要性

1.随机

.module {
   border: 1px solid #ccc;
   width: 25%;
   padding: 20px;
   position: relative;
   min-height: 100px;
   z-index: 1;
   border-radius: 20px;
}

2. 分组依据

.module {
   width: 25%;
   min-height: 100px;
   padding: 20px;

   border: 1px solid #ccc;
   border-radius: 20px;

   position: relative;
   z-index: 1;
}

3. 按字母顺序 

.module {
   border-radius: 20px;
   border: 1px solid #ccc;
   min-height: 100px;
   padding: 20px;
   position: relative;
   width: 25%;
   z-index: 1;
}

4.按线长

.module {
   border: 1px solid #ccc;
   border-radius: 20px;
   position: relative;
   min-height: 100px;
   padding: 20px;
   z-index: 1;
   width: 25%;
}

这是参考网址：https ://css-tricks.com/new-poll-how-order-css-properties/

5. 按重要性排序 CSS 属性

但按重要性排序 CSS 属性的最佳方法

  1. 布局属性（位置、浮动、清除、显示）
  2. 盒子模型属性（宽度、高度、边距、填充）
  3. 视觉属性（颜色、背景、边框、框阴影）
  4. 排版属性（字体大小、字体系列、文本对齐、文本转换）
  5. 其他属性（光标、溢出、z-index）

例子： 

.button {
    display:inline-block;
    margin:1em 0;
    padding:1em 4em;
    color:#fff;
    background:#196e76;
    border:0.25em solid #196e76;
    box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3), 
               0.5em 0.5em 0 #444;
    font-size:3em;
    font-family:Avenir, Helvetica, Arial, sans-serif;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
}
于 2020-03-11T13:12:58.357 回答
0

通常不需要或规则来对 CSS 声明中的属性进行排序。我写的顺序就像我对设计和浏览器响应的要求一样，但是在萤火虫工具中它排列了 sin字母顺序。

最好的订购方法是 

 1. box model = width ->height->float
 2. font related = font-size -> text-decoration, font-family
 3. background images = width, height, border, image

然后，根据我的经验，只有浏览器才能更快地为每个元素分配空间。

有些人订购如下类型：

随机的

按字母顺序

按类型分组

按属性长度

于 2012-10-26T02:54:47.593 回答
0

有一些指导方针。但是，归根结底，它归结为浏览器实现。尽量不要依赖某个命令总是有效的，因为它不会。在声明中，语句倾向于覆盖先前的语句。

于 2012-10-26T03:16:39.260 回答