W3cSchool: CSS2参考手册 - 背景与边框详解
需积分: 11 20 浏览量
更新于2024-09-18
收藏 95KB PDF 举报
W3cSchool 的《DIV+CSS2_参考手册》是一本详细介绍CSS(层叠样式表)技术的重要参考资料,特别是在处理HTML元素布局与美化方面。该手册特别关注于CSS2版本中的两个关键特性:背景和边框。
**CSS 背景属性**
1. **background** - 简写属性,允许同时设置背景颜色、图像、重复方式、附着方式和位置。通过这个属性,开发者能够一次性定义丰富的背景效果。
2. **background-color** - 设置元素的背景颜色,支持多种颜色表示法,如RGB(颜色-红绿蓝值)、十六进制(颜色-#RRGGBB)和预定义颜色名(如`transparent`)。
3. **background-image** - 定义背景图像,使用`url`指定图像源,`none`表示没有背景图像。此外,还提供了几种定位方式,如`topleft`、`center`等。
4. **background-repeat** - 控制背景图像的重复方式,有`repeat`(默认,图像按原尺寸填充整个背景区域)、`repeat-x`(沿水平方向重复)、`repeat-y`(沿垂直方向重复)和`no-repeat`(不重复)。
5. **background-attachment** - 设置背景图像是否随文档内容滚动。`scroll`表示跟随滚动,`fixed`使图像固定在视口。
6. **background-position** - 设置背景图像的起始位置,支持百分比和具体位置关键词。
**CSS 边框属性 (border)**
1. **border** - 简写属性,用于一次设定所有边框的宽度、样式和颜色。
2. **border-width** - 分别设置上、右、下、左四条边框的宽度,也可用简写形式。
3. **border-style** - 设置边框样式,包括`none`(无边框)、`hidden`(隐藏)、`dotted`(点线)、`dashed`(虚线)、`solid`(实线)、`double`(双线)、`groove`(沟槽)、`ridge`(脊状)、`inset`(内凹)和`outset`(外凸)。
4. **border-color** - 设置边框颜色,可以设置单个颜色,也可以针对每个边框分别设置。
5. **border-bottom**、**border-left** - 简写属性,分别针对底部和左边的边框设置宽度、样式和颜色。
掌握这些CSS2的基本概念和属性,对于创建出响应式、美观且功能丰富的网页布局至关重要。通过灵活运用背景和边框属性,开发人员能够实现各种视觉效果,提升网站设计的专业性和用户体验。熟练应用这些知识,无论是在网页开发初学者阶段还是高级设计师手中,都能发挥关键作用。
2023-03-04 上传
2013-03-14 上传
2023-03-04 上传
2020-06-05 上传
2018-11-22 上传
2014-08-01 上传
2010-08-08 上传
2013-12-15 上传
2015-12-24 上传
windy_yzh
- 粉丝: 20
- 资源: 2
最新资源
- BottleJS快速入门:演示JavaScript依赖注入优势
- vConsole插件使用教程:输出与复制日志文件
- Node.js v12.7.0版本发布 - 适合高性能Web服务器与网络应用
- Android中实现图片的双指和双击缩放功能
- Anum Pinki英语至乌尔都语开源词典:23000词汇会话
- 三菱电机SLIMDIP智能功率模块在变频洗衣机的应用分析
- 用JavaScript实现的剪刀石头布游戏指南
- Node.js v12.22.1版发布 - 跨平台JavaScript环境新选择
- Infix修复发布:探索新的中缀处理方式
- 罕见疾病酶替代疗法药物非临床研究指导原则报告
- Node.js v10.20.0 版本发布,性能卓越的服务器端JavaScript
- hap-java-client:Java实现的HAP客户端库解析
- Shreyas Satish的GitHub博客自动化静态站点技术解析
- vtomole个人博客网站建设与维护经验分享
- MEAN.JS全栈解决方案:打造MongoDB、Express、AngularJS和Node.js应用
- 东南大学网络空间安全学院复试代码解析