从之前的博客我们知道,css是层叠样式表。之前我们大致了解css是个什么东西,那我们现在就要研究怎么使用它。css有几种引入方式,下面来一起了解一下吧!

1,行间样式

行间样式比较简单,如下图,写出一个div代码,在div开头的括号里面填入style:“这个引号里面填的内容就是css代码啦。”

2,内嵌式

就是把css代码集中写在head标签里面的style标签里面。下面的这张图中的span可以改写成div。

3,导入式

既然html可以有一个单独的文件,那么同理,我们可以猜想一下,css是不是也能独立成为一个文件呢?
答案是肯定的。
这个方式就是让css在外部独立形成一个文件,后缀就是.CSS,然后再考虑如何将这个文件引入到html中。两个不同的文件要怎么样才能联系在一起呢?
这就需要一座桥梁将它们联系在一起,这个时候就要用link标签,同样是在head标签中进行编写。这个方式其实是最为常用的。

引入方式其实还有不少,这是比较基本的几个,更多的等以后在来了解吧。
在了解css的引入方式后,就进入这篇博客的重点内容,选择器。
选择器在CSS中就是一个用于控制HTML元素的工具。

1. id选择器

id 选择器以 “#” 来定义,开头就是一个#,后面接属性值,选取的是带有指定 id 的元素。注意,id是一个元素只有一个,是一对一的关系,与接下来讲的class选择器有区别。

2. class选择器

在class选择器中,开头就是一个”.”后面接属性值。它与元素的关系就是既可以一对多,也可以多对一。一个class选择器可以对应多个元素,一个元素也可以对应多个选择器。

3. 标签选择器

标签选择器其实就是我们经常说的html代码中的标签。例如html、span、p、div、a、img等等。如下图,是用p标签。

4. 通配符

这是最为简单干脆的一个选择器。直接就是一个”*”表示,意思是“所有的”,指的是所有元素。

5. 属性选择器

顾名思义,就是根据属性来选择元素。
上面介绍的这几个都是普通选择器,而且他们互相之间是有差异的,一部分具有优先级,想知道?还请看下回分解。

Last modified: 2020年12月4日

Author

Comments

Write a Reply or Comment