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)控制阴影在水平方向和垂直方向的偏移
模糊半径控制阴影的模糊程度
阴影颜色设置阴影的颜色

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/66459.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】记录一下考RHCE的学习过程(七)

年底了,公司接的北京地铁轨道交通的项目做不完了,一百多列地铁的设备都得调,派我出差了几周,这几天才回来,出差累死了实在是没办法更新。(YOASOBI的二开票还没抢到ToT,哭死,看看回滚…

get和post有什么区别

GET和POST是HTTP协议中两种常用的请求方法,它们在用途、参数传递方式、缓存处理、安全性等方面存在显著差异。 以下是对GET和POST区别的详细讲解,并给出示例演示。 一、GET和POST的区别 用途 GET:主要用于获取信息,即进行查询操…

Lua协同程序(线程)

1、 Lua 的协同程序(coroutine)简单介绍 Lua 的协同程序(coroutine)是一种轻量级的线程,允许你在多个任务之间进行协作式多任务处理。与操作系统线程不同,协同程序是由程序员显式控制的,不会自动…

流媒体学习

流媒体 特性流媒体流协议FLVMSE定义采用数据流方式在网络上进行播放的媒体格式用于传输流媒体数据的网络协议Flash Video&#xff0c;一种流媒体格式一项 W3C 规范&#xff0c;允许 JavaScript 为 <audio> 和 <video> 动态构造媒体源作用提供连续的音视频播放体验&…

【简博士统计学习方法】第1章:3. 统计学习方法的三要素

3. 统计学习方法的三要素 3.1 监督学习的三要素 3.1.1 模型 假设空间&#xff08;Hypothesis Space&#xff09;&#xff1a;所有可能的条件概率分布或决策函数&#xff0c;用 F \mathcal{F} F表示。 若定义为决策函数的集合&#xff1a; F { f ∣ Y f ( X ) } \mathcal{F…

Linux内核 -- RTC 驱动的注册方式

Linux 内核中 RTC 驱动的注册方式 在 Linux 内核中&#xff0c;RTC&#xff08;Real-Time Clock&#xff09;驱动的注册可以通过多种方式实现&#xff0c;以下整理了常见的注册方式及其注意事项。 1. 使用 devm_rtc_device_register 这是注册 RTC 驱动的最常用方法&#xff…

JavaEE初阶——计算机工作原理

一、什么是JavaEE JavaEE&#xff08;Java Platform&#xff0c;Enterprise Edition&#xff09;是sun公司&#xff08;2009年4月20日甲骨文将其收购&#xff09;推出的企业级应用程序版本。这个版本以前称为 J2EE。能够帮助我们开发和部署可移植、健壮、可伸缩且安全的服务器…

多目标优化算法——基于聚类的不规则Pareto前沿多目标优化自适应进化算法(CA-MOEA)

基于聚类的不规则Pareto前沿多目标优化自适应进化算法&#xff08;CA-MOEA&#xff09; 一、算法简介 简介&#xff1a; 现有的多目标进化算法&#xff08;moea&#xff09;在具有规则Pareto前沿且Pareto最优解在目标空间上连续分布的多目标优化问题&#xff08;MOPs&#xff…

短诗《腊八粥》

《腊八粥》现•佚名已买花生同煮粥&#xff0c;粥不似&#xff0c;少年稠也不复&#xff0c;少年仇亦不赴&#xff0c;少年愁终不负&#xff0c;少年筹 &#xff08;主编目前所有分类&#xff1a; 身&#xff0c;心&#xff0c;灵思 工作&#xff0c;生活 创作 剧 让世界更…

封装深拷贝方法

前言 在今年的四月份我写了一篇有关深拷贝的博客文章 我与深拷贝_radash 深拷贝-CSDN博客。在该文章中有一个令我感到遗憾的点就是我没有实现一个自己手写的深拷贝。如今我想弥补当初的遗憾&#xff0c;在这篇文章中详细的讲述一下如何手写一个深拷贝方法。 lodash中是如何实…

数据结构:树

数据结构中的树 树&#xff08;Tree&#xff09;是一种非线性数据结构&#xff0c;用于表示具有层次结构的数据。树结构由节点&#xff08;Node&#xff09;和边&#xff08;Edge&#xff09;组成&#xff0c;节点之间通过边连接&#xff0c;形成父子关系。树是一种抽象数据类…

【信息系统项目管理师】第15章:项目风险管理过程详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 一、规划风险管理1、输入2、工具与技术3、输出二、识别风险1、输入2、工具与技术3、输出三、实施定性风险分析1、输入2、工具与技术3、输出四、实施定量风险分析1、输入2、工具与技术3、输出五、规划风险应对1、…

flutter web 路由问题

开发问题背景&#xff1a; flutte 项目中开发网页暴露出来供外部的 网页调用&#xff0c;并不是跳转到项目的首页 项目中使用的路由是 GetX 4.6.0 存在的问题 跳回到首页的问题 web -> flutterflutter 使用 history.back 到web&#xff0c;web forward 到 flutter 此时…

在不到 5 分钟的时间内将威胁情报 PDF 添加为 AI 助手的自定义知识

作者&#xff1a;来自 Elastic jamesspi 安全运营团队通常会维护威胁情报报告的存储库&#xff0c;这些报告包含由报告提供商生成的大量知识。然而&#xff0c;挑战在于&#xff0c;这些报告的内容通常以 PDF 格式存在&#xff0c;使得在处理安全事件或调查时难以检索和引用相关…

二、模型训练与优化遇到的问题1:python=3.10:指定 Python 版本为 3.10。这里为什么指定版本为3.10,有什么依据

目录 一、Python 版本选择的依据 1. TensorFlow 和 Keras 的兼容性 2. Python 3.10 的优势 二、如何选择适合的 Python 版本 1. 检查 TensorFlow 的官方兼容性文档 2. 选择受支持且稳定的版本 3. 避免使用过于旧或过新的版本 三、如何在 Anaconda 中选择不同的 Python …

探索 Vue.js 的动态样式与交互:一个有趣的样式调整应用

修改日期备注2025.1.3初版 一、前言 今天和大家分享在 Vue.js 学习过程中开发的超酷的小应用。这个应用可以让我们通过一些简单的交互元素&#xff0c;如复选框、下拉菜单和输入框&#xff0c;来动态地改变页面上元素的样式哦 让我们一起深入了解一下这个项目的实现过程&…

css出现边框

前言 正常情况下&#xff0c;开启 contenteditable 属性后会出现 “黑色边框”。 如下图所示&#xff0c;很影响美观&#xff1a; 您可能想去掉它&#xff0c;就像下面这样&#xff1a; 解决方案 通过选择器&#xff0c;将 focus 聚焦时移除 outline 属性即可。 如下代码所示&a…

恋爱脑学编程之C++模板编程大冒险

一、模板编程初相识&#xff1a;开启泛型编程魔法之旅 嘿&#xff0c;小伙伴们&#xff01;今天咱们要一起探索C中超级厉害的模板编程。它就像是一把万能钥匙&#xff0c;可以打开各种类型数据的大门&#xff0c;让咱们写出超酷的与类型无关的代码&#xff0c;大大提高代码的复…

ubuntu 20.04 安装 5.4 内核

最近需要用linux 5.4内核&#xff08;发现它和5.14 在Block层有些差异&#xff09;&#xff0c;以对比和5.14内核的差异。目前已安装的虚拟机&#xff0c;Centos8的默认内核是4.18&#xff0c;Redhat9.1的内核是5.14&#xff0c;Ubuntu20.04的内核是5.15&#xff0c;故在ubuntu…

enzymejest TDD与BDD开发实战

一、前端自动化测试需要测什么 1. 函数的执行逻辑&#xff0c;对于给定的输入&#xff0c;输出是否符合预期。 2. 用户行为的响应逻辑。 - 对于单元测试而言&#xff0c;测试粒度较细&#xff0c;需要测试内部状态的变更与相应函数是否成功被调用。 - 对于集成测试而言&a…