前端Web开发HTML5+CSS3+移动web视频教程 Day4 CSS 第2天

P44 - P

四个知识点：

  • 复合选择器

  • CSS特性

  • 背景属性

  • 显示模式

复合选择器

复合选择器仍然是选择器，只要是选择器，作用就是找标签。复合选择器就是把基础选择器进行组合使用。组合了之后就可以在大量的标签里面更快更精准地找标签了。找到了标签，也就能设置样式了。

在这里插入图片描述

后代选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-后代选择器</title>
  <style>
    div span {
      color: red;
    }
  </style>
</head>
<body>
  <span>span 标签</span>
  <div>
    <span>这是 div 的儿子 span</span>
    <p>
      <span>这里是 div 的孙子 span</span>
    </p>
  </div>
</body>
</html>

效果：

在这里插入图片描述

子代选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">

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

<body>
  <span>span 标签</span>
  <div>
    <span>这是 div 的儿子 span</span>
    <p>
      <span>这里是 div 的孙子 span</span>
    </p>
  </div>
</body>

</html>

效果：

在这里插入图片描述

并集选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-并集选择器</title>
  <style>
    div,
    p,
    span {
      color: red;
    }
  </style>
</head>

<body>
  <div>div 标签</div>
  <p>p 标签</p>
  <span>span 标签</span>
</body>

</html>

效果：

在这里插入图片描述

交集选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-交集选择器</title>
  <style>
    p.box {
      color: red;
    }
  </style>
</head>

<body>
  <p class="box">p 标签，使用了类选择器 box</p>
  <p>p 标签</p>
  <div class="box">div 标签，使用了类选择器 box</div>
</body>

</html>

效果：

在这里插入图片描述

伪类选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-伪类选择器</title>
  <style>
    /* 任何标签都可以设置鼠标悬停状态 */
    a:hover {
      color: orange;
    }
    .box:hover:hover {
      color: red;
    }
  </style>
</head>
<body>
  <a href="#">a 标签，超链接</a>
  <div class="box">div 标签</div>
</body>
</html>

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06-拓展-超链接伪类</title>
  <style>
    /* a:link {
      color: skyblue;
    }
/* 浏览器有缓存，一旦点击后就保持为visited的颜色，除非清空缓存，否则将看不见link的颜色 */
    a:visited {
      color: orange;
    }

    a:hover {
      color: red;
    }

    /* 鼠标左键点击下去，不要松开，就能看见active的颜色 */
    a:active {
      color: black;
    }

    */

    /* 工作中，一般都是用一个 a 标签统一设置样式，唯独把 hover 状态单独设置 */
    a {
      color: red;
    }

    a:hover {
      color: blue;
    }
  </style>
</head>

<body>
  <a href="#">a 标签，测试伪类。</a>
</body>

</html>

CSS特性

CSS 特性就是 CSS 属性和选择器的特点。了解了这些特点之后，可以有助于减少代码量，还能根据对应的特点去解决代码当中的问题。

CSS 特性有三大类：

  • 继承性

  • 层叠性

  • 优先级

在这里插入图片描述

继承性

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07-CSS特性-继承性</title>
  <style>
    body {
      font-size: 30px;
      color: red;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div>div 标签</div>
  <p>p 标签</p>
  <span>span 标签</span>
  <!-- 嵌套的标签也能继承 -->
  <p><span>嵌套的标签</span></p>
  <!-- 有默认属性时，则不继承，保留自己的属性 -->
   <!-- 自己没有的属性，就继承，比如这里继承了加粗和字号两个属性 -->
  <a href="#">a 标签</a>
  <!-- 标题有自己的字号，就没有继承字号 -->
  <h1>h1 标签</h1>
</body>
</html>

效果：

在这里插入图片描述

层叠性

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08-CSS特性-层叠性</title>
  <style>
    div {
      color: red;
      /* 不生效 */
      font-size: 30px;
      /* 生效 */
    }

    div {
      color: green;
      /* 生效，相同属性进行覆盖 */
      font-family: 楷体;
      /* 生效 */
    }
  </style>
</head>

<body>
  <div>div 标签</div>
</body>

</html>

效果：

在这里插入图片描述

优先级

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>09-CSS特性-优先级</title>
  <style>
    /* 给一个标签加了多个选择器 */
    /* 标签选择器 */
    div {
      color: red;
    }

    /* 类选择器 */
    .box {
      color: green;
    }
  </style>
</head>

<body>
  <div class="box">div 标签</div>
</body>

</html>

在这里插入图片描述

!important 是提权功能，可以把优先级提高到最高。它是加到 CSS 属性身上。希望哪个属性生效，就把 !important 加到哪个 CSS 属性身上。

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>09-CSS特性-优先级2</title>
  <style>
    div {
      color: green;
    }
    * {
      color: red !important;
    }
    .box {
      color: blue;
    }
    #test {
      color: orange;
    }
  </style>
</head>
<body>
  <div class="box" id="test" style="color: purple;">div 标签</div>
</body>
</html>

Emmet 写法

在这里插入图片描述

背景属性

比如背景颜色、背景图片。

在这里插入图片描述

背景图

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12-背景图</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-image: url(
        ./images/1.png
      );
    }
  </style>
</head>
<body>
  <div>div 标签</div>
</body>
</html>

效果：

在这里插入图片描述

背景图平铺方式

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>13-背景图平铺方式</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      background-image: url(./images/1.png);
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div>div 标签</div>
</body>
</html>

效果：

在这里插入图片描述

背景图位置

在这里插入图片描述

背景图缩放

在这里插入图片描述

背景复合属性

在这里插入图片描述

显示模式

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

显示模式

显示模式就是标签的显示方式。比如有的标签可以独占一行，有的标签可以和别的标签共占一行，这就是显示模式的特点之一。

了解了标签的显示模式，就可以帮助我们在选择标签时选择得更加合适了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/768087.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

轻度图像处理工具，匹敌photoshop

轻度图像处理工具，匹敌photoshop

一、简介 1、一款功能强大的在线图片编辑工具，用户可以将其安装为渐进式网页应用（PWA）。它提供了与 Photoshop 相似的核心功能，能够满足大多数图像编辑需求，非常适合那些不愿或无法安装 Photoshop 的用户。即使使用免费版本，用户也能享受所有功能，是轻度图像处理的理想选…
阅读更多...
20240703在飞凌OK3588-C开发板上刷Rockchip原厂的Buildroot20220811

20240703在飞凌OK3588-C开发板上刷Rockchip原厂的Buildroot20220811

20240703在飞凌OK3588-C开发板上刷Rockchip原厂的Buildroot20220811 2024/7/3 18:25 详细的刷机LOG&#xff1a; [BEGIN] 2024/7/3 18:18:49 rootRK3588:/# DDR Version V1.07 20220412 LPDDR4X, 2112MHz channel[0] BW16 Col10 Bk8 CS0 Row16 CS1 Row16 CS2 Die BW16 Size204…
阅读更多...
【高级篇】第9章 Elasticsearch 监控与故障排查

【高级篇】第9章 Elasticsearch 监控与故障排查

9.1 引言 在现代数据驱动的应用架构中，Elasticsearch不仅是海量数据索引和搜索的核心，其稳定性和性能直接影响到整个业务链路的健康度。因此，建立有效的监控体系和掌握故障排查技能是每一位Elasticsearch高级专家的必备能力。 9.2 监控工具：洞察与优化的利器 在Elastics…
阅读更多...
MySQL加个索引都可能丢数据，这个坑你知道吗？

MySQL加个索引都可能丢数据，这个坑你知道吗？

前言 近期&#xff0c;我们收到一位数据库运维小伙伴的咨询&#xff0c;他们有一个MySQL 5.6的数据库&#xff0c;需要对核心支付表做DDL加索引&#xff0c;咨询我们如何加索引更优雅。基于DBA经验&#xff0c;给表添加索引主要有以下几种方式&#xff1a; 用MySQL原生的DDL语…
阅读更多...
BeautifulSoup 类通过查找方法选取节点

BeautifulSoup 类通过查找方法选取节点

BeautifulSoup 类提供了一些基于 HTML 或 XML 节点树选取节点的方法&#xff0c;其中比较主流 的两个方法是 find() 方法和 find_all() 方法。 find() 方法用于查找符合条件的第一个节点&#xff1b; find_all() 方法用于查找所有符合条件的节点&#xff0c;并以列表的…
阅读更多...
分页导航DOM更新实践：JavaScript与jQuery的结合使用

分页导航DOM更新实践：JavaScript与jQuery的结合使用

分页导航DOM更新实践&#xff1a;JavaScript与jQuery的结合使用 在Web开发中&#xff0c;分页导航是展示大量数据时不可或缺的UI组件。合理的分页不仅可以提高应用性能&#xff0c;还能优化用户体验。本博客将通过一个实际的DOM结构和模拟数据&#xff0c;讲解如何使用JavaScr…
阅读更多...
计算机网络部分知识点整理

计算机网络部分知识点整理

停止等待协议的窗口尺寸为 1。 √以太网标准是IEEE802.3TCP/IP四层&#xff0c;OSI模型有7层&#xff0c;地址解析协议 ARP 在 OSI 参考七层协议属于数据链路层&#xff0c;在TCP/IP 协议属于网络层&#xff0c;ARP作用&#xff1a;将 IP 地址映射到第二层地址&#xff0c;交换…
阅读更多...
Zabbix 配置PING监控

Zabbix 配置PING监控

Zabbix PING监控介绍 如果需要判断机房的网络或者主机是否正常&#xff0c;这就需要使用zabbix ping&#xff0c;Zabbix使用外部命令fping处理ICMP ping的请求&#xff0c;在基于ubuntu APT方式安装zabbix后默认已存在fping程序。另外zabinx_server配置文件参数FpingLocation默…
阅读更多...
VTK- 可视化过程 四种坐标系统

VTK- 可视化过程 四种坐标系统

可视化工具包 VTK(Visualization Toolkit),是一种开源的可视化软件系统,主要实现计算机图形学、图像分析、渲染、图像处理等功能。VTK 包含一个 C类库和多个不同语言调用接口层&#xff0c;主要针对2D、3D 图像和可视化用图设计。 VTK设计作为一个工具包&#xff0c;不依赖于特…
阅读更多...
【Android】构建 Android Automotive OS：适合初学者的指南

【Android】构建 Android Automotive OS：适合初学者的指南

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…
阅读更多...
基于星火大模型的群聊对话分角色要素提取挑战赛|#AI夏令营#Datawhale#夏令营-Lora微调与prompt构造

基于星火大模型的群聊对话分角色要素提取挑战赛|#AI夏令营#Datawhale#夏令营-Lora微调与prompt构造

赛题连接 https://challenge.xfyun.cn/topic/info?typerole-element-extraction&optionphb Datawhale Al夏令营 零基础入门大模型技术竞赛 数据集预处理 由于赛题官方限定使用了星火大模型&#xff0c;所以只能调用星火大模型的API或者使用零代码微调 首先训练数据很少…
阅读更多...
windows电脑蓝屏解决方法（亲测有效）

windows电脑蓝屏解决方法（亲测有效）

如果不是硬件问题&#xff0c;打开终端尝试以下命令 sfc /scannow DISM /Online /Cleanup-Image /RestoreHealth
阅读更多...
昇思25天学习打卡营第7天|Pix2Pix实现图像转换

昇思25天学习打卡营第7天|Pix2Pix实现图像转换

文章目录 昇思MindSpore应用实践基于MindSpore的Pix2Pix图像转换1、Pix2Pix 概述2、U-Net架构定义UNet Skip Connection Block 2、生成器部分3、基于PatchGAN的判别器4、Pix2Pix的生成器和判别器初始化5、模型训练6、模型推理 Reference 昇思MindSpore应用实践 本系列文章主要…
阅读更多...
远程登录WINDOWS10,提示你的凭据不工作

远程登录WINDOWS10,提示你的凭据不工作

1&#xff1a;想通过远程桌面登录WINDOWS10输入用户名和密码后&#xff0c;出现下面的提示。 2&#xff1a;登录WINDOWS10&#xff0c;在运行中输入gpedit.msc 3&#xff1a;本地组策略编辑器窗口中&#xff0c;依次展开&#xff0c;计算机配置 ---> 管理模版---> 系统--…
阅读更多...
Python容器 之 字典--字典的遍历

Python容器 之 字典--字典的遍历

字典存在 键(key), 值(value) , 遍历分为三种情况 1.遍历字典的键 循环拿到字典中的每个键名 # 方式一 for 变量 in 字典: print(变量) # 方式二 for 变量 in 字典.keys(): # 字典.keys() 可以获取字典所有的键 print(变量) my_dict {name: 小明, age: 18, sex: 男}…
阅读更多...
CVE-2024-6387漏洞预警：尽快升级OpenSSH

CVE-2024-6387漏洞预警：尽快升级OpenSSH

OpenSSH维护者发布了安全更新&#xff0c;其中包含一个严重的安全漏洞&#xff0c;该漏洞可能导致在基于glibc的Linux系统中使用root权限执行未经身份验证的远程代码。该漏洞的代号为regreSSHion&#xff0c;CVE标识符为CVE-2024-6387。它驻留在OpenSSH服务器组件&#xff08;也…
阅读更多...
2.（vue3.x+vite）调用iframe的方法（vue编码）

2.（vue3.x+vite）调用iframe的方法（vue编码）

1、效果预览 2.编写代码 （1）主页面 <template><div><button @click="sendMessage">调用iframe，并发送信息
阅读更多...
什么是带有 API 网关的代理？

什么是带有 API 网关的代理？

带有 API 网关的代理服务显著提升了用户体验和性能。特别是对于那些使用需要频繁创建和轮换代理的工具的用户来说&#xff0c;使用 API 可以节省大量时间并提高效率。 了解 API API&#xff0c;即应用程序编程接口&#xff0c;是服务提供商和用户之间的连接网关。通过 API 连接…
阅读更多...
JDK1.8下载、安装与配置完整图文2024最新教程

JDK1.8下载、安装与配置完整图文2024最新教程

一、报错 运行Pycharm时&#xff0c;报错No JVM installation found. Please install a JDK.If you already have a JDK installed, define a JAVA_HOME variable in Computer >System Properties > System Settings > Environment Variables. 首先可以检查是否已安装…
阅读更多...
UiPath+Appium实现app自动化测试

UiPath+Appium实现app自动化测试

一、环境准备工作 1.1 完成appium环境的搭建 参考&#xff1a;pythonappiumpytestallure模拟器(MuMu)自动化测试环境搭建_appium mumu模拟器-CSDN博客 1.2 完成uipath的安装 登录官网&#xff0c;完成注册与软件下载安装。 UiPath业务自动化平台&#xff1a;先进的RPA及自动…
阅读更多...
最新文章

Copyright @ 2022~2023