CSS(二):美化网页元素

目录

字体样式

文本样式

列表样式

背景图片


字体样式

字体相关的 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;
}
相关推荐
kyriewen29 分钟前
Git Commit 前自动修复代码风格?配置 Husky + lint-staged,从此 CR 只聊逻辑
前端·git·面试
小和尚同志38 分钟前
AI 自动化测试探索(一):Playwright MCP
前端·人工智能·aigc
老马识途2.01 小时前
在AI的帮助下理解spring的启动过程
java·前端·spring
徐小夕2 小时前
Loop Engineering 深度解析与实战指南(全网最全)
前端·算法·github
运筹vivo@2 小时前
Python ContextVar 底层机制与内存模型拆解
前端·数据库·python
#麻辣小龙虾#3 小时前
基于vue3.0开发一款【固废与废气运维管理系统】(支持源码)
前端·vue.js·vue3
Cosolar3 小时前
Docsify零构建文档站完全指南:从快速搭建到企业级部署
前端·开源·github
weixin_471383033 小时前
Taro-02-页面路由
前端·taro
星栈独行3 小时前
Makepad 应用如何读文件、调接口、保存数据
前端·程序人生·ui·rust·github
IT_陈寒4 小时前
Vite热更新失效?可能你在用Windows
前端·人工智能·后端