第六章 常用的CSS属性(理论)

常用的CSS属性第六章本章单词repeat （重复）

attachment （依附，附件）

fixed （固定的，不变的）

transparent （显而易见的，透明的）

transform （变换，转换）

capitalize （使用首字母大写书写或印刷）

uppercase （大写字母）

underline （下划线，强调）

variant （变体，变量，变形）

medium （中间的，中等的）

alpha （希腊字母的第一个字母）

disc （唱片，圆盘）

square （正方形，平方）

decimal （十进位的，小数）

outside （户外，在外边，超出范围）

visibility （可见性，能见度）预习检查3预习检查为了使得背景图像固定，不随内容一起滚动，可以为css的()属性赋值为()。background-imageno-repeatbackground-attachmentno-repeatbackground-imagefixedbackground-attachmentfixed使用border-width属性设置四个边框的粗细，顺序应为()。上、下、左、右左、底、右、顶顶、右、底、左顶、左、底、右

预习检查CSS属性text-decoration可以设置为以下()一组值。none、justfy、left、rightnone、left、center、rightnone、underline、overline、line-throughnone、capitalize、uppercase、lowercase以下有关字体的CSS属性的说法，错误的是()。可以为font-style赋值为italic可以为font-variant赋值为normal可以为font-weight赋值为bold可以为font-family赋值为normal

预习检查使用list-style设置列表项目的符号类型、位置、图像时，正确的顺序应为()。list-style-type、list-style-position、list-style-imagelist-style-position、list-style-type、list-style-imagelist-style-image、list-style-position、list-style-typelist-style-type、list-style-image、list-style-position

本章目标理解并掌握与背景相关的样式属性理解并掌握与边框相关的样式属性理解并掌握与文本相关的样式属性理解并掌握与字体相关的样式属性理解并掌握与列表相关的样式属性理解并掌握其他常用的样式属性。背景

使用与背景相关的CSS属性，可以设置一个区域的背景颜色、背景图像。属性意义取值background-color设置元素的背景颜色。rgb颜色、十六进制颜色、颜色名称、透明色。如:rgb(255,0,0)或#ff0000或red都可表示红色。background-image把图像设置为背景。url(图像的URL地址)或none。background-repeat设置背景图像是否及如何重复平铺。repeat:沿水平和垂直两个方向重复平铺；repeat-x:仅沿水平方向重复平铺；repeat-y:沿垂直方向重复平铺；no-repeat:不重复平铺即图像在背景上只出现一次。background-attachment背景图像是否固定或者随着页面的其余部分滚动。scroll:背景图像随着容器一起滚动；fixed:背景图像在容器滚动时固定不动。background-position设置背景图像的起始位置。水平方向上有left、center、right三种位置，垂直方向上有top、center、bottom三种位置，background简写属性，作用是将背景属性设置在一个声明中。依次提供background-color、background-image、background-repeat、background-attachment、background-position属性的值。之间用空格分隔。背景

<styletype="text/css">body{ background-color:#abcdef; background-image:url(image/eg_bg.gif); background-repeat:repeat-x; background-attachment:fixed; background-position:bottomleft;}演示例6-1背景网页元素的背景显示时，背景图像优先于背景颜色。background-color属性设置为transparent表示透明。一般应为background-position属性赋两个值，第一个值表示垂直方向，第二个值表示水平方向。如topleft表示顶部左侧，centerright表示中部右侧，bottomcenter表示底部中间。如果仅设置一个方向的位置关键字，则它表示垂直方向，而缺少的第二个水平方向默认为center。可使用两个像素值描述背景图像与容器左边界及顶边界的距离，如:50px100px；可使用百分数描述背景图像与容器左边界及顶边界的距离。边框

使用与边框相关的CSS属性，可以设置一个区域的边框粗细、线型及颜色。属性意义取值border-*-widthtop|right|bottom|left边框的宽度。可使用thin、medium、thick三种值，还可使用以像素单位的数字值。border-*-styletop|right|bottom|left边框的线型。常用的有solid、dashed、dotted、double等，使用none是则无边框。border-*-colortop|right|bottom|left边框的颜色。可使用rgb颜色，十六进制颜色和颜色名称及透明色。透明由transparent表示。border-width、border-style、border-color为各个边框设置宽度、线型和颜色。按top|right|bottom|left的顺序依次设置各个边框的宽度、线型和颜色，各个值之间用空格分隔。border-*top|right|bottom|left边框的宽度，线型和颜色。按宽度、线型、颜色的顺序依次提供值，各个值之间用空格分隔。border在一个声明中设置四个边框的所有属性。按宽度、线型、颜色的顺序依次提供值，各个值之间用空格分隔。border-collapse相邻的两条边框线是否合并为一条常用的值是collapse,意思是要将相邻的两条边框线合并为一条。边框<styletype="text/css"> #mytable{ width:300px; height:120px;

border-collapse:collapse; border:4pxdoublegray; } #mytabletd{

border-width:1px;border-style:dashed;border-color:blue; }</style><tableid="mytable"> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr></table>演示例6-2边框border-width（border-style、border-color）属性如果只赋一个值，则它表示四条边框共同的宽度（线型、颜色）；如果有两个值，则第一个值表示顶边框和底边框的宽度（线型、颜色），而第二个值表示右边框和左边框的宽度（线型、颜色）；如果有三个值，则第一个值表示顶边框的宽度（线型、颜色），第二个值表示右边框和左边框的宽度（线型、颜色），第三个值表示底边框的宽度（线型、颜色）。左右相邻的两个单元格本来有各自独立的四个边框，大部分时候我们希望左边单元格的右边框与右边单元格的左边框合并在一起。可以在这些单元格所属的表格上设置单元格边框的合并属性值为collapse即可。上下相邻的单元格边框合并亦同此理。文本

使用与文本相关的CSS属性，可以设置文本块的文字颜色、字间距、字符间距、水平对齐方式、文字装饰、缩进、大小写转换等。属性意义取值color设置文本颜色。颜色值。text-align元素中文本的水平对齐。可使用left、right、center、justify。text-decoration向文本添加修饰。可使用none、underline、overline、line-through，分别表示无修饰、下划线、上划线和删除线。text-indent缩进元素中文本的首行。可使用像素单位的数字或百分比。letter-spacing设置字符间距。可使用像素单位的数字设定，默认为normal。word-spacing设置字间距。可使用像素单位的数字设定，默认为normal。text-transform控制元素中字符的大小写转换。可使用none、capitalize、uppercase、lowercase。文本<styletype="text/css"> p{font-size:14px;} #myp1{

color:red;text-indent:28px; } .myspan{ color:blue;text-decoration:underline;letter-spacing:10px; } #myp2{

text-align:center;text-transform:uppercase; }</style>

<pid="myp1">这是一个段落。<spanclass="myspan">这里有一个文字块</span>这是一个段落。</p><pid="myp2"style="word-spacing:14px;text-transform:capitalize;">onetwothreefourfive</p>演示例6-31、2、3、小结1背景有哪些方面的CSS属性边框有哪些方面的CSS属性文本有哪些方面的CSS属性字体使用与字体相关的CSS属性，可以设置文字块的字体或字体组、字号大小、行间距以及加粗、倾斜、小型大写字体等特殊格式。属性意义取值font-style设置字体样式。normal:正常；italic:斜体；oblique:倾斜font-variant以小型大写字体或者正常字体显示文本。normal:正常；small-caps:小型大写font-weight设置字体的粗细。可使用normal、bold、bolder、lighter。font-size设置字体的尺寸。一般使用基于px或pt单位的数字。font-family字体类型名称或者字体组列表。各字体名称之间用,逗号分隔。font将所有针对字体的属性设置在一个声明中。依次设置font-style、font-variant、font-weight、font-size、font-family等属性line-height设置文本块的行高。可使用px像素单位或%百分比。字体<styletype="text/css"> body,p,td{font-family:微软雅黑,宋体;} h1,h2,h3{font-family:黑体,宋体;} h1{font-size:24pt;} h2{font-size:18px;} h3{font-size:15pt;} .myp{

font-style:normal;font-variant:normal;

font-weight:400;font-size:16px; font-family:宋体;line-height:24px; } .myspan{

font:italicnormalbold14px“微软雅黑,宋体”; }</style><body><h1>这是一级标题</h1> <pclass="myp">这是一个段落。这是一个段落。这是一个段落。<spanclass="myspan">这是段落中包含的文字块。</span>这是一个段落。这是一个段落。</p></body>演示例6-4列表

使用与列表相关的CSS属性，可以设置有序列表和无无序列表的列表项目的标记（编号或项目符号）、列表项标记的位置、列表项标记的图像。属性意义取值list-style-type设置列表项标记的类型。较常用的值有disc、circle、squaredecimal、lower-roman、

upper-roman、lower-alpha、

upper-alpha。list-style-position设置列表中列表项标记的位置。outside:列表项标志位于列表区域外面，默认值。inside:列表项标志插入到列表区域开始处，就像是第一个字符。list-style-image将图像设置为列表项标记。提供图像的地址，也可设置为none。list-style用于将所有用于列表的属性设置于一个声明之中。依次设置list-style-type、list-style-position、list-style-image。值之间用空格分隔。列表<ulclass="disc"> <li>咖啡</li><li>茶</li><li>可口可乐</li></ul><olclass="ualpha"> <li>咖啡</li><li>茶</li><li>可口可乐</li></ol><ulstyle="list-style:circleinsideurl(image/eg_arrow.gif);"> <li>EarlGreyTea-一种黑颜色的茶</li> <li>JasmineTea-一种神奇的“全功能”茶</li> <li>HoneybushTea-一种令人愉快的果味茶</li></ul><olstyle="list-style:upper-alphainside;"> <li>EarlGreyTea-一种黑颜色的茶</li> <li>JasmineTea-一种神奇的“全功能”茶</li> <li>HoneybushTea-一种令人愉快的果味茶</li></ol>