CSS样式教程-实现网页编程无压力.ppt

CSS样式教学 主　　讲：许磊 办学宗旨：以人为本，育技能人才 发展目标：以质量创教育品牌 校　　规：以法制校，以德育人 校　　训：小胜凭智，大胜靠德；认真做事，诚信做人 校　　风：成人第一 ，学习第一，工作第一 教　　风：严谨治学，和谐施教，悉心育人 学　　风：勤学苦练，博采众长，一专多能 用人机制：重用能人，培养新人，消除闲人，淘汰庸人 创业原则：同心、同德、同向、同利、同乐 人才观念： 有德有才是正品，有德无才是次品 无德无才是废品，无德有才是毒品 工作作风：诚实守信、服从命令、忍受不公、尽善尽美、善始善终 善翔精神：艰苦创业的亮剑精神，合作包容的团队精神，锲而不舍的执着精神 第1章 CSS样式表 1.1 CSS带来的好处 1.2 认识CSS。 1.2.1 CSS样式的说明、规则及特征 1.2.2 CSS分类 1.2.3 css中常用的单位 1.2.4 在样式规则中添加注释 1.3 常用的样式属性及值 1.4 DIV标记及SPAN标记 1.5 常用样式的属性及值。 1.6 讲解CSS布局的重点和难点——浮动和定位。 1.7 介绍文字和图像的排版。 1.8 介绍超链接和导航相关的设置方法。 1.1 CSS带来的好处 改变浏览器的默认显示风格使站点对浏览者和浏览器更具亲和力，使整个站点保持视觉的一致性 页面内容和显示样式分离，只要建立定义样式的CSS文件，并且让所有的HTML文件都来使用CSS文件所定义的样式，如果要改变HTML文件中任意部分的显示风格时，只要把CSS文件打开，更改样式就可以了 重用样式表，不同的HTML文件可以使用同一个CSS样式文件 可以降低网站的流量费用，不同的HTML文件使用同一个CSS样式文件，只需下载一次CSS样式文件就可； 由于样式的重用及下载流量的减少可以使页面载入更快； CSS使站点可以更好地被搜索引擎找到； 不同的HTML文件可以使用同一个CSS样式文件，要想改变这些页面的显示方式，只改一个CSS样式文件就可以，所以方便网站维护，使设计师在修改设计时更有效率，而代价更低。 1.2 认识CSS样式 CSS Cascading Style Sheet(层叠样式表)的缩写 p style=“font-family:黑体;font-size:20px;color:blue;text-align:center;line-height:20px”##########/p P { font-family:黑体; font-size:20px; color:blue; text-align:center; line-height:20px; } 1.2.1样式说明、规则及特征 样式就是格式，对于网页来说，像网页显示的文字、图片、段落、列表等以什么样的方式显示出来。层叠就是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优选原则”。 样式规则 样式表的每个规则都有两个主要部分：选择器（selector）和声明（declaration）。选择器决定哪些因素要受到影响，声明由一个或多个属性值对组成。 基本语法：selector{属性:属性值[[;属性:属性值]…]} 语法说明： selector表示希望进行格式化的元素； 声明部分包括在选择器后的大括号中； 用“属性:属性值”描述要应用的格式化操作； 声明中的多个属性值对之间必须用分号隔开。 1.2.1样式说明、规则及特征(续) 继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了字符的颜色，这个颜色也会应用到段落的文本中。 1.2.2 CSS样式表的分类 选择器不同 基本选择器 HTML标记 选择器 CLASS 类选择器(.className) ID 选择器（#id号） 伪类选择器 设置超链接 a:link a:hover a:visited a:active 选择段元素的首字母或首行进行格式化 P:first-letter P:first-line 复合选择器 后代选择器 table h1.myCls {……} 组合选择器 table, h1. myCls, p.specia {……} 1.2.2 CSS样式表的分类(续) 定义的位置不同 行内样式p style=“font-family:黑体;font-size:20px;color:blue;text-align:center”##########/p 内嵌样式 STYLE TYPE=text/css !-- p { color:red; font-size: 24p