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

CSS概念及入门

news 2025/10/29 21:37:28

文章目录

  • 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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/10/28 21:29:46

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/10/29 19:01:34

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/10/28 2:56:04

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/10/17 3:57:58

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/10/21 23:40:24

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/10/19 17:23:52

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/10/27 9:35:00

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15