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;
}
相关推荐
输出输入4 小时前
前端核心技术
开发语言·前端
Mintopia4 小时前
Web 安全与反编译源码下的权限设计:构建前后端一体的信任防线
前端·安全·编译原理
林深现海4 小时前
Jetson Orin nano/nx刷机后无法打开chrome/firefox浏览器
前端·chrome·firefox
黄诂多4 小时前
APP原生与H5互调Bridge技术原理及基础使用
前端
前端市界4 小时前
用 React 手搓一个 3D 翻页书籍组件,呼吸海浪式翻页,交互体验带感!
前端·架构·github
文艺理科生4 小时前
Nginx 路径映射深度解析:从本地开发到生产交付的底层哲学
前端·后端·架构
千寻girling4 小时前
主管:”人家 Node 框架都用 Nest.js 了 , 你怎么还在用 Express ?“
前端·后端·面试
C澒5 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
清山博客5 小时前
OpenCV 人脸识别和比对工具
前端·webpack·node.js
要加油哦~5 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能