[计算机软件及应用]HTML_02.pptVIP

回顾 如何在页面显示：5 3 = true 以下标记的含义：A HREF=“../A/D.HTML#BOT”…/A TH和TD的区别 INPUT有几种TYPE可选，如何设置单选 框架相关标记有哪些 本章目标 了解CSS的概念 理解选择器 掌握常用样式 理解页面布局 第一部分 了解CSS的概念 理解选择器 掌握常用样式 理解页面布局 CSS概念 CSS（Cascading Style Sheet ）：“层叠样式表”或“级联样式表” 是一组格式设置规则，用于控制Web页面的外观 通过使用CSS，可将页面的内容与表现形式分离：页面内容存放在HTML文档中，而用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分 CSS应用 HTML标签的外观样式比较单一 页面色彩不生动 样式修改不方便 样式表的作用相当于华丽的衣服 CSS优点 能实现内容与样式的分离，方便团队开发；统一网站风格 CSS语法 CSS语法根据应用方式不同分为： 内嵌样式表：一般在页面头部通过style标签定义 行内（嵌入）样式表：使用各种HTML标签的style属性定义 外部样式表文件：单独定义css文件，在页面中使用link标记或import指令引入 CSS语法：内嵌样式表 CSS语法：行内（嵌入）样式表 CSS语法：外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（@import）外部样式表 CSS语法： 链接外部样式表 HEAD LINK href=newsyle.css rel=stylesheet type=text/css /HEAD CSS语法： 导入外部样式表 HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 第二部分 了解CSS的概念 理解选择器 掌握常用样式 理解页面布局 选择器类型 CSS选择器分为 标签选择器（元素选择器）：以HTML标签的名字作为样式应用依据 类选择器：以标签的CLASS属性值作为依据 ID选择器：以标签的ID属性值作为依据 标签选择器 类选择器 如果希望其他的标签也能采用P标签的样式，则可以采用类选择器 语法： 使用标签的CLASS属性应用样式，如：H2 CLASS=“red”……/H2 ID选择器 如果希望为某一特定标签设置样式，则可以使用ID选择器 语法： 使用标签的ID属性应用样式，如：H2 ID=“red”……/H2 选择器优先级 如果对同一元素使用了三种选择器，如下： 则以下代码出现何种结果：A ID=“red” CLASS=“blue”……/H2 特殊选择器 复合：标签选择器可以和ID选择器、类选择器复合，如：P.aa{……}//CLASS为aa的P标记 组合：如果若干个选择器具有相同样式，则可以组合使用，如下：a, #dd, .ss{……} 嵌套：在某个选择器内再设置选择器，如：#di p a{……}//在ID为“di”的元素内的P标记里的a标记 特殊动作：一般用于A标记，如：A:hover{……}//当鼠标移动到A标记上A:visited{……}//当A所链接的地址已经访问过A:active{……}//当A标记获得焦点时 选择器优先级 如果对同一元素使用了三种选择器，如下： 则以下代码出现何种结果：A ID=“red” CLASS=“blue”……/H2 第三部分 了解CSS的概念 理解选择器 掌握常用样式 理解页面布局 常用CSS样式属性：字体 常用CSS样式属性：文本 常用CSS样式属性：边框 常用CSS样式属性：其它 第四部分 了解CSS的概念 理解选择器 掌握常用样式 理解页面布局 页面布局 网站的布局是一个网站的基础 常用布局方式： 表格：定位相对准确，与浏览器无关，适用于简单分割，如页面主体框架 DIV：定位绝对准确，使用灵活，与浏览器有一定关系，适合于较复杂的布局方式 使用DIV进行页面布局 盒子模型 布局示例 总结 了解CSS的概念 理解选择器 掌握常用样式 理解页面布局 IT@ANY * 第二课 CSS和层 IT@ANY 内容相同 外观不同 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 STYLE type=text/css P { font-family:隶书; font-size:18px; color:#FF0000; } /STYLE /HEAD …… P床前明月光，/P P疑是地上霜。/P P我是郭德刚，/P P低头思故乡。/P …… 样式规则 所有的段落都采用 P 样式，保证样式统一 选择符 样式表 HTML HEAD TITLE设置属性/TITLE /HEAD BOD