一.设置字体样式
1.字体属性
1),font-family（字体系列）
本属性描述了用何种字体系列来显示文字，可以为文字指定一种或多种字体，属性值为用逗号分隔的字体名称列表。
例如：
p{font-family: "New Century Schoolbook",华云彩云，黑体，楷体}
浏览器会使用列表中的第一个字体，这里是New Century Schoolbook字体。如果操作系统未安装该字体，则浏览器会使用下一字体(华文彩云)，若仍未安装该字体，则依次尝试列表中的下一字体。若都未安装，则会用默认字体显示文字。
注：对于名称中间含有空格的字体，建议用双引号括起来，在使用内联样式时，多重双引号会出现问题，应使用单引号标记。
2),font-size（字体大小）
本属性允许我们定义字体的大小。例如：
p{font-size: 30pt;}
p{font-size: 200%;}
p{font-size: large}
p{font-size: larger}
CSS共支持5种方式表示字体大小。分别是磅值、相对值、关键字、相对关键字和增大值。
3),font-style
使用本属性可以使文字产生斜体效果，属性值为italic或oblique。这两个值都能产生斜体，并且很难区分它们的差别，所以可任选其一；若不想产生斜体效果，可以指定其值为默认值normal或者不使用本属性。
4),font-variant（字形变体）
本属性的默认值也是normal，表示不作变形，若指定其值为small-caps，则小写字母都变形为小的大写字母。
5),font-weight（字体粗细）
本属性可以控制字体的粗细，它的默认值也是normal。要改变粗细，可以指定其值为100到900直接并且是100的倍数的数字，共9种不同的粗细。当然也可以使用关键字，其他normal对应400，bold对应700，而bolder和lighter分别表示比当前的值增加或减少100.
6),font（字体）
p{font-size: 宋体
font-weight: bold
font-size: 15pt
font-style: itakic}
可简化为：
p{font: italic bold 15pt 宋体}
但是font属性对于它的值有一定的要求。首先是顺序的要求，要求按font-style、font-variant、font-weight、font-size、line-height和font-family的值的顺序书写，可以缺失其中某些值（实际上就是以该属性的默认值显示，但font-size和font-family的值必须出现），如上例中就缺少了font-variant和line-height(行高)的值，但剩下的值必须按要求的先后顺序排列；其次是各属性值之间以空格为分隔符，只有font-size和line-height的值之间以“/"分隔；最后，font-family的值如果是含有多个字体系列的列表，则各系列之间以逗号分隔。
示例：
P{font: italic 20pt times}
H1{font: 20pt/10pt 宋体}
I{font: 15pt "times new roman",sans-serif,宋体}
2.text-decoration(文字修饰)
本属性可以产生文本修饰效果，它的值是下列关键字的一个或多个:underline(下划线)、overline(上划线)、line-through(穿越线)、blink(闪烁)和none(无)。例如：
p{text-decoration: underline line-through}
二.控制图文布局
字体属性和文本属性的区别是前者控制了文本的大小、样式和外观等单个文字方面的属性，而后者控制文本、图片、视频等多媒体内容的对齐方式、呈现方式等段落方面的属性。
1.字间距和行间距
1）,letter-spacing(字间距)
本属性可以控制文字之间的间隔距离，它的值可以是默认关键字normal，表示正常的字符间距，也可以使用数字，单位为像素(px).例如：
p{letter-spacing: 15px}
2）,line-height(行高或行间距)
本属性定义了文本的最小行间距。通常浏览器将单行距离作为文本的行间距，用户可以通过line-height属性来增加行间距。本属性可以接受长度值、百分数或缩放系数；例如：
p{line-height: 20pt}
p{line-height: 120%}
p{line-height: 2.0}
第一条规则设定行间距为20磅，第二天设定为字体大小的120%,第三条设定为字体大小的两倍。
2.text-align(文字对齐)
本属性允许调整文本块(<p>或<div>）相对于页边的对齐方式，共有4个值，分别是left,right,center和justfy。即左、右、中和两边对齐。例如：
p{text-align: justify}
这条规则告诉浏览器所有放在<p>和</p>中间的文字都用两边对齐方式显示。
3.text-indent(首行缩进)
本属性可以为一段文字设置首行缩进的效果，它的值为数值，单位是长度单位或百分数，表示首行的缩进量(用百分数时表示缩进两位当前字符宽度的多少倍)。比如：
p{text-indent: 20pt}（缩进20磅）
p{text-indent: 100%}(缩进一个字符)
三.颜色及背景
1.color(字体颜色属性)
本属性可设置标签内容的背景色。颜色的值可以是颜色名、十六进制RGB组合或十进制RGB组合。例如，对文字设置蓝色，下面的书写均为正确：
p{color: blue}
p{color: #0000ff}
p{color: rgb(0,0,255)}
p{color: rgb(0,0,100%)}
当然，不仅可以使用color属性设置文本的颜色，还可以设置其他标签中的非文本内容，例如水平分隔线<hr>等。
2.background-color（背景颜色属性）
本属性用来控制元素的背景颜色，它的值也是颜色值，写法和color的值相同。CSS中background-color不仅可以设置页面的背景颜色，而且可以应用于任何元素(任何标签)。
示例：css.html
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<i>颜色及背景</i>
<ol>
<li>字体颜色背景</li>
<li>背景颜色属性</li>
<li>背景图片属性</li>
</ol>
<table>
<tr>
<td>color</td>
<td>background-color</td>
</tr>
<tr>
<td>background-image</td>
<td>background</td>
</tr>
</table>
</body>
</html>styles.css
li
{
background-color: #dddddd;
}
td
{
background-color: blue;
}
I
{
background-color: red;
}
运行结果：
3,背景图片属性
1).background-image(背景图像)
本属性可以在元素内容中放置一个背景图像。它的值可以是URL，也可以是默认关键字none。例如：
body{background-image: url(bgimages/abc.gif)}
td{background-image: url(bgimages/abc.gif)}
上例分别定义了整个页面和表格单元格的背景图像，此处URL的值的写法是"url"后紧跟"()"，小括号中填入图片的URL的值
注意：
本属性可以用于任何元素。
若图像比元素区域大，则将被剪裁为与元素区域相同的大小；若图像比元素区域小，则将平铺该图像(平铺方式由background-repeat属性指定)
当使用背景图像时，建议同时指定背景颜色，因为如果用户的浏览器不能显示图像，还可以用背景颜色代替。
2）,background-attachment(背景附件)
如果为某元素指定了背景图像，则可以用本属性来设置图像的滚动方式。如使用默认值scroll，则背景图像随元素的移动而移动；若使用了fixed值，则图像不滚动。
扫一扫
2173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
