第5章-html基础.pptVIP

外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（@import）外部样式表 样式文件.css 网页2 网页3 网页1 …… 链接（LINK ）外部样式表 使用LINK（链接）标签 : HEAD LINK href=newsyle.css rel=stylesheet type=text/css /HEAD 第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定 第三步：浏览查看各网页 样式文件： newstyle.css 引入的样式文件 导入（@import）外部样式 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 引入样式表文件 谢 谢！ 祝各位同学学有所获！ 预祝大家事业有成！ CSTP HTML讲堂——进阶五 知识回顾 下面由今天的当职同学进行课程知识回顾 让我们欢迎 知识回顾 表单中提交数据的方法有那两种及其区别？ 表单里有哪些常用的表单元素？ 创建一个框架页面至少需要哪两个标签？ target设定目标资源所要显示的窗口，其取值可以为哪些？ 简述创建一个多框架页面所需的主要步骤。 本章目标 1.创建统一外观的字体文本 3.创建个性化的表格 2.创建无下划线的超连接样式 4.创建个性化的表单 为什么需要CSS样式表 演示示例1：演示能换皮肤的页面 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 内容相同 外观不同 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 样式表的基本语法 样式表的基本结构 STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} …… /STYLE 声明文档样式表结束 文档样式表开始，类型为CSS样式 样式规则 选择器 样式规则 P {color:red; font-size:30px; font-family:隶书;} 属性 属性的值 样式表的基本语法 HTML HEAD TITLE样式规则/TITLE STYLE type=text/css P { color:red; font-family:隶书; font-size:24px;} /STYLE /HEAD BODY H2静夜思/H2 P床前明月光，/P P疑是地上霜。/P P举头邀明月，/P P低头思故乡。/P /BODY /HTML 本页面中所有的P标签都应用了此样式 所有的段落都采用P样式，保证风格统一 用分号隔开 选择器 如何编写此样式?字体类型为律书、大小24px 样式表的基本语法 STYLE type=text/css .red { color:red; font-family:隶书; font-size:24px; } …… /STYLE 如果希望其他的标签也能采用P标签的样式，怎么办？ 其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。 类样式(class) .类名 样式规则 样式表的基本语法 HEAD TITLE样式规则/TITLE STYLE type=text/css .red { color:red; font-family:隶书; } /STYLE /HEAD BODY H2 class=red静夜思/H2 P class=red床前明月光，/P P class=red疑是地上霜。/P P我是郭德刚，/P P class=red低头思故乡。/P /BODY CLASS类选择器 为类选择器定义的样式规则 应用类选择器 class＝”类名“ H2和P标签要应用同一样式 如何实现这样的样式效果？字体类型都为隶书 常用的样式属性 文本属性 文本属性 说 明 font-size 字体大小 font-family 字体类型 font-style 字体样式 color 设置或检索文本的颜色 text-align 文本对齐 使用font-size、font-family、 color实现 宋体，字体