CSS样式表.ppt

行内（嵌入）样式表 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 演示示例3：使用外部样式表1 使用外部样式表2 引入的样式文件 导入（@import）外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 引入样式表文件 演示示例4：使用外部样式表1 使用外部样式表2 总结 方框属性有哪些常用属性？并分别说明其含义？ 超链接样式有哪几种？ 内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？ * * * CISSST ? 2012 西安软件服务外包学院.All rights reserved. Xian institute Service Software Science Technology CISSST 回顾 表单中提交数据的方法有哪两种及其区别？ 创建一个登录界面需要哪些表单元素？ target属性取值可以为哪些及其含义？ 预习检查 简述样式表的基本结构？ 常用的样式属性有哪些？ 本章任务 美化“宝贝分类”页面 制作并美化“注册”页面 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 为什么需要CSS样式表 HTML标签的外观样式比较单一 页面色彩不生动 样式修改不方便 样式表的作用相当于华丽的衣服 演示示例1：演示能换皮肤的页面 内容相同 外观不同 为什么需要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: