css样式表.

第三章CSS样式表一、Web标准1.什么是web标准web标准是由W3C(WorldWideWebConsortium，中文译名万维网联盟)和其他标准化组织制定的一套规范集合。web标准的目的在于创建一个统一的用于web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。Web标准结构表现行为结构用来对网页中用到的信息进行整理与分类，用于结构化设计的web标准技术主要有html、xml、xhtml表现技术用于对已经被结构化的信息进行显示上的控制，包含版式、颜色、大小等样式控制，目前用于表现的web技术标准主要就是css技术行为是对整个文档内部的一个模型进行定义及交互行为的编写,用于编写用户可以进行交互式操作的文档,表现行为的web标准技术主要有DOM、ECMAScript（javascript的扩展脚本语言）2.web标准的构成3.什么样的网页是符合标准的真正符合标准的网页设计是指能够灵活地使用web标准对web内容进行结构、表现与行为的分离。符合web标准的布局方式：页面里有的仅仅是内容（文字和图片，图片是指内容中的图片，而非修饰图片），没有任何修饰，它看上去就像一张单调的页面。这些文字和图片仅仅是依次罗列下来，没有任何样式。然后加入表现，将所有修饰的图片做为背景，用CSS来定义每一块内容的位置、字体、颜色等。当抽掉css文件，剩下的就是最本质的内容。这样才能在文本浏览器、手机、PDA等设备中阅读，才能随时修改css实现改版。二、CSS概述CSS：CascadingStyleSheets，“层叠样式表”，简称样式表，它是一种制作网页的新技术。1997年W3C(TheWorldWideWebConsortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1,自CSS1的版本之后，又在1998年5月发布了CSS2版本。用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。三、基本语法1.CSS的定义是由三个部分构成：选择符属性属性的取值基本格式如下：选择符{属性：值}例如：body{color:black}如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：p{font-family:sansserif}如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：p{text-align:center;color:red}（段落居中排列；并且段落中的文字为红色）采用分行的书写格式例1：1.htmp{text-align:center;color:black;font-family:arial}2.引用方法在head…/head之间styletype=text/css!--p{text-align:center;color:blue;font-family:arial}--/style3.群组选择符把相同属性和值的选择符组合起来书写，用逗号将选择符分开，减少重复定义如：h1,h2,h3,h4,h5,h6{color:green}p,table{font-size:9pt}例：h1.htm4.包含选择符单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。tablea{font-size:12px}表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。例4：4.htm5.类选择符把相同的元素分类定义不同的样式，定义类选择符时，在自定义类的名称前面加一个点号。两个不同的段落，一个段落向左对齐，一个段落居中：p.left{text-align:left}p.center{text-align:center}引用：pclass=“left”这是第一段/ppclass=“center”这是第二段/p例2：2.htm在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：.center{text-align:center}（定义.center的类选择符为文字居中排列）这样的类可以被应用到任何元素上。例3：3.htm6.ID选择符ID参数指定了某个单一元素，用来对单一元素定义单独的样式。定义ID选择符要在ID名称前加上一个“#”号。ID属性将匹配所有id=intro的元素：#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}ID属性只匹配id=intro的段落元素：p#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}引用方式：pid=intro这个段落应用ID选择符/p类选择符和ID选择符的差别：类选择符可以重复使用，且可以用在任意元素上，使用任意次。Id属性应该是唯一的，只有拥有该id的元素才会应用该样式。7.组合选择符#p4h2{color:#340967;}针对id为p4的标签下的所有h2标签指定样式div.p3{color:yellow;}针对div标签下的所有class为p3的标签指定样式8.样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。div{color:red;font-size:9pt}……divp这个段落的文字为红色9号字/p/div例5：5.htm当样式表继承遇到冲突时，总是以最后定义的样式为准。div{color:red;font-size:9pt}p{color:blue}……divp这个段落的文字为蓝色9号字/p/div例6：6.htm9.注释CSS注释以/*开头，以*/结尾，如下：/*定义段落样式表*/p{text-align:center;/*文本居中排列*/color:black;/*文字为黑色*/font-family:arial/*字体为arial*/}四、伪类——动态链接一种特殊的类选择符，对链接在不同状态下定义不同的样式效果。选择符:伪类{属性:值}伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字。类选择符及其他选择符可以和伪类混用：选择符.类:伪类{属性:值}1.锚的伪类最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：Link：未访问的链接Visited：已访问的链接Hover：鼠标停留在链接上Active：激活链接例7：7.htma:link{color:#FF0000;text-decoration:none}a:visited{color:#00FF00;text-decoration:none}a:hover{color:#FF00FF;text-decoration:underline}a:active{color:#0000FF;text-decoration:underline}2.伪类和类选择符将伪类和类组合起来，在同一个页面中做几组不同的链接效果例8：8.htma.red:link{color:#FF0000}a.red:visited{color:#0000FF}a.blue:link{color:#00FF00}a.blue:visited{color:#FF00FF}ahref=“…”class=“red”这是第一组链接/a定义一组链接div.classid1A{FONT-SIZE:10pt;COLOR:#4F94CD;TEXT-DECORATION:none}div.classid2A:hover{FONT-SIZE:10pt;COLOR:#ff0000;TEXT-DECORATION:underline}divclass=“classid1”ahref=“”超连接/a…………/divdivclass=“classid2”ahref=“”超连接/a…………/div五、如何在网页中插入CSS链入外部样式表内部样式表导入外部样式表内嵌样式1.内部样式表内部样式表是把样式表放到页面head区里，样式表是用style标记插入的。head……styletype=text/css!--hr{color:sienna}p{margin-left:20px}body{background-image:url(images/back40.gif)}--/style……/head2.链入外部样式表把样式表保存为一个样式表文件，然后在页面中link标记链接到这个样式表文件，这个link标记必须放到页面的head区内，如下：head……linkrel=stylesheettype=text/csshref=mystyle.css……/head例9：9.htmrel：样式表以何种方式与HTML文档结合，通常设为stylesheeet，表示指定一个外部样式表3.导入外部样式表指在内部样式表的style里导入一个外部样式表，导入时用@importhead……styletype=”text/css”!--@import“mystyle.css”--/style……/headlink与import区别：•import：在浏览器下载HTML文件时就将样式表文件的全部内容复制到@import位置处，替换该关键字•link：不进行替换，当HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接到样式表文件，读取需要的内容4.内嵌样式内嵌样式是混合在HTML标记里使用的，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：pstyle=color:sienna;margin-left:20px这是一个段落/p六、CSS属性1.字体属性2.颜色和背景属性3.文本属性4.“容器”属性5.鼠标属性6.滤镜属性1.字体属性属性属性含义属性值font-family使用什么字体所有字体font-style字体是否斜体normal、italic、obliquefont-variant字体是否用小体大写Norma、small-capsfont-weight定义字体的粗细Normal、bold、bolder、lighterfont-size定义字体大小例10：10.htmpstyle=“font：italicsmall-capsbold36pt,黑体”……/p等同于pstyle=“font-style：italic；font-variant：small-caps；font-weight:bold；font-size：36pt；font-family：黑体”……/p“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”的顺序，其中没有定义的以默认值显示。h3{font:italic12pt黑体;}2.颜色和背景属性例11：11.htm1)color定义前景色如：p{color:red;}p{color:rgb(00,00,255);}p{color:#00ff00;}p{color:rgb(50%,0,50%);}2)background-color定义背景色如：body{background-color:yellow;}div{background-colo