第9章 CSS属性设置.ppt

第9章 CSS属性设置 9.1 设置字体样式 9.2 控制图文布局 9.3 颜色及背景 9.4 网页美化与超链接 9.5 CSS定位和CSS滤镜 9.1 设置字体样式 9.1.1 字体属性 9.1.1.1 font-family（字体系列） 9.1.1.2 font-size（字体大小） 9.1.1.3 font-style（文字风格） 9.1.1.4 font-variant（字形变体） 9.1.1.5 font-weight（字体粗细） 9.1.1.6 font（字体） 9.1.2 text-decoration（文字修饰） 9.1.1.1 font-family（字体系列） 描述了用何种字体系列来显示文字，可以为文字指定一种或多种字体，属性值为用逗号分隔的字体名称列表，如： p {font-family: “Arial,华文彩云,黑体,楷体} 浏览器会依次查找系统中是否安装此字体。若都未安装，则用系统的默认字体显示。 9.1.1.2 font-size（字体大小） 本属性允许我们定义字体的大小。例如 P {font-size: 30pt} P {font-size: 200%} P {font-size: large} P {font-size: larger} P {font-size: +5pt} CSS共支持用5种方式表示字体大小。分别是磅值、相对值、关键字、相对关键字和增大值。 9.1.1.3 font-style（文字风格） 使用本属性可以使文字产生斜体效果，属性的值为italic或oblique。这两个值都能产生斜体，并且很难区分他们的差别，所以可以任选其一使用，例如 P {font-style: oblique} 若不想产生斜体效果，可以指定其值为默认值normal或干脆不使用本属性。 9.1.1.4 font-variant（字形变体） 本属性的默认值也是normal，表示不作变形，若指定其值为small-caps，则小写字母都变形为小的大写字母，如 p {font-variant: small-caps} … pabcABC 效果如图 9.1.1.5 font-weight（字体粗细） 本属性可以控制字体的粗细（注意和大小是不同的概念），它的默认值也是normal。可以指定其值为100到900之间并且是100的倍数的数字，共9种不同的粗细。也可以使用关键字，其中normal对应400，bold对应700，bolder和lighter分别表示比当前的值增加或减少100。例如 p {font-weight: bold} p {font-weight: 700} 9.1.1.6 font（字体） 同时设置字体系列、字体粗细、字体大小和斜体等属性。 要求按font-style、font-variant、font-weight、font-size、line-height和font-family的值的顺序书写，可以缺少其中的某些值，但剩下的值必须按要求的先后顺序排列。 各属性值之间以空格为分隔符，只有font-size和line-height的值之间以“/”分隔。 font-family的值如果是含有多个字体系列的列表，则各系列之间以逗号分隔，如果单个系列名称中含有空格，则该系列要用双引号包括起来。 9.1.2 text-decoration（文字修饰） 本属性可以产生文本修饰效果，它的值是下列关键字的一个或多个：underline（下划线）、overline（上划线）、line-through（穿越线）、blink（闪烁）和none（无），例如 p {text-decoration: underline line-through} 它产生的效果是给文字加上下划线和穿越线，如图所示 9.2 控制图文布局 9.2.1 字间距与行间距 9.2.2 text-align（文字对齐） 9.2.3 text-indent（首行缩进） 9.2.1 字间距与行间距 1.letter-spacing（字间距） 本属性可以控制文字之间的间隔距离，它的值可以是默认关键字normal，表示使用正常的字符间距；也可以使用数值，它的单位是px（像素）。例如： p {letter-spacing: 15px} 2. line-height（行高或行间距） 本属性定义了文本的最小行间距。通常浏览器将单行距离作为文本的行间距，我们可以通过line-height属性来增加行间距。本属性可以接受长度值、百分数或缩放系数。例如： P{ line-height: 20pt } P{ li