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

CSS学习

news 2025/7/3 22:52:44

CSS学习

  • 1. 什么是css?
  • 2.css引入方式
    • 2.1 内嵌式
    • 2.2 外联式
    • 2.3 行内式
    • 2.4 引入方式特点
  • 3. 基础选择器
    • 3.1 标签选择器
    • 3.2 类选择器
    • 3.3 id选择器
    • 3.4 通配符选择器
  • 4. 文字基本样式
    • 4.1 字体样式
      • 4.1.1 字体大小
      • 4.1.2 字体粗细
      • 4.1.3 倾斜
      • 4.1.4 字体
      • 4.1.5 字体font相关属性连写
    • 4.2 文本样式
      • 4.2.1 文本缩进
      • 4.2.2 内容水平对齐方式
      • 4.2.3 文本修饰
      • 4.2.4 行高
      • 4.2.5 颜色
      • 4.2.6 拓展(标签水平居中的写法)
  • 5. 选择器进阶
    • 5.1 复合选择器
      • 5.1.1 后代选择器
      • 5.1.2 子代选择器
      • 5.1.3 并集选择器
      • 5.1.4 交集选择器
      • 5.1.5 hover伪类选择器
      • 5.1.6 Emmet语法(扩展)
  • 6. 背景相关属性
    • 6.1 背景颜色
    • 6.2 背景图片
    • 6.2 背景图平铺
    • 6.3 背景图位置
    • 6.4 背景相关属性连写
    • 6.5 (拓展) img标签和背景图片的区别
  • 7. 元素的显示模式(显示方式)
    • 7.1 块级元素
    • 7.2 行内元素
    • 7.3 行内块元素
    • 7.4 元素显示模式转换
    • 7.5 HTML嵌套规范注意点
  • 8. CSS特性
    • 8.1 继承性
      • 8.1.2 继承失效的特殊情况
    • 8.2 层叠性
    • 8.3 优先级
      • 8.3.1 权重叠加计算
        • 8.3.1.1 题目1
        • 8.3.1.2 题目2
        • 8.3.1.3 题目3
        • 8.3.1.4 题目4
        • 8.3.1.5 题目5
  • 9. 盒子模型
    • 9.1 内容区域的宽度和高度
    • 9.2 边框(border)
      • 9.2.1 边框(border) - 单方向设置
      • 9.2.2 边框(border) - 单个属性
    • 9.3 内边距(padding)
    • 9.4 CCS3盒模型(自动内减)
    • 9.5 外边距 (margin)
    • 9.6 清除默认内外边距
    • 9.7 版心居中
    • 9.8 外边距折叠现象 - ① 合并现象
    • 9.9 外边距折叠现象 - ② 塌陷现象（坑爹现象）
    • 9.10 行内元素的内外边距问题
  • 97. Pxcook(像素大厨)
  • 98. 谷歌调试工具
    • 98.1 基础
    • 98.2 差错流程(遇到样式查不出来, 要学会通过调试工具找错)
  • 99. 问题
    • (1) 样式层叠问题

1. 什么是css?

css: 层叠样式表 (Cascading style sheets)

2.css引入方式

在这里插入图片描述

2.1 内嵌式

在这里插入图片描述

2.2 外联式

在这里插入图片描述
在这里插入图片描述
提示: 需要在html文件中link目标样式表;

2.3 行内式

在这里插入图片描述
注意: 单独生效一个标签;

2.4 引入方式特点

在这里插入图片描述

3. 基础选择器

3.1 标签选择器

在这里插入图片描述

3.2 类选择器

在这里插入图片描述

3.3 id选择器

在这里插入图片描述

3.4 通配符选择器

在这里插入图片描述

4. 文字基本样式

4.1 字体样式

4.1.1 字体大小

在这里插入图片描述

4.1.2 字体粗细

在这里插入图片描述

4.1.3 倾斜

在这里插入图片描述

4.1.4 字体

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

4.1.5 字体font相关属性连写

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

4.2 文本样式

4.2.1 文本缩进

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

4.2.2 内容水平对齐方式

在这里插入图片描述
在这里插入图片描述
注意: 如果图在body里面, 则给body加对齐, 图才会按需要对齐;

4.2.3 文本修饰

在这里插入图片描述

4.2.4 行高

在这里插入图片描述
注意: 上图的 size/line-height 不是二选一的意思;
line-height: 1 表示字像素的1倍;

4.2.5 颜色

在这里插入图片描述

4.2.6 拓展(标签水平居中的写法)

在这里插入图片描述

5. 选择器进阶

5.1 复合选择器

5.1.1 后代选择器

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

5.1.2 子代选择器

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

5.1.3 并集选择器

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

5.1.4 交集选择器

在这里插入图片描述
在这里插入图片描述
注意: p和.box之间没有其他字符

5.1.5 hover伪类选择器

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

5.1.6 Emmet语法(扩展)

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

6. 背景相关属性

6.1 背景颜色

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

6.2 背景图片

在这里插入图片描述
提示: 背景图显示在背景色上面;

6.2 背景图平铺

在这里插入图片描述

6.3 背景图位置

在这里插入图片描述

6.4 背景相关属性连写

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

6.5 (拓展) img标签和背景图片的区别

提示: 重要的用img, 不重要的用背景图;

7. 元素的显示模式(显示方式)

7.1 块级元素

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

7.2 行内元素

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

7.3 行内块元素

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

7.4 元素显示模式转换

在这里插入图片描述
注意: 默认在一行;
在这里插入图片描述

7.5 HTML嵌套规范注意点

在这里插入图片描述
注意：
(1) p、h不能相互嵌套;
(2) p、div不能相互嵌套;

8. CSS特性

8.1 继承性

在这里插入图片描述
提示:
(1) 文字控制属性的都能继承;
(2) 非文字控制属性的都不能继承;

8.1.2 继承失效的特殊情况

在这里插入图片描述

8.2 层叠性

在这里插入图片描述

8.3 优先级

在这里插入图片描述

8.3.1 权重叠加计算

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

8.3.1.1 题目1

在这里插入图片描述
在这里插入图片描述
答案: 蓝色; (blue)

8.3.1.2 题目2

在这里插入图片描述
答案: 天蓝色; (skyblue)

8.3.1.3 题目3

在这里插入图片描述
答案: pink;

8.3.1.4 题目4

在这里插入图片描述
答案: yellow;

8.3.1.5 题目5

在这里插入图片描述
答案: red;

9. 盒子模型

在这里插入图片描述

9.1 内容区域的宽度和高度

在这里插入图片描述

9.2 边框(border)

border默认会撑大盒子;
在这里插入图片描述
提示: border是复合属性

9.2.1 边框(border) - 单方向设置

在这里插入图片描述

9.2.2 边框(border) - 单个属性

在这里插入图片描述

写盒子及其内容顺序提示:
从外到内: 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节;

9.3 内边距(padding)

padding和border一样默认会撑大盒子;
在这里插入图片描述
提示: 多值写法, 永远都是从上开始顺时针转一圈, 如果数不够, 看对面;

9.4 CCS3盒模型(自动内减)

padding和border 如何不会撑大盒子？
在这里插入图片描述在这里插入图片描述

9.5 外边距 (margin)

在这里插入图片描述

9.6 清除默认内外边距

在这里插入图片描述

9.7 版心居中

在这里插入图片描述

9.8 外边距折叠现象 - ① 合并现象

在这里插入图片描述

9.9 外边距折叠现象 - ② 塌陷现象（坑爹现象）

在这里插入图片描述

9.10 行内元素的内外边距问题

在这里插入图片描述
行内元素想改变上下间距加行高;

97. Pxcook(像素大厨)

这是一个像素软件。

98. 谷歌调试工具

98.1 基础

(1) 黄色感叹号;
说明语法有问题;
(2) 带删除线;
说明没有生效; 是层叠或者自己注释的代码;

98.2 差错流程(遇到样式查不出来, 要学会通过调试工具找错)

在这里插入图片描述

99. 问题

(1) 样式层叠问题

在这里插入图片描述

相关文章：

CSS学习

CSS学习 1. 什么是css?2.css引入方式2.1 内嵌式2.2 外联式2.3 行内式2.4 引入方式特点 3. 基础选择器3.1 标签选择器3.2 类选择器3.3 id选择器3.4 通配符选择器 4. 文字基本样式4.1 字体样式4.1.1 字体大小4.1.2 字体粗细4.1.3 倾斜4.1.4 字体4.1.5 字体font相关属性连写 4.2 …...

编程日记 2023/12/16 23:16:51

Flask基本用法：一个HelloWorld，搭建服务、发起请求

目录 1、简介 2、安装 3、Flask使用示例 参考 1、简介 官网文档 Flask是一个轻量的web服务框架，我们可以利用它快速搭建一个服务，对外提供接口，其他人可以轻松调用我们的服务。这对算法工程师来说比较关键，我们通常不擅长搞开发…...

编程日记 2023/12/16 23:14:49

Tomcat-安装部署（源码包安装）

一、简介 Tomcat 是由 Apache 开发的一个 Servlet 容器，实现了对 Servlet 和 JSP 的支持，并提供了作为Web服务器的一些特有功能，如Tomcat管理和控制平台、安全域管理和Tomcat阀等。 简单来说，Tomcat是一个WEB应用程序的托管平台…...

编程日记 2023/12/16 23:11:47

【Hadoop_06】MapReduce的概述与wc案例

1、MapReduce概述1.1 MapReduce定义1.2 MapReduce优点1.3 MapReduce缺点1.4 MapReduce核心思想1.5 MapReduce进程1.6 常用数据序列化类型1.7 源码与MapReduce编程规范 2、WordCount案例实操2.1 本地测试2.2 提交到集群测试 1、MapReduce概述 1.1 MapReduce定义 MapReduce是一…...

编程日记 2023/12/16 23:10:46

Qt点击子窗口时父窗口标题栏高亮设计思路

父窗口调用findChildren得到其子孙窗口的列表，列表元素统一为QWidget*，遍历列表元素，每个元素调用installEventFilter，过滤QEvent::FocusIn和QEvent::FocusOut事件，做相应处理即可： QWidget* parent; QLis…...

编程日记 2023/12/16 23:09:45

掌握iText：轻松处理PDF文档-高级篇-添加水印

前言 iText作为一个功能强大、灵活且广泛应用的PDF处理工具，在实际项目中发挥着重要作用。通过这些文章，读者可以深入了解如何利用iText进行PDF的创建、编辑、加密和提取文本等操作，为日常开发工作提供了宝贵的参考和指导。 掌握iText&…...

编程日记 2023/12/16 23:06:43

深度学习基本概念

1.全连接层 全连接层就是该层的所有节点与输入节点全部相连，如图所 示。假设输入节点为X1， X 2， X 3，输出节点为 Y 1， Y 2， Y 3， Y 4。令 矩阵 W 代表全连接层的权重， W 12也就代表 …...

编程日记 2023/12/16 23:05:42

2023年最详细的:本地Linux服务器安装宝塔面板，并内网穿透实现公网远程登录

📚📚 🏅我是默，一个在CSDN分享笔记的博主。📚📚 ​​ 🌟在这里，我要推荐给大家我的专栏《Linux》。🎯🎯 🚀无论你是编程小白，还是有一…...

编程日记 2023/12/16 22:57:35

基于ssm金旗帜文化培训学校网站的设计与开发论文

摘 要 互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对培训学校展示信息管理混乱，出错率高，信息安全…...

编程日记 2023/12/16 22:54:33

【Java】猜数字小游戏

规则 游戏开始随机生成4位数字符串，每个数字从0到9各不相同，比如0123玩家10次猜数机会，输入4位数字符串，每个数字从0到9各不相同游戏判断玩家输入与所猜谜底数，给出结果nAnB，A表示位置和数字都猜对的个数&…...

编程日记 2023/12/16 22:53:30

汽车EDI：Chrysler EDI项目案例

菲亚特克莱斯勒汽车Fiat Chrysler Automobiles(FCA)是一家全球性汽车制造商，主营产品包括轿车、SUV、皮卡车、商用车和豪华车等多种车型。其旗下品牌包括菲亚特、克莱斯勒、道奇、Jeep、Ram、阿尔法罗密欧和玛莎拉蒂等。 Chrysler通过EDI来优化订单处理、交付通知、…...

编程日记 2023/12/16 22:51:29

Locust：可能是一款最被低估的压测工具

01、Locust介绍 开源性能测试工具https://www.locust.io/，基于Python的性能压测工具，使用Python代码来定义用户行为，模拟百万计的并发用户访问。每个测试用户的行为由您定义，并且通过Web UI实时监控聚集过程。 压力发生器作为性能…...

编程日记 2023/12/16 22:47:25

用23种设计模式打造一个cocos creator的游戏框架----(十八)责任链模式

1、模式标准 模式名称：责任链模式 模式分类：行为型 模式意图：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系。将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处…...

编程日记 2023/12/16 22:45:23

100天精通风控建模(原理+Python实现)——第9天：风控建模中为什么需要特征工程？

风控模型已在各大银行和公司都实际运用于业务，用于营销和风险控制等。本文以视频的形式阐述风控建模中为什么需要特征工程。并提供风控建模原理和Python实现文章清单。    之前已经阐述了100天精通风控建模(原理+Python实现)——第1天：什么是风控建模？    100天精通风控…...

编程日记 2023/12/16 22:42:20

【PHP】计算某个特定时间戳距离现在的天数

在PHP中，你可以使用time()函数获取当前时间的时间戳，然后将它与你想要计算的过去或未来的时间戳进行比较。为了得到相差的天数，你需要先用两个时间戳相减得到秒数差，然后再除以一天的总秒数（通常是86400秒）…...

编程日记 2023/12/16 22:41:19

lv12 uboot移植深化 9

u-boot-2013.01移植 【实验目的】 了解u-boot 的代码结构及移植的基本方法 【实验环境】 ubuntu 14.04发行版FS4412实验平台交叉编译工具arm-none-linux-gnueabi- 【注意事项】 实验步骤中以“$”开头的命令表示在 ubuntu 环境下执行 【实验步骤】 1 建立自己的平台 1.…...

编程日记 2023/12/16 22:34:12

大数据与深度挖掘：如何在数字营销中与研究互动

数字营销最吸引人的部分之一是对数据的内在关注。 如果一种策略往往有积极的数据，那么它就更容易采用。同样，如果一种策略尚未得到证实，则很难获得支持进行测试。 数字营销人员建立数据信心的主要方式是通过研究。这些研究通常分为两类&…...

编程日记 2023/12/16 22:32:11

xtu oj 1327 字符矩阵

按照示例的规律输出字符矩阵。 比如输入字母D时，输出字符矩阵如下 ABCDCBA BBCDCBB CCCDCCC DDDDDDD CCCDCCC BBCDCBB ABCDCBA字符矩阵行首、尾都无空格。 输入 每行一个大写英文字母，如果字符为#，表示输入结束，不需要处理。 …...

编程日记 2023/12/16 22:31:10

讨论用于评估DREX的五种DR指标

概要 动态范围是已经使用了近一个世纪的用于评估接收机性能的参数。这里介绍五种动态有关指标的定义及测试方法，用于评估数字接收激励器（DREX，digital receiver exciters）。DREX是构成雷达的关键整部件，其瞬时带宽&am…...

编程日记 2023/12/16 22:30:09

基于SpringBoot的在线疫苗预防小程序

文章目录 项目介绍主要功能截图：部分代码展示设计总结项目获取方式🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的在线疫苗预防小程序,ja…...

编程日记 2023/12/16 22:23:04

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/6/29 2:44:15

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/6/20 17:53:24

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/6/29 11:38:01

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/6/21 6:23:38

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/6/21 8:09:03

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/6/21 3:33:03

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/7/1 4:51:19

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/6/26 1:18:42

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

编程新知 2025/6/17 15:40:23

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

编程新知 2025/6/26 11:17:59