单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,http:/,Zend PHPChina Training,CSS,PHPChina 工作室,知识回忆,HTML中的列表分类,表格相关标签、属性,框架的作用,表单及表单控件,内容摘要,掌握样式表的语法规那么,样式表的分类：,行内样式表,内嵌样式表,外部样式表,掌握常用的样式,了解层和标签,闪烁文本,移动文本,消隐文本,设置属性,这个段落应用了样式,这个段落按默认样式显示,什么是样式？,指定显示样式,样式规则,常用的样式属性,属 性,CSS名称,说 明,颜色,color,文本属性,font-size,字体大小,font-family,字体,text-align,文本对齐,边框属性,(用于表,单元素),border-style,边框样式,border-width,边框宽度,border-color,边框颜色,定位属性,(position),top,顶部边距（上边距）,left,左边距,width,宽度,height,高度,z-index,z,轴索引号，用于层,根据样式代码的位置，分为三类：,行内样式,内嵌样式,外部样式,样式的分类,在最后一个声明后面加上一个分号(;)是一个好习惯,行内样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式。行内样式使用元素标签的 STYLE 属性定义。,/*关键代码-*/,剩余时间：成交结束,新旧程度：全新,所 在 地：北京,宝贝数量：5 件,浏 览 量：220 次,另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以,应用样式,P,font-size:20px;,color:blue;,text-align:center,我是段落 1,我是段落 2,我是段落 3,我们的样式绝对统一,内嵌样式-1,样式表,样式规则,所有的段落都采用 P 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,选择器,用分号隔开,内嵌样式-2 选择器,根据选择器的不同，内嵌样式又分为：,HTML 选择器,CLASS 类选择器,ID 选择器,/*-关键代码-*/,P /*设置样式：字体和背景色*/,font-family:System;,font-size:18px;,color:#3333CC;,H2,background-color:#CCFF33;,text-align:center;,品种特征方面：,1、蛋鱼：蛋鱼.。,2、龙睛：龙睛.。,3、高头：高头.。,内嵌样式-3 HTML选择器,HTML选择器,应用H2样式,应用P样式,内嵌样式-4,class,类选择器,.,myinput,border:1px solid;,border-color:#D4BFFF;,color:#2A00FF,用户名,密 码,CLASS,类选择器,应用类选择器：,class类名“,类选择器的定义格式为：,.类名,样式规那么;,#fire,color:red;,font-size:24px;,我是二级标题，火是这样的,我是段落，火是这样的,内嵌样式-5 ID选择器,ID选择器,ID选择器的定义格式为：,ID名,样式规那么;,应用ID选择器：IDID名“,A,/*设置超链接不带下划线*/,color:blue;,text-decoration:none;/*文本修饰：无*/,A:hover,/*鼠标在超链接上方停留时，带下划线*/,color:red;,text-decoration:underline;/*文本修饰：下划线*/,HEAD,俺是超链接，移过来我就显示下划线,内嵌样式-6 特殊的选择器,HTML选择器,特殊的伪类：A代表超链接，hover代表鼠标悬停,外部样式,根据样式文件与网页的关联方式又分为：,链接LINK 外部样式表,导入import外部样式表,样式文件,P,.,网页2,网页3,网页1,链接外部样式表,使用LINK链接标签，语法：,第一步：创立样式表文件newstyle.css,第二步：把样式文件和网页关联,样式文件：,newstyle.css,P,.,Onel.htm,another.htm,第三步：浏览查看各网页,演示：链接样式表例如,导入外部样式表,使用import导入，语法：,import,样式表文件.css;,操作步骤同链接样式表,外部样式文件,样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常,需要混合使用：,有关整个网站统一风格的样式代码，放置在独立的样式文件*.css,某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式,某张网页内，局部内容与众不同“，采用行内样式,对于某个HTML标签：,1如果有多种样式，如果规定的样式没有冲突，那么叠加；,2如果有冲突，那么最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否那么就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签,层标签,关键代码,Z-index=1，我是第一层，我是容器，包含图片段落,Z-index=2，我是第二层，包含图片和段落,使用,Z,index指定是哪一层,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,top,left,标签,所有韩款童装10元/件起拍喽,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,CSS 的优点,改变浏览器的默认显示风格,页面内容和显示样式别离,可以重用样式表,方便网站维护,课堂重点,样式分为行内样式、内嵌样式、外部样式,样式表包括选择器和样式规那么，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类,和都是容器标签，是块级标签，可包含段落、标题等，是行级标签，不能包含段落、标题等，只能包含局部文字,谢 谢,:/,