HTML5+CSS3+移动web——CSS进阶

系列文章目录


HTML5+CSS3+移动web——HTML 基础-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/ymxk2876721452/article/details/136070953?spm=1001.2014.3001.5502HTML5+CSS3+移动web——列表、表格、表单-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/ymxk2876721452/article/details/136221443?spm=1001.2014.3001.5502HTML5+CSS3+移动web——CSS基础-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/ymxk2876721452/article/details/136465434?spm=1001.2014.3001.5502HTML5+CSS3+移动web——CSS 文字控制属性-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/ymxk2876721452/article/details/136600522?spm=1001.2014.3001.5502


目录

系列文章目录

一、复合选择器

后代选择器

子代选择器

并集选择器

交集选择器

伪类选择器

超链接伪类

二、CSS特性

继承性

层叠性

优先级

基础选择器

复合选择器-叠加

三、背景属性

背景图

平铺方式

背景图位置

背景图缩放

背景图固定

背景复合属性

四、显示模式

块级元素

行内元素

行内块元素


一、复合选择器

定义:由两个或多个基础选择器,通过不同的方式组合而成。

作用:更准确、更高效的选择目标元素(标签)。

后代选择器

后代选择器:选中某元素的后代元素

选择器写法:父选择器 子选择器 { CSS 属性},父子选择器之间用空格隔开。

子代选择器

子代选择器:选中某元素的子代元素(最近的子级)。

选择器写法:父选择器 > 子选择器 { CSS 属性},父子选择器之间用 > 隔开。

并集选择器

并集选择器:选中多组标签设置相同的样式。

选择器写法:选择器1, 选择器2, …, 选择器N { CSS 属性},选择器之间用 , 隔开。

 交集选择器

交集选择器:选中同时满足多个条件的元素。

选择器写法:选择器1选择器2 { CSS 属性},选择器之间连写,没有任何符号。

伪类选择器

伪类选择器:伪类表示元素状态,选中元素的某个状态设置样式。

鼠标悬停状态:选择器:hover { CSS 属性 }

超链接伪类

超链接需要设置以上四个状态,需要按 LVHA 的顺序书写

选择器作用
:link访问前
:visited访问后
:hover鼠标悬停
:active点击时(激活)

 

二、CSS特性

CSS特性:化简代码 / 定位问题,并解决问题

继承性

继承性:子级默认继承父级的文字控制属性。如果标签有默认文字样式则会继承失败

层叠性

特点:

  • 相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性

  • 不同的属性会叠加:不同的 CSS 属性都生效

选择器类型相同则遵循层叠性,否则按选择器优先级判断。

优先级

优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则

基础选择器

规则:选择器优先级高的样式生效

公式:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

(选中标签的范围越大,优先级越低)

复合选择器-叠加

(行内样式、id选择器个数、类选择器个数、标签选择器个数)

规则:

  • 从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较

  • !important 权重最高

  • 继承权重最低

三、背景属性

背景图

使用背景图实现装饰性的图片效果。

background-image :url(图片地址);  一般设置width和height来控制图片显示大小

div {
  width: 500px;
  height: 500px;

  background-image: url(./images/1.png);
}

平铺方式

background-repeat(属性值)

属性值显示效果
no-repeat不平铺
repeat平铺(默认)
repeat-x水平方向平铺
repeat-y垂直方向平铺

背景图位置

属性名:background-position(bgp)

属性值:水平方向位置 垂直方向位置

关键字

关键字位置
left左侧
right右侧
center居中
top顶部
bottom底部

坐标

  • 水平:正数向右;负数向左

  • 垂直:正数向下;负数向上

可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方向为居中

背景图缩放

作用:设置背景图大小

属性名:background-size(bgz)

常用属性值:

  • 关键字

    • cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见

    • contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白

  • 百分比:根据盒子尺寸计算图片大小

  • 数字 + 单位(例如:px)

背景图固定

作用:背景不会随着元素的内容滚动。

属性名:background-attachment(bga)

属性值:fixed

背景复合属性

属性名:background(bg)

属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值,不区分顺序

四、显示模式

布局网页的时候,根据标签的显示模式选择合适的标签摆放内容

属性:display

属性值效果
block块级
inline-block行内块
inline行内

块级元素

特点:

  • 独占一行

  • 宽度默认是父级的100%

  • 添加宽高属性生效

行内元素

特点:

  • 一行可以显示多个

  • 设置宽高属性不生效

  • 宽高尺寸由内容撑开

行内块元素

特点:

  • 一行可以显示多个

  • 设置宽高属性生效

  • 宽高尺寸也可以由内容撑开

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

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

相关文章

复习Day3

1231. 航班时间 - AcWing题库 #include<bits/stdc.h> using namespace std; int getTime(){//得到时间 int h1,m1,s1,h2,m2,s2,d0;scanf("%d:%d:%d %d:%d:%d (%d)",&h1,&m1,&s1,&h2,&m2,&s2,&d);//补匹配直接跳过 int timed*24*3…

【Django开发】0到1美多商城项目md教程第3篇:用户注册业务实现,1. 用户注册页面绑定Vue数据【附代码文档】

美多商城完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;欢迎来到美多商城&#xff01;&#xff0c;项目准备。展示用户注册页面&#xff0c;创建用户模块子应用。用户注册业务实现&#xff0c;用户注册前端逻辑。图形验证码&#xff0c;图形验证码接口设…

《自动机理论、语言和计算导论》阅读笔记:p1-p4

《自动机理论、语言和计算导论》学习第1天&#xff0c;p1-p4&#xff0c;总计4页。这只是个人的学习记录&#xff0c;因为很多东西不懂&#xff0c;难免存在理解错误的地方。 一、技术总结 1.有限自动机(finite automata)示例 1.software for checking digital circuits。 …

IEEE TRANSACTIONS ON INTELLIGENT TRANSPORTATION SYSTEMS (T-ITS) 投稿记录,欢迎大家评论~

投稿整个流程时间点&#xff1a;Submitted: 17 October 2023 Awaiting Reviewer Assignment: From 18 October 2023 to 6 November 2023 Under review: From 6 November 2023 to 30 November 2023 Awaiting reviewer scores: From 1 December 2023 to 13 January 2024 Aw…

概率论与数理统计-条件概率题目2-3次事件依次发生问题

题目&#xff1a;设某光学仪器厂制造的透镜,第一次落下时打破的概率为1/2,若第一次落下未打破,第二次落下打破的概率为7/10,若前两次落下未打破,第三次落下打破的概率为9/10.试求透镜落下三次而未打破的概率&#xff1f; 解答&#xff1a; 设Ai表示透镜第i次下落打破&#xff…

【微服务】以模块化单体架构开发微服务应用

目录 推荐超级课程: Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战我们知道,起初,单体应用有显著的优势:它们更容易开发和部署。从开发人员的角度来看,这种简单性是有益的。一切都是集中的,可以快速更新任何部分的业务逻辑并立即看到结果。这种开…

Redis八股

持久化 RDB AOF 数据过期策略 惰性删除 定期删除 数据淘汰策略 分布式锁 集群模型 主从同步原理 哨兵模式 分片集群 网络模型

哪本书最了解孩子?跟《米小圈上学记》一起做孩子的“引路人”!

孩子是发展中的人&#xff0c;需要家长的陪伴&#xff0c;孩子的身心发展是有规侓的&#xff0c;是处于发展过程中的人。我们要学会尊重孩子的发展&#xff0c;从兴趣出发&#xff0c;关注孩子的成长。但是&#xff0c;家长不可能无时无刻都能陪在孩子身边&#xff0c;他需要一…

day06vue2学习

day06 路由的封装抽离 问题&#xff1a;所有的路由配置都堆在main.js中不太合适么&#xff1f;不好&#xff0c;会加大代码的复杂度 目标&#xff1a;将路由模块抽离出来。好处&#xff1a;差分模块&#xff0c;利于维护。 大致的做法就是&#xff0c;将路由相关的东西都提…

使用docker-compose搭建wordpress博客

1、从远程仓库拉取worldpress镜像到本地 2、新建一个项目&#xff0c;然后在新建的项目目录里面新建一个docker-compose.yml模版文件。 3、编写docker-compose.yml文件 4、docker-compose up 运行项目。 5、在浏览器测试 使用docker-compose搭建wordpress博客实验成功。

03-SparkSQL入门

0 Shark Spark 的一个组件&#xff0c;用于大规模数据分析的 SQL 查询引擎。Shark 提供了一种基于 SQL 的交互式查询方式&#xff0c;可以让用户轻松地对大规模数据集进行查询和分析。Shark 基于 Hive 项目&#xff0c;使用 Hive 的元数据存储和查询语法&#xff0c;并基于Hiv…

基于Java中的SSM框架实现快餐店线上点餐系统项目【项目源码+论文说明】计算机毕业设计

基于Java中的SSM框架实现快餐店线上点餐系统演示 摘要 随着计算机互联网的高速发展。餐饮业的发展也加入了电子商务团队。各种网上点餐系统纷纷涌现&#xff0c;不仅增加了商户的销售量和营业额&#xff0c;而且为买家提供了极大的方便&#xff0c;足不出户&#xff0c;就能订…

arm 外部中断

main.c: #include"key_inc.h" //封装延时函数 void delay(int ms) {int i,j;for(i0;i<ms;i){for(j0;j<2000;j){}} } int main() {//按键中断的初始化key1_it_config();key2_it_config();key3_it_config();while(1){printf("in main pro\n");delay(1…

AugmentedReality之路-创建工程及主界面(1)

本文从零创建1个工程&#xff0c;并添加1个BasicMap和1个主界面&#xff0c;主界面包含Start AR和Stop AR两个按钮 1、创建移动端工程并打包运行 创建1个空工程&#xff0c;选择C&#xff0c;Mobile&#xff0c;Scalable&#xff0c;勾选StarterContent 通过Edit->Proje…

MySQL学习笔记(一)

1、什么是数据库&#xff1f;什么是数据库管理系统&#xff1f;什么是SQL&#xff1f;他们之间的关系是什么&#xff1f; 数据库&#xff1a;英文单词DataBase&#xff0c;简称DB。按照一定格式存储数据的一些文件的组合。顾名思义&#xff0c;存储数据的仓库&#xff0c;实际…

MySQL的基本操作与增删改查管理操作

一、MySQL数据库sql语句 1.1 sql 命令 database数据库table表row行column列user用户select从数据表中获取数据updata更新数据库中的数据delete从数据库中删除数据insert into 向数据表插入数据create database创建新数据库alter database修改数据库create table创建新表alter…

MySql实战--一条SQL查询语句是如何执行的?

平时我们使用数据库&#xff0c;看到的通常都是一个整体。比如&#xff0c;你有个最简单的表&#xff0c;表里只有一个ID字段&#xff0c;在执行下面这个查询语句时&#xff1a; select * from T where ID10&#xff1b; 我们看到的只是输入一条语句&#xff0c;返回一个结果…

WorkPlus一站式IM即时通讯解决方案,提升企业沟通效率与协作能力

在企业内部沟通与协作中&#xff0c;高效的即时通讯是实现团队协作与工作效率的重要保障。而WorkPlus以其稳定可靠的性能和全面的功能&#xff0c;为企业提供一站式的IM即时通讯解决方案&#xff0c;助力企业提升沟通效率与协作能力。IM即时通讯在企业中的重要性不言而喻。作为…

分享 | 使用Virtuoso VCPVSR工具基于标准单元的布局布线流程

​ 本节内容 导览 一、准备工作 二、运行VCP前的配置 三、VCP的布局规划 四、VCP的自动摆放 五、VSR的自动绕线 分享使用Virtuoso GXL Custom Digital Placer(VCP) & Space-based Router(VSR)工具进行基于纯数字Standard-Cell布局布线的操作流程。 VCP&VSR演…

【Nebula笔记】简介及安装

目录 一、简介 (一) 什么是图数据库 二、安装 (一) 原生安装 (二) Docker & Docker compose 1. Docker安装 Linux Window 2. 部署NebulaGraph (三) to MAC 三、Nebula Graph Studio (一) 版本兼容性 (二) 原生安装 (三) Docker compose (四) 连接Nebula Gra…