html怎么改变字体大小和颜色

html怎么改变字体大小和颜色,第1张

可以用css改变字体的大小和颜色。

1、新建html文件,在body标签中添加文字,这里以p标签内容为“演示文本”为例,这时网页将会显示字体默认大小和颜色:

2、在head标签中添加style标签给页面设置css样式,选择p标签,字体大小用的是“font-size”属性,属性值为字体大小,这里以“30px”为例,这时“演示文本”字体将会变大:

3、选择p标签,字体颜色用的是“color”属性,属性值为颜色,这里以红色“red”为例,这时“演示文本”字体将会变成红色:

设置html5中字体的大小,首先需要理解是css中的font属性,通过font-size来改变字体的大小,设置的方式,一般都是通过给这个元素的一个id或者是class来设置,具体看下面代码:
<html>
<head>
<style>
#round{
width:400px;
height:200px;
}
#round p{
color:#f00; //设置字体颜色为红色;
}
</style>
</head>
<body>
<div id="round">
<p>测试文字</p>
</div>
</body>
</html>

网页的字体大小可以这样设置:点击菜单里的“页面缩放”,然后改变网页大小,可使用快捷键“Ctrl”+“+/-”。也可以点击界面右上角的自定义及控制图标。在d出框里有缩放大小的功能,点击减号是缩小,点击加号是放大。点击加号放大到一定的比例后,就会看到网页上的字变大了。

在css之前html中文字设置字体,通常直接对文字使用font标签设置字体大小样式。

1、html文字大小font语法结构

<font size="2">我字体大小为2</font> 

解释:直接使用font标签内设置size设置字体大小,需要注意不能带单位,一般2相当于12px,3相当于14px大小以此类推。

2、html font字体大小案例html源代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>在线演示 DIVCSS5</title> </head> <body> <font size="2">在线演示测试<font size="4">文字</font>, 欢迎访问DIVCSS5学习网站!</font> </body> </html> 

3、案例截图

HTML Table表格的文字大小与字型在传统的HTML网页设计规则中,可以透过HTML预设font文字标签中的size与face分别设定文字大小与字型,这样的写法在HTML5以前是相当普遍的,而到了HTML5开始,修改表格文字大小与字型必须使用css来处理,因为HTML5不支援传统HTML font的size与face属性,在css的规则里,修改文字大小是用font-size,而修改字型则是使用font-famliy,以下范例分别使用HTML传统的font标签以及css的属性来修改表格文字。

范例一、用HTML font文字标签修改表格文字大小与字型

<table border="1" cellpadding="5"> 
<tr>
<td><font size="5">这是size = 5的文字大小</font></td>
<td><font face= "DFKai-sb">这是标楷体的文字字型</font></td> 
</tr> 
</table>

呈现结果

诚如第一段所说,若要符合最新的HTML5网页设计标准,表格内的文字大小与字型就必须使用css来设计,范例二就提供这样的设计方式,除了可以像范例一这样每个栏位不同的文字样式,还可以一次设定整个表格的文字样式,用起来效率非常好。

范例二、用css的font-size与font-family来修改表格文字大小与字型

<table border="1" style="font-size:18px;font-family:serif;" cellpadding="5"> 
<tr>
<td>这是表格预设文字样式</td>
<td>< span style="font-size:13px;">这是13px的文字大小</span></td>
<td><span style="font-family:DFKai-sb">这是标楷体字型< /span></td> 
</tr> 
</table>

呈现结果

二在table标签开头就先加入了『style="font-size:18px;font-family:serif;"』这样的语法,代表将整张表格内的所有文字大小都预设为18px,而且字型使用serif,这可是传统HTML的font标签没办法做到的高效率设计方式,接着我们在表格的三个栏位,分别使用预设文字样式、修改大小为13px(font-size:13px;) 、字型改为标楷体(font-family:DFKai-sb;),可以清楚的看到,只要在表格中任何栏位或一段文字,用span标签包起来,就可以特别为文字做不同的样式设计。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/yw/13372841.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-23
下一篇 2023-07-23

发表评论

登录后才能评论

评论列表(0条)

保存