css 基础

css 是什么？
css 是层叠样式表
功能：元素样式（元素长什么样）和元素布局（元素应该放在哪里）
元素样式的来源
1.浏览器默认样式（又叫用户代理样式）
|样式|定义|
|——-|——-|
|用户代理样式|浏览器默认样式|
|用户自定义样式|我们的编程目标|

权重	样式	代码
3	行内样式	style=”…”;
2	内部样式/文档样式	\<style>
1	外部样式	.css 文件
0	默认样式	—-

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>hello word</h2>
  </body>
</html>

style="";

默认样式
自定义样式

样式来源除了与优先级有关系还与书写顺序有关
写到后面的会覆盖前面的

css 工作流：1.找到元素 2.设置样式

选择器
选择器{一个或多个样式声明}
| 序号 | 选择器/selector | 代码 | 说明： |
| —— | ———————- | ———————— | —————————————— |
| 1 | 标签选择器 | h1{} | 直接使用标签进行选择 |
| 2 | 属性选择器 | [...],id,class | 通过标签的属性进行选择 |
| 3 | 群组选择器 | h1,h2,h3 | 选择多个元素进行声明 |
| 4 | 通配选择器 | * | 选中某个标签下所有的标签元素 |
| 5 | 上下文选择器 | * | 选中某个标签下所有的标签元素 |
1.标签选择器

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>hello word</h1>
    </div>
  </body>
</html>

2.属性选择器

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1.h1{
        color: green;
      }
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>hello word</h1>
      <h1 class="h1">hello word</h2>
    </div>
  </body>
</html>

3.群组选择器

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1.h1,h1{
        color: green;
      }
      /* h1 {
        color: red;
      } */
    </style>
  </head>
  <body>
    <div>
      <h1>hello word</h1>
      <h1 class="h1">hello word</h2>
    </div>
  </body>
</html>

4.通配选择器

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html body  div * {
        color: green;
      }
      /* h1.h1, */
      /* h1 {
        color: red;
      } */
    </style>
  </head>
  <body>
    <table>
    <div>
      <h1>hello word</h1>
      <h1 class="h1">hello word</h2>
    </div>
  </table>
  </body>
</html>

5.上下文选择器

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .list .item.one + * {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">
        item3
        <ul class="list one">
          <li class="item one">item3-1</li>
          <li class="item">item3-2</li>
          <li class="item">item3-3</li>
        </ul>
      </li>
      <li class="item">item4</li>
      <li class="item">item5</li>
      <li class="item">item6</li>
      <li class="item">item7</li>
      <li class="item">item8</li>
    </ul>
  </body>
</html>

继承inherit

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .div {
        width: 100px;
        height: 50px;
        border: 1px solid #000;
        color: red;
      }
      .p {
        color: green;
        color: inherit;
      }
    </style>
  </head>
  <body>
    <div class="div">
      <p class="p">tag p</p>
    </div>
  </body>
</html>

选择器的权重

权重分析

两个 p 标签权重都是 0,0,1
写在后面的样式生效，如果我们想要让写在前面的 p 标签蓝色生效，就需要提权

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: blue;
      }
      p {
        color: red;
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>选择器的权重</p>
    </div>
  </body>
</html>

这里我们在\<style>里把写在上方的 p 标签的样式提权，可以这么做

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 权重：0,0,4 */
      html body div p {
        color: blue;
      }
      /* 权重：0,0,3 */
      body div p {
        color: blueviolet;
      }
      /* 权重：0,0,2 */
      div p {
        color: burlywood;
      }
      /* 权重：0,0,1       */
      p {
        color: red;
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>选择器的权重</p>
    </div>
  </body>
</html>

这里我们可以看出这四种写法权重都不同，也就代表着每个 tag 的权重都为 1，权重越高越优先

我们再来看另一种权重，类权重（class）

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 权重(0,1,1) */
      p.p {
        color: blue;
      }
      /* 权重(0,1,0)       */
      .p {
        color: green;
      }
      /* 权重：0,0,1       */
      p {
        color: red;
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="p">选择器的权重</p>
    </div>
  </body>
</html>

这里我们可以看到同样都是选择的同一个 p 标签但是权重各不同，写在最上方的 p.p 权重最高

我们再来看一个 id 选择器的权重

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 权重(1,0,0) */
      #p {
        color: hotpink;
      }
      /* 权重(0,1,1) */
      p.p {
        color: blue;
      }
      /* 权重(0,1,0)       */
      .p {
        color: green;
      }
      /* 权重：0,0,1       */
      p {
        color: red;
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="p" id="p">选择器的权重</p>
    </div>
  </body>
</html>

这里使用了 id 选择器，权重直接变成了(1,0,0)

总结
选择器的权重和标签，id，class 的数量有关系权重越高优先级越大

序号	选择器	标识	权重
1	标签	tag	(0,0,1)
2	class	“.”	(0,1,0)
3	id	“”#””	(1,0,0)

为什么不推荐使用 Tag 和 id 做选择器？

不推荐使用 Tag 的原因
Tag 的数量优先，class 可以自定义，发挥的空间要远大于 Tag
不推荐使用 id 的原因
经过选择器的分期我们就可以得出为什么不使用 id 作为选择器，就是因为 id 的权重太高！！！

css基础之元素样式，基本选择器和选择器的权重

css 基础

选择器的权重

为什么不推荐使用 Tag 和 id 做选择器？

更多相关文章

随机推荐