CSS 标签选择器

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

原文链接:segmentfault.com

上一篇:WebGL 系列 14 投影与矩阵
下一篇:Vue Class 与 Style 绑定

相关推荐

  • 🔥 从最近流行的一幅 CSS 风景画中学习 2 个知识点

    最近 CodePen 流行的一张用纯 CSS 绘制的风景画令人印象深刻: 天空的眩光,睡眠反射,精细的房屋细节相当惊艳,下面我们大致说一说这张图片中的一些技术细节。图画的源码地址在文末。

    6 个月前
  • 💫 CSS 幻术 | 抗锯齿

    前言 传统网页的呈现是基于像素单位的,所以图片不能和 SVG 一样进行任意尺寸缩放后还保持边缘平整。也就是说,放大像素逻辑的图片,必然导致可视质量下降(信息失真)。

    4 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ 诶呀,口水流出来了。

    5 个月前
  • (译)CSS 定位与层叠上下文(Stacking context)

    你是否在使用定位时,会遇到一个定位元素即使设置更高的层级,也无法将另一个定位元素覆盖的情况?通过理解层叠上下文,你就能更好的构建你的应用。理解渲染流程和层叠顺序当浏览器将 HTML 解析成 DOM 结...

    8 天前
  • 黑魔法之 CSS Entry

    大家都知道 webpack 的 Entry 都是 js,如果想输出 css 文件只能在 js 文件里导入 css,所以很多人都会想要是 entry 也可以是 css 那多好,这样就可以任意输出 cs...

    2 年前
  • 高级选择器解析

    高级选择器解析 一、什么是伪类? 1、伪类与伪元素区别的方法在于伪类是只有一个冒号: 而伪元素有双冒号::(伪元素是不存在的类,理解) 2、分类: 状态类: ...

    4 个月前
  • 高度等于动态宽度(CSS流体布局)[复制品]

    web-tikiThomas Norman提出了一个问题:Height equal to dynamic width (CSS fluid layout) [duplicate],或许与您遇到的问题类...

    3 年前
  • 面试题CSS盒子模型,左右固定宽度,中间自适应的五种死法

    面试题目 假设高度已知,请写出三栏布局,左右300px,中间自适应 有几种方法呢? 最容易的应该想到利用float来写,代码如下 css样式代码,以下五种都是用一个样式代码 &lt;sectio...

    2 年前
  • 面试必备! CSS知识点总结

    一、 元素水平垂直居中的方法 水平居中 行内元素:text-align:center 已知元素的宽度 设置margin:0 auto 元素的宽度不确定 flex 布局 justify-...

    3 个月前
  • 面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)

    题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距...

    2 年前

官方社区

扫码加入 JavaScript 社区