CSS选择器及背景属性介绍

news2024/11/23 17:16:47

1.复合选择器

(1)后代选择器

(2)子代选择器

(3)并集选择器

(4)交集选择器

2.伪类选择器

即鼠标所悬停的内容变色

扩展:伪类选择器关于超链接

3.CSS三大特性

(1)继承性

子级默认继承父级的文字控制属性(除非子级本身自己有样式,比如<h1></h1>等标签有自己的样式,不受父级影响。)

一般继承性属性写在<body></body>里面

(2)层叠性

(3)优先级

回顾知识点:

<div class=".thing" id="text"></div>

通配符选择器    *{}

标签选择器   div{}

类标签选择器  .thing{}

id选择器    #text{}

行内样式  <div class=".thing" id="text" style="color:red"></div>

!important   *{color: blue !important;}----------------此选择器提高优先级,直接生效此样式

(3).1优先级--叠加计算规则

知识点:

例子1

从左往右比较:

1.行内皆为0,无法定夺

2.div #box3与#box1 .c3 皆为1,排除.c1 .c2 div

3.div #box3为0,#box1 .c3 为1,排除div #box3

最终文字为橙色orange

例子2

继承权最低

.father属性值要影响“文字”是继承性

div p属于后代选择器

例子3

!important权重最高

3.Emmet写法

4.背景属性

(1)背景图

(2)背景图平铺方式

一般如果背景图宽高设置过大,因为默认平铺则会导致出现多幅相同图片以保证填满盒子。

此为垂直方向平铺的例子

(3)背景图位置

三种表示方法。 

提示:(1)可以只写一个关键字,另一个默认居中。数字只写一个表示水平方向。默认垂直居中。

(2)关键字取值方式可以颠倒。

(4)背景图缩放

提示:百分比使得照片和盒子宽度一样,照片高度按照等比例缩放。

(5)背景图固定

文字可以滚动,但是背景不动!

(6)背景复合属性

同font复合属性相同

!!!注意:背景图缩放要用“ / ”隔开。不是空格。

5.显示模式

(1)块级元素

1.独占一行

2.宽高属性生效

若不使用

<style>

        div{

            width: 100;

            height: 200;

        }

    </style>

设置宽高,则默认宽度是父级的100%,div的父级为body

div标签继承父级body的宽度,而.box被修改宽度。

(2)行内元素

1.一行可以多个元素

2.宽度属性不生效

3.宽度由内容撑开,即内容定

(3)行内块元素

1.一般是照片,一行可以多个照片

2.宽高属性生效

3.宽高默认由内容撑开

6.转换显示模式

7.案例一(热词)

(1)效果

(2)代码

<title>热词</title>

    <style>

        a{

            /* 将a转换为块元素模式,方便修改宽高 */

           display: block;

           /* 修改宽高 */

           width: 200px;

           height: 80px;

           background-color: #3064bb;

           /* 文本颜色,取消下划线 ,字体水平居中 */

           color: #fff;

           text-decoration: none;

           text-align: center;

           /* 行高使得垂直居中,改变文本大小 */

           line-height: 80px;

           font-size: 18px;

        }

         /* 鼠标悬停效果 */

         a:hover{

            background-color: #608dd9;

            }

    </style>

</head>

<body>

    <!-- a标签属于行内元素 -->

    <a href="#">HTML</a>

    <a href="#">CSS</a>

    <a href="#">JavaScript</a>

    <a href="#">Vue</a>

    <a href="#">React</a>

</body>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

路由表来源(基于华为模拟器eNSP)

概叙 在交换网络中&#xff0c;若要实现不同网段之间的通信&#xff0c;需要依靠三层设备&#xff08;路由器、三层交换机等&#xff09;&#xff0c;而路由器只知道其直连网段的路由条目&#xff0c;对于非直连的网段&#xff0c;在默认情况下&#xff0c;路由器是不可达的&a…

心理咨询评估|基于springBoot的学生心理咨询评估系统设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 使用旧方法对学生心理咨询评估信息进行系统化管理已经不再让人们信…

Metasploit渗透测试之社会工程学工具SET

概述 社会工程师工具包&#xff08;SET&#xff09;是一个开源渗透测试框架&#xff0c;专门设计用于对人为因素执行高级攻击&#xff0c;并迅速成为渗透测试人员武器库中的标准工具。SET是TrustedSec&#xff0c;LLC的产品&#xff0c;TrustedSec&#xff0c;LLC是一家位于俄…

深入理解Qt中的QTableView、Model与Delegate机制

文章目录 显示效果QTableViewModel(模型)Delegate(委托)ITEM控件主函数调用项目下载在Qt中,视图(View)、模型(Model)和委托(Delegate)机制是一种非常强大的架构,它们实现了MVC(模型-视图-控制器)设计模式。这种架构分离了数据存储(模型)、数据展示(视图)和数据操作(委托),使…

安装指定node.js 版本 精简版流程

首先 我们本机上是否安装有node 如果有 需要先卸载 卸载完成后 使用命令查看是否卸载干净 打开WinR 输入cmd 然后输入如下名: where node 如果没有目录显示 说明node 很干净 本机没有相关安装 在输入命令: where npm 如果有相关目录 需要删除掉 要不然 后续安装的…

阿里云数据库导出 | 数据管理(兼容数据库备份)

文章目录 1、数据库导出2、操作步骤3、DMS - Data Management Service 1、数据库导出 2、操作步骤 3、DMS - Data Management Service

MySQL 【日期】函数大全(五)

目录 1、QUARTER() 返回一个指定日期所在季度值。 2、SEC_TO_TIME() 将指定的秒数转为一个格式为 HH:MM:SS 的时间值。 3、SECOND() 提取并返回时间的秒部分。 4、STR_TO_DATE() 将指定的字符串根据指定日期格式转为日期/时间。 5、SUBDATE() 在指定的日期/时间上减去指定…

127-4通道 12bit 125Msps 直流耦合 AD FMC 子卡

一、板卡概述: FMC 高速 AD 模块 FL9627 为 4 路 125MSPS&#xff0c; 12 位的模拟信号转数字信号模块。 FMC 模块的 AD 转换采用了 2 片 ADI 公司的 AD9627 芯片&#xff0c;每个 AD9627 芯片支持 2 路 AD 输入转换&#xff0c;所以 2 片 AD9627 芯片一共支持 4 路的 AD 输入…

FLORR.IO回顾

No.1 subulaxi No.2 qwert 2青加全红 我将在2024.11.1退游!

Wails 学习笔记:Wails核心思想理解

文章目录 1. Wails 的核心思想2. 工作流程2.1 前端渲染2.2 后端逻辑2.3 前后端通信2.4 应用打包与分发 3. Wails 主要组件3.1 WebView3.2 事件与数据绑定3.3 窗口管理 4. Wails 的优点5. Wails 的使用场景6. 启动函数Runwails.Run() 的主要功能wails.Run() 的参数&#xff1a;w…

MySQL8.0.28解压版安装windows

1.下载 https://mirrors.aliyun.com/mysql/MySQL-8.0/mysql-8.0.28-winx64.zip 2.文档 MySQL :: MySQL 8.0 Reference Manual :: 2.3.4 Installing MySQL on Microsoft Windows Using a noinstall ZIP Archive 3.创建配置文件my.ini。默认解压文件中没有 内容如下&#xff…

【LangChain系列1】【LangChain表达式 (LCEL)】

目录 前言一、LangChain1-1、介绍1-2、LangChain抽象出来的核心模块1-3、特点1-4、langchain解决的一些行业痛点1-5、安装 二、LangChain表达式——LCEL2-1、LCEL介绍2-2、基本示例&#xff1a;提示 模型 输出解析器2-3、接口 附录、ZhiPuAI API0、安装1、设置API密钥2、基本…

无法获得下列许可 SolidWorks standard。无法连接到服务器(-15,10,10061)

太久没启动SolidWorks&#xff0c;今天想打开&#xff0c;结果给我报错&#xff0c;如下图所示&#xff1a; 看网上说是开机启动项被杀毒软件给关了&#xff0c;于是打开360&#xff0c;看了一下&#xff0c;果然&#xff1a; 还有好几个和SolidWorks相关的项目&#xff0c;这里…

WebRTC音频 04 - 关键类

WebRTC音频01 - 设备管理 WebRTC音频 02 - Windows平台设备管理 WebRTC音频 03 - 实时通信框架 WebRTC音频 04 - 关键类(本文) 一、前言&#xff1a; 在WebRTC音频代码阅读过程中&#xff0c;我们发现有很多关键的类比较抽象&#xff0c;搞不清楚会导致代码阅读一脸懵逼。比如…

吴恩达深度学习笔记(5)

调试处理&#xff08;随机采样、非格网、由粗到细&#xff09;及超参数 深度学习中涉及大量超参数&#xff0c;如下所示 在不知道哪个参数更为重要的情况下&#xff0c;机器学习参数较少&#xff0c;可以利用网络化的参数取值试验&#xff0c;但是深度学习参数较多的情况下&am…

通过华为鲲鹏认证的软件产品如何助力信创产业

软件通过华为鲲鹏认证与信创产业有着密切的联系。鲲鹏认证是华为推动信创产业发展的一项重要举措&#xff0c;通过该认证&#xff0c;软件可以在华为的生态系统中实现更好的兼容性和性能优化&#xff0c;从而推动信创产业的全面发展和国产化替代。 鲲鹏认证的定义和重要性 鲲鹏…

POMO:强化学习的多个最优策略优化(2020)(完)

文章目录 Abstract1 Introduction2 Related work3 Motivation4 多最优策略优化(POMO)4.1 从多个起始节点进行探索4.2 策略梯度的共享基线4.3 用于推理的多个贪婪轨迹5 Experiments5.1 Traveling salesman problem5.2 带容量限制得车辆路径问题5.3 0-1背包问题6 ConclusionAbs…

【黑马redis基础篇】介绍和数据类型

1.NoSQL //来源&#xff1a;02 NoSQL类型&#xff1a;键值、文档、图 NoSQL特点&#xff1a;非结构化的、无关联的、非SQL、BASE(无法满足事务ACID) 2.认识Redis //来源03 基于内存的键值型NoSQL数据库。全称远程词典服务器。 2.1特征 &#xff08;1&#xff09;键值型&a…

免费分享1885页Python电子书,耗时200小时整理!!!

python学习方向建议&#xff1a; 如果你是本科及以下学历&#xff0c;建议你学习以下两个方向 1、爬虫。简单的爬虫库&#xff0c;代理爬虫&#xff0c;分布式爬虫等 2、Web。学习主流Web框架&#xff0c;轻量级的Flask。重量级的Django等 3、自动化测试 如果你是本科以上学…