编程教育资源分享平台

网站首页 > 后端开发 正文

javaweb开发工程师基础学习六 CSS优先级及选择器的认识

luoriw 2024-02-01 14:26:53 后端开发 12 ℃ 0 评论

写在前面:java作为一门世界级编程语言金字塔顶尖的语言。需要大量的练习、练习、练习来巩固自己所获得的知识。冰冻三尺非一日之寒,希望大家在学习java的日子里一定一定要坚持不懈,严格要求。多练,多问,多百度。祝大家早日成为一名优秀的软件工程师!

首先,css样式分为内联样式,内部样式,和外部样式。

内联样式:

就是直接定义在元素上的style,称为内联样式,其格式如下:

该种设置元素样式的方式称为内联样式

内部样式:

就是用<style></style>标签括起来的样式,称之为内部样式,其格式如下:

该种设置元素样式的方式称为内部样式

外部样式:

就是通过link 导入xxx.css的文件,称之为外部样式,格式为<link type=”text/css” rel=”stylesheet” href=”xxx.css” />:

这3种css样式的写入方式非常的简单,接下来就到了我们这篇文章的重点:css样式的优先级问题。

首先,我们建立一个div盒子,给他定义一个内部样式:

效果如下图:

接下来,我们来给这个div盒子定义一个内联样式:

效果如下图:

我们会发现,内联样式的属性值覆盖了内部样式的属性值。所以得出结论:

优先级:内联样式 > 内部样式

接下来,我们来定义一个外部样式,外部样式的文件是一个以.css为后缀的空文件,我们可以直接在里面写入css样式:

然后我们在html页面引入这个css:

效果如下图:

可以看到,外部样式的font-family和font-weight已经起到了作用,但是color和font-size并没有覆盖掉内部样式的color和font-size,由此我们可以得知:

优先级:内部样式 > 外部样式

那么经过3种css样式加载的对比,我们最后得出的总结是:

优先级: 内联样式 > 内部样式 > 外部样式

这个样式顺序遵循一个就近原则,哪个样式离元素近,哪个样式就生效。在开发里面,一般都采用的是外部样式,原因就是可以让页面和样式列表进行分离,而方便维护代码,提高工作效率。但是如果确定这个样式只针对当前页面。那么就可以考虑采用内部样式。内联样式几乎不用,因为这样会使代码非常的杂乱,不方便维护。

接下来我们来讲一下css的选择器,css的选择器有很多种,可以分为:

标签选择器,类选择器,ID选择器,包含选择器,指定选择器,分组选择器,通用选择器,子选择器,相邻选择器,属性选择器,伪类选择器。

其中,标签选择器,类选择器和ID选择器,我们已经很常用了,这里我一并给大家展现出来,就不多做解释了:

图中,<style></style>里面 div就是标签选择器,#testDiv就是ID选择器,.testDiv就是类选择器。如果这个还不懂的同学可以翻阅一下前面的文章。我已经做过很详细的介绍了。

包含选择器:包含选择器就是标签和标签之间的递进选择。如图:

注意,这4种都是可行的,都是一个意思。注意,这2个标签选择器之间用空格符号分隔开。后一个选择器一定是前一个选择器内的元素,否则的话是不会生效的。

这样的后代选择器样式,效果是:

接下来我们来看一下指定选择器:

我们定义一个盒子,在里面定义2个class不同的相同元素span,然后在style中写入css ,定义.divbox下面的 class= span1的span元素。

效果如下:

这里的.divbox span.span1是说明,该html网页要寻找到一个class=”divbox”的元素下的class=”span1”的span元素。然后将该元素的文字颜色设为红色。

分组选择器:

分组选择器选择的是需要有相同css定义的一组元素,这组元素可以没有什么关系,如图:

效果如图:

分组选择器之间以逗号分隔开。

子选择器:

效果如图:

如果层级关系是这样的:div>span>p,这个是正确的,但是div>p是错误的。子选择器只能找到当前选择器的直接子类。

相邻选择器:

效果如图:

代码格式是 :element1 + element2, 中间是用加好,只能作用到相邻的一个元素,不能作用到多个。

属性选择器:

效果如图:

这2种写法都可以,[type=”text”] 所取的是元素的属性和属性值,div[id=”ruirui”]说明要寻找一个id为ruirui的div。

伪类选择器:

我们先定义一个div盒子和一个p:

现在,我要将p的第一个字加粗,这个时候就需要用到伪类选择器:

效果如下图:

first-letter代表的就是第一个字符。

现在我需要在我的p后面加上一些内容,这个时候就要用到:after伪类:

效果如图:

p标签的后面就加上了我们所填写的内容。这个有什么作用呢,比如说,在文字后面需要加一个箭头,一个下标,这些,都可以用到我们的:after伪类

同理,:before伪类的用法也和:after一样,这里就不做展示了。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言