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

CSS概念及入门

news 2025/7/6 22:36:22

文章目录

  • 1. CSS 概念及入门
    • 1.1. 简介
    • 1.2. 组成
      • 1.2.1. 选择器
      • 1.2.2. 属性
    • 1.3. 区别
  • 2. CSS 引入方式
    • 2.1. 行内样式
      • 2.1.1. 语法
      • 2.1.2. 特点
    • 2.2. 内部样式
      • 2.2.1. 语法
      • 2.2.2. 特点
    • 2.3. 外部样式
      • 2.3.1. 特点
    • 2.4. 三种引入优先级

1. CSS 概念及入门

1.1. 简介

CSS 的全称为：层叠样式表 ( Cascading Style Sheets ) 。
CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。

主流的布局方式:div+css。

1.2. 组成

1.2.1. 选择器

用于选择页面中的元素,进行样式的控制。

1.2.2. 属性

用于设置样式,布局控制。

1.3. 区别

css 和 html 属性控制样式的区别：

  1. css 控制样式更加的专业，可以实现 html 属性实现不了的效果。
  2. 可以实现标签和样式的分离，提高样式的重用性，提高开发效率。

2. CSS 引入方式

2.1. 行内样式

2.1.1. 语法

写在 HTML 标签的style属性里的，规范是“名:值”，语法如下：

image-20240201102415427

2.1.2. 特点

  • 简单，耦合性强，但是不利于代码和样式的分离，没有复用性。
  • 样式可以写在标签内部，但不推荐，因为优先级太高。

2.2. 内部样式

写在html里面的任意位置，一般写在<head>里面。

2.2.1. 语法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS初体验</title><style>h1 {/* 样式可以直接写在html中，这样可以控制整个页面的样式 *//* 设置宽度 */width: 50px;/* 设置高度 */height: 50px;/* 文字对齐 */text-align: center;}</style></head><body><h1 style="color: #ffffff">Hello World</h1></body>
</html>

2.2.2. 特点

  • 实现了 html 代码和样式的分离，只能在当前页面进行复用。
  • 这种写法代码结构清晰，样式可以为多个标签复用，但是并没有实现样式与结构完全分离。

2.3. 外部样式

写在**.css**文件里的样式，然后在 HTML 文件里引用，语法如下：

  • 在该文件目录创建一个**.css**后缀的文件

  • 在 html 文件进行引用

    • href文档路径：引入的文档来自哪里
    • rel关系：引入文档和当前文档的关系

    image-20240201103614031

2.3.1. 特点

在实际开发中，我们用得最多的就是这种书写位置，引入外部样式，可以更好地将结构与样式分离。

2.4. 三种引入优先级

优先级规则：行内样式 > 内部样式 = 外部样式

内部样式和外部样式优先级一样，如果同时使用，后面的会覆盖前面的（简记：“后来者居上”）。

相关文章：

CSS概念及入门

文章目录 1. CSS 概念及入门1.1. 简介1.2. 组成1.2.1. 选择器1.2.2. 属性 1.3. 区别 2. CSS 引入方式2.1. 行内样式2.1.1. 语法2.1.2. 特点 2.2. 内部样式2.2.1. 语法2.2.2. 特点 2.3. 外部样式2.3.1. 特点 2.4. 三种引入优先级 1. CSS 概念及入门 1.1. 简介 CSS 的全称为&am…...

编程日记 2024/3/18 18:07:44

用 C 语言模拟 Rust 的 Result 类型

在 Rust 中&#xff0c;Result<T, E> 类型是一个枚举&#xff0c;它表示一个操作可能成功并返回一个值 T&#xff0c;或者失败并返回一个错误 E。在 C 语言中&#xff0c;没有直接对应的 Result 类型&#xff0c;但我们可以使用结构体和枚举来模拟它。 下面是一个用 C 语…...

编程日记 2024/3/18 18:05:41

git基础命令（四）之分支命令

目录 基础概念git branch-r-a-v-vv-avv重命名分支删除分支git branch -h git checkout创建新的分支追踪远程分支同时切换到该分支创建新的分支并切换到该分支撤销对文件的修改&#xff0c;恢复到最近的提交状态&#xff1a;丢弃本地所有修改git checkout -h git merge合并指定分…...

编程日记 2024/3/18 18:03:39

redis瘦身版

线程模型 纯内存操作/非阻塞io多路复用/单线程避免多线程频繁上下文切换 基于Reactor模式开发了网络事件处理器&#xff1a;文件事件处理器&#xff0c;单线程的 io多路监听多个socket&#xff0c;据socket事件类型选择对应的处理器&#xff0c;高性能网络通信模型&#xff0c…...

编程日记 2024/3/18 18:02:37

使用ChatGPT高效完成简历制作[中篇]-有爱AI实战教程(五）

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 导读&#xff1a;在使用 ChatGPT 时&#xff0c;当你给的指令越精确&#xff0c;它的回答会越到位&#xff0c;举例来说&#xff0c;假如你要请它帮忙写文案&#xff0c;如果没…...

编程日记 2024/3/18 18:00:36

论文阅读——SpectralGPT

SpectralGPT: Spectral Foundation Model SpectralGPT的通用RS基础模型&#xff0c;该模型专门用于使用新型3D生成预训练Transformer&#xff08;GPT&#xff09;处理光谱RS图像。 重建损失由两个部分组成&#xff1a;令牌到令牌和频谱到频谱 下游任务&#xff1a;...

编程日记 2024/3/18 17:56:31

Redis的过期键是如何处理的？过期键的删除策略有哪些？请解释Redis的内存淘汰策略是什么？有哪些可选的淘汰策略？

Redis的过期键是如何处理的&#xff1f;过期键的删除策略有哪些&#xff1f; Redis的过期键处理是一个重要的内存管理机制&#xff0c;它确保在键过期后能够释放相应的内存空间。Redis对过期键的处理主要依赖于其删除策略&#xff0c;这些策略包括被动删除&#xff08;惰性删除…...

编程日记 2024/3/18 17:54:29

软件测试方法 -- 等价类边界值

测试用例的定义 测试用例是为了特定的目的而设计的一组测试输入、执行条件和预期的结果&#xff0c;以便测试是否满足某个特定需求。通过大量的测试用例来检验软件的运行效果&#xff0c;他是指导测试工作进行的依据。 下面我们介绍几种常用的黑盒测试方法 等价类划分法 定…...

编程日记 2024/3/18 17:52:27

LeetCode——贪心算法（Java）

贪心算法 简介[简单] 455. 分发饼干[中等] 376. 摆动序列[中等] 53. 最大子数组和[中等] 122. 买卖股票的最佳时机 II[中等] 55. 跳跃游戏 简介 记录一下自己刷题的历程以及代码。写题过程中参考了 代码随想录的刷题路线。会附上一些个人的思路&#xff0c;如果有错误&#xf…...

编程日记 2024/3/18 17:51:26

【MySQL】2. 数据库基础

1. 数据库基础&#xff08;重点&#xff09; 1.1 什么是数据库 存储数据用文件就可以了&#xff0c;为什么还要弄个数据库? 文件保存数据有以下几个缺点&#xff1a; 文件的安全性问题 文件不利于数据查询和管理 文件不利于存储海量数据 文件在程序中控制不方便 数据库存储介…...

编程日记 2024/3/18 17:50:25

《如何使用C语言去下三子棋？》

目录 一、环境配置 二、功能模块 1.打印菜单 2.初始化并打印棋盘 3、行棋 3.1玩家行棋 3.2电脑行棋 4、判断是否和棋 5.判赢 三、代码实现 1、test.c文件 2、game.c文件 3、game.h文件 一、环境配置 本游戏用到三个文件&#xff0c;分别是两个源文件test.c game.c 和…...

编程日记 2024/3/18 17:46:20

Linux——线程（4）

在上一篇博客中&#xff0c;我讲述了在多执行流并发访问共享资源的情况下&#xff0c;如何 使用互斥的方式来保证线程的安全性&#xff0c;并且介绍了Linux中的互斥使用的是 互斥锁来实现互斥功能&#xff0c;以及它的原理&#xff0c;在文章的结尾我提出了一个问题 用来引出同…...

编程日记 2024/3/18 17:45:18

vite+vue3项目中svg图标组件封装

一、安装插件 npm i vite-plugin-svg-icons -D 二、插件配置 // vite.config.jsimport { createSvgIconsPlugin } from "vite-plugin-svg-icons"; import path from "path";export default defineConfig({plugins: [// svg图标配置项createSvgIconsPlug…...

编程日记 2024/3/18 17:44:17

根据服务器系统选择对应的MySQL版本

1. 根据服务器系统选择对应的MySQL版本 MySQL有多个版本&#xff0c;选择对应的版本&#xff0c;重点信息是Linux的GLIBC版本号&#xff0c;Linux的版本、系统位数。 1.1 查看Linux的GLIBC版本号 通常libc.so会支持多个版本&#xff0c;即向前兼容&#xff0c;查看该文件中…...

编程日记 2024/3/18 17:42:15

【数据结构】栈与队列的“双向奔赴”

目录 前言 1.使用“栈”检查符号是否成对出现 2.使用“栈”实现字符串反转 3.使用“队列”实现“栈” 4.使用“栈”实现“队列” 前言 什么是栈&#xff1f; 栈&#xff08;stack&#xff09;是一种特殊的线性数据集合&#xff0c;只允许在栈顶按照后进先出LIFO&#xff…...

编程日记 2024/3/18 17:41:14

sqllab第二十七关通关笔记

知识点&#xff1a; union select 关键字过滤 通过<> /**/进行截断处理 un<>ion sel<>ect 没效果uni/**/on sel/**/ect 被过滤了双写绕过 这关对select进行了多重过滤&#xff0c;无法进行双写绕过 大小写绕过 UNion SElect (这关可以用&am…...

编程日记 2024/3/18 17:40:13

助推直播产业升级与经济转型 天府锋巢直播产业基地成都开园

2023年年末&#xff0c;位于成都天府新区兴隆湖板块的天府锋巢直播产业基地正式开园&#xff0c;为成都直播产业注入了新的活力&#xff0c;助推成都经济转型和产业升级。天府锋巢直播产业基地的成立&#xff0c;不仅是成都直播产业的一大盛事&#xff0c;更是对成都经济发展的…...

编程日记 2024/3/18 17:38:11

VSCode+python单步调试库代码

VSCodepython单步调试库代码 随着VSCode版本迭代更新&#xff0c;在最新的1.87.x中&#xff0c;使用Python Debugger扩展进行调试时&#xff0c;扩展的justMyCode默认属性为true&#xff0c;不会进入库中的代码。这对debug而言不太方便&#xff0c;因此需要手动设置一下&#…...

编程日记 2024/3/18 17:37:09

如何使用EMC测试软件执行辐射抗扰度测试？（三）软件检查及手动模式

一、前言 之前的文章为大家介绍了使用EMC测试软件执行辐射抗扰度测试的测试方法、频率变化模式测试方法、校准方法及调制。本期文章继续为大家介绍软件检查和手动模式两部分内容。 前文回顾&#xff1a; 如何使用EMC测试软件执行辐射抗扰度测试&#xff1f;&#xff08;一&am…...

编程日记 2024/3/18 17:36:09

云手机为电商提供五大出海优势

出海电商行业中&#xff0c;各大电商平台的账号安全是每一个电商运营者的重中之重&#xff0c;账号安全是第一生产力&#xff0c;也是店铺运营的基础。因此多平台多账号的防关联管理工具成了所有电商大卖家的必备工具。云手机最核心的优势就是账户安全体系&#xff0c;本文将对…...

编程日记 2024/3/18 17:35:08

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/7/6 20:56:11

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/7/5 2:19:17

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/6/19 14:18:18

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/7/4 18:44:11

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/6/26 5:08:48

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/7/6 19:01:51

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/6/16 21:02:04

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/6/20 12:34:28

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/7/6 1:13:30

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/6/26 10:33:20