DIVCSS网页布局第一课.ppt

Div Css网页布局第一课CSS样式基础 主讲 张鹏邮箱 seo100 目标 什么是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是CascadingStyleSheets 层叠样式表 的简称 更多的人把它称作样式表 顾名思义 它是一种设计网页样式的工具 借助CSS的强大功能 网页将在你丰富的想象力下千变万化 实际上CSS的代码都是由一些最基本的语句构成的 CSS可以做为html xhtml xml的样式控制语言 二 CSS语法结构选择符 属性 值 例如 body font size 12px 参数说明 1 选择符 Selector 指明这组样式所要针对的对象 可以是一个XHTML标签 如body h1 也可以是定义了特定的id或class的标签 如 main选择符表示选择 即一个被指定了main为id的对象 2 属性 proprety 选择符的样式属性 如颜色 大小 定位 浮动方式等 3 值 value 是指属性的值 4 同时可以为一个选择符定义多个属性 每个属性之间用分号 分隔 CSS长度单位 CSS颜色单位 一般最常用的是十六进制 三原色单位的原理 红 r 绿 g 蓝 b 混合而成 每个值域在0 255之间 CSS控制字体 CSS控制字体 CSS在网页的中应用方式 三 网页中加CSS的方式有四种 1 内联式样式表 直接写在现有的标记中 如 这里文字是红色的2 嵌入式样式表 使用 标签嵌入到HTML文件的头部中标记内 如 用于当浏览器不支持样式表时 不会将样式表内容显示出来 CSS在网页的中应用方式 3 外部链接式 样式表 将样式表写在一个独立的 css文件中 然后在页面head区标记内用标签调用它 如 4 导入式 样式表 导入式样式表与链接式样式表的功能基本相同 只是语法和动作方式上略有不同 同样也将导入样式代码写在标记内 语法 importurl basic css CSS布局与传统HTML布局比较 1 传统HTML布局缺点 HTML标记控制布局繁琐 修改麻烦每个页面都要单独控制 网站更新工作量大2 CSS布局优点 CSS样式功能强大 布局灵活 修改方便多个页面可以通过一个css文件控制 网站更新方便快捷 CSS选择符类型 1 类型选择符 就是HTML文档中的元素 作用于html标记 如 p 属性 值 2 类选择符 可以自己定义样式 应用于一个或多个网页元素 类在网页中可以出现多次 用于定义重复的样式 类以英文 开头 后面的名字自己定义 类定义后还需要在网页中加入class 类名称 加以调用 如 warning 属性 值 3 ID选择符 与类基本相似 只是以英文 开头 因为ID具有唯一性 所以在网页中只能出现一次 用于定义只出现一次的样式 如 main 属性 值 CSS样式的特点 1 继承 网页中子元素 将继承父元素的样式例如 要控制段落p中的文字大小 可以直接给body标记加样式 2 层叠 网页中子元素定义了与父元素相同的样式 则子元素的样式将覆盖掉父元素的样式 后面定义的样式 会覆盖前面定义的样式 CSS样式的优先权 四种方式的优先权 内联式 行内样式 内嵌式 内部式 链接式 外部式 import导入式CSS优先权 就近原则作用范围越小 优先权越高 离要修饰目标越近的样式优先权越高 CSS样式的优先权 选择符优先权 行内 id class 类型选择符我们可以采用 important语法