HTML学习笔记之CSS属性设置(一)

一.设置字体样式

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值,则图像不滚动。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值