CSS语法
在本教程中,我们将学习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
来查找此规则,我们将获得此规则。