html+cssday4TP4V2.0章节幻灯片.pptVIP

外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（@import）外部样式表 样式文件.css 网页2 网页3 网页1 …… 链接（LINK ）外部样式表 使用LINK（链接）标签 : HEAD LINK href=newsyle.css rel=stylesheet type=text/css /HEAD 第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定 第三步：浏览查看各网页 样式文件： newstyle.css Link_Outcss1.html Link_Outcss2.html 演示示例3：使用外部样式表1 使用外部样式表2 引入的样式文件 导入（@import）外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 引入样式表文件 演示示例4：使用外部样式表1 使用外部样式表2 总结 方框属性有哪些常用属性？并分别说明其含义？ 超链接样式有哪几种？ 内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？ * * * CSS样式表 本章任务 美化“宝贝分类”页面 制作并美化“注册”页面 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 本章目标 为什么需要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实现 宋体，字体大小12px 字体大小16px 要实现如下图所示的文本样式，该如何编写？ 常用的样式属性 STYLE type=text/css P { font-size: 12px; f