内联CSS格式最佳实践-两个问题

Question

问题#1 -在HTML元素中指定内联样式时，是否有必要包含尾随分号？例如..。

<div style="padding:10px;">content</div>

问题#2 -当指定内联样式时，是否应该在属性名称和属性值之间的冒号后面插入一个空格？

<div style="padding: 10px;">content</div>

与

<div style="padding:10px;">content</div>

Answer 1

答案#1: No.

只有在声明之间才需要分号。

声明块(在下面的文本中也称为{}-block )以左大括号({)开始，以匹配的右大括号(})结束。中间必须有一个由零个或多个分号分隔(;)声明组成的列表。

来源：http://www.w3.org/TR/css3-syntax/#rule-sets

样式属性的值必须与CSS声明块内容的语法匹配(不包括分隔大括号)。

来源：http://www.w3.org/TR/css-style-attr/#syntax

因为您只有一个声明，所以没有什么要分隔的，所以不需要分号。

但是，CSS语法允许空声明，这意味着您可以随意添加前导和尾随分号。例如，这是有效的CSS：

.foo { ;;;display:none;;;color:black;;; }

并且等同于：

.foo { display:none;color:black }

答案#2: No.

声明为空或包含属性，后跟冒号(:)，后跟一个值。在它们的周围可能有空格。

来源：http://www.w3.org/TR/css3-syntax/#declarations

您可以添加空格以提高可读性，但它们没有相关性。

Answer 2

问题1：是(如果您指定了多个inline-style。即使最后一个不是必需的，最好在每一个后面都附加; )。

Quote

在

属性中应用CSS的常规规则。每个CSS语句必须用分号";“分隔，冒号出现在CSS属性和它的值之间。

问题2：没有，但你可以添加它，以使其更容易阅读。例如，Eclipse格式化会自动添加此空格。

Answer 3

Q1:没有，但我总是在后面加上分号。几年前，分号可能是某些浏览器错误呈现(或缺少)原因。我想现在已经不是问题了。

Q2:不是，两种方式的意思是一样的。你选择在冒号后面加一个空格，应该基于个人对易读性的偏好。