前端HTML5+CSS3（女神版）——day04——选择器进阶、背景相关属性、元素显示模式、CSS特性
创始人
2025-05-29 17:58:37

前端HTML5+CSS3（女神版）——day04——选择器进阶、背景相关属性、元素显示模式、CSS特性

目录

  • 前端HTML5+CSS3（女神版）——day04——选择器进阶、背景相关属性、元素显示模式、CSS特性
  • 一、选择器进阶
    • 1.1 后代选择器
    • 1.2 子代选择器
    • 1.3 并集选择器
    • 1.4 交集选择器
    • 1.5 hover伪类选择器
    • 1.6 emmet语法
  • 二、背景相关属性
    • 2.1 背景颜色
    • 2.2 背景图片
    • 2.3 背景平铺
    • 2.4 背景位置
    • 2.5 背景相关属性连写
    • 2.6 拓展 img标签和背景图片的区别
  • 三、元素显示模式
    • 3.1 块级元素
    • 3.2 行内元素
    • 3.3 行内块元素
    • 3.4 元素显示模式转换
    • 拓展1：HTML嵌套规范注意点
    • 拓展2：居中方法总结
  • 四、CSS特性

一、选择器进阶

在这里插入图片描述

1.1 后代选择器

在这里插入图片描述


Document
这是一个p标签
这是div的儿子p

在这里插入图片描述

1.2 子代选择器

在这里插入图片描述


Document

1.3 并集选择器

在这里插入图片描述


Document
ppp
div
span
h1
h2

1.4 交集选择器

在这里插入图片描述


Document
这是p标签:box
这是p标签:box
pppppp
这是div标签:box

1.5 hover伪类选择器

在这里插入图片描述
在这里插入图片描述



Document这是超链接
div

1.6 emmet语法

在这里插入图片描述


Document
文字} -->111}*3 -->
  • 111
  • 111
  • 111
$}*3 -->
  • 1
  • 2
  • 3

二、背景相关属性

2.1 背景颜色

在这里插入图片描述

在这里插入图片描述

2.2 背景图片

在这里插入图片描述
在这里插入图片描述

2.3 背景平铺

在这里插入图片描述
在这里插入图片描述

repeat 平铺，默认值
效果
在这里插入图片描述
no-repeat：不平铺，效果
在这里插入图片描述
repeat-x：水平方向平铺
在这里插入图片描述
repeat-y : 竖直方向平铺
在这里插入图片描述

2.4 背景位置

在这里插入图片描述


Document
文字

2.5 背景相关属性连写

在这里插入图片描述


Document

2.6 拓展 img标签和背景图片的区别

在这里插入图片描述

三、元素显示模式

3.1 块级元素

在这里插入图片描述

3.2 行内元素

在这里插入图片描述

3.3 行内块元素

在这里插入图片描述

3.4 元素显示模式转换

在这里插入图片描述块标签 转 行内块 和 行内


Document
111
222

行内标签 转 块标签 和 行内块标签


Documentspanspan

在这里插入图片描述

拓展1：HTML嵌套规范注意点

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

拓展2：居中方法总结

在这里插入图片描述

四、CSS特性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


, initial-scale=1.0" />Document
超链接
一级标题

在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：什么游戏蓝牙耳机好用？性价比高的游戏蓝牙耳机推荐

下一篇：鸵鸟是不是鸟类 ,鸵鸟是不是鸟类 鸵鸟介绍 极速百科网 极速百科

相关内容

热门资讯

win10安装cuda step1.安装cuda+cudnn： 1.检查自己显卡能安装什么版本的cud...
SLAM中后端优化的技术细节总... SLAM中后端优化的技术细节 本文档主要收集总结了一些SLAM大佬们讲解后端优化中偏理论的技术细节...
C语言结构体 本节主要讲解下结构体的一些易错点和重要内容 结构体变量定义 （使用typedef起别...
快手快闪特效如何做的,手机快手... 快手快闪特效如何做的目录快手快闪特效如何做的为什么我的快手里没有快闪这个功能？快手快闪视频制作技巧有...
祖宗十九代票房多少,祖宗19代... 祖宗十九代票房多少目录祖宗十九代票房多少祖宗19代总票房赚了吗为什么祖宗十九代的排片那么少，票房也很...
h5具体是什么,h5是什么意思... h5具体是什么目录h5具体是什么h5是什么意思h5是什么意思？什么是H5？h5具体是什么 H5...
HBase高手之路4-Shel... 文章目录HBase高手之路3—HBase的shell操作一、hbase的shell命令汇总二、需求三...
尽的拼音是什么,尽怎么读拼音尽... 尽的拼音是什么目录尽的拼音是什么尽怎么读拼音尽的读音尽管的尽。读音。尽的拼音怎么拼？尽的拼音是什么 ...
C++ ， STL常用容器 STLSTL初识STL的诞生STL基本概念STL六大组件STL中的容器、算法、迭代器容器算法迭代器初...
开发环境的搭建（MacOS下学... 准备 硬件：单片机最小系统及电源，CH340芯片的usb-ttl线&#x...
西门子smart line 7... 西门子smart line 700 IE V3与温湿度变送器进行MODBUS RTU通信的具体方法示...
请问北京什么地方有卖宠物狗的,... 请问北京什么地方有卖宠物狗的目录请问北京什么地方有卖宠物狗的北京哪里有卖宠物狗的,北京正规卖狗宠物店...
常见的蘑菇的种类都包括哪些,蘑... 常见的蘑菇的种类都包括哪些目录常见的蘑菇的种类都包括哪些蘑菇有哪些种类分别是什么种类的蘑菇？蘑菇的种...
木乃伊什么意思啊,mummy什... 木乃伊什么意思啊目录木乃伊什么意思啊mummy什么意思啊木乃伊在希腊语中是什么意思木乃伊是什么意思 ...
储蓄卡不用了怎么办,储蓄卡怎么... 储蓄卡不用了怎么办目录储蓄卡不用了怎么办储蓄卡怎么注销不想用那张银行卡了，怎么办？普通储蓄卡不用了需...
使用uni.saveFile，... 需求：下载网络图片到系统相册问题：找不到uni.saveFile保存的临...
【华为OD机试 2023最新 ... 文章目录 题目描述输入描述输出描述用例C++ 题目描述 给定两个字符串string1和str...
学习Java开发可以做什么？到... Java工程师干什么？到底值不值得学Java？ 不难发现，...
疯马皮是什么皮,疯马皮是什么材... 疯马皮是什么皮目录疯马皮是什么皮疯马皮是什么材料？防水吗？什么是疯马皮疯马皮是什么皮疯马皮是什么皮 ...
什么是麻辣烫,麻辣烫什么意思 ... 什么是麻辣烫目录什么是麻辣烫麻辣烫什么意思麻辣烫吃多了有什么坏处吗？麻辣烫是什么意思啊什么是麻辣烫 ...
10万左右公认最好的车（10万... 本篇文章极速百科给大家谈谈10万左右公认最好的车，以及10万左右公认最好的车最新款对应的知识点，希望...
华为双系统怎么切换辨别,华为手... 华为双系统怎么切换辨别目录华为双系统怎么切换辨别华为p9双系统怎么切换华为双系统怎么切换设置华为双系...
day11-函数 1. 函数作用 在实现某个功能对应的代码的时候，如果将实现功能对应的函数放到函数中&#...
Cadence ：OrCAD命... 由于AD支持Multiple Names，最近用OrCAD画原理图，犯了...
巴黎圣母院讲的是什么内容啊,巴... 巴黎圣母院讲的是什么内容啊目录巴黎圣母院讲的是什么内容啊巴黎圣母院的内容简介有哪些？莎士比亚的《巴黎...
如何在我的世界里做床,手机我的... 如何在我的世界里做床目录如何在我的世界里做床我的世界生存模式怎么做床我的世界床怎么做如何在我的世界里...
苹果6s的电池容量是多少毫安,... 苹果6s的电池容量是多少毫安目录苹果6s的电池容量是多少毫安苹果6s电池容量iPhone 6S和iP...
vulnhub之XXE靶机详解 vulnhub之XXE靶机详解前言一、靶机安装二、信息收集阶段1. 环境2. 探测局域网主机3. 信...
5克等于多少毫升,一点五克是多... 5克等于多少毫升目录5克等于多少毫升一点五克是多少毫升做果冻碰到的问题：5克等于多少毫升，用2.5毫...
【Selenium自动化测试】... 在Web自动化测试过程中，有时会遇到类似下面的情景。 这就是下拉框，...