CSS与DIV网页布局技巧：打造美观页面

需积分: 10 122 浏览量更新于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应用的基础技能之一。

对应的脚本特性为 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页未读，继续阅读

u011955534

粉丝: 79
资源: 38

CSS与DIV网页布局技巧：打造美观页面

精通CSS.DIV网页样式与布局17-20

精通CSS.DIV网页样式与布局_00002.pdf

《精通CSS.DIV网页样式与布局》光盘实例源码

精通CSS.DIV网页样式与布局配套视频教程 16

精通CSS.DIV网页样式与布局视频01

《精通CSS.DIV网页样式与布局》书中源码

精通CSS.DIV网页样式与布局配套视频教程 18

精通CSS.DIV网页样式与布局 第1课 初识CSS.rar

《精通CSS.DIV网页样式与布局》配套视频教程+实例

精通CSS.DIV网页样式与布局旅游观光实例

最新资源

精通CSS.DIV网页样式与布局第1课初识CSS.rar