本节我们来学习 CSS 中的选择器,选择器是 CSS 里面一个很重要的概念,HTML 中的所有标签样式,都是通过不同的 CSS 选择器进行控制的。我们只需要通过选择器,就可以对不同的 HTML 标签进行选择,并指定各种样式声明。
在 CSS 中三三种最基本的选择器,分别是标签选择器、类选择器(class)、ID选择器。本节我们来讲标签选择器,标签选择器是 CSS 中最常见的选择器。像前面几节中,我们举例时用到的都是标签选择器。
通过前面的学习我们知道在 HTML 页面中引入 CSS 样式最好的方法是引入外部样式,也就是将 CSS 代码单独放置到一个 .css
文件内,然后再引入这个 CSS 文件。所以后面我们讲 CSS 样式都会使用这种方式来引入 CSS 样式。
标签选择器
我们知道一个 HTML 页面是通过很多标签组成的,CSS 标签选择器就是用来声明这些标签的,因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。
示例:
例如我们来看一个例子,下面是一段 HTML 代码:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>侠课岛</h3>
<p>你好,侠课岛!</p>
</body>
</html>
如果我们要为这两个标签定义 CSS 样式,就可以直接在 .css
文件内通过标签选择器来声明样式:
h3{
color: red ;
}
p{
color: green;
}
记得在 HTML 中通过 <link>
标签来引入 CSS 文件,此时在浏览器中的演示效果如下所示:
从上述代码中,我们看到,CSS 语法就是由选择器和声明块
{}
组成,每个声明块中可以包含一个或多个样式声明,并且每条声明后面以分号 ;
结尾。
当然除了上述例子中的 p
、h3
标签可以作为标签选择器,其他的例如 html
、body
、a
、img
等所有标签都是可以作为标签选择器的。
标签选择器的使用其实很简单,下一节我们会讲剩下的两个基本选择器,也就是类选择器和ID选择器的使用。
网友评论