一，CSS的分类

1，行内样式

通过 style 属性，来指定某个标签的样式，只适合于写简单样式，只针对某个标签生效.

<div style="color:green"></div>

2，内部样式

写在 style 标签中，嵌⼊到 html 内部的样式叫做内部样式，理论上来说 style 放到 html 里. 但是⼀般都是放到 head 标签中

<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
     /* ⾏内样式 */
     body{
    
    
       color: green;
       font-size: 54px;
     }
   </style>
</head>

3，外部样式

创建⼀个 css 文件
使用 link 标签引入 css

<link rel="stylesheet" href="[CSS⽂件路径]">

二，选择器是什么

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点
样式的基本语法是：选择器 + {⼀条/N条声明}
● 选择器决定针对谁修改 (找谁)
● 声明决定修改啥. (干啥)

三，选择器具体种类

1，类选择器

类选择器根据类名来选择，前面以”.”来标志

特点:
①差异化表示不同的标签
②可以让多个标签的都使⽤同⼀个标签

<style>
.blue {
    
    
  color: blue;
}
</style>
<div class="blue">你好</div>

2，标签选择器

元素选择器（标签名选择器），是css3选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素

特点:

能快速为同⼀类型的标签都选择出来.

但是不能差异化选择

<style>
p {
    
    
  color: red;
}
div {
    
    
  color: green;
}
</style>
<p>佩奇</p>
<p>佩奇</p>
<div>猫南北</div>
<div>猫南北</div>

3，ID选择器

和类选择器类似

CSS 中使用# 开头表示 id 选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯⼀的, 不能被多个标签使用(是和类选择器最⼤的区别)

<style>
 #demo {
    
    
   width: 200px;
   height: 200px;
   background: #FF0000;
 }
 </style>
<div id="demo">ID选择器</div>

4，通配符选择器

通用选择器用*来表示，用来选择所有元素，也可以选择某个元素下的所有元素

* {
    
    
  color: red;
}

页面的所有内容都会被改成红色
不需要被页面结构调用

CSS-选择器的基本用法

目录