前端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.rhkb.cn/news/370848.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[附源码]基于Flask的演唱会购票系统

[附源码]基于Flask的演唱会购票系统

摘要 随着互联网技术的普及和发展&#xff0c;传统购票方式因其效率低下、流程繁琐等问题已难以满足现代社会的需求。本文设计并实现了一个基于Flask框架的演唱会购票系统&#xff0c;该系统集成了用户管理、演唱会信息管理、票务管理以及数据统计与分析等功能模块&#xff0c…
阅读更多...
项目实战--Spring Boot + Minio文件切片上传下载

项目实战--Spring Boot + Minio文件切片上传下载

1.搭建环境 引入项目依赖 <!-- 操作minio的java客户端--> <dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.5.2</version> </dependency> <!-- jwt鉴权相应依赖--> &…
阅读更多...
Python + OpenCV 开启图片、写入储存图片

Python + OpenCV 开启图片、写入储存图片

这篇教学会介绍OpenCV 里imread()、imshow()、waitKey() 方法&#xff0c;透过这些方法&#xff0c;在电脑中使用不同的色彩模式开启图片并显示图片。 imread() 开启图片 使用imread() 方法&#xff0c;可以开启图片&#xff0c;imread() 有两个参数&#xff0c;第一个参数为档…
阅读更多...
[c++] 可变参数模版

[c++] 可变参数模版

前言 可变参数模板是C11及之后才开始使用,学校的老古董编译器不一定能用 相信大家在刚入门c/c时都接触过printf函数 int printf ( const char * format, ... ); printf用于将数据格式化输出到屏幕上,它的参数非常有意思,可以支持任意数量,任意类型的多参数.而如果我们想实现类…
阅读更多...
陶建辉当选 GDOS 全球数据库及开源峰会荣誉顾问

陶建辉当选 GDOS 全球数据库及开源峰会荣誉顾问

近日&#xff0c;第二十三届 GOPS 全球运维大会暨 XOps 技术创新峰会在北京正式召开。本次会议重点议题方向包括开源数据库落地思考、金融数据库自主可控、云原生时代下数据库、数据库智能运维、数据库安全与隐私、开源数据库与治理。大会深入探讨这些方向&#xff0c;促进了数…
阅读更多...
方法引用详解

方法引用详解

什么是方法引用&#xff1f;&#xff1a;针对于函数式接口中的抽象方法 为什么用方法引用&#xff1f;&#xff1a;避免代码的重复&#xff0c;简便书写&#xff0c;提高效率 在使用Lambda表达式的时候&#xff0c;我们实际上传递进去的代码就是一种解决方案&#xff1a;拿参数…
阅读更多...
服务器数据恢复—raid5阵列硬盘出现大量坏道的数据恢复案例

服务器数据恢复—raid5阵列硬盘出现大量坏道的数据恢复案例

服务器存储数据恢复环境&故障&#xff1a; 一台DELL EqualLogic PS 4000存储中有一组由12块磁盘组建的raid5阵列&#xff0c;存储空间划分3个同等大小的卷&#xff0c;采用的VMFS文件系统。 两块硬盘指示灯亮黄色&#xff0c;raid5阵列崩溃&#xff0c;存储变得不可用。 服…
阅读更多...
代码随想录——划分字母区间（Leetcode763）

代码随想录——划分字母区间（Leetcode763）

题目链接 贪心 class Solution {public List<Integer> partitionLabels(String s) {int[] count new int[27];Arrays.fill(count,0);// 统计元素最后一次出现的位置for(int i 0; i < s.length(); i){count[s.charAt(i) - a] i;}List<Integer> res new Ar…
阅读更多...
mac怎么压缩pdf文件大小，mac压缩pdf文件大小不改变清晰度

mac怎么压缩pdf文件大小，mac压缩pdf文件大小不改变清晰度

在数字化时代&#xff0c;pdf格式因其良好的兼容性和稳定性&#xff0c;成为了文档分享和传输的首选。然而&#xff0c;随着文件内容的丰富&#xff0c;pdf文件的体积也越来越大&#xff0c;给存储和传输带来了不小的困扰。本文将揭秘几种简单有效的pdf文件压缩方法&#xff0c…
阅读更多...
多粒度封锁-封锁粒度、多粒度封锁模式

多粒度封锁-封锁粒度、多粒度封锁模式

一、引言 1、若采用封锁技术实现并发控制&#xff0c;事务在访问数据库对象前要在数据库对象上加锁&#xff0c;为提高事务的并发程度&#xff0c;商用DBMS会采用一种多粒度封锁方法 2、事务可访问的数据库对象可以是逻辑单元&#xff0c;包括关系、关系中的元组、关系的属性…
阅读更多...
【C++】map和set详解

【C++】map和set详解

目录 1. 关联式容器 2. 键值对pair 3. 树形结构的关联式容器 4. set 4.1 set的介绍 4.2 set的构造 4.3 set的迭代器 4.4 set的容量 4.5 set的常用函数 5. multiset 6. map 6.1 map的介绍 6.2 map的构造 6.3 map的迭代器 6.4 map的容量 6.5 map的operator[] 6.6…
阅读更多...
Python入门 2024/7/6

Python入门 2024/7/6

目录 元组的定义和操作 字符串的定义和操作 字符串 字符串的替换 字符串的分割 字符串的规整操作&#xff08;去除前后空格&#xff09; 字符串的规整操作&#xff08;去掉前后指定字符串&#xff09; 操作 字符串的替换 字符串的分割 字符串的规整操作 统计字符串的…
阅读更多...
ESP32——物联网小项目汇总

ESP32——物联网小项目汇总

商品级ESP32智能手表 [文章链接] 用ESP32&#xff0c;做了个siri&#xff1f;&#xff01;开源了&#xff01; [文章链接]
阅读更多...
JSP WEB开发(一) JSP语言基础

JSP WEB开发(一) JSP语言基础

目录 JSP JSP简介&#xff1a; JSP页面 JSP运行原理 JSP脚本元素 JAVA程序片 局部变量 全局变量和方法的声明 全局变量 方法的声明 程序片执行特点 synchronized关键字 表达式 JSP指令标记 page指令 include指令 JSP动作标记 JSP动作元素include和include指令的…
阅读更多...
测试环境：使用OpenSSL生成证书并配置Https

测试环境：使用OpenSSL生成证书并配置Https

文章目录 需求1、安装OpenSSL1.1、安装包下载1.2、安装&#xff08;以window 64位为例&#xff09;1.3、配置环境变量&#xff08;非必须&#xff09; 2、生成证书2.1、新建文件夹2.2、生成根证书2.2.1、生成私钥2.2.2、生成根证书&#xff0c;并且自签名 2.3、服务端证书生成2…
阅读更多...
前端根据目录生成模块化路由routes

前端根据目录生成模块化路由routes

根据约定大于配置的逻辑&#xff0c;如果目录结构约定俗成&#xff0c;前端是可以根据目录结构动态生成路由所需要的 route 结构的&#xff0c;这个过程是要在编译时 进行&#xff0c;生成需要的代码&#xff0c;保证运行时的代码正确即可 主流的打包工具都有对应的方法读取文…
阅读更多...
设计模式之状态机模式

设计模式之状态机模式

一、状态机模式介绍 状态机模式&#xff08;State Machine Pattern&#xff09;是一种用于描述对象行为的软件设计模式&#xff0c;属于行为型设计模式。在状态机模式中&#xff0c;对象的行为取决于其内部状态&#xff0c;并且在不同的状态下&#xff0c;对象可能会有不同的行…
阅读更多...
Java信号量semaphore的原理与使用方法

Java信号量semaphore的原理与使用方法

Semaphore的基本概念 在Java中&#xff0c;Semaphore是位于java.util.concurrent包下的一个类。它的核心就是维护了一个许可集。简单来说&#xff0c;就是有一定数量的许可&#xff0c;线程需要先获取到许可&#xff0c;才能执行&#xff0c;执行完毕后再释放许可。 那么&…
阅读更多...
Unity 简单载具路线 Waypoint 导航

Unity 简单载具路线 Waypoint 导航

前言 在游戏开发和导航系统中&#xff0c;"waypoint" 是指路径中的一个特定位置或点。它通常用于定义一个物体或角色在场景中移动的目标位置或路径的一部分。通过一系列的 waypoints&#xff0c;可以指定复杂的移动路径和行为。以下是一些 waypoint 的具体用途&…
阅读更多...
YoloV8改进策略：Block改进|轻量实时的重参数结构|最新改进|即插即用（全网首发）

YoloV8改进策略：Block改进|轻量实时的重参数结构|最新改进|即插即用（全网首发）

摘要 本文使用重参数的Block替换YoloV8中的Bottleneck&#xff0c;GFLOPs从165降到了116&#xff0c;降低了三分之一&#xff1b;同时&#xff0c;map50-95从0.937涨到了0.947。 改进方法简单&#xff0c;只做简单的替换就行&#xff0c;即插即用&#xff0c;非常推荐&#xf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023