02_html框架和CSS层叠样式表.pptVIP

HTML框架及CSS层叠样式表 回顾 HTML相关概念 HTML简介 HTML文档结构 HTML标记 文件结构标记 链接标识 表格标记 表单标记 其它标记 img span div p b i 本章目标 HTML框架标记 CSS相关概念及作用 如何在网页中引入CSS CSS基本语法(定义规则) 选择器分类 常用样式 HTML框架标记 HTML中框架标记主要用于划分浏览器窗口 使用 FRAMESET 创建框架 其属性有： Rows 框架上下划分属性 Cols 框架左右划分属性 FRAME 元素的属性包括： Name 该框架名称，为超链接和javascript定位 Src 该框架显示的页面 Noresize 框架是否可以伸缩 Scrolling 是否使用滚动条值为:yes no auto Frameborder 框架是否显示边框，同border一起使用 Marginwidth 框架内页面同框架的宽度距离 Marginheight框架内页面同框架的高度距离 嵌套的框架集 HTML HEAD TITLE嵌套框架/TITLE /HEAD FRAMESET cols=33%, 33%, 34% FRAME src = flowers.jpg FRAMESET rows=40%, 50% FRAME src = x.html FRAME src = y.html /FRAMESET FRAME src = flowers.jpg /FRAMESET /HTML NOFRAMES 元素 HTML FRAMESET COLS=”40%,60%” FRAME SRC=”Flowers.jpg” NAME=”Flowers” SCROLLING=yes FRAMESET ROWS=”60,*” FRAME SRC=”x.html” NAME=”x” SCROLLING=no FRAMEBORDER=no FRAME SRC=”y.html” NAME=”y” NOFRAMES 未显示框架。请单击这里 A href=”main.htm”查看无框架版本/A /NOFRAMES /FRAMESET /FRAMESET /HTML 内嵌框架 IFRAME属性 Name框架名称，为超链接和javascript定位 Width 框架的宽度 Height 框架的高度 Src 框架显示的页面url CSS相关概念 CSS (Cascade Style Sheet)即层叠样式表; CSS作用: 将格式和结构分离 可以方便的更新网页格式和外观 强大的控制页面格式和布局的功能 制作美观的界面 在网页中引用CSS style元素 style属性 link元素 使用style元素 STYLE元素应插入文档的HEAD元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响 html head STYLE TYPE=text/css H1 {color:maroon;} P {color:hotpink; font-family:Arial;} /STYLE /head body h1 博洋 /h1 p 博洋教育 /p /body /html 使用style属性 style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。 HTML HEADTITLE设置属性/TITLE/HEAD BODY P style=color:aqua;font-Style:italic;本段应用了内嵌样/PBR P本段以默认样式显示/PBR SPAN style=color:red不同之处/SPAN吗？ /BODY /HTML 使用link元素 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用link标记链接到这个样式表文件，这个link标记必须放到页面的head区内 HTML HEADTITLE设置属性/TITLE LINK REL=stylesheet HREF=“stylesmine.css” Type=text/css /HEAD BODY h1 博洋 /h1 p 博洋教育 /p /BODY /HTML CSS定义的基本语法 用法： RuleSelector {property:value;property: value; ... } 规则选择器 声明 属性 属性值 样式表选择器