cssdi由v网页布局-limengfan.pptVIP

主讲人：21433 李梦凡 * 斯蒂芬 CSS+DIV网页布局 HTML div 标签 HTML div 标签 定义和用法 div 可定义文档中的分区或节（division/section）。 div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。 HTML div 标签 用法 div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div 固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。 可以对同一个 div 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。 CSS内容介绍 CSS设置方式 CSS语法 样式规则注释和样式规则优先级 CSS的属性分类介绍 CSS概述 CSS概念 CSS是Cascading Style Sheets 的缩写，中文的意思是层 叠样式表或级联样式表。 CSS功能简介 CSS可以用来精确的控制页面里 每一个元素的字体样式、 背景、排列方式、区域尺寸、边框等。使用CSS能够简 化网页的格式代码，加快下载显示的速度，外部链接样 式可以同时定义多个页面，大大减少了重复劳动的工作 量。 CSS设置方式 1、内联样式 body h1 style=font-family:宋体;font-size:12px;color:blue这里是h1/h1 /body 特点：灵活，简单方便。 CSS设置方式 2、嵌入样式 head style type=text/css h1 {font-family:宋体;font-size:12pt;color:blue} /style /head body h1在这里使用了H1标记/h1 /body 特点：一个样式可以在一个页面多次应用。 CSS设置方式 3、外部样式 head link rel=stylesheet href=h1.css type=text/css /head body h1在这里使用了H1标记/h1 /body h1.css: h1 {font-family:宋体;font-size:12pt;color:blue} 特点：需要有一个外部的样式表文件(.css)，可以为多个网页所共同引用，即减少代码，又可以做到统一页面风格。 CSS语句格式 css语句格式如下: selector {property: value} (选择符 {属性：值}) 选择符的作用：限制样式作用的范围 p {font-size:15} 当属性的值是多个单词组成时，必须在值上加引号 h1 {font-family: Courier New} 如果需要对一个选择符指定多个属性时，使用分号隔开。 p {font-size:15;color:red} 如何理解CSS盒子模型 * / 12 CSS盒子模型 什么是CSS的盒子模式呢？为什么叫它是盒子？ 先说说我们在网页设计中常听的属性名： 内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 * / 12 CSS盒子模型 不用CSS排版 img src=01.jpg width=100 height=80 align=middle / img src=02.jpg width=100 height=80 align=middle / img src=03.jpg width=100 height=80 align=middle / img src=04.jpg width=100 height=80 align=middle / img src=05.jpg width=100 height=80 align=middle / * / 12 CSS盒子模型 使用CSS排版 style type=text/css #photoList img{height:80;width:100;margin:5px auto;} /style div id=photoList img src=01.jpg / img src=02.jpg / img src=03.jpg / img src=04.jpg / img src=05.jpg / /div CSS+DIV网页设计与制作 * / 12 CSS+DIV网页设计与制作 * / 12 CSS+DI