css学习笔记（三）

最新推荐文章于 2022-12-13 18:00:01 发布

neoxuhaotian

最新推荐文章于 2022-12-13 18:00:01 发布

阅读量1.6k

点赞数 2

分类专栏： html/css/javascript 文章标签： css class 浏览器 html

本文链接：https://blog.csdn.net/neoxuhaotian/article/details/6612176

版权

html/css/javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

二字体的设置

1，设置字体

在HTML中设置字体使用的标记的face属性，而在css中使用font-family属性来设置字体

基本语法：

font-family:字体1, 字体2, ....;

应用font-family属性可以一次定义多个字体，而在浏览器读取字体时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第一种字体，则自动读取第二种字体，若第二种字体也找不到，则自动读取第三种字体，这样一次类推，如果定义的所有字体都找不到，则选用计算机系统默认的字体

在定义英文字体时，若英文字体名是由多个单词组成，并且单词之间有空格，那么一定要将字体名用引号（单引号或双引号）引起来，如：font-family:"Courier New"，定义了一个字体为courier new

实例代码：

<html>
<head>
	<title>在css中设置字体</title>
	<style>
	<!--
	h2{font-family:黑体}
	p{font-family:隶书,楷体,宋体}
	-->
	</style>
</head>
<body>
	<center>
	<h2>
	用font-family属性设置字体
	</h2>
	</center>
	<p>
	字体按照隶书，楷体，宋体的顺序被浏览器读取
	</p>
</body>
</html>

2，设置字号font-size

基本语法：

font-size:绝对尺寸|关键字|相对尺寸|百分比

绝对尺寸是指尺寸大小不会随着显示器分辨率的变化而变化，也不会随着显示器设备的不同而变化

使用绝对尺寸设置文字大小的时候一定要加上单位，如果没有加上单位，如果没有加上单位，浏览器会以px（像素）为单位，绝对尺寸可以使用单位包括in（英寸），px（像素），cm（厘米），mm（毫米），pt（点），pc（皮卡）。最常用的单位还是px（像素）

相对尺寸是指尺寸大小继承于该元素属性的前一个属性单位值，这里要强调的是，如果是在该元素的font-size属性中使用cm为属性单位，那么将直接继承于父元素的font-size属性，若没有父元素，则参考浏览器的默认字号值

绝对尺寸和相对尺寸也可以使用关键字来定义字号，绝对尺寸的关键字有七个，分别为xx-small（极小），x-small（较小），small（小），medium（标准大小），large（较大），x-large（较大），xx-large（极大）。相对尺寸则仅有两个关键字，分别为larger（较大），和smaller（较小）。相对尺寸的larger是指在它的上一个关键字基础上扩大一级，smaller则是在它上一个关键字基础上缩小一级

百分比是基于父元素中的字体大小为参考值的

如：

p{font-size:16pt}

b{font-size:200%}

这两行代码说明，所有标记中用标记定义的文字尺寸大小，是在<;p>标记中定义的文字大小的200%，即为32pt

实例代码：

<html>
<head>
	<title>在css中设置字号</title>
	<style>
	<!--
	.z1{font-size:0.3in}
	.z2{font-size:30px}
	.z3{font-size:0.5cm}
	.z4{font-size:10mm}
	-->
	</style>
</head>
<body>
	<center>s
		<h2 class=z1>
		使用绝对尺寸设置字号大小
		</h2>
	</center>
	<hr>
	<p class=z2>
	这是30像素大小的文字
	</p>
	<p class=z3>
	这是0.5厘米大小的文字
	</p>
	<p class=z4>
	这是0.1厘米大小的文字
	</p>
</body>
</html>

实例代码：

<html>
<head>
<title>在css中设置字号</title>
	<style>
	<!--
	.z1{font-size:xx-small}
	.z2{font-size:x-small}
	.z3{font-size:smaller}
	.z4{font-size:small}
	.z5{font-size:medium}
	.z6{font-size:large}
	-->
	</style>
</head>
<body>
	<center>
	<h1 class=z6>
	使用关键字设置字号大小
	</h1>
	<p class=z1>
	这是关键字xx-small的大小
	</p>
	<p class=z2>
	这是关键字x-small的大小
	</p>
	<p class=z3>
	这是关键字smaller的大小
	</p>
	<p class=z4>
	这是关键字small的大小
	</p>
	<p class=z5>
	这是关键字large的大小
	</p>
</body>
</html>

3，设置字体样式font-style

字体样式就是设置字体是否为斜体，再HTML中可以用标记设置字体为斜体，而在css中要用font-style属性来设置字体的斜体显示

基本语法：

font-style:normal|italic|oblique

font-style属性取值说明
属性的取值	说明
normal	正常显示（浏览器默认样式）
italic	斜体显示文字
oblique	歪斜体显示（比斜体的倾斜角更大）

实例代码：

<html>
<head>
	<title>在css中设置字体样式</title>
	<style>
	<!--
	.p1{font-style:normal}
	.p2{font-style:italic}
	.p3{font-style:oblique}
	-->
	</style>
</head>
<body>
	<center>
	<font size=4 color=red face=黑体>
	使用font-style属性
	</font>
	</center>
	<hr>
	<p class=p1>
	这是属性取值为normal的正常效果
	</p>
	<p class=p2>
	这是属性取值为italic的正常效果
	</p>
	<p class=p3>
	这是属性取值为oblique的正常效果
	</p>
</body>
</html>

4，设置字体加粗font-weight

font-weight属性用来设置字体的加粗，在HTML中使用标记来设置字体为粗体，但在css中是利用font-weight属性设置字体的粗体显示

基本语法：

font-weight:normal|bold|bolder|lighter|number

font-weight属性取值说明
属性的取值	说明
normal	正常粗细（默认显示）
bold	粗体（粗细约为数字700）
bolder	加粗体
lighter	细体（比正常字体还细）
number	数字一般都是整百，有九个级别（100-900），数字越大越粗

实例代码：

<html>
<head>
	<title>在css中设置字体加粗</title>
	<style type="text/css">
	<!--
	#b1{font-weight:normal}
	#b2{font-weight:bold}
	#b3{font-weight:bolder}
	#b4{font-weight:lighter}
	#b5{font-weight:100}
	#b6{font-weight:400}
	#b7{font-weight:700}
	#b8{font-weight:900}
	-->
	</style>
</head>
<body>
	<center>
	<h3 id=b8>
	使用font-weight设置字体加粗
	</h3>
	</center>
	<hr>
	<p id=b1>
	font-weight属性取值为正常粗细
	</p>
	<p id=b2>
	font-weight属性取值为粗体效果
	</p>
	<p id=b3>
	font-weight属性取值为加粗体效果
	</p>
	<p id=b4>
	font-weight属性取值为细体效果
	</p>
	<p id=b5>
	font-weight属性取值为100的效果
	</p>
	<p id=b6>
	font-weight属性取值为400的效果
	</p>
	<p id=b7>
	font-weight属性取值为700的效果
	</p>
</body>
</html>

5，设置字体变体font-variant

设置字体变体就是设置字体是否显示为小型的大写字母。而且css中的font-variant属性主要用于设置英文字体

基本语法：

font-variant:normal|small-caps

实例代码：

<html>
<head>
	<title>在css中设置小型的大写字母</title>
	<style type="text/css">
	<!--
	p{font-variant:small-caps}
	-->
	</style>
</head>
<body>
	<center>
		<h3>
		使用font-variant属性设置字体变体
		</h3>
	</center>
	<hr>
	hello!you like css?...小写的英文字母<br>
	<p>
	hello!you like css?...小写的英文字母变为小型的大写英文字母
	</p>
</body>
</html>

5，组合设置字体属性font

font属性是一种复合属性，可以同时对文字设置多个属性，包括字体斜体，字体大小，字体风格，字体加粗以及字体变体

基本语法：

font:font-family{font-size{font-style{font-weight{font-variant}}}}

font属性主要作用于不同的字属性的略写，特别是可以定义行高

属性与属性之间一定要用空格间隔开

例如：

P{font:italic bold small-caps 15pt 宋体;}

neoxuhaotian

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记（三）

二字体的设置1，设置字体在HTML中设置字体使用的标记的face属性，而在css中使用font-family属性来设置字体基本语法：font-family:字体1, 字体2, ....;应用font-family属性可以一次定义多个字体，而在浏览器读取字体时，会按照定义的先后顺
复制链接

扫一扫