当前位置：首页 > news >正文

复合选择器,CSS特性,背景属性,显示模式(HTML)

news 2026/3/29 0:50:52

复合选择器,CSS特性,背景属性,显示模式知识点:

练习一:

练习二:

复合选择器,CSS特性,背景属性,显示模式知识点:

复合选择器:后代选择器 :父选择器子选择器(中间用空格隔开) eg:对div中的span进行设置,会对后代中的所有span都进行设置选中所有后代(后代选择器.html)
子代选择器: 父选择器>子选择器只有儿子的同类选择器会产生变化(子代选择器.html)
并集选择器: (相同的样式) 用逗号,隔开最后一个没有(并集选择器.html)
交集选择器:标签选择器写在前面中间没有空格(交集选择器.html)
伪类选择器:选中某个状态
鼠标悬停状态:选择器:hover(鼠标悬停状态.html),任何标签都可以设置鼠标悬停
访问前: :link
访问后 :visited
点击时 :active
CSS属性:子级可以继承父级的文字控制属性如果标签有自己的样式,不继承父级的样式
层叠性: 相同的选择器:相同的属性会覆盖:后者覆盖前者,不同的属性会叠加
优先级: 选中标签的范围越大,优先级越低通配符<标签<类选择器<id选择器<<行内样式<!important(提高优先权)
(行内样式<div style="color:purple"></div>) *{color:red !important}
优先级叠加计算原则:(行内样式,id选择器个数,类选择器个数,标签选择器个数)从左向右依次比较个数,同一级个数多的优先级高,如果相同,则向后比较
继承权重最低
Emmet写法:
/*w500+h200+bgc*/


>



背景属性: 背景色:background-color
背景图:background-image
背景平铺方式:background-repeat
背景图位置:background-position
背景图缩放:background-size
背景图固定:background-attachment
背景图复合属性:background
显示模式: 块级元素 div独占一行,宽度默认父级的100%,可以添加宽高
行内元素:span 一行可以共存多个,尺寸由内容撑开,添加宽高不生效
行内块元素:image:一行可以共存多个,尺寸由内容撑开,宽高生效
转换模式: display 块级:block 行内块:inline-block 行内:inline

练习一:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>热词</title><style>a{width: 200px;height: 80px;  background-color: #3064bb;display: block;    color: #fff;text-decoration: none;text-align: center;line-height: 80px;font-size: 18px;}a:hover{background-color: #608dd9;}</style>
</head>
<body><a href="#">HTML</a><a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Vue</a><a href="#">React</a></body>
</html>

练习二:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>banner效果</title><style>.banner{height: 500px;background-image: url(./bk.png);background-repeat: no-repeat;background-color: #f3f3f4;/* background-size: contain; */background-position: lef bottom;/*文字控制属性*/text-align: right;color: #333;}.banner .ht{height: 100px;font-size: 36px;line-height: 100px;}.banner .txt{font-size: 20px;}.banner a{width: 125px;height: 40px;background-color: #f06b1f;display: inline-block;/*转块无法右对齐*/text-decoration: none;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}</style>
</head>
<body><div class="banner"><p class="ht">让创造产生价值</p><p class="txt">我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p><a href="#">我要报名</a><!--行内标签--></div></body>
</html>

复合选择器,CSS特性,背景属性,显示模式(HTML)

复合选择器,CSS特性,背景属性,显示模式知识点:

练习一:

练习二:

相关文章：

复合选择器,CSS特性,背景属性,显示模式(HTML)

加密货币行业与2024年美国大选

Hive SQL中判断内容包含情况的全面指南

匿名管道 Linux

苍穹外卖WebSocket无法建立连接 (修改前端代码)

音频内容理解

MQTT实用示例集：Air201版

Day23 opencv图像预处理

优化模型训练过程中的显存使用率、GPU使用率

RocketMQ学习笔记

Linux第三讲：环境基础开发工具使用

日本TikTok直播的未来：专线网络助力创作者突破极限

如何在家庭网络中设置静态IP地址：一份实用指南

qt QFile详解

ESP8266 自定义固件烧录-Tcpsocket固件

内网项目，maven本地仓库离线打包，解决Cannot access central in offline mode?

stack和queue ---＞容器适配器

ffmpeg视频解码

前端入门一之CSS知识详解

【JS学习】10. web API-BOM

Powershell创建ISO文件全攻略：从基础命令到高级参数详解

BilibiliDown高效获取B站视频完整指南

2021 年 12 月青少年软编等考 C 语言三级真题解析

终极foobox-cn配置指南：如何打造专业级音乐播放体验

VTK.js终极指南：7个步骤掌握Web端3D可视化开发

零代码部署YOLOv9：官方镜像5分钟快速上手，实测效果惊艳

Xinference-v1.17.1优化技巧：如何提升模型加载速度和推理性能，节省硬件资源

AtlasOS系统性能优化指南：从诊断到维护的全方位解决方案

探秘含齿根裂纹的超高自由度斜齿 - 轴承复合故障特性

影响采集速度的因素有哪些？提高采集速度的措施又有哪些？