网页设计课件ch11CSS的属性.ppt

第11章CSS的属性 11 1设置字体样式11 2控制图文布局11 3颜色及背景11 4美化网页与超链接的设置11 5CSS定位 11 1设置字体样式 11 1 1字体属性font family 利用CSS的font family属性 设置要使用的字体语法 font family 对比 font的face属性 说明 浏览器将在字体列表中依次寻找有效字体 若浏览器完全找不到指定的字体时 则使用默认字体 应该将一种常见的字体列在字体列表的最后 在对英文字体进行设置时 如果两个英文单词之间有空格时必须使用单引号 或双引号 利用font style属性 达到字体风格的变化 语法 font style normal italic oblique对比 标签font 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 11 1 5字号的控制font size 绝对尺寸可以使用的单位有 in 英寸 cm 厘米 mm 毫米 pt 磅 和px 像素 说明 11 用关键字来说明文字大小 共有7种关键字 相对应于HTML标签中所用的数字参数 这7种关键字如下 xx small x small small medium large x large xx large利用这些参数 浏览器可以自由决定每一种关键字所适合的尺寸 在不同浏览器中它的大小是有区别的 相对尺寸相对尺寸只有两种larger和smaller smaller参数告诉浏览器将当前文字在关键字规格基础上 缩小一级 而larger参数的作用与smaller相反 说明 比例尺寸还可以使用比例参数来设定文字大小 例如 p font size 15pt b font size 300 这些规则的含义为 使所有包含在中的被标识的文字的尺寸为尺寸设定值的3倍 即45pt 比例参数常用于从母体对象继承参数值 说明 14 注意 1 在CSS中设置文字尺寸的单位很多 但有些浏览器对有些尺寸单位是不支持的2 Px 像素 单位所有的操作平台都支持它 但因为访问者的屏幕分辨率的不同 网页的显示将可能不稳定 字体可能大也可能小 3 Pt 磅 是确定文字尺寸最好的单位 因为它在所有的浏览器和操作平台上都适用 4 关键字这种尺寸单位在不同浏览器中它的大小是有区别的 5 低版本的浏览器不支持相对尺寸这种单位 15 text transform属性可以控制字母的大小写 语法 text transform uppercase lowercase capitalize nonetext transform参数值说明如下 11 1 6文字的更改text transform 16 text transform参数值说明 17 语法 text decoration underline overline line throungh nonetext decoration参数值说明 11 1 7文字修饰text decoration 18 其中none参数也非常有用 它可以使链接的文字不以下划线的形式显示 如 取消超级链接时带下划线的形式 A link text decoration none A active text decoration none A visited text decoration none none参数 19 font属性 可以同时设置许多跟文字有关的属性 例如 字体 字体效果 字号 字体粗细等 语法 font font family font style font variant font weight font size 11 1 8字体属性font 20 说明 可以同时设置多种属性 属性与属性之间必须利用空隔隔开 实例 p font bold12pt 14pt隶书 宋体 指定该段为bold 粗体 和隶书或宋体 12点大小 行高为14点 11 1 8字体属性font 21 11 2控制图文布局 样式表中对图文布局的控制是指字符 单词和行与行之间是如何定位的 包括如何设定字与字之间 字母之间的距离 以及行距 垂直间距 文字的对齐方式 边距 边框及浮动对象等 22 11 2 1设置字间距及字母间距 语法 word spacing normal 长度单位letter spacing normal 长度单位说明 Word spacing 设置英文单词之间的距离 letter spacing 设置英文字母之间的距离 两者可以使用前面讲到的任何一种长度单位 如果使用normal参数 将按照浏览器默认设置显示 23 11 2 2设置行距line height 语法 line height normal 数字 长度单位 比例说明 设置相邻两行的基准线之间的垂直距离 基准线就是英文小写字母如x a的下阶线 但不包括诸如y g等字母超过下阶线的部分 24 实例 用数字设定行距b font size 12pt line height 2 表示将利用字号来确定行距 将字号乘以设定的参数值 即12X2 24 所以在本例中行高将是24点 用长度单位设定行距b line height 11pt 用比例设定行距b font size 10pt line height 140 表示行距是文字的基准大小10pt的140 即14pt 25 语法 text align left right center justifyvertical align top bottom text top text bottom baseline middle sub super 11 2 3文字对齐 26 说明 text align属性用于文字的水平对齐 但这项属性只用于整块的内容 如 到和等 text align参数值说明 27 vertical align属性用于控制文字或其他网页对象相对于母体对象的垂直位置 vertical align参数值说明 28 11 2 4首行缩进属性text indent 首行缩进属性用来指定段文字的第一行文字缩进的距离 而浏览器的默认值不缩进 语法 text indent 数字 百分比说明 在IE浏览器中使用比例参数时 是相对于整个浏览器窗口的宽度 而不是相对于段落的宽度 11 3颜色及背景 30 11 3 1颜色属性color 语法 color 实例 h1 color blue h2 color 000080 31 利用backgroud color属性设置背景颜色 语法 background color transparent 透明 说明 初始值为transparent 透明 实例 body background color white h1 background color 000080 11 3 2背景颜色属性 32 11 3 3背景图像属性 在CSS里 可利用background image属性 将网页背景以图片的方式显示 语法 background image none 无 33 11 3 4背景图片重复属性 设定一个指定的背景图片如何被重复 语法 background repeat repeat repeat x repeat y no repeat 34 background repeat属性参数值说明 35 11 3 5固定背景图片属性 设置指定的背景图片是跟随内容滚动 还是保持固定 语法 background attachment scroll fixed说明 scroll表示滚动 fixed表示固定 初始值为scroll 36 11 3 6背景图片的位置属性 background position设置背景图片的最初位置这个属性只能应用于块级元素和替换元素 替换元素仅指一些已知原有尺寸的元素 HTML替换元素包括IMG INPUT TEXTAREA SELECT 和OBJECT 语法 background position 37 以百分比方法设置background position属性的语法如下 background position x y 其中x 代表设置图片的水平位置 y 代表图片的垂直位置 初始值为0 0 实例 P background position 70 50 repeat y url pic sky jpg 表示背景图片的水平位置为70 垂直位置为50 38 以长度单位设置background position属性的语法如下 background position xy使用长度单位可以对背景图片的位置作出更精确的控制 可以设定水平和垂直定位起点 实例 background position 70px10px url pic sky jpg 表示从左起70像素 垂直10像素的位置开始显示图像 39 以关键字设置background position属性的语法如下 background position top center bottom left center right 注 表示或的意思 表示二者同时使用 表示可搭配使用 实例 background position righttop url pic sky jpg 40 11 3 7背景 语法 background 允许值 初始值 未定义以下是一些背景的声明 body background whiteurl tree jpg h1 background 7fffd4 p background url tree jpg f0f8fffixed table background 0c0url tree jpg no repeatbottomright 11 4美化网页与超链接的设置 42 11 4 1网页链接属性anchor 在CSS里 可以通过网页链接属性anchor来设置网页链接文字的效果 网页链接属性anchor语法说明a link尚未链接过的超链接文字的样式 a visited已链接过的超链接文字的样式 a active当鼠标点击超链接后 超链接文字所显示的样式 a hover当鼠标移到超链接文字上方时 超链接文字所显示的样式 43 11 4 2设置滚动条属性scrollbar 在CSS里 可以通过滚动条属性scrollbar来美化滚动条 44 滚动条scrollbar的参数说明 45 11 4 3光标属性的设置cursor 光标属性cursor可设置光标的图形 cursor属性共提供了16种属性值 如下表所示 46 47 11 4 4边框的设置 在CSS中 可以通过margin属性 border属性和padding属性控制段落 图片和表格等对象的样式 如 边框的宽度 颜色 样式以及对象与边框之间的空白距离 上述三种属性通常用于文件段落 图片 表格与网页边界的空白距离 或者是设置表格内的边框及空白样式等 如下图所示 48 边框属性说明 49 说明 margin属性 控制对象边界与文件其他内容的空白距离 border属性 控制表格四边边框的宽度 颜色及样式 padding属性 控制表格中的内容或图片与对象边界的空白距离 1 边界的设置margin通过margin属性可以设定对象与四周文字之间的距离 其语法如下 margin top right bootom left 长度 百分比 auto 51 说明 margin属性有margin top 顶部空白区域 margin bottom 底部空白区域 margin left 左边空白区域 和margin right 右边空白区域 四个边界属性 通过设置这4项属性 可以控制一个对象四周空白区域的大小 可以使用任何长度单位 如将边距设为负值 就可以将两个对象重叠在一起 52 利用margin属性设置边界值的方法有 设置一个边界值 若margin属性只设置一个边界值时 则上 右 下和左四个边界都将调用此值 实例 margin 2cm 设置对应边值 在margin属性中设置对应边值 是指上边界与下边界 左边界与右边界为相对应的边界 所以若设置对应边其中一边的值时 另一边将调用此值 实例 margin 2cm4cm上边界与下边界的值为2cm 左边界与右边界的值为4cm 53 设置四个边界值 利用margin属性 顺序输入上 右 下 左边界的值 就可以完成四个边界的设置了 实例 margin 20pt30 30px2cm上边界为20pt 右边界为30 下边界为30px 左边界为2cm 54 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 长度 55 border width属性设置宽度有4种方法 设置一个值 四条边框宽度均使用同一个设置值 设置两个值 上边框与下边框宽度调用第一个值 右边框与左边框宽度调用第二个值 设置三个值 上边框宽度调用第一个值 右边框与左边框宽度调用第二个值 下边框宽度调用第三个值 设置四个值 四条边框宽度的调用顺序 顺序为上 右 下 左 56 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 57 4 设置边框的样式border styleborder style属性用于设置边框的样式 其语法设置如下 border style none solid double dotted dashed groove ridge inset outset说明如下 58 border style属性设置值 59 5 设置边框属性border在CSS里 通过border属性可以快速设置边框的宽度 边框颜色及边框样式 其语法如下 border 实例 border 1ptdouble ff0000设置边框的宽度为1pt 样式为双直线 颜色为红色 6 内边界的设置paddingpadding属性主要是控制元素的内容与元素外框内缘的距离 其语法如下 padding top right bottom left 长度 百分比说明 其用法与border color相同 11 5CSS定位 62 11 5 1CSS定位属性 利用样式表的定位属性 就可以精确地设定对象的位置 还能将各对象进行叠放处理 语法 position left top width height visibility z index 63 说明 position属性用于对象的定位 它的参数值有absolute和relative两种 absolute表示绝对定位 在绝对定位中对象的位置是相对于浏览器窗口而言的 relative表示相对定位 被定位的对象的位置是相对于它通常应在的位置而言的 如果停止使用相对定位 则文字的显示位置将恢复正常 64 说明 left属性用于设定对象距浏览器窗口左边的距离 top属性用于设定对象距离浏览器窗口顶部的距离 width属性用于设定对象的宽度 宽度属性只在绝对定位时使用 height属性用于设定对象的高度 高度和宽度的设置类似 只不过是在垂直方向上进行的 65 说明 visibility属性用于设定对象是否显示 这条属性对于被定位和未定位的对象都适用 该属性的参数有三种 isible 使对象可以被看见 hidden 使对象被隐藏 inherit 对象被继承母体对象的可视性设置 66 说明 z index属性用于在网页上重叠文字和图像 当定位多个对象并将其重叠时 可以使用z index来设定哪一个对象应出现在最上层 z index参数值使用整数 用于绝对定位或相对定位了的对象 也可以给图像设定属性 67 示例 div position absolute left 200px top 40px width 150px 浏览器执行到这项规则时 它将文字块按照规则规定的效果显示 将段落的最大水平尺寸限制在150像素 实例 h4 visibility hidden 控制用H4标识的对象不可见 当一个对象被隐藏后 它仍然1要占据浏览器窗口中的原有空间 示例1 absolute绝对定位示例2 设置文字及图片的层次示例3 设置文字的三维效果 本章结束