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

CSS:背景样式、盒子模型与文本样式

背景样式

背景样式用于设置网页元素的背景,包括颜色、图片等。

背景颜色

使用 background-color 属性设置背景颜色,支持多种格式(颜色英文、十六进制、RGB等)。

div {background-color: lightblue;
}
格式示例
十六进制#ff5733
RGBrgb(255, 87, 51)
颜色英文lightblue
背景图片

通过 background-image 属性为元素添加背景图片。

div {background-image: url('background.jpg');background-repeat: no-repeat;background-size: cover;
}
属性描述
background-repeat控制图片是否重复
background-size设置图片尺寸(cover, contain, 或具体数值)
background-position设置图片的位置(center, top, 等)
多重背景

使用逗号分隔多个背景值,为元素添加多层背景。

div {background-image: url('layer1.png'), url('layer2.png');background-size: contain, cover;
}

盒子模型

CSS 的盒子模型是网页布局的核心,它描述了每个元素由哪些部分组成。

盒子模型结构
部分描述
内容(Content)元素的实际内容区域
内边距(Padding)内容与边框之间的间距
边框(Border)围绕内边距和内容的边线
外边距(Margin)元素与其他元素之间的距离
设置盒子模型属性
div {width: 200px;height: 100px;padding: 10px;border: 2px solid black;margin: 20px;
}
属性描述
padding设置内边距,可以分别指定上下左右的值
border定义边框的宽度、样式和颜色
margin设置外边距,可使用 auto 实现居中对齐
盒子模型类型
  • 标准盒模型widthheight 只包括内容区域。
  • 替代盒模型:通过 box-sizing: border-boxwidthheight 包括内容、内边距和边框。
div {box-sizing: border-box;
}

文本样式

文本样式定义了文字的外观和排列方式。

字体样式
属性描述
font-family设置字体族,如 Arial, serif
font-size设置字体大小(单位:px, %, em 等)
font-style设置字体样式(normal, italic, oblique
font-weight设置字体粗细(normal, bold, 或数值 100-900)
p {font-family: Arial, sans-serif;font-size: 16px;font-style: italic;font-weight: bold;
}
文本对齐与修饰
属性描述
text-align对齐方式(left, right, center, justify
text-decoration设置文字装饰(none, underline, line-through
line-height设置行高,调整行间距
letter-spacing设置字母间距
word-spacing设置单词间距
p {text-align: justify;text-decoration: underline;line-height: 1.5;letter-spacing: 2px;
}
文本阴影

text-shadow 属性用于为文字添加阴影效果。

h1 {text-shadow: 2px 2px 4px gray;
}
属性描述
偏移值(x, y)控制阴影在水平方向和垂直方向的偏移
模糊半径控制阴影的模糊程度
阴影颜色设置阴影的颜色

凡是过去,皆为序章;凡是未来,皆有可期。

相关文章:

CSS:背景样式、盒子模型与文本样式

背景样式 背景样式用于设置网页元素的背景,包括颜色、图片等。 背景颜色 使用 background-color 属性设置背景颜色,支持多种格式(颜色英文、十六进制、RGB等)。 div {background-color: lightblue; }格式示例十六进制#ff5733R…...

算法:线性查找

线性查找算法是一种简单的查找算法,用于在一个数组或列表中查找一个特定的元素。它从数组的第一个元素开始,逐个检查每个元素,直到找到所需的元素或搜索完整个数组。线性查找的时间复杂度为O(n),其中n是数组中的元素数量。 实现原理 从列表的第一个元素开始,逐个检查每个…...

【计算机网络】什么是网关(Gateway)?

网上冲浪多了,你可以听到过网关(Gateway)这个词,但是却不太清楚网关(Gateway)到底是干什么的、负责网络当中的什么任务,本篇文字将会为你介绍网关(Gateway)的作用&#x…...

20250106面试

rabbitmq如何保证消息不丢失 my: 持久化,包括消息持久化和队列持久化,重启不丢失。持久化到磁盘中的。 消息确认 死信队列:消费失败(业务异常/未确认,重试后,会放死信队列)&…...

Java 分布式锁:Redisson、Zookeeper、Spring 提供的 Redis 分布式锁封装详解

📚 Java 分布式锁:Redisson、Zookeeper、Spring 提供的 Redis 分布式锁封装详解 在分布式系统中,分布式锁 用于解决多个服务实例同时访问共享资源时的 数据一致性 问题。Java 生态中,有多种成熟的框架可以实现分布式锁&#xff0…...

智能汽车的数字钥匙安全

数字钥匙作为汽车智能化变革下的一项创新技术,利用蓝牙定位、NFC等近场通信技术进行钥匙与汽车的匹配继而开锁,可以让车主通过智能手机、可穿戴设备等解锁汽车,并对汽车实施相关的操作,提升用车便利性,受到越来越多车企…...

YangQG 面试题汇总

一、交叉链表 问题: 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 null 。 解题思想: 双指针 备注:不是快慢指针,如果两个长度相…...

急速了解什么是GPU服务器

GPU服务器是一种专门配置了高性能图形处理器(GPU)的服务器,旨在提供高性能计算、深度学习、科学计算等多种场景的计算服务。与传统的CPU服务器相比,GPU服务器在处理并行密集型计算任务时具有显著优势。本文将详细介绍GPU服务器的定…...

用 Python 绘制可爱的招财猫

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​​​ ​​​​​​​​​ ​​​​ 招财猫,也被称为“幸运猫”,是一种象征财富和好运的吉祥物,经常…...

Linux 获取文本部分内容

Linux获取文本部分内容 前言场景获取前几行内容获取末尾几行内容获取中间内容head 命令 tail 命令 结合sed 命令awk 命令 前言 test.log 文本内容如下: (注意:内容 a1004和a1005之间有一空行) [rootgaussdb002 tmp]# cat test.…...

01-51单片机LED与独立按键

一、单片机概述 注意:个人学习笔记,里面涉及到的C语言和进程转换相关的知识在C语言部分已经写了,这里是默认都会的状态学习单片机。 1.什么是单片机 单片机,英文Micro Controller Unit,简称MCU。其内部集成了CPU、R…...

【微服务】SpringBoot 整合Redis实现延时任务处理使用详解

目录 一、前言 二、延迟任务的高频使用场景 三、延迟任务常用解决方案 3.1 Quartz 3.2 DelayQueue 3.2.1 Timer + TimerTask 3.2.2 ScheduledExecutorService 3.3 Redis sorted set 3.4 RabbitMQ 四、Redis实现延时队列操作实战 4.1 Redis Sorted Set 概述 4.1.1 Re…...

【Java项目】基于SpringBoot的【校园交友系统】

【Java项目】基于SpringBoot的【校园交友系统】 技术简介:系统软件架构选择B/S模式、SpringBoot框架、java技术和MySQL数据库等,总体功能模块运用自顶向下的分层思想。 系统简介:系统主要包括管理员和用户。 (a) 管理员的功能主要有首页、个人…...

Elasticsearch学习(1) : 简介、索引库操作、文档操作、RestAPI、RestClient操作

目录 1.elasticsearch简介1.1.了解es1.2.倒排索引正向索引和倒排索引 1.3.es的一些概念:文档和字段;索引和映射;Mysql与ES1.4.安装es、kibana部署单点es部署kibanaIK分词器安装IK分词器与测试扩展与停用词词典总结 部署es集群 2.索引库操作2.1.mapping映…...

ls指令详讲

🏝️专栏:https://blog.csdn.net/2301_81831423/category_12872319.html 🌅主页:猫咪-9527-CSDN博客 “欲穷千里目,更上一层楼。会当凌绝顶,一览众山小。” 目录 基本语法 常用选项详解 1. 基本选项 …...

【前端】【CSS3】基础入门知识

目录 如何学习CSS 1.1什么是CSS​编辑 1.2发展史 1.三种导入方式 1.1、行内样式 1.2、外部样式 1.3、嵌入方式 2.选择器 2.1、基本选择器 (1)元素选择器 (2)类选择器 (3)id选择器:必…...

计算机网络之---RIP协议

RIP协议的作用 RIP (Routing Information Protocol) 协议是一个基于距离矢量的路由协议,它在网络中用来动态地交换路由信息。RIP 是最早的路由协议之一,通常用于小型和中型网络中。它的工作原理简单,易于实现,但在一些大型网络中效…...

【LeetCode Hot100 贪心算法】 买卖股票的最佳时机、跳跃游戏、划分字母区间

贪心算法 买卖股票的最佳时机买卖股票的最佳时机II跳跃游戏跳跃游戏II划分字母区间 买卖股票的最佳时机 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的…...

互联网架构变迁:从 TCP/IP “呼叫” 到 NDN “内容分发” 的逐浪之旅

本文将给出关于互联网架构演进的一个不同视角。回顾一下互联网的核心理论基础产生的背景: 左边是典型的集中控制通信网络,很容易被摧毁,而右边的网络则没有单点问题,换句话说它很难被全部摧毁,与此同时,分…...

git相关操作笔记

git相关操作笔记 1. git init git init 是一个 Git 命令,用于初始化一个新的 Git 仓库。执行该命令后,Git 会在当前目录创建一个 .git 子目录,这是 Git 用来存储所有版本控制信息的地方。 使用方法如下: (1&#xff…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...

GitHub 趋势日报 (2025年06月08日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

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

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

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量,招商蛇口以“美好生活承载者”为使命,深耕全球111座城市,以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子,招商蛇口始终与城市发展同频共振,以建筑诠释对土地与生活的…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...