【Web前端开发基础】CSS基础选择器

凌云(mlinyun)

于 2023-02-06 13:13:06 发布

阅读量138

点赞数 1

分类专栏： Web前端开发基础文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_62611367/article/details/128899863

版权

Web前端开发基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括其作用、语法规则和三种引入方式：内嵌、外联和行内样式。接着详细讲解了基础选择器，如标签选择器、类选择器和ID选择器的使用方法和区别，以及通配符选择器在清除默认样式时的应用。

摘要由CSDN通过智能技术生成

1. CSS基础认知

目标：理解CSS 的作用，了解CSS 语法规则，知道CSS的引入方式及其区别

1.1 CSS初识

CSS的介绍
- CSS：层叠样式表（Cascading style sheets）
- 作用：给页面中的HTML标签设置样式
CSS的语法规则
- 写在哪里？
  - css写在style标签中，style标签一般写在head标签里面，title标签下面
- 怎么写？
  - 选择器{属性名:属性值;}
    （1）标点符号都是英文状态下的
    （2）每一个样式的键值对写完之后，最后需要写分号

CSS初体验

常见属性：

CSS常见属性作用
color 文字颜色
font-size 字体大小
background-color 背景颜色
width 宽度
height 高度

CSS常见属性	作用
color	文字颜色
font-size	字体大小
background-color	背景颜色
width	宽度
height	高度

CSS初体验：

<style>
	p {
        width: 100px;
        height: 100px;
        color: pink;
        font-size: 16px;
        font-weight: 400;
        background-color: skyblue;
	}
</style>
<body>
    <p>CSS初体验</p>
</body>

在这里插入图片描述

1.2 CSS引入方式

内嵌样式
- 书写位置 css写在style标签中，style标签写在head标签里面，title标签的下面
- 作用范围当前页面
- 使用场景小案例小demo
外联样式
- 书写位置 css写在一个单独的.css文件中，此时需要通过link标签引入快捷生成：link:css + tab键
- 作用范围多个页面（谁引入谁就生效）
- 使用场景项目中使用
行内样式
- 书写位置 css写在标签的style属性中
- 作用范围当前页面
- 使用场景配合js一起使用

CSS常见的三种引入方式

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

2. 基础选择器

目标：理解选择器的作用，能够使用基础选择器在HTML中选择元素

2.1 选择器的作用

选择器的作用：选择页面中对应的标签（找她），方便后续设置样式（改她）

2.2 标签选择器

结构：标签名{属性名:属性值;}
作用：通过标签名找到页面中所有这一类标签，设置样式

注意点：

找的是一类标签，不能单独找到某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签

	p {
    	font-family: 黑体;
    	font-size: 16px;
    	color: red;
	}
	h1 {
    	font-family: 黑体;
    	font-size: 20px;
	}

2.3 类选择器

结构：.类名{属性名:属性值;}
作用：找到页面中所有带有该类名标签，设置样式
注意点：
- 所有的标签都有class属性，class属性的属性值就叫做类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间通过空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
```
.big {
    font-size: 20px;
}
```

2.4 id选择器

结构：#id属性值{属性名:属性值;}
作用：通过id属性值，找到页面中带有id属性值的标签，设置样式
注意点：
- 所有标签都有id属性
- id属性值相当于是身份证号码，在一个页面中是唯一的，不可能重复的！！！
- 一个标签只能有一个id属性值
- 一个id选择器只能选择一个标签
```
<div id="center">
    <p>前端技术构成</p>
    <p>前端开发工具</p>
</div>
<style>
    #center {
        text-align: center;
    }
</style>
```

2.5 类与id的区别

class类名与id属性值的区别
- class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
- id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
类选择器与id选择器的区别
- 类选择器以.开头
- id选择器以#号开头
实际开发的情况
- 类选择器用的最多
- id一般配合js使用，除非特殊情况，否则不要使用id设置样式
- 实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

2.6 通配符选择器

结构：*{属性名:属性值;}
作用：找到页面中所有的标签，设置样式
注意点：
- 针对大型的项目一般不会使用通配符选择器，可能会比较消耗浏览器的性能
- 可以在小页面中使用去除标签默认的margin和padding
```
* {
    margin: 0;
    padding: 0;
}
```

3. 总结及能力

能够说出CSS的作用和语法格式
- CSS的作用：给HTML标签设置样式
- CSS的语法格式：选择器{css的属性名:属性值;}
能够说出三种CSS的书写位置

① 内嵌式：css写在style标签中，style标签一般写在head标签里面，title标签的下面
② 外联式：css写在单独的.css文件中，需要配合link标签引入
③ 行内式：css写在标签的style属性中
能够使用标签选择器、类选择器、id选择器标签
- 标签选择器标签名{css的属性名:属性值;}
- 类选择器 **.**类名{css的属性名:属性值;}
- id选择器 #id属性值{css的属性名:属性值;}
能够说出id选择器的和类选择器的区别
- 类选择器 .类名{css的属性名:属性值;} 类选择器可以多次使用
- id选择器 #id属性值{css的属性名:属性值;} id选择器在当前页面具有唯一性