Css详解PPT

CSS概述目录※CSS是什么※为什么要使用CSS※CSS中盒状模型※CSS语法※引入CSS的4种方式※CSS选择器※CSS的继承和优先级※常见样式介绍※学习方法需要具备的基础知识在继续学习之前，你需要对下面的知识有基本的了解：HTMLXHTMLHTML&XHTMLHTML:HTML是一种基本的WEB网页设计语言XHTML:XHTML是一种为适应XML而重新改造的HTML。当XML越来越成为一种趋势，就出现了这样一个问题：如果我们有了XML，我们是否依然需要HTML?为了回答这个问题，1998年5月我们在旧金山开了两天的工作会议，会议的结论是：需要。我们依然需要使用HTML。因为大量的人们已经习惯使用HTML来作为他们的设计语言，而且，已经有数以百万计的页面是采用HTML编写的。HTML&XHTML（1）XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。（2）XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。（3）使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。（4）XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。（5）XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。（6）在网站设计方面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测试页面工作的习惯HTML&XHTML以下是XHTML相对HTML的几大区别：XHTML要求正确嵌套XHTML所有元素必须关闭XHTML区分大小写XHTML属性值要用双引号XHTML用id属性代替name属性XHTML特殊字符的处理CSS(CascadingStyleSheets)层叠(级联)样式表定义如何显示HTML元素.属于标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).•HTML标签原本被设计为用于定义文档内容。•HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。•不断地有新的HTML标签和属性（比如字体标签和颜色属性）添加到HTML规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。•为了解决这个问题，万维网联盟（W3C)，肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（Style）。所有的主流浏览器均支持层叠样式表。为什么要使用CSSCSS使页面结构和表现分离，使页面结构清晰，载入更快；CSS使设计师在修改设计时更有效率，而代价更低；CSS使整个站点保持视觉的一致性；CSS使站点对浏览者更具亲和力；在世界上越来越多人采用Web标准时，掌握CSS可以提高设计师的职场竞争实力。CSS语法CSS语法由三部分构成：选择器、属性和值CSS对空格和大小写不敏感selector{property:value;[property:value;]…}示例:p{color:red;font-weight:bold;}#dataCell{text-align:center;}引入CSS的4种方式行内引入pstyle=样式代码段落文本/p内嵌引入styletype=text/css样式代码/style外部导入styletype=text/css@import样式文件url;/style外部链接linkhref=样式文件urlrel=stylesheettype=text/css/CSS选择器含义及作用通过CSS选择器定位哪些HTML元素需要应用样式，及应用哪些样式。选择器分类基本选择器复合选择器特殊选择器基本选择器spanid=titleclass=myClassauthor/spanHtml标记选择器span{font-size:20px;}类别选择器.myClass{color:#4499ee;}ID选择器#title{font-family:幼圆}复合选择器“交集”选择器div.divClass{……}div#divId{……}“并集”选择器div,h1#htitle,p.pClass{……}后代选择器divh1#htitlediv,h1#htitle,p.pClass{……}特殊选择器超链接标签a拥有特殊类型的选择器a{}为所有的超链接标签设置样式a:link{}普通状态下的超链接样式a:visited{}已经点击过的超链接样式a:hover{}鼠标经过该超链接时的样式a:active{}鼠标点击超链接时的样式常用的样式属性属性CSS名称说明颜色color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素)border-style边框样式border-width边框宽度border-color边框颜色定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz轴索引号，用于层内嵌样式-2选择器根据选择器的不同，内嵌样式又分为：HTML选择器CLASS类选择器ID选择器/*--关键代码--*/HEADSTYLEtype=text/cssP{/*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;}H2{background-color:#CCFF33;text-align:center;}/STYLE/HEADBODYH2品种特征方面：/H2P1、蛋鱼：蛋鱼…….。/PP2、龙睛：龙睛……..。/PP3、高头：高头….。/P内嵌样式-3HTML选择器HTML选择器应用H2样式应用P样式内嵌样式-4class类选择器HEADSTYLEtype=text/css.myinput{border:1pxsolid;border-color:#D4BFFF;color:#2A00FF}/STYLE/HEADBODYFORMP用户名INPUTname=textfieldtype=textclass=myinput/PP密 码INPUTname=textfieldtype=passwordclass=myinput/PPINPUTtype=submitname=Submitvalue=重填INPUTtype=submitname=Submitvalue=提交/PCLASS类选择器应用类选择器：class＝”类名“类选择器的定义格式为：.类名{…样式规则;}HEADSTYLETYPE=text/css#fire{color:red;font-size:24px;}/STYLE/HEADBODYH2ID=fire我是二级标题，火是这样的/H2PID=fire我是段落，火是这样的/P/BODY内嵌样式-5ID选择器ID选择器ID选择器的定义格式为：＃ID名{…样式规则;}应用ID选择器：ID＝”ID名“HEADSTYLEtype=text/cssA{/*设置超链接不带下划线*/color:blue;text-decoration:none;/*文本修饰：无*/}A:hover{/*鼠标在超链接上方停留时，带下划线*/color:red;text-decoration:underline;/*文本修饰：下划线*/}/STYLEHEADBODYAhref=“a.htm俺是超链接，移过来我就显示下划线/A/BODY/HTML内嵌样式-6特殊的选择器HTML选择器特殊的伪类：A代表超链接，hover代表鼠标悬停外部样式根据样式文件与网页的关联方式又分为：链接（LINK）外部样式表导入（import）外部样式表样式文件P{…..}网页2网页3网页1链接外部样式表使用LINK（链接）标签，语法：HEADLINKrel=“stylesheet”type=”text/css”href=”样式表文件.css”/HEAD第一步：创建样式表文件newstyle.css第二步：把样式文件和网页关联样式文件：newstyle.cssP{…..}Onel.htmanother.htm第三步：浏览查看各网页演示：链接样式表示例导入外部样式表使用@import导入，语法：HEADSTYLETYPE=text/css@import样式表文件.css;/STYLE/HEAD操作步骤同链接样式表外部样式文件样式的混合使用行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容”与众不同“，采用行内样式对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；内嵌样式行内样式某个HTML标签DIV层标签…关键代码…DIVid=Layer1style=position:absolute;left:149px;top:110px;width:357px;height:87px;z-index:1;IMGsrc=talk.gifwidth=91height=76PZ-index=1，我是第一层，我是容器，包含图片段落/P/DIVDIVid=Layer2style=“….;z-index:2;….IMGsrc=bbs_logo.gifwidth=101height=43PZ-index=2，我是第二层，包含图片和段落/P/DIV…使用Z－index指定是哪一层DIV是块级容器标签，可以包含图片、标题、段落、文字等图片段落topleftSPAN标签HTMLBODYH2所有韩款童装SPANstyle=“color:#FF66FF;font-size:50px;”10/SPAN元/件起拍喽/H2IMGsrc=show.gifwidth=360height=195BR/BODY/HTMLSPAN是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容CSS盒状模型CSS修饰页面DIV层的时候，把一个DIV块看作是一个有内外边框的盒子CSS盒状模型CSS样式的继承继承:子元素将继承父元素所定义的样式divstyle=color:red;pstyle=”color=yellow”作者:李白/p/divp元素虽然没有定义样式，但会继承其父元素div所定义的样式如果子元素定义了和父元素相同的样式属性，不同的样式值，或者同一元素分别以不同的样式选择器