基础选择器
- 选择器：css 选择 html 标签的一个工具，是将 css 与 html 建立起联系，那么 css 就可以控制 html 样式
- 选择器其实就是给 html 标签起名字
标签选择器
作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
-
格式：
标签名称 {
属性: 值;
} -
注意点：
- 标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
- 标签选择器无论标签藏得多深都能选中
id选择器
作用：根据指定的 id 名称找到对应的标签，然后设置属性
-
格式：
#id名称 {
属性: 值;
} -
注意点：
- 每个 HTML 标签都有一个属性叫做 id，也就是说每个标签都可以设置 id
- 在同一个界面中 id 的名称是不可以重复的
- 在编写 id 选择器时一定要在 id 名称前面加上 #
- id 的名称是有一定的规范的
- id 的名称只能由字母、数字、下划线组成（a-z 0-9 _）
- id 名称不能以数字开头
- id 名称不能是 HTML 标签的名称，不能是（a h1 img input ...）
- 在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为在前端开发中 id 一般留给 js 使用的
类选择器
作用：根据指定的类名称找到对应的标签，然后设置属性
-
格式：
.类名 {
属性: 值;
} -
注意点：
- 每个 HTML 标签都有一个属性叫做 class，也就是说每个标签都可以设置类名
- 在同一个界面中 class 的名称是可以重复的
- 在编写 class 选择器时一定要在 class 名称前面加上
. - 类名的命名规范和 id 名称的命名规范一样
- 类名就是专门用来给 CSS 设置样式的
- 在 HTML 中每个标签可以同时绑定多个类名
CSS三种引入方式
行间式
<div style="width: 100px; height: 100px">
</div>
<!-- 简单直接,针对性强 -->
- 样式书写在标签的 style 全局属性中
- 样式格式为
key: value(单位) - 以
;隔开多个样式，最后的;可以省略
内联式
<head>
<style>
选择器 {
width: 100px;
height: 100px;
}
</style>
</head>
<!-- 解耦合了,可读性强 -->
- 样式书写在 head 标签内的 style 标签中
- 样式格式为
选择器 { 样式块 } - 样式块
key: value(单位)
外联式
/* index.css文件 */
选择器 {
width: 100px;
height: 100px;
}
/* 适合团队高效率开发, 耦合性低, 复用性强 */
<!-- index.html -->
<link rel='stylesheet' type='text/css' href='./index.css'>
- 样式书写在外部 css 文件中，不需要写任何标签
- 样式格式为
选择器 { 样式块 } - 样式块
key: value(单位) - 以
;隔开多个样式，最后的;可以省略
三种引入"优先级"分析
1. 没有优先级
2. 不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
3. 行间式一定是逻辑最下方的样式