3.6 CSS属性语法

原创声明。未经许可，不得转载，作者：小步教程。

通常说“属性”，可能表示标签属性或CSS属性，两者语法与含义不同，容易区分。

3.6.1 简单属性

标签属性style是一个特殊属性，定义元素的样式，其中可以定义多个子属性，这些子属性即CSS属性。

<标签 style="CSS属性1:值1;CSS属性2:值2;…CSS属性n:值n;">标签内容体</标签>

CSS属性与值之间用冒号隔开，各对CSS属性之间用分号隔开。CSS属性名与属性值不区分大小写，通常小写。

示例1：多个CSS属性。

<div style="color:#ed7d31;border-left-color: #0aaa76;border-left-style: solid;border-left-width: 2px;">
    小步教程 xiaobuteach.com
</div>

元素p定义4个CSS`属性：color文本颜色、border-left-color左边框颜色、border-left-style左边框线型、border-left-width左边框宽度。

<标签 style="...;CSS复合属性1:值n1 值n2 值n3;...">标签内容体</标签>

一个CSS属性设置多个值，之间用空格分开，这个属性即复合属性，每个值对应一个原子属性。复合属性写法简洁，推荐使用。

示例2：复合属性。

<div style="color:#ed7d31;border-left:2px dotted #0aaa76;">
    小步教程 xiaobuteach.com
</div>

border-left属性为复合属性，包含三个原子属性：border-left-width、border-left-style、border-left-color。与示例1写法等价。

开发者工具查看复合属性

复合属性标记箭头，展开看到对应的原子属性。

border属性同时包含四个方向：border-top、border-bottom、border-left、border-right，可理解成复合之复合属性，对应12个原子属性。

试一试。开发者工具查看border-width是原子属性还是复合属性。

内联样式（inline style）：CSS属性声明的位置在元素的style属性。

“inline style”字面意思。指CSS属性代码“嵌入”元素代码，此处inline表示嵌入。inline style的inline与display: inline的inline没有关系。

CSS属性可以通过内联样式设置，还能通过选择器设置。

        #id1 {
            color: #f00;
            border: 2px dotted #0f0;
        }

选择器详情见“第4章 CSS选择器语法”。

语法

/* 注释内容 */

可以进行单个属性与多个属性的注释。

（1）内联样式注释

<p title="xiaobuteach.com" style="color:#f00;/*border:2px dotted #0f0;*/">小步教程</p>

（2）选择器样式注释

#id1{
/* color: #f00;
border:2px dotted #0f0; */
}