02第二讲 CSS编程技术.ppt

第二讲CSS编程技术 第3章CSS编程技术 温故 HTML标记概述图像标记是什么 超级链接标记是什么 分行 分段 字体标记是什么 有序列表 无序列表 标题是什么 表格中常用标记是什么 表单标记是什么 常用属性有哪些 常用输入标记有哪些 框架窗口标记如何使用 作业中的问题用于标记的符号不能是全角或汉字符号 如 不能写成 h1 知新 CSS样式简介HTML中使用样式的方法行内样式 style属性的使用内嵌样式 样式块外部样式 独立样式文件样式选择符组选择符CLASS选择符ID选择符常用的CSS属性定位相关属性 设置属性h1 font size 18px color 6600CC h1改变了样式h2未改变样式 3 1什么是CSS样式 CSS CascadingStyleSheet 一种样式定义语言 为HTML中的标记定义样式 CSS的优点 页面内容和显示样式分离 便于网站风格的统一 方便网站维护可以重用样式表 根据样式代码的位置 分为三种 行内样式 标记的style属性内嵌样式 style样式块外部样式 独立样式文件 3 3HTML中使用CSS的方法 3 3 1行内样式 Style属性的使用 单价 3999剩余时间 成交结束新旧程度 全新所在地 北京宝贝数量 5件浏览量 220次另送价值50元的充电器套装 一个充电器 两节充电电池 如果希望某段文字和其他段落的文字显示风格不一样 可采用 行内样式 行内样式使用标记的style属性定义 行内样式格式 应用样式的内容 正文 标题1 属性以 名 值 对的形式出现 名与值之间以冒号 分隔 各对之间以分号 分隔 内嵌样式div background color CCCCFF color 0000FF span font size 16px color FF0000 3 3 3内嵌样式 style样式块 ASP及其应用机械工业出版社未用样式XML及其应用机械工业出版社 行内样式局限于某个标签 若希望本网页内的所有同类标签都采用统一样式 应采用内嵌样式 内嵌样式一般在标记内嵌入标记 3 3 2外部样式 独立样式文件 样式文件P 不管是行内样式还是内嵌样式都只能为一个Html页面服务 若要使样式控制多个HTML文件 则采用外部样式 外部样式是将样式放在独立的文件中 即样式表文件 通常以css作为类型名 在使用该样式的HTML中通过标记来链接外部样式表文件 链接外部样式表的步骤 使用LINK 链接 标签 语法 第一步 创建样式表文件newstyle css 第二步 把样式文件和网页关联 样式文件 newstyle cssP 第三步 浏览查看各网页 3 2CSS样式选择符 样式选择器 CSS样式选择符浏览器在解析标记时 会根据标记名或标记中的class属性或id属性到样式表中选择样式 因此样式表中的这些标记或属性名又称为CSS的样式选择符 样式选择符的种类标记选择符 如以前使用的div span p等组选择符CLASS类选择符ID选择符 组选择符 将样式规则同时应用于多个标记 则可以将多个选择符用逗号 隔开再定义样式规则 如 文件3 4 cssspan p h1 color red font size 16px 文件3 3 html组选择器H1标题H2标题P段落span标记 myinput border 1pxsolid border color D4BFFF color 2A00FF 用户名密码 应用类选择符 class 类名 类选择器的定义格式为 类名 样式规则 类选择符 标记选择符为特定标记定义样式 而class选择符可以独立于某个具体标记定义 标记在选择样式时可以使用class属性 在定义class选择符时 选择符名前要加圆点 标识 title color blue font size 24px span err color red font size 16px ID选择符测试P标记中err选择符不起作用SPAN标记中err选择符起作用 应用ID选择器 id ID名 ID选择符 与class选择符应用范围类似 在定义是ID选择符用井号 标识 可通过联合定义来使用 即在ID选择符的前面附加标记符 如 span err color red 表示有被span使用时选择符err才有效 ID选择符一般定义 ID选择符联合定义 伪类定义超链接样式A hover 鼠标悬停时的样式属性A visited 链接地址已被访问过时的样式属性A link 对象在未被访问前的样式属性A active 在鼠标点击与释放之间时的样式属性伪对象选择符 first letter 补充 特殊的选择器 伪类与伪对象 伪类示例 A 设置超链接不带下划线 color blue text decoration none 文本修饰 无 A hover 鼠标在超链接上方停留时 带下划线 color red text decoration underline 文本修饰 下划线 HEAD 俺是超链接 移过来我就显示下划线 特殊的伪类 A代表超链接 hover代表鼠标悬停 3 4常用的CSS属性 文字相关属性color 颜色 十六进制RGB颜色 或颜色名 font family 字体font size 字大小 pt 点 px 像素 font weight 字体的粗细 bold light extra bold font style normal正常 italic斜体text align 字体对齐方式 center left right text decoration 字体装饰 underline 下划线 line through中间线 显示属性displaynone 不显示信息block 将内容作为一段显示 对象之后添加新行 div默认 inline 将内容作为一行显示 对象显示完后不换行 span默认 3 4常用的属性设置 背景属性设置 backgroundbackground imagebackground repeatbackground position定位相关属性 positionabsolute 绝对定位 以上一级元素左上角为原点relative 以自己默认位置为原点 给定偏移量 mybg background image url falali jpg background repeat no repeat background position center mypos font size 16px font weight bold line height 22px color FF6600 left 30px top 50px position absolute 背景与定位应用实例 法拉利是世界上最闻名的赛车和运动跑车的生产厂家 菲亚特公司拥有该公司50 股权 但该公司却能独立于菲亚特公司运营 法拉利汽车大部分采用手工制造 因而产量很低 年产量只有4 000辆左右 公司总部在意大利的摩德纳 它创建于1929年 创始人是世界著名赛车手 划时代的汽车设计大师恩佐 法拉利 这位被誉为 赛车之父 的意大利人 嗜车如命的血液从小就在他的身上沸腾 1898年出生于意大利北部的莫迪那 从小热爱汽车冒险 13岁便开始独自驾车 1919年法拉利参加了他生命中的第一次汽车比赛 表现出色 随后被阿尔法 罗米欧公司吸收为阿尔法 罗米欧车队的车手 外部样式文件 CSS样式混和使用规则 合并样式文件使用 import语句合并样式文件行内样式表 内嵌样式表 外部样式表各有优势 实际的开发中常常需要混合使用 有关整个网站统一风格的样式代码 放置在独立的样式文件 css某些样式不同的页面 除了链接外部样式文件 还需定义内嵌样式某张网页内 部分内容 与众不同 采用行内样式对于某个HTML标签 1 如果有多种样式 如果规定的样式没有冲突 则叠加 2 如果有冲突 则最先考虑行内样式表显示 如果没有 再考虑内嵌样式显示 如果还没有 最后采用外面样式表显示 否则就按HTML的默认样式显示 内嵌样式 行内样式 某个HTML标签 小结 HTML中使用样式的方法行内样式 style属性的使用内嵌样式 样式块外部样式 独立样式文件样式选择符单标记选择符组选择符CLASS选择符ID选择符作业1查阅几种CSS样式属性 并举例说明其功能 作业2 使用外部独立样式表的形式 设计两个风