第七章 div+css.pptVIP

* 网 页 设 计 与 制 作 -----李茂 第七章 div+css 本章逻辑结构 7.1 什么是样式表 7.2 如何将样式表加入您的网页 7.3 样式表语法 7.4 div 7.5 盒子结构 本章要点： 样式表css 如何定义样式表 如何调用样式表 Div的定义 如何使用div 7.1：什么是样式表 CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 7.2：如何将样式表加入您的网页 ： 1：链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下： headtitletitle of article/titlelink rel=stylesheet href=“/rainer.css” type=“text/css”/head2：定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的HTML和BODY标记之间插入一个STYLE.../STYLE块对象。 定义方式请参阅样式表语法。示例如下： htmlstyle type=text/css!--body {font: 10pt Arial}h1 {font: 15pt/17pt Arial; font-weight: bold; color: maroon}h2 {font: 13pt/15pt Arial; font-weight: bold; color: blue}p {font: 10pt/12pt Arial; color: black}--/stylebody 请注意，这里将style对象的type属性设置为“text/css”，是允许不支持这类型的浏览器忽略样式表单。 3：内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： p style=margin-left: 0.5in; margin-right:0.5in这一行被增加了左右的外补丁p 7.2：如何将样式表加入您的网页 ： 7.3：样式表语法 (CSS Syntax) Selector { property: value } 参数说明： Selector?--?选择符 property?:?value?--?样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开 1：属性：不同的标签，不同的属性 2：选择符： 主要有两种选择 （1）id选择符：ID Selectors 语法： ?#sID ?说明： ?以文档目录树（DOM）中作为对象的唯一标识符的ID作为选择符。 ?示例： ?#note { font-size:14px; width:120px;} （2）：类选择符：Class Selectors 语法： ? 7.3：样式表语法 (CSS Syntax) E1.className ?示例： ?div.note { font-size:14px; } /* 所有class属性值等于（包含）note的div对象字体尺寸为14px */ .dream { font-size:14px; } /* 所有class属性值等于（包含）note的对象字体尺寸为14px */ 7.4div 一：CSS 布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的 GIF图片来 控制文布局版块的间距；而现在则采用层(div)来定位，通过层的 margin,padding,border 等属性来控制版块的间距。 1.定义DIV 分析一个典型的定义 div 例子： #sample{ MARGIN: 10px 10px 10px 10px; PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2px solid; BORDER-RIGHT: #CCC 2px solid; BORDER-BOTTOM: #CCC 2px solid; BORDER-LEFT: #CCC 2px solid; BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: