【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器…

【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器…携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情 1️⃣前言 今天的笔记是: CSS概述、基础选择器(包括标签选择器、类选择器、id选择器和通配符选择器)

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情

1️⃣前言

今天的笔记是:

  • CSS概述基础选择器包括标签选择器、类选择器、id选择器和通配符选择器

2️⃣概述

🌱什么是CSS?

  • CSSCascading Style Sheets)指的是层叠样式表,是一种描述HTML文档样式的语言。也就是说CSS用于定义网页的样式,包括针对不同设备和屏幕尺寸的设计和布局。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

特点如下:

CSS特点.png

🌳CSS语法规范

CSS样式规则由两部分组成:

  • 选择器
  • 一条或多条声明

举个例子:

image.png

  • 选择器就是选择某个标签,后跟一对花括号,里面设置着具体样式;
  • 每一条声明都是由属性和属性值构成(值键对形式),属性和属性值之间用:分开;
  • 属性是对指定对象设置的样式属性(例如字体颜色或大小等);多个样式之间用分号;隔开;

选择器可以分为基础选择器复合选择器,这篇笔记先记录基础选择器的使用。


🌻CSS引入方式

CSS的三种引入方式:

  • 行内CSS

行内样式表又称内联样式表。我们知道,HTML标签有一个style属性。行内CSS就是在HTML元素标签内部的style属性中设置样式,这种方式适用于设置简单样式。

举个例子:

<p style="color:red; text-align:center;">段落</p>

总结的说,行内CSS可以为单个元素设置唯一的样式,方法是将style属性添加到元素属性中(style属性可以包含任何CSS属性)

  • 内部CSS

内部样式表又称嵌入式样式,就是将CSS样式单独拿出来放在<style>标签写入html页面内部。

<style> p { color: red; text-align: center; } </style>

<style>标签理论上可以放在HTML文档的任何位置,但是通常我们会将其放在文档的<head>标签中。内部样式表使得整个文档的结构更加清晰,方便我们控制当前页面中的元素样式。

  • 外部CSS

通常在开发中,样式较多,此时一般使用外部样式表。做法是将样式单独写到CSS文件中,再将CSS文件导入到HTML文档中。

步骤为:

  1. 新建一个后缀名为:.css的样式文件,将需要的样式代码写入到该文件中;
  2. 在HTML文档中,使用<link>标签引入该样式文件。

举个例子,当我们需要将style.css文件导入HTML文档时,link标签使用方法如下:

<link rel="stylesheet" type="text/css" href="style.css">

浏览器会从style.css文件中读到样式声明,并以此来格式化文档。需要注意的是,CSS文件中不能包含任何HTML元素。样式表的后缀扩展名为.css。使用外部样式表,使得我们让多个页面具有公共的样式更加的方便,只需引入样式文件即可。

🎐注释

在CSS中,注释以/*开始,以*/结束

使用注释可以很好的记录一些想法以及备注,浏览器会忽略注释。

<style> /* 这是一段注释 */ body { /* 这是另一段注释 */ text-align: center; } </style>

3️⃣基础选择器

基础选择器就是由单个选择器组成,一般包括标签选择器**、类选择器、id选择器和通配符选择器**。

💡标签选择器

标签选择器又称元素选择器,用于指定HTML里的某个标签名称作为选择器,为这些选择的标签指定统一的CSS样式。

  • 作用

标签选择器可以把某一类标签全部选出来。比如将HTML中全部的<p>标签选中。

  • 优点

快速为页面中同一类型的标签统一设置样式。

  • 缺点

无法差异化设置样式。

  • 举例

比如我们将HTML文档中所有段落的文本都设置为蓝色并且居中显示,那么如下所示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style> p { color: skyblue; text-align: center; } </style>
</head>

<body>
    <p>这是段落一</p>
    <p>这是段落二</p>
    <p>这是段落三</p>
</body>
</html>

image.png


💡类选择器

由于标签选择器能将所有选中的标签都设置统一的样式,导致无法差异化修饰元素。此时,类选择器可以解决这个问题。

类选择器可以单独选择某个标签或者若干个标签。语法如下:

.类名 {
	属性1: 属性值1;
	属性2: 属性值1;
	...
}

因此,类选择器的用法如下:

  • 在HTML标签中设置class属性,指定一个类名;
  • <style>标签中使用类选择器设置特定样式;
  • 类选择器使用.,后跟类名(类名就是指定标签中的class属性的值,由我们自己定义)
  • .类名后面紧跟花括号,并在花括号里面编写指定的样式;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style> /* 标签选择器 */ body { text-align: center; } /* 类选择器 */ .blue { color: skyblue; } </style>
</head>

<body>
    <h1>临江仙·十二高峰天外寒</h1>
    <p class="blue">
        十二高峰天外寒,竹梢轻拂仙坛。
        宝衣行雨在云端,画帘深殿,香雾冷风残。
    </p>

    <p>
        欲问楚王何处去?翠屏犹掩金鸾。
        猿啼明月照空滩,孤舟行客,惊梦亦艰难。
    </p>
</body>
</html>

image.png

当然,标签的class属性可以有多个类名,类名之间用空格隔开。这个标签就可以具有这些类名的样式。多类名的好处在于可以将一些样式放到类里面,每个标签都可以调用这个公共的类,也能调用自己独有的类,这同样也节省了CSS代码,统一修改样式也更加方便。


💡id选择器

由于HTML元素的id属性是唯一的,因此id选择器可以为某个标签指定特定的样式。也就是说,id选择器用于选择一个唯一的元素,用id属性名来设置id选择器,CSS中id选择器以“#”来定义,后跟该元素的id。

语法如下:

#id名 {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

我们知道id属性在每个HTML的标签中只出现一次,因此id选择器类选择器的区别在于使用次数上,id选择器好比身份证号码,无法重复使用,所以id选择器适用于页面上具有唯一性的元素上。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style> /* 标签选择器 */ body { text-align: center; } /* id选择器 */ #para1 { color: skyblue; } </style>
</head>

<body>
    <h1>临江仙·十二高峰天外寒</h1>
    <p id="para1">
        十二高峰天外寒,竹梢轻拂仙坛。
        宝衣行雨在云端,画帘深殿,香雾冷风残。
    </p>

    <p>
        欲问楚王何处去?翠屏犹掩金鸾。
        猿啼明月照空滩,孤舟行客,惊梦亦艰难。
    </p>
</body>
</html>

效果如下:

image.png

💡通配符选择器

通配符选择器又称通用选择器,在CSS中,通配选择器使用星号*来定义通配符选择器,其表示为当前页面中所有标签设置样式。

语法如下:

* {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

💡小结

基础选择器 作用 特点 使用情况 用法
标签选择器 用于选出所有指定的标签 无法差异性选择 较多 p { color: red; }
类选择器 用于选出指定类名的标签 可以根据需求选择 很多 .red { color: red; }
id选择器 一次只能选择一个标签 id属性在每个HTML标签中只出现一次 一般和js搭配 #nav { color: red; }
通配符选择器 为所有的标签设置样式 选中全部,有些可能不需要 在特殊情况下使用 * { color: red; }

4️⃣写在最后

好了,本篇笔记就到写这,欢迎大家到评论区一起讨论!

今天的文章【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器…分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20370.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注