第9章 css属性.ppt

1、网页设计基础,Css中文译成 . 级联样式表的三种类型分别是 、 、 。 外部样式表通常是一个扩展名为 的纯文本文件。 外部样式表的载入分为 和 两种方法。 如果在内联样式表中先定义了段落标签p中文字颜色为蓝色，又在文档级样式表中定义段落标签p中文字颜色为红色，那么最后显示的颜色为 色。,设置字体样式 font-size（字体大小） 本属性允许我们定义字体的大小。 例如： p font-size:30pt p font-size:200% p font-size:large p font-size:larger,font-family（字体系列） 本属性描述了用何种字体系列来显示文字，可以为文

2、字指定一种或多种字体，属性值为用逗号分隔的字体名称列表。 例如： p font-family: ”New Century Schoolbook”，华文彩云，黑体，楷体,font-style（文字风格） 使用本属性可以使文字产生斜体效果，属性的值为italic或oblique。这两个值都能产生斜体，并且很难区分它们的差别，所以可以任选其一使用。 例如： p font-style：italic,font-weight（字体粗细） 本属性可以控制字体的粗细，它的默认值是normal。要改变粗细，可以指定其值为100到900之间并且是100的倍数的数字，共9种不同的粗细。当然也可以使用关键字，其中no

3、rmal对应400，bold对应700，而bolder和lighter分别表示比当前的值增加或减少100。 例如： pfont-weight:bold 或 pfont-weight:700,font-variant（字形变体） 本属性的默认值也是normal，表示不作变形，若指定其值为small-caps，则小写字母都变形为小的大写字母。,text-decoration（文字修饰） 本属性可以产生文本修饰效果，它的值是下列关键字的一个或多个：underline（下划线）、overline（上划线）、line-through（穿越线）、blink（闪烁）和none（无）。 例如： ptext-d

4、ecoration:underline line-through,text-transform（文字的更改） 在CSS中通过text-transform属性可以使网页设计者能很容易的控制字母的大小写。 例如： ptext-transform:uppercase|lowercase |capitalize|none,控制图文布局 字间距与行间距 1、letter-spacing（字间距） 本属性可以控制文字之间的间隔距离，它的值可以是默认关键字normal，表示使用正常的字符间距；也可以使用数值，它的单位是px（像素）。 例如: p letter-spacing：15px,2、 line-hei

5、ght（行高或行间距） 本属性定义了文本的最小行间距。通常浏览器将单行距离作为文本的行间距，用户可以通过line-height属性来增加行间距。本属性可以接受长度值、百分数或缩放系数。 例如： p line-height:20pt p line-height:120% p line-height:2.0,text-align（文本对齐） 本属性允许调整文本相对于页边的水平对齐方式，这项属性只用于整块的内容，如、 -,共有4个值，分别是left、right、center和justify。根据这些值的名称就可以知道它们分别为左、右、中和两边对齐。 例如： p text-align：justify,

6、text-indent（首行缩进） 本属性可以为一段文字设置首行缩进的效果，它的值为数值，单位是长度单位或百分数，表示首行的缩进量（用百分数时表示缩进量为当前字符宽度的多少倍）。 例如： p text-indent:20pt(缩进20磅) p text-indent:40%(缩进40),颜色及背景 color（字体颜色属性） 本属性可设置指定元素的颜色。颜色的值可以是颜色名或十六进制RGB组合。 background-color（背景颜色属性） 本属性用来控制元素的背景颜色，它的值也是颜色值，写法和color的值相同。CSS中background-color属性不仅可以设置页面的背景颜色，而且

7、可以应用于任何元素。,background-image（背景图像） 本属性可以在元素内容中放置一个背景图像。它的值可以是URL，也可以是默认关键字none。 例如： body background-image： url（bgimages/abc.gif） td background-image： url（bgimages/abc.gif）,CSS属性实例1,程序代码, Google , Google ,background-repeat（背景图片重复） 背景图片重复属性决定一个指定的背景图片 如何被重复。 例如： bodybackground-repeat：repeat| repeat-x|r

8、epeat-y|no-repeat,background-repeat属性参数值说明,background-attachment（固定背景图片） 固定背景图片属性决定指定的背景图片是跟随内容滚动，还是保持固定。 例如： bodybackground-attachment： scroll|fixed 说明： scroll表示滚动，fixed表示固定。初始值为scroll。,background-image（背景图片的位置） 通过背景图片的位置属性background-position可以改变背景图片的最初位置。 例如： background-position：| |,说明： 以百分比方法设置ba

9、ckground-position 属性的语法如下： background-position：x% y% 其中x%代表设置图片的水平位置；y%代表图 片的垂直位置。初始值为0% 0%。, 以长度单位设置background-position属性的语法如下： background-position：x y 使用长度单位可以对背景图片的位置作出更精确的控制，可以设定水平和垂直定位起点。 实例： background-position:70px 10px 表示从左起70像素、垂直10像素的位置开 始显示图像。, 以关键字设置background-position属性的语法如下： background

10、-position： top|center|bottom|left|center|right （注：|表示或的意思，|表示二者同时使用，表示可搭配使用） 实例： background-position:right top 表示背景图片的水平位置为100%，垂直位置为0%。,background-position属性关键字方法的参数值说明,background（背景） 例如：background： 允许值：| 初始值：未定义 说明：背景属性是一个更明确的背景关系属性的略写。 例： bodybackground:white url(tree.jpg),网页超链接 在CSS中为超链接专门定义了伪类，

11、允许为特定的标签状态定义显示样式。定义伪类的方法和常规类很相似，但有两点不同：一是连接符是冒号而不是句点号；二是它们有预先定义好的名称，而不能随便取名，三种状态的类名分别是:link（未访问）、:active（正在访问）、:visited（已访问）。另外还有一个伪类:hover，它的作用是控制鼠标停留在元素上时该元素鼠标的显示样式。,边框属性 border-color(边框颜色) 本属性可以设置边框的颜色，属性的值为颜色值，需要注意的是本属性可以接受1-4个值。 例如： .b1 border-color:red yellow blue,border-width（边框宽度） 本属性允许改变边框的宽度，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等，也可以是像素值。 例如： .b2border-width:1pt thick,border-style（边框风格） 本属性用以设置边框线的样式，它可以接受9个关键字作为值，如果你不想有任何边框，可以为它取值为“none”或者“hidden”。 例如： .b3border-style:outset,边框缩略属性 给边框分别设置样式、颜色等属性是一件烦琐的事，所有CSS提供了5种边框缩略属性，border-top、border-bottom、border-