3.5. CSS 声明

CSS声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的.

语法

属性:属性值;

示例

font-size:12px;
  • font-size代表字体大小
  • 12px字体大小的值

选择符中定义的最后一个声明,声明后的分号可以省略,例如:

示例

h1
{
	font-weight: bold
}

h2
{
	font-weight: bold;
	font-size: 80%
}

最后一个声明的分号已经省略。梦之都教程中为了统一与规范,所有声明后都增加分号

下面介绍两个常用的技巧

1,选择符的名字一样,声明是可以组合的

例如:

选择符名字
{
	声明1;
}

选择符名字
{
	声明2;
}

选择符名字
{
	声明3;
}

可以组合为:

选择符名字
{
	声明1;
	声明2;
	声明3;
}

示例

div
{
	color:black;
}

div
{
	font-size:12px;
}

与下面的是等价的

div
{
	color:black;
	font-size:12px;
}

2,声明全部一样,选择符的名字也可以组合

选择符名字1
{
	声明1;
	声明2;
}

选择符名字2
{
	声明1;
	声明2;
}

选择符名字3
{
	声明1;
	声明2;
}

可以组合为:

选择符名字1,选择符名字2,选择符名字3
{
	声明1;
	声明2;
}

示例

.dreamdudivwhite12px
{
	color:white;
	font-size:12px;
}

h1
{
	color:white;
	font-size:12px;
}

div
{
	color:white;
	font-size:12px;
}

与下面的是等价的

.dreamdudivwhite12px,h1,div
{
	color:white;
	font-size:12px;
}

CSS的语法是比较简单的,声明也比较直接,难点是选择符的名字,有很多种变化,高级教程中我将详细介绍

示例

h1
{
	color:red;
}

p
{
	color:black;
	font-size:12px;
}

div
{
	color:lightblue;
	font-size:16px;
}

h1, p, div
{
	border:1px solid black;
}

通过上面的示例大家可以看出选择符组合的好处,border: 1px solid black;这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量

CSS 声明示例 -- 可以尝试编辑



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都