CSS(二):美化网页元素

server/2024/12/26 11:48:33/

目录

字体样式

文本样式

列表样式

背景图片


字体样式

字体相关的 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/server/153304.html

相关文章

lookup join 使用缓存参数和不使用缓存参数的执行前后对比

0.先看结论 #缓存开启参数&#xff0c;默认关闭lookup.cache.max-rows 1000, -- 设置最大缓存条目数为 1000lookup.cache.ttl 10 min -- 设置缓存条目的最大存活时间为 10 分钟启用缓存 查询时性能较高&#xff0c;因为数据直接从缓存中读取。缓存未过期时&#xff0c…

可以免费制作翻页电子书的软件

​随着数字化时代的到来&#xff0c;电子书已经成为人们阅读的重要方式之一。翻页电子书以其独特的视觉效果和便捷性&#xff0c;受到了广大读者的喜爱。今天推荐一款免费制作翻页电子书的软件。 1. 实用工具&#xff1a;打开FLBOOK在线制作电子杂志平台。 2. 设计模板&#xf…

在 CentOS 8 系统上安装 Jenkins 的全过程

一、前言 我是一个前端开发&#xff0c;需要频繁将编写的前端系统打包更新到公司的linux服务器&#xff0c;觉得这种工作纯体力活&#xff0c;有时候太浪费时间&#xff0c;以前用过别人搭建的Jenkins可以很好的解决这个问题。 Jenkins 是一款流行的开源持续集成和持续交付&a…

我在广州学 Mysql 系列——数据表查询命令详解

ℹ️大家好&#xff0c;我是LXJ&#xff0c;今天星期二了&#xff0c;本文将讲述MYSQL查询数据的详细命令以及相关例题~~ 复习&#xff1a;&#x1f449;《Mysql函数的练习题》 同时&#xff0c;数据库相关内容查看专栏&#x1f449;【数据库专栏】~ 想要了解更多内容请点击我的…

ARM 获取cpu个数

MPIDR_EL1寄存器 AFF0 &#xff1a;表示一个 core 中的第几个 thread&#xff0c;大多数 core 都是 single-threaded core&#xff0c;所以大多数 core 中的该值是 0. AFF1&#xff1a;表示一个 cluster 中的第几个 cpu AFF2/AFF3&#xff1a;表示系统中的第几个 cluster&#…

(七)循环神经网络_LSTM长短期记忆网络

一、RNN存在的问题 二、LSTM的基本思想 三、链式结构和门控单元 RNN都有重复链式结构&#xff1a; 标准RNN结构简单&#xff1b;LSTM链式结构特殊。 LSTM专门设计了 3种门控单元来控制信息的保留和丢弃。 具体来说包括了三种门。 之所以称之为门&#xff0c;一定要有一个控制…

Ajax笔记

Ajax入门 01.AJAX 概念和 axios 使用 讲解 什么是 AJAX ? mdn 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中&#xff0c;使用 AJAX技术&#xff08;XHR对象&#xff09;发起获取省份列表数据的请求&#xff0c;服务器代码响应准备好的省份列表数据给前端&a…

模电_郑益慧_笔记_2_PN结的形成

载流子的浓度 本征激发的速度与温度相关&#xff1b;复合与载流子浓度相关&#xff1b; 当温度升高时&#xff0c;本征激发加剧&#xff0c;载流子浓度逐渐上升&#xff1b;同时随着载流子浓度上升&#xff0c;复合加剧&#xff0c;载流子浓度逐渐下降&#xff1b;最终&#x…