第四节 CSS的常用属性.docVIP

第四节 CSS的常用属性 在CSS中，一条指令由两部分组成，前一部分“选择器”用于指定对哪些XML元素进行格式化，后一部分“属性”用于指定具体如何进行格式化。 每一个属性都由属性名和属性值组成，属性名都是CSS的关键字，如font-size(字体大小)、font-style(字体样式)、background(背景样式)、border(边框样式)等。 下面介绍CSS中常用的属性设置。 1. 设置字体属性 常见的字体属性设置 属性名 属性值 默认值 font-style normal 正常字体 italic 斜体 oblique 倾斜体 normal font-variant normal 正常字体 small-caps 小型的大写字母字体样式 normal font-weight normal 正常字体 bold 粗体 bolder 比normal粗一些 lighter 比normal细一些 normal font-size 指定字体大小 line-height 指定行高 font-family 指定字体名称 特殊情况：font属性 font: font-style font-variant font-weight font-size line-height font-family font属性可以在一条规则中设置语法中的6种属性，各属性之间用空格隔开。 例如：对Name元素设置它的字体属性，如下所示： Name { font:italic small-caps bold 20pt 30pt sans-serif } 如何在CSS中正确地设置中文字体？ 假设你想将字体以楷体的样式来显示，如下设置： font-family:楷体_GB2312； 这样，将得不到预期的效果，这是因为CSS不支持中文，CSS不认识中文字符“楷体_GB2312”，所以需要将中文字符转换成对应的英文字符，如下所示： 黑体：SimHei宋体：SimSun新宋体：NSimSun仿宋：FangSong仿宋_GB2312：FangSong_GB2312楷体_GB2312：KaiTi_GB2312微软雅黑体：Microsoft YaHei 示例1：对于描述产品信息的XML文档，在浏览器中要求按以下格式显示： 每个产品的显示格式：字体大小30磅，行高为40磅； 名称的显示格式：楷体_GB2312，红色，粗体； 价格的显示格式：黑体，蓝色，斜体； 数量的显示格式：Times New Roma，绿色，加粗，斜体； 示例1的CSS文件，如下所示： ProductInfo { font-size:30pt; line-height:40pt; } Product { display:block; } Name { font-family:KaiTi_GB2312; color:red; font-weight:bold; } Price { font-family:SimHei; color:blue; font-style:italic; } Quantity { font-family:Times New Roma; color:green; font-weight:bold; font-style:italic; } 2. 设置文本属性 常见的文本属性设置 属性名 属性值 默认值 word-spacing 指定单词间距 letter-spacing 指定字符间距 text-decoration normal 无装饰 blink 闪烁 underline 下划线 line-through 删除线 overline 上划线 normal vertical-align 指定垂直方向的对齐方式 baseline 与基线对齐 top 顶部对齐 middle 居中对齐 bottom 底部对齐 baseline text-transform none 无转换 capitalize 将每个单词的第一个字母转换成大写 uppercase 将元素中的文本全部转换成大写 lowercase 将元素中的文本全部转换成小写 none text-align 指定水平方向的对齐方式 left 左对齐 right 右对齐 center 居中对齐 justify 两端对齐 left text-indent 指定缩进距离 示例2：对于描述产品信息的XML文档，在浏览器中要求按以下格式显示： 名称的显示格式：单词间距为10磅，闪烁，左对齐，全部大写； 价格的显示格式：字符间距为10磅，加下划线，居中对齐； 数量的显示格式：加删除线，垂直方向居中对齐，右对齐。 示例2的CSS文件，如下所示