CSS样式表ppt课件

1、CSS样式表,什么是CSS样式表（Cascading Style Sheet）,网页制作一种新技术，能将网页的内容与样式分开， 能用最简单的代码控制网站的整体风格，最大限度 提高网页制作的效率,搜狐网站,搜狐一,搜狐二,美食世界,美食1,美食2,体验样式表,为什么需要CSS样式表,演示示例1：演示能换皮肤的页面,HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服,内容相同,外观不同,为什么需要CSS样式表,样式表能实现内容与样式的分离，方便团队开发,程序员写代码,美工做样式,内容与样式和谐统一的完整网页,样式表的基本语法,样式表的基本结构, h1

2、color:red; font-size:30px; font-family:隶书; ,声明文档样式表结束,文档样式表开始，类型为CSS样式,样式规则,样式符,样式规则 h1 color:red; font-size:30px; font-family:隶书;,其中“样式符”表示要定义样式的类型，样式符可以包括HTML标签符、用户自主义类class或用户自定义ID,样式表的基本语法, 样式规则 h1 color:red; font-family:隶书; font-size:24px; 静夜思 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 ,本页面中所有的P标签都应用了此样式,所有的段

3、落都采用P样式，保证风格统一,用分号隔开,样式符,如何编写此样式?字体类型为律书、大小24px,样式表的三类应用方式,内联式样式表 内联式样式表使用格式如下： 外联式样式表 嵌入式样式表, 样式规则 ,如果希望本网页内的所有同类标签都采用统一样式，这时应采用内联式样式。,内联式样式表, P font-family:隶书; font-size:18px; color:#FF0000; 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 ,所有的段落都采用 P 样式，保证样式统一,外部样式表文件,如果希望一个网站中多个页面的样式保持一致， 如何解决？,使用外部样式表文件样式表可以解决,外部样式

4、表文件,链接（LINK ）外部样式表,链接（LINK ）外部样式表,使用LINK（链接）标签 : ,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页绑定,第三步：浏览查看各网页,演示示例3：使用外部样式表1 使用外部样式表2,引入的样式文件,嵌入样式表,如果希望某段文字和其他段落文字显示风格不一样， 该如何解决？,使用嵌入样式表可以解决,嵌入样式表, 设置属性 这个段落应用了样式 这个段落按默认样式显示 ,为标签p指定样式,本段标签采用了行内样式,嵌入样式表, 静夜思 作者：李白 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。,行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用,本段标签采用了行内样式,CSS的优先级 层叠样式表中“层叠”的意思是指在同一个HTML文档中可以有多层样式表存在，不同层次的样式表根据其所在的位置拥有不同的优先级，优先级越高，在显示时就被越后采用。换句话说，一个网页对象(文本、图片或者表格等)可以被多层的样式表所修饰，但是最终它会以优先级最高的样式表所定义的格式来显示。 嵌入式内联式外联式,现在你觉得CSS样式表都有些什么优点，什么时候用内联式样式表，什么