美文网首页
CSS 标签选择器

CSS 标签选择器

作者: 暖A暖 | 来源:发表于2020-09-04 09:46 被阅读0次

本节我们来学习 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/

相关文章

  • 初识CSS ①选择器

    1、标签选择器 标签选择器其实就是html代码中的标签。 选择器{ css样式代码; } 下图的css样式代码的作...

  • day003_css基础

    css 标签选择器 id选择器 类选择器(开发使用) css 链接方式 1、内嵌式(head标签内...

  • Python -day-21常用标签及CSS

    一、表单标签 二、空白标签 三、认识CSS 四、CSS选择器 五、伪类选择器

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • HTML和CSS

    表单标签 表单标签(下拉菜单和多行文本域) 空白标签 认识css css选择器 伪类选择器

  • CSS

    CSS基本语法结构 eg: style标签 标签选择器HTML标签作为标签选择器的名称 … 、 、 类选择器<标签...

  • css学习笔记

    一、基础选择器 标签选择器:标签名 { css属性名:属性值; } 类选择器:.类名 { css属性名:属性值; ...

  • CSS 选择器 & CSS3选择器

    1、CSS 选择器 1.1 、CSS基础选择器 标签选择器:所有标签名都可以当做选择器,比如body、h1、dl、...

  • 选择器的种类有哪些?每一种都是怎么用的?它们的优先级是怎样的?

    一 . CSS基础选择器与用法 1 . CSS选择器的作用 选择器其实就是选择标签用的 2 . 标签选择器 是指用...

网友评论

      本文标题:CSS 标签选择器

      本文链接:https://www.haomeiwen.com/subject/xxuosktx.html