关于前端:CSS-标签选择器

34次阅读

共计 912 个字符,预计需要花费 3 分钟才能阅读完成。

本节咱们来学习 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 语法就是由选择器和申明块 {} 组成,每个申明块中能够蕴含一个或多个款式申明,并且每条申明前面以分号 ; 结尾。

当然除了上述例子中的 ph3 标签能够作为标签选择器,其余的例如 htmlbodyaimg 等所有标签都是能够作为标签选择器的。

标签选择器的应用其实很简略,下一节咱们会讲剩下的两个根本选择器,也就是类选择器和 ID 选择器的应用。

链接:https://www.9xkd.com/

正文完
 0