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 小时前
项目中新增给AI制定的代码规范
前端·程序员
名字还没想好☜5 小时前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js
console.log('npc')6 小时前
Git 冲突与 AI 协助指南
前端·人工智能·git·大模型
爱学堂IT分享7 小时前
Cesium可视化系统实战课程-Cesium教程学习
前端
糖墨夕7 小时前
理解大语言模型:Agent 的“大脑”
前端·agent
Rain的Java大神之路7 小时前
JavaWeb开发如何解决跨域问题
java·前端·后端·nginx·web安全·面试·运维开发
cpolar技术支持8 小时前
浏览器也能跑本地 AI:用 Transformers.js + WebGPU 做一个最小推理 Demo,cpolar 给同事远程体验
前端·ai·cpolar·webgpu·transformers.js
计算机魔术师9 小时前
OpenAI 发布 GPT-6 Astra:多项基准刷新纪录, cybersecurity 能力达 Critical 阈值
前端
xy34539 小时前
Axure9.0中继器遮罩实现方法
前端·ui·html·axure·原型·产品设计
风骏时光牛马9 小时前
智能任务自动化协同AI工作流
前端