整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML培训:如何在HTML中更改文本大小

果你需要在网页上创建标题,或者在网站上改变不同页面上的文本大小,或段落中的某个特定单词突出,可以通过使用html命令更改文本大小来做到这一点。但凡上过html培训学习的人都会很轻轻松学会这个操作,有导师指导,学起来要容易的多。

更改前,先备份

无论什么时候你要更改网页,无论你只是在html中更改文本大小,还是在添加照片或将背景图像更改为新模式时,在更改前始终要记住一点:备份你现有的页面。这将确保如果在更改期间发生错误,并且此错误导致网页丢失,则可以恢复到起始位置,然后再试一次。

若要复制网页,请打开该文件并复制html。然后将页面html的副本粘贴到一个程序中,比如程序员的记事本,这是一个免费的实用程序,供网页设计者/程序员使用,用于CSS、html和其他程序。

在更改的操作中,备份是经常要做的事,这一点非常重要,一般你在html培训学习时,老师都会强调这一点的。

如何在HTML中更改文本大小

首先,找到要更改的一行或多行文本。使用

这个标记

在html中更改文本大小是一个简单的编码问题,你可以学会自己做,你也可以使用各种额外的html技巧。通过参加html培训学习,对html会有更系统更全面的认识,零基础也能轻松学到有用的知识。

了解更多

font-size:设置字体大小:

该属性值的单位可以使用相对单位和绝对单位,推荐使用px。(浏览器能够识别的最小像素是12px)

    p{
      font-size:20px;
    }

常见尺寸单位:



font-family:设置字体:

如果需要设置多个字体样式,则属性值可以写多个中间用逗号隔开即可,需要知道的是浏览器会从第一个字体属性值找,直到找到自己设备有的字体显示,自己设备没有的字体,按设备默认字体显示,推荐系统默认字体。


    p{
      font-family:"微软雅黑",Arial;
    }



font-weight:设置字体粗细:

其属性值有:normal正常不加粗、bold加粗、bolder更粗、lighter更细、number(整百的数字)、inherit继承父级元素字体粗细

p {
  font-weight:700;
}

font-style:设置字体风格:

如设置斜体、倾斜或正常字体,其属性值:normal默认值,标准字体、italic斜体、oblique倾斜

font:综合设置字体样式(字体样式连写):

字体样式连写是有顺序的,必须是严格遵循顺序,其中不需要设置的属性可以省略,font-size和font-family属性值必须写,否则字体连写失效。


    p{
      /*font:font-style font-weight font-size/line-height font-family;*/
      font:italic bolder 20px/10px Arial;
    }

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。

笔者:苦海123

其它问题可通过以下方式联系本人咨询:

QQ:810665436

微信:ConstancyMan

由于前端所设计的领域太多,每篇文章所能讲述的知识点太多,对于读者来说不太好消化,因此以后基本是采用一篇文章一个知识点来写作。

今天这篇文章主要讲解css中a标签的高度和宽度问题。

css

问题描述

在采用div+css的方式布局页面时,对于超链接a标签,无法设置其高度和宽度,即使对其设置了width和height属性,也不会生效。

我们通过如下例子来看看。

给a标签设置了如下css属性。

css属性

但是从下图可以看出,a标签的高度和宽度没有发生变化,仍然是122px*22px。

实际效果

问题原因

为什么会出现这个情况呢?

因为a标签属于行内元素,行内元素是无法直接设置高度和宽度的。

遇到这个问题,我们该怎么解决呢,主要有以下几个方法。

解决方法1-设置块级元素

既然行内元素无法设置高度和宽度,那么我们将其设置为块级元素呢?

我们对a标签设置以下的样式。

设置display:block

我们可以看出a标签的高度和宽度发生了变化,而且在设置为块级元素后,占据了一整行的位置。

高度发生变化

解决方法2-设置浮动

通过将a标签设置为浮动状态,同样可以改变其高度和宽度。

我们给a标签设置以下css样式。

设置为浮动元素

我们可以看出a标签的高度和宽度发生了变化,并且其占据的宽度和设置的width属性一样,与方法1呈现的不一样。

改为浮动元素

方法3-设置padding属性

在设置padding属性的时候,不能直接改变a标签的高度和宽度,实际是一种模拟的状态。

而且需要注意的是在设置padding-top和padding-bottom时是不生效的,即使从控制台看元素显示占据了空间,但不会影响页面的布局。因此在设置padding属性时,实际只会影响到a标签的宽度。

我们给a标签设置以下padding属性。

设置padding属性

我们可以看出a标签占据的高度和宽度发生了变化,但是实际只是宽度占据的空间发生变化,高度不变。

设置padding属性

结束语

今天这个简单的知识点:设置a标签的高度和宽度,大家都学会了吗?