CSS(二):美化网页元素

目录

字体样式

文本样式

列表样式

背景图片


字体样式

字体相关的 CSS 属性:

  • font-family:设置字体
  • font-size:设置字体大小
  • font-weight:设置字体的粗细(如 normal, bold, lighter 等)
  • color:设置字体颜色

可以将多个字体属性写在一行:

font: <font-size> <font-weight> <font-family>;

例如:

p {font: 16px normal Arial, sans-serif; /* 设置字体大小、粗细和字体类型 */color: #333333; /* 字体颜色为深灰色 */
}

文本样式

常见的文本样式属性:

  • color:设置文本颜色
  • text-align:设置文本对齐方式
    • left:左对齐
    • center:居中对齐
    • right:右对齐
    • justify:两端对齐
  • text-indent:设置段落的首行缩进,常用于段落的美化
  • line-height:设置行高,可以帮助改善可读性,特别是对于多行文本
  • text-decoration:设置文本的装饰效果
    • underline:下划线
    • overline:上划线
    • line-through:中划线
    • none:去掉装饰(常用于去除链接下划线)
  • text-shadow:设置文本的阴影,通常是四个参数:阴影颜色、水平偏移量、垂直偏移量和阴影的模糊半径

例如:

h1 {color: #2c3e50;text-align: center;text-decoration: underline;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);line-height: 1.5;
}

列表样式

通过 list-style 属性可以自定义列表项的符号

  • list-style:控制列表项的样式,可以设置多个属性
    • none:去掉默认的项目符号
    • circle:空心圆
    • decimal:数字(有序列表的默认样式)
    • square:实心方块

例如:

ul {list-style: square; /* 使用正方形符号 */
}ol {list-style: decimal; /* 使用数字 */
}

背景图片

常见的背景属性:

  • background-image:设置背景图片。语法:background-image: url("image.jpg");
  • background-position:设置背景图片的定位。语法:background-position: x% y%; 或者 background-position: top left;
  • background-repeat:控制背景图片是否重复,常见值:
    • repeat:默认,背景图片在水平方向和垂直方向上都重复
    • no-repeat:背景图片不重复
    • repeat-x:仅水平重复
    • repeat-y:仅垂直重复
  • background-size:用来控制背景图像的大小,常用的值有:
    • cover:保持背景图比例,自动填满背景区域,可能裁剪部分图片
    • contain:保持背景图比例,图片完整显示,但可能留白
    • 具体的 px% 数值。

合并写法:

background: <color> <image> <position> <size> <repeat>;

例如:

div {background: #ffcc00 url("image.jpg") no-repeat center center;background-size: cover;
}

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

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

相关文章

LLM漫谈(八)| OpenAI 12天直播集锦

声明&#xff1a;本文是收集了网上关于OpenAI 12天直播的博文&#xff0c;若有侵权&#xff0c;联系我删除&#xff0c;感谢各位博主的奉献。 此次 OpenAI 将发布会拆分为 12 天直播&#xff0c;是一次内容与形式的双重创新。这种形式通过延长发布周期&#xff0c;不断吸引观众…

SwiftUI 入门趣谈:在文本框(TextField)内限制数字的输入

概述 虽然 SwiftUI 本身提供了海量内置的原生视图供我们使用&#xff0c;但对于某些情况我们还需要根据实际需求“量体裁衣、专属定制”。 在日常的撸码场景中&#xff0c;我们有时需要限制文本框&#xff08;TextField&#xff09;中数字内容的输入&#xff0c;如何又简单又快…

unity使用代码在动画片段中添加event

unity使用代码在动画片段中添加event using UnityEngine;public static class AnimationHelper {/// <summary>/// 获取Animator状态对应的动画片段/// </summary>/// <param name"animator">Animator组件</param>/// <param name"…

初始JavaEE篇 —— 网络原理---传输层协议:深入理解UDP/TCP

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 UDP协议 参数解析&#xff1a; 校验和的计算 TCP协议 参数解析&#xff1a; 确认应答机制 超时重传 连接管理 三次握…

Apache Doris 创始人:何为“现代化”的数据仓库?

在 12 月 14 日的 Doris Summit Asia 2024 上&#xff0c;Apache Doris 创始人 & PMC 成员马如悦在开场演讲中&#xff0c;围绕“现代化数据仓库”这一主题&#xff0c;指出 3.0 版本是 Apache Doris 研发路程中的重要里程碑&#xff0c;他将这一进展总结为“实时之路”、“…

百度千帆平台构建AI APP的基础概念梳理

百度千帆平台构建AI APP的基础概念梳理 如果想制作大语言模型&#xff08;LLM&#xff09;相关的APP&#xff0c; 将利用百度的千帆平台在国内可能是最便捷的途径&#xff0c;因为百度开发了成熟的工作流&#xff0c;前些年还有些不稳定&#xff0c;现在固定下来了&#xff0c…

matplotlib pyton 如何画柱状图,利用kimi,直接把图拉倒上面,让他生成

要绘制类似于您提供的图像的柱状图&#xff0c;您可以使用Python中的Matplotlib库&#xff0c;这是一个非常流行的绘图库。以下是一个简单的示例代码&#xff0c;展示如何使用Matplotlib来创建一个类似的柱状图&#xff1a; python import matplotlib.pyplot as plt import nu…

SLES网络

一、高级网络接口 1.理解高级网络接口的概念 Linux网络接口相关层在OSI中的位置 1.1数据链路层 定义了节点间通信的协议检测并纠正物理层产生的错误分为两个子层&#xff1a; 媒体访问控制&#xff08;MAC&#xff09;&#xff1a;节点如何获取访问物理媒体的权限并传输数据…

操作002:HelloWorld

文章目录 操作002&#xff1a;HelloWorld一、目标二、具体操作1、创建Java工程①消息发送端&#xff08;生产者&#xff09;②消息接收端&#xff08;消费者&#xff09;③添加依赖 2、发送消息①Java代码②查看效果 3、接收消息①Java代码②控制台打印③查看后台管理界面 操作…

DP动态规划+贪心题目汇总

文章目录 背包01背包416. 分割等和子集 完全背包279. 完全平方数322. 零钱兑换 两个字符串DPLCR 095. 最长公共子序列139. 单词拆分 单个数组字符串DP5. 最长回文子串300. 最长递增子序列53.最大子数组和152. 乘积最大子数组198. 打家劫舍 三角形120. 三角形最小路径和 贪心121…

论文解读——掌纹生成网络 RPG-Palm升级版PCE-Palm

该文章是2023年论文RPG-Palm的升级版 论文&#xff1a;PCE-Palm: Palm Crease Energy Based Two-Stage Realistic Pseudo-Palmprint Generation 作者&#xff1a;Jin, Jianlong and Shen, Lei and Zhang, Ruixin and Zhao, Chenglong and Jin, Ge and Zhang, Jingyun and Ding,…

对gPTP上PTP安全控制的评估

论文标题&#xff1a;Evaluation of PTP Security Controls on gPTP&#xff08;对gPTP上PTP安全控制的评估&#xff09; 作者信息&#xff1a; Mahdi Fotouhi, Alessio Buscemi, Thomas Engel&#xff1a;卢森堡大学科学、技术与医学系&#xff08;Faculty of Science, Tech…

1.微服务灰度发布(方案设计)

前言 微服务架构中的灰度发布&#xff08;也称为金丝雀发布或渐进式发布&#xff09;是一种在不影响现有用户的情况下&#xff0c;逐步将新版本的服务部署到生产环境的策略。通过灰度发布&#xff0c;你可以先将新版本的服务暴露给一小部分用户或特定的流量&#xff0c;观察其…

【流量、洪水数据下载】网站介绍和下载经验....不断更新!

EarthData 介绍 NASA:链接 数据下载 视频教程:Discover and Access Earth Science Data Using Earthdata Search 数据下载需要注册,已经被卡在邮箱验证上【2024-12-26】… Essential Climate Variables——【The Global Climate Observing System(GCOS) 介绍 其是支…

数据仓库工具箱—读书笔记02(Kimball维度建模技术概述04、使用一致性维度集成)

Kimball维度建模技术概述 记录一下读《数据仓库工具箱》时的思考&#xff0c;摘录一些书中关于维度建模比较重要的思想与大家分享&#x1f923;&#x1f923;&#x1f923; 第二章前言部分作者提到&#xff1a;技术的介绍应该通过涵盖各种行业的熟悉的用例展开&#xff08;赞同…

分布式专题(10)之ShardingSphere分库分表实战指南

一、ShardingSphere产品介绍 Apache ShardingSphere 是一款分布式的数据库生态系统&#xff0c; 可以将任意数据库转换为分布式数据库&#xff0c;并通过数据分片、弹性伸缩、加密等能力对原有数据库进行增强。Apache ShardingSphere 设计哲学为 Database Plus&#xff0c;旨在…

RK3588在Android13/14如何查看GPU,NPU,DDR,RGA数据

由于Android13上selinux的权限管控加强&#xff0c;原来android12的方法已经无法获取到性能相关数据了&#xff0c;故单独介绍Android13上的性能数据获取 首先需要保障能过获取到root权限&#xff0c;adb root能够生效&#xff0c;adb shell进入shell命令行 mount -t debugfs…

基础优化方法

梯度下降 学习率代表每一次沿着这个方向走多远&#xff0c; batchsize的概念 梯度下降通过不断沿着反梯度方向更新参数求解 两个重要的超参数是 batchsize 和 学习率

阿里云人工智能ACA(五)——深度学习基础

一、深度学习概述 1. 深度学习概念 1-1. 深度学习基本概念 深度学习是机器学习的一个分支基于人工神经网络&#xff08;模仿人脑结构&#xff09;通过多层网络自动学习特征能够处理复杂的模式识别问题 1-2. 深度学习的优点与缺点 优点 强大的特征学习能力可以处理复杂问题…

浏览器工作原理与实践-12|栈空间和堆空间:数据是如何存储的

12|栈空间和堆控件&#xff1a;数据是如何存储的 JavaScript内存机制 function foo(){var a 1var b aa 2console.log(a) // 2console.log(b) // 2 } foo()function foo(){var a {name:"极客时间"}var b aa.name "极客邦"console.log(a) // {name:&…