uniapp怎么引入css_CSS 三种基础选择器

本节我们来学习 CSS 中的选择器,选择器是 CSS 里面一个很重要的概念,HTML 中的所有标签样式,都是通过不同的 CSS 选择器进行控制的。我们只需要通过选择器,就可以对不同的 HTML 标签进行选择,并指定各种样式声明。

在 CSS 中三三种最基本的选择器,分别是标签选择器、类选择器(class)、ID选择器。

我们知道在 HTML 页面中引入 CSS 样式最好的方法是引入外部样式,也就是将 CSS 代码单独放置到一个 .css 文件内,然后再引入这个 CSS 文件。

标签选择器

我们知道一个 HTML 页面是通过很多标签组成的,CSS 标签选择器就是用来声明这些标签的,因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。

示例:

例如我们来看一个例子,下面是一段 HTML 代码:

            CSS学习(9xkd.com)

侠课岛

你好,侠课岛!

如果我们要为这两个标签定义 CSS 样式,就可以直接在 .css 文件内通过标签选择器来声明样式:

h3{    color: red ;}p{    color: green;}

记得在 HTML 中通过 标签来引入 CSS 文件,此时在浏览器中的演示效果如下所示:

ccd78eface0f4c3a9ed0b4c9672f485f.png

从上述代码中,我们看到,CSS 语法就是由选择器和声明块 {} 组成,每个声明块中可以包含一个或多个样式声明,并且每条声明后面以分号 ; 结尾。

当然除了上述例子中的 p 、h3 标签可以作为标签选择器,其他的例如 html、body、a、img 等所有标签都是可以作为标签选择器的。

但是我们在使用标签选择器的时候会有一个问题,举个例子,我们先来看下面这段代码:

            CSS学习(9xkd.com)

动物园里有什么?

小白兔

小狮子

小老虎

小猴子

在浏览器中的演示效果:

5f61f18b00c068149ec02b6e9e1fa967.png

如果我们想要将上述代码中 “小兔子” 字体样式设置为粉色加粗,其他内容不变,要怎么做? 如果使用标签选择器 p 来设置样式,那上述代码中四个

标签中的内容样式都会跟着改变呀,所以这时候用标签选择器显然不合适。

要解决这个问题,我们就需要用到 CSS 中的类选择器和 ID 选择器啦。

类选择器

类选择器用于描述一组标签的样式,一个类选择器可以在多个标签上使用。

语法:

.class_name{    属性:属性值;}

类选择器前面必须有一个点 .,这个点必不可少,是类选择器的标志。类选择器的名称 class_name 是自定义的,选择器中的属性和属性值跟标签选择器中一样。

示例:

例如上述代码中,我们要给“小兔子” 字体样式设置为粉色加粗,可以自定义一个类选择器:

.rabbit{    color: pink;    font-weight: bold;}

然后在 HTML 标签上通过 class 属性来使用定义好的类样式,格式为:

标签内容标签名>

如下所示:

小白兔

在使用类样式的时候,只需要类样式名,不需要在前面加点。在浏览器中演示效果如下:

e4a683c243d33f4905e7607decafc35b.png

类选择器有一个好处就是,我们可以在同一个页面中多个 HTML 标签上,使用同一个类选择器。

示例:

例如我们除了可以在

标签上使用类选择器 rabbit,也可以在

标签上使用:

    

动物园里有什么?

小白兔

小狮子

小老虎

小猴子

在浏览器中演示效果:

10a7a82a101ec6a620926811102508c8.png

ID选择器

ID选择器和类选择器的使用基本差不多,但是还有一些不同的地方:

  • ID 选择器的是以井号 # 开头来定义的。而类选择器是以点 . 来定义的。
  • ID 选择器在 HTML 中是可以通过 id 属性来使用。而类选择器是通过 class 属性来使用的。
  • 同一个页面中一个ID选择器只能在中出现一次,是唯一的。而类选择器可以在多次出现,所以ID选择器的针对性更强。

示例:

通过 # 来定义一个ID选择器,设置背景颜色为粉色的样式:

#only{    background-color: pink;}

然后在 HTML 中通过 id 属性使用这个ID选择器:

            CSS学习(9xkd.com)

动物园里有什么?

小白兔

小狮子

小老虎

小猴子

在浏览器中演示效果:

1552012f847c1cea81994719d41c0ab3.png

我们可以在 HTML 标签中通过 id 属性来使用 CSS 中对应的 ID 选择器。在使用时,ID选择器名称前面不需要带井号#。

总结

当我们想要在 HTML 元素中设置 CSS 样式时,可以通过选择器来实现,最常用的是三种基础选择器。当标签选择器不能满足我们的需求时,我们就可以使用类选择器和ID选择器。

记住在同一个页面中,不允许有相同的 id 出现,但是允许有相同的 class。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/344605.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

万网绑定二级域名_Hexo+yilia主题网站绑定个性域名

上篇我们已经成功部署了自己的博客网站,初始化的网站看上去似乎少了些内容(高端大气上档次的设置)。接下来我们就进一步完善我们的博客网站(孟繁胜游)。绑定个性域名当你打开github给你设定的固定域名时,是不是感觉low极了。主要是github给你的域名在你注…

guava缓存数据到本地_扩展Guava缓存以溢出到磁盘

guava缓存数据到本地缓存使您可以轻松地显着加速应用程序。 Java平台的两种出色的缓存实现是Guava缓存和Ehcache 。 尽管Ehcache功能丰富得多(例如其Searchable API ,将缓存持久化到磁盘或溢出到大内存的可能性),但与Guava相比&am…

【渝粤教育】广东开放大学 性考 形成性考核 (33)

选择题 题目:GATT缓和了国际贸易()有效地促进了国际贸易的发展。 题目:WTO的公平竞争原则要求在WTO框架下,成员方应()采取扭曲市场竞争的措施 题目:技术法规般涉及国家安全、()、环境保护、劳动保护、节能等方面技术法规还涉及到与产品特性、…

jmeterhttp代理服务器_Jmeter使用HTTP代理服务器录制

1、添加线程组2、线程组下,添加录制控制器3、添加HTTP代理服务器,右键单击测试计划添加→非测试元件→HTTP代理服务器。1)HTTP代理服务器配置,目标控制器选择测试计划>线程组>录制控制器;端口号随便输入一个,与浏…

【渝粤教育】广东开放大学 文化田野调查 形成性考核 (22)

选择题 题目: 文化遗产主要是指的非物质文化遗产。 答案:看左侧 题目: 县级以上人民政府根据非物质文化遗产保护、保存工作需要,组织非物质文化遗产调查。非物质文化遗产调查由县级以上研究部门负责进行。 答案:看左侧…

GraalVM上的Picocli:极快的命令行应用程序

GraalVM GraalVM允许您提前将程序编译为本地可执行文件。 与Java VM相比,生成的程序具有更快的启动时间和更低的运行时内存开销。 这对于通常是短暂的命令行实用程序尤其有用。 GraalVM对Java反射的支持有限,它需要提前了解反射访问的程序元素。 反射访…

【渝粤教育】广东开放大学 标准化理论与方法 形成性考核 (50)

选择题 题目: 我国的标准层级分为()级。 答案:看左侧 题目: 国家标准中"要求”属于必备要素,也是规范性技术要素。 答案:看左侧 题目: ,标准可分为国际标准、区域标…

【渝粤教育】广东开放大学 社会保障学 形成性考核 (34)

选择题 题目:乡政府现要对申请低保的村民张三进行资格调查,按照法律规定,不属于调查范围的是( ) 题目:我国现行《失业保险条例》所指失业人员为 ( ) 题目:《失业保险条例…

es数据频繁的更新_es之文档更新过程中并发冲突问题

1:乐观锁控制ES是分布式的,也是异步并发的,我们的复制请求是并行发送的;这就意味着请求到达目的地的顺序是不可控制的,是乱序的;如果是乱序的方式,很有可能出现这样的一个问题,新ver…

【渝粤教育】广东开放大学 网络编程技术 形成性考核 (57)

选择题 题目:在JavaScript中,运行以下代码: var flagtrue; document .write(typeof(flag)); 值是( )。 题目:下面的代码( )能在页面中弹出提示框,并且输入框中默认无任何内容 题目:在JavaScript中&#xff…

【渝粤教育】广东开放大学 金融学 形成性考核 (37)

选择题 题目:金融体系中居于联接宏微观的纽带和运作核心地位的是( ) 题目:对居民盈余与赤字的管理选择,说法正确的是( ) 题目:从形式上看,收入可分为( &a…

面试题目_总结面试中 promise 相关题目的套路

Promise 作为当下主流的异步解决方案,在工作中和面试中常常出现,尤其是在面试中,会弄个场景让你手写代码,这里给大家介绍五道比较有代表性的题目,以便熟悉一些套路。promise 简单介绍先简单介绍下 PromisePromise 对象…

javafx 自定义控件_JavaFX自定义控件– Nest Thermostat第1部分

javafx 自定义控件几周前,由于Hendrik Ebbers的出色文章 ,我决定花一些时间观看有关JavaFX的JavaOne讨论。 我不得不说我已经学到了很多东西,只是看这些视频(即使我还没有完成)! Gerrit的“使用力&#xf…

【渝粤教育】电大中专Office办公软件 (4)作业 题库

1.以下软件不属于系统软件的是( )。 A.Visual Studio 2019 B.MySQL 5.7 C.Windows 10 D.Office 2016 错误 正确答案:左边查询 学生答案:未作答 2.学习好Office办公软件这门课程,应该( )。 A.重视…

【渝粤教育】电大中专中药学基础作业 题库

试卷答案 1.首创按药物自然属性进行分类的本草著作是()。 A.《神农本草经》 B.《本草经集注》 C.《本草纲目》 D.《新修本草》 E.《本草拾遗》 正确 正确答案:左边查询 学生答案:B 2.载药数最多的本草著作是(&#xff…

不等号属于不等式吗_考研专业课备考时,仅仅多刷几遍目标院校的期末考试题就够吗?...

考研专业课备考时,仅仅多刷几遍目标院校的期末考试题就够吗?也许这要看各专业情况,部分专业的考研题和本科生的期末考试题难度类似,比如说人文社科类的专业,这也是我的猜测情况。大部分专业的专业课题目难度&#xff0…

使用Spring Boot和H2可以完全工作的原型

我们确实在弹簧上使用了很多h2,特别是对于单元测试。 但是,我们可能希望拥有一个功能齐全的原型来显示数据,而不是进行单元测试。 H2是最理想的选择,它在spring上运行良好,与大多数数据库都具有良好的语法兼容性&…

【渝粤教育】电大中专品牌管理与推广 (2)作业 题库

1通常,对品牌的排他专有性的保护手段主要是注册商标、申请专利、授权经营,等等。该说法() A正确 B错误 正确 正确答案:左边查询 学生答案:A 2品牌服务是以服务而不是以产品为主要特征的品牌,如商…

【渝粤教育】电大中专学前教育学作业 题库

1学前教育的孕育阶段的时间定位于() A21世纪 B16世纪以前 C远古时期 D18世纪 错误 正确答案:左边查询 学生答案:A 2我国封建社会第一部完整的家庭教科书《颜氏家训》出自() A陶行知 B昆体良 C颜之推 D朱熹 …

饿了吗商品列表_仅仅一字之差,饿了么起诉饿了吗

饿了么与“饿了吗”,仅仅一字之差,相信不少人乍看会以为是一家。但近日公开的一则判决书显示,因为太近似,二者曾对簿公堂。饿了吗公司以败诉收场,被判处立即变更其企业名称,变更后企业名称中不得含有与“饿…