CSS3核心技术

1.简介及样式表分类

1.1简介

【1】适用场景

CSS核心是控制视觉表现

【2】详细介绍

1.2 样式表分类

html 复制代码

<head>
  <style>
    div {
      color: blue;
    }

    strong {
      color: purple;
    }
  </style>
</head>
<body>
  <!-- 1.内联样式表（行内样式表） 直接写到标签内部 控制当前标签-->
  <p style="color:pink;">我是佩奇我喜欢粉色</p>
  <!-- 2.内部样式表（嵌入样式表） 写到head标签中的style标签中 控制当前页面 -->
  <div>我是乔治，我是蓝色</div>
  <strong>我喜欢紫色</strong>
</body>

html 复制代码

<head>
    <!-- 3.外部样式表（链接样式表） 写到外部的css文件中 控制当前页面 -->
  <link rel="stylesheet" href="./css.css/my.css">
</head>
<body>
     <div>我是猪爸爸，我喜欢红色</div>
</body>
并且另写一个CSS文件：
eg:
div{
  color: red;
}

2.类型选择器及AI注释

2.1CSS选择器

【1】选择器是什么

【2】选择器的细分

2.1.1基础选择器

2.1.1.1类型选择器

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      color: pink;
      font-size: 20px;
    }
/*就近原则   层叠性【谁离body的div近，谁决定】
所以最后是红色
*/
    div {
      color: red;
    }
  </style>
</head>

<body>
  <!-- 类型选择器 标签选择器 也叫元素选择器 -->
  <div>春</div>
  <div>夏</div>
  <div>秋</div>
  <div>冬</div>
</body>

注意书写规范：

2.1.1.2 类选择器

【1】场景

【2】语法

【3】代码演示

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 类选择器 选择一个或多个 实现差异化选择*/
    .pink {
      color: pink;
    }

    /* 用短横线连接单词 */
    .sub-nav {
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="pink">春</div>
  <div>夏</div>
  <div>秋</div>
  <!-- 用空格来写下一个属性 -->
  <div class="pink sub-nav">冬</div>

</body>

2.1.1.3 id选择器

【1】语法

【2】代码演示

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* id 选择器 */
    #first {
      color: pink;
    }
  </style>
</head>

<body>
  <div id="first">春</div>
  <div>夏</div>
  <div>秋</div>
  <div>冬</div>

</body>

注意：类选择器与id选择器的区别

2.1.1.4通配符选择器

【1】语法

2.1.1.5 总结

2.1.2关系选择器

【1】分类

2.1.2.1 后代选择器

【1】使用场景

【2】语法

【3】代码演示

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 后代选择器 -->
  <style>
    /* 法一 */
    div a {
      Color: red;
    }

    /* 法二 */
    .footer a {
      color: red;
    }

    /* 选择其一即可 */
    /* 法一 */
    ul li a {
      color: skyblue;
      font-size: 20px;
    }

    /* 法二 */
    .nav li a {
      color: skyblue;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品介绍</a></li>
    <li><a href="#">合作模式</a></li>
  </ul>
  <div class="footer">
    <a href="#">关于我们</a>
    <a href="#">联系我们</a>
    <a href="#">隐私政策</a>
  </div>
</body>

2.1.2.2 子代选择器

【1】语法

PS：是亲儿子，不是孙子....

$2$ 代码演示

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 子代选择器 只选择亲儿子 */
    div>span {
      color: red;
    }
  </style>
</head>

<body>
  <!-- 子代选择器 -->
  <div>
    <span>我是儿子</span>
    <p>
      <span>我是孙子</span>
    </p>
  </div>
</body>

2.1.2.3 兄弟选择器：邻接和通用

【1】二者区别

1.简介及样式表分类

1.1简介

1.2 样式表分类

2.类型选择器及AI注释

2.1CSS选择器

2.1.1基础选择器

2.1.1.1类型选择器

2.1.1.2 类选择器

2.1.1.3 id选择器

2.1.1.4通配符选择器

2.1.1.5 总结

2.1.2关系选择器

2.1.2.1 后代选择器

2.1.2.2 子代选择器

2.1.2.3 兄弟选择器：邻接和通用

2.1.2.4总结

2.2.注释