样式在网页中的应用.ppt

第四章样式在网页中的应用,4.1样式概述4.2在网页中添加样式4.3CSS样式属性,4.1样式概述,样式是用来控制网页外观的一组格式属性，在网页中使用CSS来实现样式控制。一、CSS简介CSS（CascadingStyleSheets）译作“层叠样式表”，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS可以用来一次对多个网页的所有样式进行控制。CSS样式表可以同时链接多个网页，当样式表更新或被修改之后，所有应用了该样式表的文档都会被自动更新。,网页设计最初是用HTML标记来定义页面文档及格式，例如标题、段落、表格、链接等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1,自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。目前采用的是CSS2.0。,二、CSS样式语法和类型1、CSS基本语法CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selectorproperty:value;选择符属性：值;,选择符可以是多种形式，一般是要定义样式的HTML标记，例如body、p、table，可以通过此方法定义它的属性和值，属性和值要用冒号隔开：bodybackground-color:#CCCCCC;选择符body是指页面主体部分，background-color是控制背景颜色的属性，此例的效果是使页面中的背景为灰色。,定义HTML标记样式,2、选择符组可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1,h2,h3,h4,h5,h6color:#666666;（这个组里包括所有的标题元素，每个标题元素的文字都为灰色）,定义选择符组样式,3、包含选择符可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：tableafont-size:12px；在表格内的链接改变了样式，文字大小为12像素，而表格外的链接的文字仍为默认大小。,定义包含选择符样式,4、类选择符用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如想要两个不同的段落，一个段落向右对齐，一个段落居中，可以先定义两个类：p.righttext-align:right;p.centertext-align:center;,定义类选择符样式,然后用不在不同的段落里，只要在HTML标记里加入定义的class参数：这个段落向右对齐的这个段落是居中排列的注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。,类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：.centertext-align:center;（定义.center的类选择符为文字居中排列）这样的类可以被应用到任何元素上。,定义省略HTML标记名的类选择符样式,下面使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：这个标题是居中排列的这个段落也是居中排列的注意：这种省略HTML标记的类选择符是最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。,5、id选择符在HTML页面中id参数指定了某个单一元素，id选择符是用来对这个单一元素定义单独的样式。id选择符的应用和类选择符类似，只要把class换成id即可。定义id选择符要在id名称前加上一个“#”号。和类选择符相同，定义id选择符的属性也有两种方法。,下面这个例子，id属性将匹配所有id=“text的元素：#textfont-family:宋体;font-size:14px;line-height:150%;color:#000000;（字体为宋休，字号为14像素，行高为150%，颜色为黑色）,定义id选择符样式,6、样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。,例如在div标记中嵌套p标记：divfont-family:宋体;font-size:14px;这个段落的文字为宋休，字号为14像素（p元素里的内容会继承div定义的属性）,另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了的文字大小：divfont-family:宋体;font-size:14px;pfont-size:16px;这个段落的文字为16像素我们可以看到段落里的文字字体是“宋体”，是继承div属性的，而文字大小是后面定义的。,不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符，最后是HTML标记选择符。,7、CSS注释可以在CSS中插入注释来说明代码的意思，注释有利于或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/*开头，以*/结尾，如下：/*定义段落样式表*/ptext-align:center;/*文本居中排列*/color:black;/*文字为黑色*/font-family:arial；/*字体为arial*/,8、伪类伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。,1）、语法伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-classproperty:value选择符:伪类属性:值；伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。,类选择符及其他选择符也同样可以和伪类混用：selector.class:pseudo-classproperty:value选择符.类:伪类属性:值,2）、锚的伪类最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。,把它们分别定义不同的效果：a:linkcolor:#FF0000;text-decoration:none；/*未访问的链接*/a:visitedcolor:#00FF00;text-decoration:none；/*已访问的链接*/a:hovercolor:#FF00FF;text-decoration:underline；/*鼠标在链接上*/a:activecolor:#0000FF;text-decoration:underline；/*激活链接*/,注意：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为把a:hover放在了a:visited的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a:hover的效果。所以根据叠层顺序，在定义这些链接样式时，一定要按照a:link，a:visited，a:hover，a:actived的顺序书写。,定义锚的伪类样式,返回本章首页,4.2在网页中添加样式,一、添加样式表的方法页面中添加样式表的方法有：链入外部样式表、内部样式表、导入外部样式表和内联样式。,1、链入外部样式表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内，如下：上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。,一个外部样式表文件可以应用于多个页面。当改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。,2、内部样式表内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用标记插入的，从下例中可以看出标记的用法：,3、导入外部样式表导入外部样式表是指在内部样式表的里导入一个外部样式表，导入时用import，看下面这个实例：,例中import“mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。,4、内联样式内联样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内联样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：这是一个段落（这个段落颜色为黑色，左边距为20象素）注意：style参数可以应用于任意body内的元素。,5、多重样式表的叠加如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。注意：依照后定义的优先，所以优先级最高的是内联样式，内部样式表（链入的外部样式表和内部样式表之间是最后定义的优先级高。）,最后为导入外部样式表。,二、样式表使用1、class属性class属性用于指定元素属于何种样式的类。2、id属性用于给单一元素指定单独的样式。3、style属性使用style属性可采用内联样式很简单的对某个元素单独定义样式。,4、div元素div元素在样式表中作为一个选择符使用，而且它也能接受style、class和id属性。div(“division”，“部分”的简称)作为一个块级元素。div可以包含段落、标题、表格甚至其它部分。,div是指块文字，像你要定义一块文字可以用到它。另外做层的时候也经用到它，它就是让一块东西集成为一个集合。div标签可以以类或ID附加css样式1.类2.ID,返回本章首页,4.3CSS样式属性,一、CSS2盒模型自从1996年CSS1的推出，W3C组织就建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距(padding)、边框(border)和边距(margin)。,margin是指盒的边框以外留的空白，用于页边距或者与其它盒制造一个间距。margin是透明元素，不能定义颜色。padding是指盒的边框到盒的内容之间的空白。是透明元素，不能定义颜色。border是指盒的边框。background是定义盒的背景。分2级定义，先定义图片背景；其次定义背景色。如果没有背景图片可以只定义背景色。width是定义盒的宽度。要注意的是:这个宽度仅仅指内容的宽度，不包含margin,border和padding。,二、CSS属性介绍1、类型面板类型面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。,2、背景面板背景面板主要是对元素的背景进行设置，包括背景颜色、背景图像、背景图像的控制。一般是对body（页面）、table（表格）、div（区块）的设置。,3、区块面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。,文本对齐：确定元素在上层容器元素内如何排列对齐。,4、方框面板