CSS语法

时间:2020-02-23 14:30:13  来源:igfitidea点击:

在本教程中,我们将学习CSS语法。

定义样式

所有CSS样式规则均以选择器名称开头,后跟一个大括号。
在这些括号内,我们有样式声明,该声明由用冒号分隔的属性和值对组成。
每对属性值对均以分号结尾。
我们可以省略最后一对的分号,或者如果只有一对,则省略分号。

在下面的示例中,我们有一条CSS规则将段落元素的颜色设置为红色。

p {
	color : red;
}

在下面的示例中,我们将设置h1标签的字体大小和颜色。

h1 {
	font-size : 24px;
	color : lightblue;
}

注释

我们使用正斜杠和星号(/)以及星号和反斜杠(/)来创建注释。

/* Setting color of p to red */

p {
	color : red;
}

/* setting color of h1
to blue
*/

h1 {
	color : blue;
}

选择器

选择器告诉我们有关CSS规则将影响的元素。

选择器可以是元素名称,ID和类。

例如,在以下示例中,我们为h1元素定义了CSS规则。
因此,选择器为h1。

h1 {
	color : #d3d3d3;
}

按元素名称选择

在这种情况下,我们使用元素名称,例如p,h1,span等。

例:

/**
 * color for all the paragraph
 */
p {
	color : blue;
}

/* font-size for all ul */
ul {
	font-size : 20px;
}

按编号选择

在此,我们使用元素的ID来应用CSS规则。
我们在元素ID之前使用#号。

元素的ID不能以数字开头。

以下是有效的ID:group1,a组,student-no-123。

以下是无效的ID:1号。

在以下示例中,我们将样式规则应用于ID为" mycanvas"的元素。

#mycanvas {
	color : #d1d1d1;
}

按类选择

在此,我们使用用于元素的类来应用规则。
我们在元素类之前使用.号。

元素的类不能以数字开头。

以下是有效的课程:水果,博客文章和游戏。

以下是无效的类:1store。

在下面的示例中,我们将CSS规则应用于所有具有`fruits'类的元素。

.fruits {
	font-size : 20px;
}

使用元素名称和ID选择

我们可以结合使用元素名称和id来应用样式规则。

在下面的示例中,我们针对ID为team-a的段落。

p#team-a {
	font-size : 20px;
	color : lightblue;
}

用元素名称和类别选择

我们还可以结合元素名称和元素类来应用样式。

在以下示例中,CSS规则将仅应用于具有类group-1的那些段落元素。

p.group-1 {
	font-size : 16px;
	color : #d3d3d3;
}

标识

这是开发人员用来在注释中使用等于符号的=标记样式规则的概念。
使用文本编辑器和IDE中的"查找"函数来搜索样式。
由于= symbole不是CSS规则的一部分,因此在搜索中使用它。

在下面的示例中,我们使用=标志标记了具有类结果的段落元素。

/**
 * =p.fruits rules for all the paragraph elements having fruits class.
 */
p.fruits {
	color : lightgreen;
	font-size : 16px;
}

现在,在文本编辑器或者IDE中,我们可以使用搜索函数通过执行= p.fruits来查找此规则,我们将获得此规则。