CSS与DIV网页布局技巧：打造美观页面
需积分: 10 32 浏览量
更新于2024-07-24
1
收藏 1.06MB PDF 举报
精通CSS和DIV网页样式与布局是现代Web开发中不可或缺的核心技能之一。CSS全称为Cascading Style Sheets（层叠样式表），它是一种用于控制网页外观和布局的语言，使得开发者可以将样式信息与HTML内容分离，提高代码的可维护性和灵活性。
CSS的主要作用是实现网页的样式管理，包括字体、颜色、布局、间距等各个方面。它通过选择器（如标签选择器、类选择器、ID选择器等）来精确地定位元素，并使用属性和值来指定相应的样式规则。通过“层叠”原则，高优先级的样式会覆盖较低优先级或内部定义，除非使用了`!important`声明来强制应用样式。
要将CSS应用于网页，有三种常见的方法：
1. 链入外部样式表文件：这是最常见的方法，通过HTML的`<link>`标签引用外部`.css`文件，如：
```html
<head>
<title>titleofarticle</title>
<link rel="stylesheet" href="http://www.dhtmlet.com/rainer.css" type="text/css">
</head>
```
在XML文档中，`<xml-stylesheet>`标签用于同样的目的。
2. 定义内部样式块对象：将样式代码直接嵌入到HTML文档的`<style>`标签内，这样样式只对当前文档生效，示例如下：
```html
<html>
<style type="text/css">
/* ... 样式规则 ... */
</style>
<body>
<!-- ... 页面内容 ... -->
</body>
</html>
```
注意将`<style>`标签的`type`属性设为"text/css"，以便兼容不支持CSS的浏览器。
3. 内联样式：直接在HTML元素上使用`style`属性定义样式，如：
```html
<p style="margin-left:0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p>
```
内联样式具有最高的优先级，但如果过度使用，可能会导致代码难以管理和维护。
理解并熟练运用CSS和DIV进行网页布局，能够帮助创建出响应式、美观且功能丰富的网站。DIV（Document Object Model）是HTML中的一个容器元素，用于划分和组织网页结构，通过CSS的`position`、`display`等属性，可以实现各种复杂的布局效果，如浮动布局、网格布局、定位布局等。
掌握CSS和DIV，不仅能够提升页面的视觉吸引力，还可以优化用户体验，提升网站的可用性和SEO排名。对于前端开发人员来说，这是构建现代Web应用的基础技能之一。
16
对应的脚本特性为 backgroundImage。请参阅我编写的其他书目。
示例：
code { background-image: url("comet.jpg"); }
blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg"); }
br { background-image: url(http://Fred.com/ImageFile/Q.gif); }
body { background-image: none; }
CSS Positioning Properties 定位属性
Positioning Properties
属性
CSS Version
版本
Description
简介
position
CSS2 检索对象的定位方式
z-index
CSS2 检索或设置对象的层叠顺序
top CSS2
检索或设置对象与其最近一个定位的父对象顶部相
关的位置
right CSS2
检索或设置对象与其最近一个定位的父对象右边相
关的位置
bottom CSS2
检索或设置对象与其最近一个定位的父对象底边相
关的位置
left CSS2
检索或设置对象与其最近一个定位的父对象左边相
关的位置
CSS Dimensions Properties 尺寸属性
Dimensions Properties
属性
CSS Version
版本
Description
简介
height CSS1 检索或设置对象的高度
max-height CSS2 设置或检索对象的最大高度
min-height
CSS2 设置或检索对象的最小高度
width
CSS1 检索或设置对象的宽度
max-width CSS2 设置或检索对象的最大宽度
min-width CSS2 设置或检索对象的最小宽度
CSS Outlines Properties 轮廓属性
Outlines Properties
属性
CSS Version
版本
Description
简介
outline CSS2 复合属性。设置或检索对象外的线条轮廓
outline-color CSS2 设置或检索对象外的线条轮廓的颜色
outline-style
CSS2 设置或检索对象外的线条轮廓的样式
剩余169页未读，继续阅读
点击了解资源详情
点击了解资源详情
点击了解资源详情
2011-04-06 上传
u011955534
- 粉丝: 79
- 资源: 38
我的内容管理
展开
最新资源
- Angular实现MarcHayek简历展示应用教程
- Crossbow Spot最新更新 - 获取Chrome扩展新闻
- 量子管道网络优化与Python实现
- Debian系统中APT缓存维护工具的使用方法与实践
- Python模块AccessControl的Windows64位安装文件介绍
- 掌握最新*** Fisher资讯，使用Google Chrome扩展
- Ember应用程序开发流程与环境配置指南
- EZPCOpenSDK_v5.1.2_build***版本更新详情
- Postcode-Finder：利用JavaScript和Google Geocode API实现
- AWS商业交易监控器：航线行为分析与营销策略制定
- AccessControl-4.0b6压缩包详细使用教程
- Python编程实践与技巧汇总
- 使用Sikuli和Python打造颜色求解器项目
- .Net基础视频教程：掌握GDI绘图技术
- 深入理解数据结构与JavaScript实践项目
- 双子座在线裁判系统：提高编程竞赛效率
