B站pink老师CSS学习(二)

文章目录

  • 一、emmet语法
    • 1.快速生成HTML结构语法
  • 二、复合选择器
    • 1.什么是复合选择器
    • 2.后代选择器
    • 3.子选择器
    • 4.并集选择器
    • 5.伪类选择器
    • 6.链接伪类选择器
    • 7:focus伪类选择器
    • 8.总结
  • 三、元素的显示模式
    • 1.什么是元素显示模式
    • 2.块元素
    • 3.行内元素
    • 4.行内块元素
    • 5.总结
    • 6.元素显示模式转换
    • 7.单行文字垂直居中
  • 三、CSS的背景
    • 1.背景颜色
    • 2.背景图片
    • 3.背景平铺
    • 4.背景图片位置
    • 5.背景图像固定
    • 6.背景复合写法
    • 7.背景色半透明
    • 8.总结
  • 四、CSS三大特性
    • 1.层叠性
    • 2.继承性
    • 3.优先级
    • 4.权重的叠加

一、emmet语法

1.快速生成HTML结构语法

在这里插入图片描述

二、复合选择器

1.什么是复合选择器

在这里插入图片描述

2.后代选择器

在这里插入图片描述

3.子选择器

在这里插入图片描述

4.并集选择器

在这里插入图片描述

5.伪类选择器

在这里插入图片描述

6.链接伪类选择器

在这里插入图片描述

    <style>/* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */a:link {color: #333;text-decoration: none;}/*2. a:visited 选择点击过的(访问过的)链接 */a:visited {color: orange;}/*3. a:hover 选择鼠标经过的那个链接 */a:hover {color: skyblue;}/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */a:active {color: green;}</style>
</head><body><a href="#">小猪佩奇</a><a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

7:focus伪类选择器

在这里插入图片描述

8.总结

三、元素的显示模式

1.什么是元素显示模式

在这里插入图片描述

2.块元素

在这里插入图片描述

3.行内元素

在这里插入图片描述

4.行内块元素

在这里插入图片描述

5.总结

在这里插入图片描述

6.元素显示模式转换

在这里插入图片描述

  • 截图小工具 snipaste
    在这里插入图片描述

7.单行文字垂直居中

在这里插入图片描述

三、CSS的背景

1.背景颜色

在这里插入图片描述

2.背景图片

在这里插入图片描述

3.背景平铺

在这里插入图片描述

4.背景图片位置

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

5.背景图像固定

在这里插入图片描述

6.背景复合写法

在这里插入图片描述

7.背景色半透明

在这里插入图片描述

8.总结

在这里插入图片描述

四、CSS三大特性

1.层叠性

在这里插入图片描述

2.继承性

在这里插入图片描述

  • 行高的继承
    在这里插入图片描述

3.优先级

在这里插入图片描述
注意点
在这里插入图片描述

4.权重的叠加

在这里插入图片描述

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

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

相关文章

08.1.jenkins安装方法

安装 配置官方下载源 #配置jenkins源 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key下载jak、jenkins服务 #下载jdk11环境&#xff0c;并且配置yu…

C++ | Leetcode C++题解之第110题平衡二叉树

题目&#xff1a; 题解&#xff1a; class Solution { public:int height(TreeNode* root) {if (root NULL) {return 0;}int leftHeight height(root->left);int rightHeight height(root->right);if (leftHeight -1 || rightHeight -1 || abs(leftHeight - rightH…

10.3.k8s的附加组件-图形化管理工具dashboard

目录 一、dashboard介绍 二、部署安装dashboard组件 1.下载dashboard本地文件 2.修改nodeport的端口范围 3.创建和查看dashboard 4.电脑浏览器访问测试 5.token登录方式登录dashboard 5.1.查看dashboard的token 5.2.继续查看用户token的secrets资源详细信息 5.3.复制…

【Linux】icmp_seq=1 Destination Host Unreachable

执行ping 命令提示&#xff1a;From 192.168.XX.XX icmp_seq1 Destination Host Unreachable 这个错误消息通常表示以下几种情况之一&#xff1a; 网络连接问题&#xff1a;目标主机可能没有连接到网络&#xff0c;或者网络中的某个路由器无法将数据包转发到目标主机。 目标主…

软考--软件设计师-刷题总结

一、数据结构 贪心算法 归并排序将问题先分解、再处理、再合并的方式采用了分治法的思想 分治法&#xff1a;将一个大问题分成若干个小问题 希尔排序&#xff1a; 定义一个 i 变量指向这一组的第二个数据&#xff0c;定义一个 j 变量指向 i - gap 的位置。 将 i 下标的值放到…

那些网络安全上的事实,很多人不见得知道!

明月发现不少小白对网络安全的认知几乎为零&#xff0c;甚至明月还碰到一个说 VPN 能彻底隐匿自己的&#xff0c;至于现在这帮动不动就利用 DDos/CC 攻击被人网站来推销境外高防服务器、高防 CDN 的老鼠屎们更是网络安全知识白痴的水平&#xff0c;破坏和攻击的水平完全取决于能…

mac版本Phpstudy本地环境安装Discuz教程【2024】

此方法适用于m1版本的mac版本Phpstudy本地环境安装Discuz&#xff0c;当然同样使用更高版本的mac端。网上各种安装教程参差不齐&#xff0c;根本解决不了小白的入门需求&#xff0c;以下是最新且直接明了的安装教程。 Phpstudy本地环境安装Discuz教程&#xff1a; 1、安装Phps…

c++ vector实现出现的一些问题

目录 前言&#xff1a; 浅拷贝问题: typename指定类型&#xff1a; 前言&#xff1a; 最近学习了c vector的使用&#xff0c;然后也自己实现了一下vector的部分重要的功能。然后在其中出现了一些问题&#xff0c;在这就主要记录一下我解决哪些bug。 浅拷贝问题: 在实现res…

2024年顶级算法-黑翅鸢优化算法(BKA)-详细原理(附matlab代码)

黑翅鸢是一种上半身蓝灰色&#xff0c;下半身白色的小型鸟类。它们的显著特征包括迁徙和捕食行为。它们以小型哺乳动物、爬行动物、鸟类和昆虫为食&#xff0c;具有很强的悬停能力&#xff0c;能够取得非凡的狩猎成功。受其狩猎技能和迁徙习惯的启发&#xff0c;该算法作者建立…

PS —— 精修图像

PS —— 精修图像 修复污点修复画笔工具修复画笔工具 美白滤镜去杂锐化加杂减淡和锐化工具 我觉得今天这篇博客&#xff0c;无论是男同胞还是女同胞&#xff0c;都要熟练掌握&#xff08;哈哈哈哈…) 今天我们来学习如何精修图像&#xff0c;精修图像一般分为几步——修复&…

面试准备【面试准备】

面试准备【面试准备】 前言面试准备自我介绍&#xff1a;项目介绍&#xff1a; 论坛项目功能总结数据库表设计注册功能登录功能显示登录信息功能发布帖子评论私信点赞功能关注功能通知搜索网站数据统计热帖排行缓存 论坛项目技术总结Http的无状态cookie和session的区别为什么要…

shell文本三剑客——awk命令【☆】

目录 一、akw原理 二、命令格式 三、常用变量 四、awk的用法 1.输出整行内容 2.按字段输出文本内容 3.按列输出文件内容 FS变量为列分隔符 4.awk的三个模式 5. awk ‘控制语句条件 {操作}’ 文件 6.awk的数组 7.awk的应用 一、akw原理 逐行读取文本&#xff0c;默认…

AI爆文写作:标题需要什么?情绪炸裂,态度要激烈,行为要夸张!

现在这个传播环境下&#xff0c;在公域中&#xff0c;轻声细语&#xff0c;慢慢的说&#xff0c;无法吸引到注意&#xff0c;没有人搭理。 标题要需要情绪张扬&#xff0c;态度激烈&#xff0c;行为夸张&#xff0c;大声喧闹。 唐韧的用户群是互联网产品经理&#xff0c;阅读量…

基于GA遗传优化的CNN-GRU的时间序列回归预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 CNN-GRU模型架构 4.2 GA优化CNN-GRU流程 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ...........................................…

45岁前TVB有型熟男生图流出

凭无线处境剧《爱回家》中饰演律师「严谨」一角成功入屋的张达伦&#xff0c;于2022年约满无线离巢后&#xff0c;正式「卖身」给杜琪峰成为旗下艺人&#xff0c;先后亮相ViuTV剧集及综艺节目&#xff0c;又参与电影演出&#xff0c;作多方面尝试和发展。 日前有网民食完糖水在…

spring boot集成Knife4j

文章目录 一、Knife4j是什么&#xff1f;二、使用步骤1.引入依赖2.新增相关的配置类3.添加配置信息4.新建测试类5. 启动项目 三、其他版本集成时常见异常1. Failed to start bean ‘documentationPluginsBootstrapper2.访问地址后报404 一、Knife4j是什么&#xff1f; 前言&…

大语言模型实战——最小化agent

1. agent是什么 大模型拥有语言理解和推理能力后&#xff0c;就相当于拥有了大脑&#xff0c;要让模型发挥更大的潜力&#xff0c;就需要给它安装上手臂&#xff0c;让它拥有行动的能力。 而Agent就是一个将语言模型和外部工具结合起来的智能体&#xff0c;它使用语言模型的推…

“从根到叶:使用决策树导航数据”

目录 一、说明 二、什么是决策树&#xff1f; 三、基本概念&#xff1a; 四、工作原理&#xff1a; 五、分类原理分析 5.1 信息熵&#xff1a; 5.2 信息增益&#xff1a; 5.3 基尼杂质&#xff1a; 5.4 基尼系数和熵的区别&#xff1a; 六、对于回归决策树&#xff1a; 6.1 均方…

解决el-image只能点击关闭按钮才能关闭的问题

问题&#xff1a;el-image打开大图预览时&#xff0c;只能点击关闭按钮才能关闭&#xff0c;点击蒙层不能关闭的 methods: {handleClickStop() {this.$nextTick(() > {const domImageView document.querySelector(".el-image-viewer__mask") // 获取遮罩层domif …

DOM【事件、操作节点、DOM案例】--学习JavaEE的day49

day49 JS核心技术 DOM 继day48 事件 键盘事件 监听器&#xff1a;onkeydown、onkeypress、onkeyup <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head><body><input type"text&q…