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

CSS学习

news 文章来源：https://blog.csdn.net/qq_40531442/article/details/134961002 2025/1/16 15:54:45

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

Kafka使用总结

1、Kafka是何如做到高性能的？ a、消息批处理减少网络通信开销，提升系统吞吐能力（先攒一波，消息以“批”为单位进行处理） 生产端：无论是同步发送还是异步发送，Kafka都不会立即就把这条消息发送出…...

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

2023 年山东省职业院校技能大赛（高等职业教育） “信息安全管理与评估”样题

2023 年山东省职业院校技能大赛（高等职业教育） “信息安全管理与评估”样题 目录 任务 1 网络平台搭建（50 分） 任务 2 网络安全设备配置与防护（250 分） 模块二 网络安全事件响应、数字取证调查、应用程序安…...

编程日记 2023/12/16 22:17:58

Apache Web 服务器监控工具

将Apache Web 服务器监控纳入 IT 基础架构管理策略有助于先发制人地识别性能瓶颈，这种主动监控方法提供必要的数据，以确保 Web 服务器能够胜任任务，并在需要时进行优化。保证客户获得流畅、无忧的用户体验可以大大有助于巩固他们对组织的信任…...

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

MySQL执行语句 Table ‘mysql.servers‘ doesn‘t exist

执行语句报错： mysql> flush privileges; ERROR 1146 (42S02): Table mysql.servers doesnt exist解决： 进入数据库 删除servers表 mysql> use mysql Database changed mysql> drop table if exists servers; Query OK, 0 rows affected, …...

编程日记 2023/12/16 22:15:56

在datagridview列显示下拉操作

DataGridViewComboBoxExColumn 设定好类型 需要设置的地方是： 绑定数据的操作： 因为此处绑定数据实际为数据 参数 显示的操作，不影响datasource的数据绑定 下一步 数据绑定： DGVCOrderZhuangtai.ValueType typeof(EOrderZhuan…...

编程日记 2023/12/16 22:14:55

基于人工智能 RL 算法的边缘服务器智能选择 模式研究

提出了一种基于人工智能深度强化学习算法的扩展性及智能性较高的智能选择模式。在人工智能深度强化学习 算法的基础上，引入了动作抑制、四重 Q 学习 (QQL) 及归一化 Q-value 等机制，研究并实现了在满足业务延迟要求及公平 性的原则下，物联终端…...

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

JavaScript流程控制语句

代码块： JS中，可以通过代码块来为代码进行分组， 在同一个代码块中的代码就属于一组代码 这组代码要么全都执行，要么都不执行 JS的代码块比较奇葩。 通常情况下，代码块对于外部来说应该是隔离的， 在代…...

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

01.Git分布式版本控制工具

一、Git简介 Git是一个开源的分布式版本控制系统，可以有效、高速地进行从很小到非常大的项目的版本管理。 Git是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。 二、版本控制器方式 1.集中式版本控制工具 版本库放在中央服务器中&…...

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

Hudi介绍

在数据不断写入 Hudi 期间，Hudi 会不断生成 commit、deltacommit、clean 等 Instant 记录每一次操作类型、状态及详细的元数据，这些 Instant 最终都会存到 .hoodie 元数据目录下，为了避免元数据文件数量过多，ActiveTimeline 越来越…...

编程日记 2023/12/16 22:07:48

MYSQl基础操作命令合集与详解

MySQL入门 先来个总结 SQL语言分类 DDL（Data Definition Language） - 数据定义语言: 用于定义和管理数据库结构，包括创建、修改和删除数据库对象。 示例：CREATE, ALTER, DROP等语句。 DML（Data Manipulation Lan…...

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

wordpress怎么修改字体颜色/最新实时新闻

2019独角兽企业重金招聘Python工程师标准>>> jquery和layui实现后台大量数据驱动 index.html<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>首页</title><meta name"renderer" content&quo…...

编程日记 2025/1/16 14:58:17

wordpress本地连接/市场推广是做什么的

磁盘是Linux系统中一项非常重要的资源&#xff0c;如何对其进行有效的管理直接关系到整个系统的性能问题。对Linux磁盘管理稍微有一些学习和经验的朋友们应该都知道df、du和fdisk这三个常用命令&#xff1a;df用于检查文件系统磁盘占用情况&#xff0c;du检查磁盘空间占用情况&…...

编程日记 2025/1/16 14:02:40

美食网站页面设计/完美日记网络营销策划书

本文讲的是iOS 开源图形库 Core Plot 使用教程&#xff0c;注意 &#xff1a;本篇教程已被 Attila Hegeds 更新&#xff0c;可适用于 iOS 9 和 Swift 2.2。原始教程出自教程组成员 Steve Baranski。 如果你曾经想在自己的 app 中引入图表或图形&#xff0c;那么你应该已经考虑过…...

编程日记 2025/1/16 13:32:17

群晖wordpress 外网很慢/网络广告投放渠道有哪些

很多朋友都有购买平板电脑&#xff0c;有的朋友不想使用原版的系统&#xff0c;想要把平板刷成Windows系统&#xff0c;那么应该如何操作呢&#xff1f;平板电脑刷windows的方法是什么呢&#xff1f;小编这就为大家带来如何把平板刷windows图文步骤。如何把平板刷windows图文步…...

编程日记 2025/1/16 13:23:07

深圳网站建设服务器/小红书推广怎么做

Java提供了LinkedList<E>链表类&#xff0c;它是实现了泛型接口List<E>的泛型类&#xff0c;而泛型接口List<E>又是Collection<E>接口的子接口。所以LinkedList泛型类里的方法大多都是泛型接口方法的实现。 我们可以利用接口回调把LinkedList对象赋值给…...

编程日记 2025/1/16 12:30:02

苏州模板建站定制/近三天时政热点

在Vmware workstation 9中装了个Linux mint 15试试效果&#xff0c;居然不支持1600x900的分辨率&#xff0c;现在14寸的高分都是这分辨率了。上网搜了搜&#xff0c;把以下代码放到shell文件里能改变分辨率&#xff0c;设成1600x900.Mint15-Mate Xsession.d # cat /usr/local/b…...

编程日记 2025/1/16 11:12:42