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

CSS概念及入门

news 2026/2/8 6:28:51

文章目录

  • 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

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2026/1/25 9:08:41

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2026/2/4 4:39:19