CSS3核心技术

2401_87118211

501人浏览 · 2025-09-08 18:48:11

2401_87118211 · 2025-09-08 18:48:11 发布

1.简介及样式表分类

1.1简介

【1】适用场景

CSS核心是控制视觉表现

【2】详细介绍

1.2 样式表分类

<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>

<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类型选择器

<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】代码演示

<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】代码演示

<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】代码演示

<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]代码演示

<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】二者区别

2.1.2.4总结

2.1.3 分组选择器

【1】语法：

ps:功能一样，不用重复写功能

【2】代码演示

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* h1和div都喜欢红色 ，这种要一个个规定*/
    /* h1 {
      color: red;
    }

    div {
      color: red;
    } */
    /* 分组选择器或者叫并集选择器 */
    /* 逗号隔开的，都喜欢红色 */
    /* 喜欢竖着排 */
    h1,
    div {
      color: red;
    }
  </style>
</head>

<body>
  <h1>我喜欢红色</h1>
  <div>
    <p>
      我喜欢红色
    </p>
  </div>
</body>

2.1.4 伪类选择器

简记 .类【一个点是类】 :伪类【两个点是伪类】

【1】分类

2.1.4.1 状态伪类

【1】链接伪类

1.语法

顺序记忆方法： LV hao [开头字母】

2.当检查找不到这个标签时，可以如下操作

3.代码演示：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 未访问的链接 */
    a:link {
      color: pink;
      /* 取消下划线 */
      text-decoration: none;
    }

    /* 已访问链接的样式 */
    a:visited {
      color: red;
    }

    /* 鼠标悬停链接的样式 */
    a:hover {
      color: blue;
    }

    /* 鼠标点击链接的样式 是指点的那一瞬间，不松手*/
    a:active {
      color: green;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <!-- 初始定义超链接，会有下划线 -->
  <a href="https://chat.deepseek.com/a/chat/s/6963ae9c-39d6-4a8f-a137-707b6ea9496b" target="_blank">deepseek</a>
  <a href="#">产品介绍</a>
  <a href="#">联系方式</a>
</body>

4.一般官方平台的操作【一般不用四个，先定义一个正常状态，再弄一个鼠标经过的状态】

[2.]用户行为伪类

1. 语法

2 . 代码演示

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      text-align: center;
      line-height: 200px;
    }

    /* .box后面紧跟冒号，不能有空格 */
    /* 鼠标悬停后，背景变为红色 */
    .box:hover {
      background-color: red;
    }

    .search {
      width: 200px;
      height: 30px;
    }

    /* :focus  获得焦点伪类  可以对表单进行设置 */
    .search:focus {
      background-color: red;
      width: 300px;
    }
  </style>
</head>

<body>
  <div class="box">文字</div>
  <!-- 表单 -->
  <input type="text" class="search">
</body>

2.1.4.2 结构伪类

【1】语法

【2】代码演示

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 选择第一个小li */
    .ul1 li:first-child {
      color: red;
    }

    /* 选择最后一个小li */
    .ul1 li:last-child {
      color: blue;
    }

    /* 选择第n个小li */
    .ul1 li:nth-child(2n) {
      color: green;
    }
/* 选择奇数个 */
    .ul2 li:nth-child(odd) {
      color: pink;
    }
  </style>
</head>

<body>
  <ul class="ul1">
    <li>第一个小li</li>
    <li>第二个小li</li>
    <li>第三个小li</li>
    <li>第四个小li</li>
    <li>第五个小li</li>
    <li>第六个小li</li>
    <li>第七个小li</li>
    <li>第八个小li</li>
    <li>第九个小li</li>
    <li>第十个小li</li>
  </ul>
  <ul class="ul2">
    <li>第一个小li</li>
    <li>第二个小li</li>
    <li>第三个小li</li>
    <li>第四个小li</li>
    <li>第五个小li</li>
    <li>第六个小li</li>
    <li>第七个小li</li>
    <li>第八个小li</li>
    <li>第九个小li</li>
    <li>第十个小li</li>
  </ul>
</body>

2.1.4.3 表单伪类

[1]语法

【2】代码演示

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 按钮的修饰 */
    button {
      width: 150px;
      height: 40px;
      background-color: #ff6900;
      color: #fff;
      /* 去掉边框 */
      border: none;
      font-size: 16px;
    }

    /* disabled这个要同时在body里面设置一下，里面是html,下面是CSS的 */
    button:disabled {
      background-color: #ccc;
    }

    /* 但这个发现，勾选框的颜色还是没有变，这是因为不能修改，要借用其他方式
实现 */
    input {
      background-color: #ff6900;
    }

    /* 可以将字体，在选中之后，改变颜色 */
    /* 表单被选中伪类选择器 */
    /* 表单被选中后的邻接兄弟的字变颜色 */
    input:checked+label {
      color: #ff6900;
    }
  </style>
</head>

<body>
  <button disabled>注册</button>
  <br>
  <input type="checkbox" id="agree">
  <label for="agree">同意注册协议</label>
</body>

2.1.5 伪元素选择器

【1】区别

【2】语法

（1）选择特定部分

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 修改第一行的文字 */
    p::first-line {
      color: #ff6900;
    }

    /* 修改第一个字母 */
    p::first-letter {
      color: red;
      font-size: 25px;
    }

    /* 让placeholder的文字颜色改变 */
    textarea::placeholder {
      color: pink;
      font-size: 25px;
    }
  </style>
</head>

<body>
  <p>
    伪元素选择器：
    1. 伪元素选择器是通过元素的特殊状态来选择元素的
    2. 伪元素选择器的语法：
    元素::伪元素选择器 {
    属性：属性值;
    }
    3.伪元素选择器是通过元素的特殊状态来选择元素的
  </p>
  <textarea name="" id="" placeholder="请输入内容"></textarea>
</body>

（2）插入内容

这两个盒子是比较重要的！！！！！！

PS：content 里面是单引号/双引号都可以

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box::before {
      content: "我是";
      color: pink;
    }

    .box::after {
      content: "老师";
      color: red;
    }
  </style>
</head>

<body>
  <div class="box">pink</div>
</body>

2.1.6 属性选择器

【1】语法

【2】代码演示

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      text-decoration: none;
    }

    /* 1.选择包含属性 */
    /* 只让a里面的class属性的元素生效 */
    /* a[class] {
      color: red;
    } */
    /* 2.选择属性等于某个值的元素 要完全匹配 */
    /* a[class="font"] {
      color: pink;
    } */
    /* 选择属性以某个值开头的元素 */
    /* a[class^="font"] {
      color: red;
    } */
    /* 选择属性以某个值结尾的元素 */
    /* =右边可以写t16,不能写16，要写16要加双引号 */
    /* 即不能写纯数字 */
    /* a[class$="16"] {
      color: red;
    } */
    /* 选择属性包含某个值的元素 */
    a[class*="font"] {
      color: red;
    }

    /* 对于表单的修改 */
    input[type="text"],
    input[type="password"] {
      /* 去掉轮廓线 */
      outline: none;
    }
  </style>
</head>

<body>
  <a href="#">修改文字颜色</a><br>
  <a href="#" class="font">修改文字颜色</a><br>
  <a href="#" class="font14">修改文字颜色</a><br>
  <a href="#" class="font16">修改文字颜色</a><br>
  <a href="#" class="red">修改文字颜色</a><br>
  <input type="text">
  <input type="password">
  <input type="checkbox">
  <input type="radio">
</body>

2.2.注释

合并表格：要加上这句话

码道开发者社区

码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践

更多推荐

AI 已经能直接改设计稿了:Windows部署Penpot，接入Codex MCP实测

码道开发者社区

【AI 业务流架构师】AI 业务流架构师方法论：Agentic AI 范式转移与业务编排思维

2026 年，Anthropic CEO Dario Amodei 在 Code with Claude 大会上的一个判断广为流传：一个人运营一家十亿美元级公司的概率是 70%–80%。这句话听起来像科幻小说的设定，但它背后是一个正在发生的结构性变化——AI 把"执行"的成本压到了历史低点，同时把"编排"的价值推到了前台。这意味着我们需要一套新的思考框架，来回答两个问题：一个人如何拥有一个公司的产