、 设置字体样式的基本标签是<font></font>,被其包含的文本为样式作用区。在初学者的HTML代码编写中,<font></font>容易被多重嵌套,如<font 属性1=值1><font 属性2=值2>文本</font></font>。还有一种情况是标签嵌套错位,如<font><p>文本</font></p>。为了规范代码的编写,避免不必要的错误,读者在初学时一定要谨慎。
2、设置文字的颜色 color 是标签的属性之一,用于设置文字颜色。color是<font></font>标签的属性之一,用于设置文字颜色。例子如:浅红色文字:<font color="#dd0000">51UM博客即汤汤个人博客网站,是一个和草根站长们一起学习分享网站SEO优化技术、web前端开发为主的个人博客网站。</font>
3、设置文字的尺寸 size 也是标签的属性,用于设置文字大小。size 的值为1-7, 默认为3。我们可以 size 属性值之前加上“+”“-”字符,来指定相对于字 、 号初始值的增量或减量。例子如: size为1:<font size="-2">HTML学习</font>
4、使文字倾斜,用双标签<i></i>可使被作用文字倾斜,达到特殊的效果,例如文章的日期。<em></em>被称为强调标签,也是斜体,目前使用比<i></i>标签更频繁,其编写方法如下:
<i>这是斜体文字</i>
<em>这也是斜体文字</em>
5、 使文字加粗,用双标签<b></b>可使被作用文字加粗,是文字更加醒目,例如文章的标题部分。<strong></strong>被称为特别强调标签,也是文字加粗,目前使用比<b></b>标签更频繁,其编写方法如下:
<b>这是粗体文字</b>
<strong>这也是粗体文字</strong>
除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址,谢谢!
技术等级】初级
【承接文章】《强大的CSS选择器,CSS的核心技术,前端小白必备功底》
本文重点讲解CSS技术中有关字体样式的属性以及这些属性的取值。本文属于前端开发的初级教程,适合于刚刚开始接触CSS技术的学习者。
从本文开始,小海老师将带领大家认识CSS技术中的所有属性。我把CSS技术中的各个属性进行了分类,首先我们从与字体样式有关的属性开始。
CSS中与字体有关的属性包括以下六个:
font-family
font-size
font-weight
font-style
font-variant
color
一、字体样式属性:
CSS利用font-family属性来设置字体或字体列表。
1、设置字体:
.sty01{font-family:黑体;}
上述代码定义了用户自定义类sty01,该样式设置字体为“黑体”。利用class属性取值为sty01样式的HTML标记对中的文字将以“黑体”的字体显示。
2、设置字体列表:
.sty02{font-family:汉仪综艺体简,微软雅黑,黑体;}
上述代码定义了用户自定义类sty02,该样式设置了一个字体列表。利用class属性取值为sty02样式的HTML标记对中的文字,首先以“汉仪综艺体简”的字体显示,目标浏览器所在的设备若没有安装该字体,则自动以“微软雅黑”的字体显示;目标浏览器所在的设备若也没有安装“微软雅黑”字体,则自动以“黑体”的字体显示。
注意:为了防止CSS文件的中文字体名称不符合字符集的要求,所以习惯上都是用中文字体的外文名称来书写font-family属性的取值,下面我就为大家罗列几个常用的字体名称。
设置字体为 微软雅黑:.style1{font-family:Microsoft YaHei;}
设置字体为 宋体:.style2{font-family:SimSun;}
设置字体为 幼圆:.style3{font-family:YouYuan;}
设置字体为 黑体:.style4{font-family:SimHei;}
设置字体为 楷体:.style5{font-family:KaiTi;}
更多中文字体的西文名称,小海老师会在后续的文章中详细罗列。
二、字号大小属性:
CSS利用font-size属性来设置文本的字号效果
1、绝对大小:
xx-small
x-small
small
medium
large
x-large
xx-large
上述取值中:medium为默认值,medium以上的取值越来越小,medium以下的取值越来越大。
2、相对大小:
smaller,比上一级元素的字体大小小一号。
larger,比上一级元素的字体大小大一号。
代码实例:
<div style=“font-size:14px;”>
<span style=“font-size:larger;”>段落文字内容</span>
</div>
上述代码中“段落文字内容”的字体大小显示为比14px字号大一号的外观。
3、带有单位的长度值:
代码实例:.s1{font-size:16px;}
上述代码定义了用户自定义类s1,该样式设置字号为16px大小。
4、百分比:
设置字体字号为上一级元素的百分比大小。
代码实例:.s2{font-size:10%;}
上述代码定义了用户自定义类s2,该样式设置字号是上一级元素的字体大小的20%。
三、字体粗细属性
CSS利用font-weight属性来设置文本的粗细效果
normal,普通粗细,粗细度约为400。
bold,粗体,粗细度约为700。
bolder,更粗体,粗细度约为900。
lighter,更细体,粗细度约为500。
100、200、300、400、500、600、700、800、900:9个粗细等级。
但是现在的浏览器都无法将字体的粗细渲染的如此细腻,也就是说这9个等级的粗细度并没有明显的差异。
四、字体斜体属性
CSS利用font-style属性来设置文本的斜体效果
normal,普通,字体显示为不斜体。
italic,斜体,设置字体为斜体。
oblique,倾斜体,当特殊字体没有斜体效果时,可以使用该取值将字体倾斜。
五、设置字体是否为小型大写字母
CSS技术利用font-variant属性来设置是否为小型大写字母
normal,普通,字体显示为正常。
small-caps,小型大写字母。
六、设置字体的颜色
CSS技术利用color属性来设置文本颜色
十六进制颜色代码。
实例:h1{color:#ff0000;}
含义:重定义HTML中的h1标记对为红色。
十进制颜色代码。
实例:h2{color:rgb(0,255,0);}
含义:重定义HTML中的h2标记对为绿色。
颜色英文单词。
实例:h3{color:blue;}
含义:重定义HTML中的h3标记对为蓝色。
下一次小海老师会为大家讲解CSS中有关文本段落的属性,结合前面HTML的内容,可以对页面中的段落进行更为细致的调整。千万不要错过哦。
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。
双标签:就是成对出现的,类似于这种 <html> </html>
单标签:就是可以单个使用的,类似于 <br> 换行标签 或 <hr>水平线标签。
标签的属性是用来定义文字或字符的 颜色、宽高、粗细、大小、等,这个是标签属性的作用。
1、每一个标签都有自己的属性,单标签和双标签都有。
2、一个标签可以有多个属性。
3、每个属性都有对应的值,值要用单或双引号引起来。
4、多个属性之间使用空格隔开。
5、属性没有顺序之分。
6、字体属性值,必须是系统可以识别的字体,一般为系统自带字体。
7、HTML5 中 font 属性已经弃用。
源代码:↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--网页抬头-->
<title>中央气象局</title>
</head>
<body>
<!--水平线的宽度是500像素,这个width就是标签属性-->
<hr width="500">
<!--下面这个是多个标签属性,多个属性之间用空格隔开-->
<font color="red" face="黑体" size="7">标签属性</font>
</body>
</html>
*请认真填写需求信息,我们会在24小时内与您取得联系。