CSS(二):美化网页元素

devtools/2024/12/27 11:57:36/

目录

字体样式

文本样式

列表样式

背景图片


字体样式

字体相关的 CSS 属性:

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

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

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

例如:

css">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:设置文本的阴影,通常是四个参数:阴影颜色、水平偏移量、垂直偏移量和阴影的模糊半径

例如:

css">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:实心方块

例如:

css">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% 数值。

合并写法:

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

例如:

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


http://www.ppmy.cn/devtools/145810.html

相关文章

《2023-2024网络安全产业发展核心洞察与趋势预测》

2023年至2024年间&#xff0c;我国经济总体上逐步显现出复苏迹象&#xff0c;并开始释放向上增长的潜力。在此背景下&#xff0c;网络安全产业也经历了经济环境的深刻影响&#xff0c;不仅实现了阶段性的稳定发展&#xff0c;也展现出较强的韧性与适应能力&#xff0c;为未来的…

FPGA实时红外相机采集输出系统,提供工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我这里已有的红外相机图像处理解决方案 3、工程详细设计方案工程设计原理框图红外相机FDMA图像缓存HDMI视频输出架构工程源码架构 4、vivado工程源码1详解5、工程移植…

使用ForceBindIP绑定应用到指定IP

前言 使用ForceBindIP工具&#xff0c;用户可以轻松地将特定应用程序绑定到指定的IP地址&#xff0c;从而确保应用程序的网络连接通过指定的网络适配器进行。通过在命令提示符下运行ForceBindIP并指定IP地址和应用程序的完整路径&#xff0c;用户能够控制应用程序的网络流量&a…

Redis 多机功能 — 复制、Sentinel及集群

Redis 的复制功能通过主从模式实现&#xff0c;允许用户为存储着目标数据库的服务器&#xff08;主服务&#xff09;创建多个拥有相同数据库副本的服务器&#xff08;从服务&#xff09;。让客户端的读请求可以分摊到从服务器中&#xff0c;从而提升性能。复制功能适合对数据一…

基于GEE云计算、多源遥感、高光谱遥感技术蓝碳储量估算;红树林植被指数计算及提取

海洋是地球上最大的“碳库”,“蓝碳”即海洋活动以及海洋生物&#xff08;特别是红树林、盐沼和海草&#xff09;能够吸收大气中的二氧化碳&#xff0c;并将其固定、储存在海洋中的过程、活动和机制。而维持与提升我国海岸带蓝碳潜力是缓解气候变化的低成本、高效益的方案&…

MyBatis动态 SQL 的执行原理

MyBatis 动态 SQL 是 MyBatis 框架中的一个重要特性&#xff0c;它允许开发者根据条件动态地生成不同的 SQL 语句。通过使用动态 SQL&#xff0c;开发者可以根据传入的参数动态地构建 SQL 查询&#xff0c;这样就避免了写多个 SQL 语句&#xff0c;提升了代码的灵活性和可维护性…

五十五:服务器端的主动消息推送

随着互联网技术的发展&#xff0c;用户体验和实时性成为应用服务的重要指标。传统的客户端轮询&#xff08;polling&#xff09;模式逐渐无法满足实时数据更新的需求&#xff0c;而服务器端的主动消息推送技术应运而生&#xff0c;为开发者和用户带来了更高效的解决方案。 主动…

Pingpingping 解题思路

题目 源代码 <?php highlight_file(__FILE__); error_reporting(0); $_ping $_GET[Ping_ip.exe]; if(isset($_ping)){system("ping -c 3 ".$_ping); }else{$data base64_encode(file_get_contents("error.png"));echo "<img srcdata:image/…