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

CSS概念及入门

news 2026/3/29 19:14:34

文章目录

  • 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

避坑指南：用Dify搭建AI Agent时，Docker镜像拉取失败和Postman接口调试的那些坑

避坑指南&#xff1a;用Dify搭建AI Agent时的高频问题解决方案 当你第一次尝试用Dify搭建AI Agent时&#xff0c;可能会遇到各种意想不到的"坑"。从Docker镜像拉取失败到Postman接口调试报错&#xff0c;每一步都可能让新手开发者抓狂。本文将聚焦这些实操中的真实痛…...

编程新知 2026/3/29 18:29:28

搞懂 SAP Fiori 中的 RFC 连接：把后端系统、系统别名与 Launchpad 运行链路一次讲透

在很多 SAP Fiori 项目里，团队把注意力都放在 SAPUI5、OData、Fiori Elements、语义对象导航这些能力上，却常常在集成经典应用时踩坑。真正到了项目上线阶段，用户不会关心应用是 SAPUI5、Web Dynpro ABAP，还是 SAP GUI for HTML 实现的，他们只会问一句：为什么在 SAP Fior…...

编程新知 2026/3/29 16:26:24

Linux服务器无GPU也能跑！Ollama部署DeepSeek-R1模型存储路径自定义与性能调优指南

Linux服务器无GPU高效部署DeepSeek-R1模型全攻略&#xff1a;从存储路径优化到性能调优 当你在云服务器或老旧设备上尝试运行AI模型时&#xff0c;是否经常遇到存储空间不足或性能低下的困扰&#xff1f;本文将带你深入探索如何在无GPU的Linux环境中&#xff0c;通过Ollama高效…...

编程新知 2026/3/29 15:44:03

别再只盯着ONNX了！用PNNX把PyTorch模型轻松转成ncnn格式（安卓部署实战）

深度学习模型安卓部署实战&#xff1a;PNNX与ONNX转换工具深度对比 在移动端部署深度学习模型时&#xff0c;模型转换环节往往是开发者遇到的第一个技术瓶颈。许多团队习惯性地选择ONNX作为中间格式&#xff0c;却忽视了更高效的替代方案。本文将带您深入探索PNNX这一专为PyTor…...

编程新知 2026/3/29 15:42:02

C++多线程编程：为什么compare_exchange_weak比strong更适合循环场景？

C多线程编程&#xff1a;为什么compare_exchange_weak比strong更适合循环场景&#xff1f; 在构建高性能并发系统时&#xff0c;C开发者常常需要在原子操作的精确性和执行效率之间寻找平衡点。compare_exchange系列函数作为无锁编程的核心工具&#xff0c;其强弱两种变体的选择…...

编程新知 2026/3/29 15:23:54

细胞转染优化方向（二）：PEI体系关键参数进阶优化指南【曼博生物】

摘要&#xff1a;在PEI转染体系中&#xff0c;除基础培养条件外&#xff0c;质粒比例、DNA与PEI比率、孵育条件及病毒收获时间等参数同样显著影响转染效率与病毒产量。本文结合实验数据&#xff0c;对关键参数进行系统分析&#xff0c;为AAV及慢病毒生产提供优化思路。 关键词…...

编程新知 2026/3/29 15:05:46

VRCX：基于现代Web技术栈的VRChat社交数据聚合与可视化平台架构解析

VRCX&#xff1a;基于现代Web技术栈的VRChat社交数据聚合与可视化平台架构解析 【免费下载链接】VRCX Friendship management tool for VRChat 项目地址: https://gitcode.com/GitHub_Trending/vr/VRCX 在虚拟现实社交平台VRChat日益复杂的社交生态中&#xff0c;传统客…...

编程新知 2026/3/29 14:53:42

C# + Halcon实战：药盒上多个条形码一次扫全的配置与代码详解（.NET Framework 4.8）

C# Halcon实战&#xff1a;药盒多条形码高精度识别系统开发指南 在药品包装生产线上&#xff0c;一个药盒往往同时印有追溯码、物流码和防伪码等多种条形码。传统扫码设备通常需要多次定位才能完成读取&#xff0c;而基于Halcon的机器视觉方案能实现毫秒级的多码同步识别。本文…...

编程新知 2026/3/29 14:31:35

Monocle2拟时基因富集分析实战：从热图模块到通路解析

1. Monocle2拟时分析基础回顾 如果你正在做单细胞转录组分析&#xff0c;肯定对拟时分析&#xff08;Pseudotime Analysis&#xff09;不陌生。简单来说&#xff0c;这就像给细胞拍"成长视频"&#xff0c;把静态的细胞状态连成动态的发展轨迹。Monocle2作为这个领域的…...

编程新知 2026/3/29 14:17:27

Mirage Flow与Python爬虫结合：智能数据采集与分析实战

Mirage Flow与Python爬虫结合&#xff1a;智能数据采集与分析实战 1. 引言 你有没有遇到过这样的情况&#xff1a;需要从大量网站采集数据&#xff0c;但传统爬虫要么被封IP&#xff0c;要么无法处理复杂的页面结构&#xff0c;要么采集回来的数据杂乱无章需要大量清洗&#…...

编程新知 2026/3/29 14:15:22