DIVCSS网页布局第一课.ppt

—高级网页设计人才培训专家! 主讲：张鹏 —高级网页设计人才培训专家! —高级网页设计人才培训专家! 主讲：张鹏 —高级网页设计人才培训专家! 主讲：张鹏 Div+Css网页布局第一课CSS样式基础 主讲：张鹏邮箱：seo100@126.com 目标 什么是Web标准，Web标准的构成 采用标准的好处 理解表现和结构分离 什么是CSS，CSS语法 传统html布局的缺点，CSS的优点 CSS常用属性、CSS控制文字与链接 什么是web标准 一、什么是web标准? web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。 包含我们所熟悉的HTML、XTHML、Javascript、以及CSS等。 二、Web标准的目的? 在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器或终端设备向最终户展示信息内容。 采用标准的好处 1、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的文件尺寸。 2、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分离。只要简单的修改几个CSS文件就可以重新设计一个有成千上万页面的站点。 3、降低网站流量的费用。带宽要求降低（代码更简洁），成本降低。 4、更容易被搜寻引擎有哪些信誉好的足球投注网站到。提高网站在百度或google中的排名。 5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、有哪些信誉好的足球投注网站机器人、打印机、电冰箱等等。 Web标准的构成？ 四、Web标准的构成？ Web标准主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。 理解表现和结构分离 web标准的好处之一是“理解表现和内容分离”----那这到底是什么意思呢？ 首先我们必须先明白一些基本的概念： 内容、结构、表现和行为。 1、内容：就是制作者放在页面内真正想要让访问者浏览的信息 2、结构：使内容更加具有逻辑性和易用性[类似于：1级2级标题、正文、列表等把它们称为结构] 3、表现：用于修饰内容的外观的样式的东西称为表现。 4、行为：对内容的交互及操作效果，如通过javascript判断表单提交等 CSS简介 一、概念：CSS是Cascading Style Sheets（层叠样式表）的简称。 更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在你丰富的想象力下千变万化。实际上CSS的代码都是由一些最基本的语句构成的。 CSS可以做为 html，xhtml，xml的样式控制语言 二、CSS语法结构 选择符 { 属性: 值 } 例如：body{font-size:12px;} 参数说明： 1、选择符（Selector）：指明这组样式所要针对的对象。可以是一个XHTML标签，如body,h1；也可以是定义了特定的id或class的标签，如#main选择符表示选择div id=main,即一个被指定了main为id的对象。 2、属性（proprety）：选择符的样式属性，如颜色、大小、定位、浮动方式等。 3、值（value）：是指属性的值。 4、同时可以为一个选择符定义多个属性，每个属性之间用分号“;”分隔 CSS 长度单位 相对长度单位 说明 em 相对于当前对象内文本的字体尺寸 px 像素（Pixel）推荐使用 绝对长度单位 说明---基本上用不到 in 英寸 cm 厘米 mm 毫米 pt 点（Point） CSS 颜色单位 颜色单位 说明 十六进制 如： color:#ff0000 颜色名称 如： color:red 三原色单位 如： rgb(255,0,0) 一般最常用的是十六进制，三原色单位的原理【红（ r ） , 绿（ g ） , 蓝 (b) 】混合而成。每个值域在 0 － 255 之间 CSS控制字体 功能 语法 设置字号 font-size:12px 设置字色 color:#00000 设置字体 font-family:”黑体” 设置行高 line-height:150% line-height:1.5em 设置字体的粗细 font-weight : normal [正常] bold [粗体] CSS控制字体 功能 语法 设置字体样式 font-style : normal [正常] italic [斜体 ] oblique[斜体 ] 修饰文字 text-decoration:none[正常]underline[下划线] overline[上划线] line-through[删除线] 字符间距 letter-spacing:normal[默认] length [长度单位] 单词间距 word-spacing:normal[默认] length