《CSS的属性》PPT课件.ppt

第11章CSS的属性,11.1设置字体样式11.2控制图文布局11.3颜色及背景11.4美化网页与超链接的设置11.5CSS定位,上一页,下一页,目录,结束,本节,11.1设置字体样式,11.1.1字体属性font-family11.1.2字体风格font-style11.1.3字体变形font-variant11.1.4字体加粗font-weight11.1.5字号的控制font-size11.1.6文字的更改text-transform11.1.7文字修饰text-decoration11.1.8字体属性font,上一页,下一页,目录,结束,本节,11.2.1设置字间距及字母间距11.2.2设置行距11.2.3文字对齐11.2.4首行缩进属性,11.2控制图文布局,上一页,下一页,目录,结束,本节,11.3.1颜色属性11.3.2背景颜色属性11.3.3背景图像属性11.3.4背景图片重复属性11.3.5固定背景图片属性11.3.6背景图片的位置属性11.3.7背景,11.3颜色及背景,上一页,下一页,目录,结束,本节,11.4.1网页链接属性anchor11.4.2设置滚动条属性scrollbar11.4.3光标属性的设置cursor11.4.4边框的设置,11.4美化网页与超链接的设置,上一页,下一页,目录,结束,本节,11.5.1CSS定位属性11.5.2CSS定位方法,11.5CSS定位,上一页,下一页,目录,结束,本节,11.1.1字体属性font-family,在网页编写的过程中，若没有对字体做任何设置时，浏览器将以默认值的方式显示。除了可利用HTML的标签设置字体外，还可以利用CSS的font-family属性，设置要使用的字体。语法：font-family:,.,上一页,下一页,目录,结束,本节,说明：浏览器将在字体列表中寻找字体1，如果访问者的计算机中安装了这种字体，就使用它；如果没有安装，则移向字体2，如果这种字体也没有安装，则移向第3种字体，以此类推。若浏览器完全找不到指定的字体时，则使用默认字体。因此，应该将一种常见的字体列在字体列表的最后。在对英文字体进行设置时，如果两个英文单词之间有空格时必须使用单引号（）或双引号（）。,h1,h2font-family:ArialBlack,sans-serifpfont-family:PalatinoLinotype,Palatino,serif,上一页,下一页,目录,结束,本节,在HTML里,可以使用标签,将网页文字设置为斜体。而在CSS里，则可利用font-style属性，达到字体风格的变化。语法：font-style:normal|italic|obliquefont-style参数值说明,11.1.2字体风格font-style,上一页,下一页,目录,结束,本节,11.1.3字体变形font-variant,语法：font-variant:normal|small-capsfont-variant参数值说明,上一页,下一页,目录,结束,本节,11.1.4字体加粗font-weight,在HTML里，可以利用标签，将文字设置为粗体。在CSS内，则可利用font-weight属性，设置字体的粗细。语法：font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900font-weight参数值说明,上一页,下一页,目录,结束,本节,利用HTML的标签只能设定7种字号，而在CSS中可以使用font-size属性对文字的字号进行随心所欲的设置。语法：font-size:|说明：绝对尺寸可以使用的单位有：ex（x-height）、in（英寸）、cm（厘米）、mm（毫米）、pt（点）和px（像素）。,11.1.5字号的控制font-size,上一页,下一页,目录,结束,本节,如果不喜欢使用绝对尺寸，还可以用关键字来说明文字大小，共有7种关键字，相对应于HTML标签中所用的数字参数。这7种关键字如下：xx-smallx-smallsmallmediumlargex-largexx-large利用这些参数，浏览器可以自由决定每一种关键字所适合的尺寸（在不同浏览器中它的大小是有区别的）。,上一页,下一页,目录,结束,本节,相对尺寸相对尺寸只有两种larger和smaller。smaller参数告诉浏览器将当前文字在关键字规格基础上“缩小一级”。而larger参数的作用与smaller类似。比例尺寸还可以使用比例参数来设定文字大小，例如：pfont-size:15ptbfont-size:300%这些规则的含义为：使所有包含在中的被标识的文字的尺寸为尺寸设定值的3倍，即45pt。比例参数常用于从母体对象继承参数值。,上一页,下一页,目录,结束,本节,注意：1在CSS中设置文字尺寸的单位很多，但有些浏览器对有些尺寸单位是不支持的，在使用时一定要注意。2px单位所有的操作平台都支持它，但因为访问者的屏幕分辨率的不同，网页的显示将可能不稳定，字体可能大也可能小。3pt是确定文字尺寸最好的单位，因为它在所有的浏览器和操作平台上都适用。4关键字这种尺寸单位在不同浏览器中它的大小是有区别的。5低版本的浏览器不支持相对尺寸这种单位。,上一页,下一页,目录,结束,本节,在CSS中通过text-transform属性可以使网页设计者能很容易的控制字母的大小写。语法：text-transform:uppercase|lowercase|capitalize|nonetext-transform参数值说明,11.1.6文字的更改text-transform,上一页,下一页,目录,结束,本节,语法：text-decoration:underline|overline|line-throungh|blink|nonetext-decoration参数值说明,11.1.7文字修饰text-decoration,上一页,下一页,目录,结束,本节,其中none参数也非常有用，它可以使链接的文字不以下划线的形式显示。如，取消超级链接时带下划线的形式。A:linktext-decoration:noneA:activetext-decoration:noneA:visitedtext-decoration:none,19,上一页,下一页,目录,结束,本节,11.2.2设置行距line-height,语法：line-height:normal|数字|长度单位|比例说明：所用的参数是相邻两行的基准线（基准线就是英文小写字母如x，a的下阶线，但不包括诸如y，g等字母超过下阶线的部分）之间的垂直距离。所设定的参数取值将完全代替浏览器的默认值。,20,上一页,下一页,目录,结束,本节,实例：用数字设定行距bfont-size:12pt;line-height:2表示将利用字号来确定行距，将字号乘以设定的参数值，即12X2=24，所以在本例中行高将是24点。用长度单位设定行距bline-height:11pt用比例设定行距bfont-size:10pt;line-height:140%表示行距是文字的基准大小10pt的140%，即14pt。,上一页,下一页,目录,结束,本节,font属性，可以同时设置许多跟文字有关的属性。例如：字体、字体效果、字号、字体粗细等。语法：font:font-family|font-style|font-variant|font-weight|font-size说明：字体属性主要用作不同字体属性的略写。可以同时设置多种属性。属性与属性之间必须利用（;）分号隔开。实例：pfont:italicbold12pt/14pt隶书,宋体指定该段为bold（粗体）和italic（斜体）隶书或宋体，12点大小，行高为14点。,11.1.8字体属性font,22,上一页,下一页,目录,结束,本节,11.1.8字体属性font,可以同时设置：1、font-style设定斜体2、font-weight设定文字粗细3、font-variant设定字母变体4、font-size设定文字大小5、line-height设定行距6、font-family设定字体,提示：前3个属性可以以任何次序指定或省略。如果省略，它们就设置为normal。大小和字体系列属性必需总是显示地指定：先设置大小，然后设置字体系列。（可选的）行高必需直接出现在字体大小和斜杠后面。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。,h1,h2font:1.37emArialBlack,sans-serifpfont:87%/170%PalatinoLinotype,Palatino,serif,行高,上一页,下一页,目录,结束,本节,11.2控制图文布局,样式表中对图文和布局的控制是指字符、单词和行与行之间是如何定位的，包括如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动对象等。,上一页,下一页,目录,结束,本节,11.2.1设置字间距及字母间距,语法：word-spacing:normal|长度单位letter-spacing:normal|长度单位说明：Word-spacing用于设置英文单词之间的距离；letter-spacing用于设置英文字母之间的距离。两者可以使用前面讲到的任何一种长度单位。如果使用normal参数，将按照浏览器默认设置显示。,上一页,下一页,目录,结束,本节,语法：text-align:left|right|center|justifyvertical-align:top|bottom|text-top|text-bottom|baseline|middle|sub|super,11.2.3文字对齐,上一页,下一页,目录,结束,本节,说明：text-align属性用于文字的水平对齐，但这项属性只用于整块的内容，如、到和等。text-align参数值说明,上一页,下一页,目录,结束,本节,vertical-align属性用于控制文字或其他网页对象相对于母体对象的垂直位置。vertical-align参数值说明,28,上一页,下一页,目录,结束,本节,vertical-align属性用于控制文字或其他网页对象相对于母体对象的垂直位置。vertical-align参数值说明,上一页,下一页,目录,结束,本节,11.2.4首行缩进属性text-indent,首行缩进属性通常被用来指定于一个文字段落，第一行文字缩进的距离，而浏览器的默认值不缩进。语法：text-indent:数字|百分比说明：在IE浏览器中使用比例参数时，是相对于整个浏览器窗口的宽度，而不是相对于段落的宽度。,上一页,下一页,目录,结束,本节,11.3.1颜色属性color,语法：color：实例：h1color:blueh2color:#000080,上一页,下一页,目录,结束,本节,在CSS里，可利用backgroud-color属性，达到背景颜色的变化。语法：background-color：|transparent（透明）说明：初始值为transparent（透明）。实例：bodybackground-color:whiteh1background-color:#000080,11.3.2背景颜色属性,上一页,下一页,目录,结束,本节,11.3.3背景图像属性,在CSS里，可利用background-image属性，将网页背景以图片的方式显示。语法：background-image：|none（无）,上一页,下一页,目录,结束,本节,11.3.4背景图片重复属性,背景图片重复属性决定一个指定的背景图片如何被重复。语法：background-repeat：repeat|repeat-x|repeat-y|no-repeat,上一页,下一页,目录,结束,本节,background-repeat属性参数值说明,上一页,下一页,目录,结束,本节,11.3.5固定背景图片属性,固定背景图片属性决定指定的背景图片是跟随内容滚动，还是保持固定。语法：background-attachment：scroll|fixed说明：scroll表示滚动，fixed表示固定。初始值为scroll。,上一页,下一页,目录,结束,本节,11.3.6背景图片的位置属性,通过背景图片的位置属性background-position可以改变背景图片的最初位置。语法：background-position：|,上一页,下一页,目录,结束,本节,说明：以百分比方法设置background-position属性的语法如下：background-position：x%y%其中x%代表设置图片的水平位置；y%代表图片的垂直位置。初始值为0%0%。实例：Pbackground-position:70%50%;repeat-y;url(.picsky.jpg)表示背景图片的水平位置为70%，垂直位置为50%。,上一页,下一页,目录,结束,本节,以长度单位设置background-position属性的语法如下：background-position：xy使用长度单位可以对背景图片的位置作出更精确的控制，可以设定水平和垂直定位起点。实例：background-image:url(.picsky.jpg)background-position:70px10px;表示从左起70像素、垂直10像素的位置开始显示图像。,上一页,下一页,目录,结束,本节,以关键字设置background-position属性的语法如下：background-position：top|center|bottom|left|center|right（注：|表示或的意思，|表示二者同时使用，表示可搭配使用）实例：background-position:righttop;url(.picsky.jpg)表示背景图片的水平位置为100%，垂直位置为0%。,上一页,下一页,目录,结束,本节,background-position属性关键字方法的参数值说明,上一页,下一页,目录,结束,本节,关键字方法与百分比方法对比表,上一页,下一页,目录,结束,本节,11.3.7背景,语法：background：允许值：|初始值：未定义说明：背景属性是一个更明确的背景关系属性的略写。以下是一些背景的声明：bodybackground:whiteurl(tree.jpg)h1background:#7fffd4pbackground:url(tree.jpg)#f0f8fffixedtablebackground:#0c0url(tree.jpg)no-repeatbottomright,上一页,下一页,目录,结束,本节,11.4.1网页链接属性anchor,在CSS里，可以通过网页链接属性anchor来设置网页链接文字的效果。,网页链接属性anchor语法说明,上一页,下一页,目录,结束,本节,11.4.2设置滚动条属性scrollbar,在CSS里，可以通过滚动条属性scrollbar来美化滚动条。美化滚动条的参数见下表所示，并搭配下图说明。,流动条,上一页,下一页,目录,结束,本节,滚动条scrollbar的参数说明,上一页,下一页,目录,结束,本节,11.4.3光标属性的设置cursor,在CSS中，可以通过光标属性cursor来设置光标的图形，cursor属性共提供了16种属性值，如下表所示。,上一页,下一页,目录,结束,本节,在CSS处理页面时，它认为网页包含的每个元素都包含在一个不可见的框中。每个元素的框有4个决定其大小的重要属性：从内到外依次是内容区域、内边距、边框和外边距。你可以分别设置每个属性（甚至）是每个属性的一部分。可以使用CSS决定每个元素的框外观和位置，并由此控制网页的布局。元素的框可以是块级的，也可以是行内的。这种特点对网页的初始布局的影响是：在默认的情况下，元素按照在(X)HTML中从上到下出现的次序显示，并且在每个块级元素的框的开头和结尾换行。,11.5框模型,上一页,下一页,目录,结束,本节,11.5盒式模型,盒状模型中最重要的是内容，它是必备的，其他的几项都是可选的。盒状模型由内至外的顺序是：content（内容，它可以是文字、图片等）padding（内边距，也有人称之为空白、内补丁等）border（边框）margin（外边距，也可称为边界）,padding设置的是内容到边框之间的距离，就像一个缓冲带border设置内容的边框线粗线和样式等。margin设置的是一块内容与另一块内容之间的距离,使用css定义盒状模型时，我们设置的宽度和高度，只是设置了内容（content）区块的高度和宽度，而不是内容、内边距、边框和外边距的总和。,上一页,下一页,目录,结束,本节,11.4.4边框的设置,在CSS中，可以通过margin属性、border属性和padding属性控制段落、图片和表格等对象的样式。如：边框的宽度、颜色、样式以及对象与边框之间的空白距离。上述三种属性通常用于文件段落、图片、表格与网页边界的空白距离，或者是设置表格内的边框及空白样式等，如下图所示。,上一页,下一页,目录,结束,本节,边框属性说明,上一页,下一页,目录,结束,本节,其中：margin属性：控制对象边界与文件其他内容的空白距离。border属性：控制表格四边边框的宽度、颜色及样式。padding属性：控制表格中的内容或图片与对象边界的空白距离。1边界的设置margin通过margin属性可以设定对象与四周文字之间的距离。其语法如下：margin-(top、right、bootom、left)：长度|百分比|auto,上一页,下一页,目录,结束,本节,说明：margin属性有margin-top（顶部空白区域）、margin-bottom（底部空白区域）、margin-left（左边空白区域）和margin-right（右边空白区域）四个边界属性。通过设置这4项属性，可以控制一个对象四周空白区域的大小。可以使用任何长度单位。如将边距设为负值，就可以将两个对象重叠在一起。,上一页,下一页,目录,结束,本节,利用margin属性设置边界值的方法有：设置一个边界值：若margin属性只设置一个边界值时，则上、右、下和左四个边界都将调用此值。实例：margin:2cm设置对应边值：在margin属性中设置对应边值，是指上边界与下边界、左边界与右边界为相对应的边界，所以若设置对应边其中一边的值时，另一边将调用此值。实例：margin：2cm4cm上边界与下边界的值为2cm，左边界与右边界的值为4cm。,上一页,下一页,目录,结束,本节,设置四个边界值：利用margin属性，顺序输入上、右、下、左边界的值，就可以完成四个边界的设置了。实例：margin:20pt30%30px2cm上边界为20pt，右边界为30%，下边界为30px，左边界为2cm。,上一页,下一页,目录,结束,本节,2设置边框的宽度border-width在CSS里，可以利用border-width属性来控制边框的宽度。语法1：border-width:thin|medium|thick|长度说明：border-width的参数值thin代表细、medium代表中等、thick代表粗。语法2：border-top-width:长度border-bottom-width:长度border-left-width:长度border-right-width:长度,上一页,下一页,目录,结束,本节,使用border-width属性设置边框的宽度有4种设置方法：设置一个值：四条边框宽度均使用同一个设置值。设置两个值：上边框与下边框宽度调用第一个值，右边框与左边框宽度调用第二个值。设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框宽度调用第三个值。设置四个值：四条边框宽度的调用顺序，顺序为上、右、下、左。,上一页,下一页,目录,结束,本节,3设置边框的颜色border-colorborder-color属性用于设置边框的颜色，它的使用方法与border-width相同。语法1：border-color:#rrggbbborder-color:#rrggbb#rrggbb#rrggbb#rrggbb说明：其中第1种颜色为顶部边框颜色，其中第2种颜色为右边边框颜色，其中第3种颜色为底部边框颜色，其中第4种颜色为左边边框颜色。语法2：border-top-color:#rrggbbborder-bottom-color:#rrggbbborder-left-color:#rrggbbborder-right-color:#rrggbb,上一页,下一页,目录,结束,本节,4设置边框的样式border-styleborder-style属性用于设置边框的样式。其语法设置如下：border-style:none|solid|double|dotted|dashed|groove|ridge|inset|outset,上一页,下一页,目录,结束,本节,border-style属性设置值,上一页,下一页,目录,结束,本节,5设置边框属性border在CSS里，通过border属性可以快速设置边框的宽度、边框颜色及边框样式。其语法如下：border:|实例：border:1ptdouble#ff0000设置边框的宽度为1pt、样式为双直线、颜色为红色。6内边界的设置paddingpadding属性主要是控制元素的内容与元素外框内缘的距离。其语法如下：padding-（top、right、bottom、left）:长度|百分比说明：其用法与border-color相同。,11.7偏移自然流中的元素,position:absolute|relative1.absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义2.relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置,每个元素在页面中都有一个自然位置。相对于这个原始位置移动元素称为“相对定位”。周围的元素根本不受影响。,11.7偏移自然流中的元素,提示：1.相对定位中的“相对”指的是相对于元素的原始位置，而不是相对于周围的元素。无法让一个元素相对于周围的元素进行移动，却能相对于元素原来的位置进行移动。2.其他元素不会受到偏移的影响，它们仍然按照这个元素原来的包含框依次排列，因此可能会与这个元素现在的位置发生重叠。3.如果不同时使用position属性，偏移就不起作用。4.定位不是继承的。,偏移自然流中的元素：position:relative;top|right|bottom|left:vv是希望元素从它的自然位置偏移的距离，可以表示为绝对值或相对值或者百分数。,.dateposition:relative;top:-1.1em;.descriptionposition:relative;left:1em;margin-bottom:0.2em,绝对定位（absolute）：绝对定位使元素与文档流无关，不占据文档空间。普通流中的元素会表现的好像绝对定位的元素并不存在一样。绝对定位的元素的位置相对于最近的已定位的祖先元素。若元素没有已定位的父元素，如果不存在这样的祖先对象，则依据body对象此时对象不具有外边距(margin)，但仍有内边距(padding)和边框(border),11.8对元素进行绝对定位,提示：1.已定位的祖先元素（包含块）:是指具有position:absolute|relative|fixed的祖先元素，（无论是父对象还是祖父对象，或者再高的辈分）2.TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。3.规则：如果父级没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位如果父级设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。,11.8对元素进行绝对定位,提示：1.使用百分数或em创建能够适应访问者浏览器设置的流式布局。2.因为绝对定位的元素脱离了文档流，它们可能会相互重叠或与其他元素重叠。（这不一定是坏事儿）3.如果没有为绝对定位的元素指定偏移量，这个元素就出现在它的自然位置上，但是不会影响后续的元素流。,对元素进行绝对定位：position:absolute;top|right|bottom|left:v,.photo_textposition:relative.photoposition:absolute;left:-112px;top:3px,一般应用：在一个相对定位的元素里面放置一个绝对定位的元素,上一页,下一页,目录,结束,本节,说明：position属性用于对象的定位，它的参数值有absolute和relative两种。其中absolute表示绝对定位，绝对定位能精确设定对象在网页中的独立位置，而不考虑网页中其他对象的定位设置，在绝对定位中对象的位置是相对于浏览器窗口而言的。而relative表示相对定位。它所定位的对象的位置是相对于不使用定位设置时该对象在文档中所分配的位置。即，相对定位的关键在于被定位的对象的位置是相对于它通常应在的位置而言的。如果停止使用相对定位，则文字的显示位置将恢复正常。left属性用于设定对象距浏览器窗口左边的距离；top属性用于设定对象距离浏览器窗口顶部的距离。,上一页,下一页,目录,结束,本节,width属性用于设定对象的宽度。因为定位后的对象在网页上显示时仍然会从左到右一直显示，利用宽度属性就可以设定对字符向右显示的限制。宽度属性只在绝对定位时使用。height属性用于设定对象的高度。高度和宽度的设置类似，只不过是在垂直方向上进行的。visibility属性用于设定对象是否显示。这条属性对于被定位和未定位的对象都适用。该属性的参数有三种：visible:使对象可以被看见hidden:使对象被隐藏inherit：对象被继承母体对象的可视性设置z-index属性用于在网页上重叠文字和图像。当定位多个对象并将其重叠时，可以使用z-index来设定哪一个对象应出现在最上层。z-index参数值使用整数，用于绝对定位或相对定位了的对象，也可以给图像设定属性。,上一页,下一页,目录,结束,本节,divposition:absolute;left:200px;top:40px;width:150px浏览器执行到这项规则时，它将文字块按照规则规定的效果显示，将段落的最大水平尺寸限制在150像素。实例：h4visibility:hidden控制用H4标识的对象不可见。当一个对象被隐藏后，它仍然1要占据浏览器窗口中的原有空间。所以，如果将文字包围在一幅被隐藏的图像周围，那么，其显示效果将是文字包围着一块空白区域。这条属性在编写脚本和增加网页的动态性方面很有用，比如可以使某段落或图像只在鼠标滑过时才显示。,可以使元素浮动在文本或其他元素中