《CSS教学课件》第03章 CSS样式表.PPTVIP

内嵌样式表 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 BODY P style = color:red;font-size:30px;font-family:隶书; 这个段落应用了样式 P 这个段落按默认样式显示 /BODY /HTML 为标签p指定样式 本段P标签采用了行内样式 行内（嵌入）样式表 BODY style= background-color:#CCCCCC PIMG src=libai.jpg width=140 height=170 align=left/P H2静夜思/H2 H3作者：李白/H3 P style=color:#FF0000; font-size:18px; font-family:隶书; border-bottom-style:dashed 床前明月光，BR 疑是地上霜。BR 我是郭德刚，BR 低头思故乡。/P 行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用 本段P标签采用了行内样式 外部样式表文件 如果希望一个网站中多个页面的样式保持一致， 如何解决？ 使用外部样式表文件样式表可以解决 外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（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 引入的样式文件 导入（@IMPORT）外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 引入样式表文件 总结 方框属性有哪些常用属性？并分别说明其含义？ 超链接样式有哪几种？ 内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？ 谢谢聆听！ * s * 讲解要点： * CSS样式表 回顾 表单中提交数据的方法有那两种及其区别？ 创建一个登录界面需要哪些表单元素？ target属性取值可以为哪些及其含义？ 预习检查 简述样式表的基本结构？ 常用的样式属性有哪些？ 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 为什么需要CSS样式表 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/cs