作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。
介绍
这些单位有助于确定文本看起来有多大或小,容器有多宽,或列之间有多少空间。各个单位都有功能优势,对开发人员和网站的设计是有价值的。
在本教程中,您将了解像素(‘px’)、百分比(‘%’)、‘em’和‘rem’单元,您将使用这些单元与多个属性结合,包括‘字体大小’、‘板块’,‘边界’,‘边界’,‘宽度’和‘最大宽度’,以了解每个单元的差异和优势。
前提条件
您可以从您的文本编辑器和网页浏览器中获取一个存储在您的本地计算机上的HTML文件,以便开始,请查看我们如何设置HTML项目(https://andsky.com/tech/tutorials/how-to-set-up-your-html-project)的教程,并按照(https://andsky.com/tech/tutorials/how-to-use-and-understand-html-elements#how-to-view-an-offline-html-file-in-your-browser)关于如何在浏览器中查看HTML的指示。如果您是新手的HTML,请尝试How To Build A Website in HTML系列。
- CSS 框模型的知识,您可以在 How To Work with the Box Model in CSS教程中找到。
- 使用选择器的经验以找到和应用到HTML元素中的风格。 有关更多信息,请参阅 How To Select HTML Elements to Style with CSS
设置HTML和CSS
在第一节中,你将设置HTML作为整个教程的所有风格的基础,此外,你将创建你将使用的CSS文件来写你的风格教程。
要开始,请在文本编辑器中打开index.html,并将以下HTML添加到文件中:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 </head>
6 <body>
7 </body>
8</html>
接下来,在<head>标签中,您将添加一个meta标签来声明本HTML中使用的字符集,页面的标题,一个meta标签,定义如何在移动设备上处理该页面,以及要加载的CSS文件,其中包括来自Google Fonts(https://fonts.google.com)的字体,以及您将在下一节创建的styles.css文件。
在下面的代码块中突出显示了<head>标签的添加,您将在整个教程中找到这个命名,因为代码被添加和更改:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="UTF-8" />
6 <title>CSS Units</title>
7 <meta name="viewport" content="width=device-width, initial-scale=1" />
8 <link rel="preconnect" href="https://fonts.gstatic.com" />
9 <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
10 <link href="styles.css" rel="stylesheet" />
11 </head>
12 <body>
13 </body>
14</html>
现在‘
’信息已经到位,下一步是将内容添加到‘’标签中。 这个内容是Lewis Carroll的‘Alice’s Adventures in Wonderland’的摘要,在那里Alice正在与Caterpillar谈论大小。 内容包含在一个‘’元素。 一个‘’元素结束了内容,为原创文学作品提供引用。 将以下代码中的突出部分添加到您的 index.html 文件中:
1[label index.html] 2<!doctype html> 3<html> 4 <head> 5 <meta charset="UTF-8" /> 6 <title>CSS Units</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1" /> 8 <link rel="preconnect" href="https://fonts.gstatic.com" /> 9 <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" /> 10 <link href="styles.css" rel="stylesheet" /> 11 </head> 12 <body> 13 <figure> 14 <h3>Advice from a Caterpillar</h3> 15 <blockquote> 16 <p>The Caterpillar was the first to speak.</p> 17 <p>“What <span>size</span> do you want to be?” it asked.</p> 18 <p>“Oh, I’m not particular as to <span>size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span>you know</span>.”</p> 19 </blockquote> 20 <figcaption>Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption> 21 </figure> 22 </body> 23</html>准备你的HTML来样式的最后一步是将
类属性和值应用到页面内容的HTML元素中。你将使用CSS中的类选择器来瞄准和应用风格。1[label index.html] 2<!doctype html> 3<html> 4 <head> 5 <meta charset="UTF-8" /> 6 <title>CSS Units</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1" /> 8 <link rel="preconnect" href="https://fonts.gstatic.com" /> 9 <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" /> 10 <link href="styles.css" rel="stylesheet" /> 11 </head> 12 <body> 13 <figure class="excerpt"> 14 <h3 class="title">Advice from a Caterpillar</h3> 15 <blockquote class="quote"> 16 <p class="quote-text">The Caterpillar was the first to speak.</p> 17 <p class="quote-text">“What <span class="large">size</span> do you want to be?” it asked.</p> 18 <p class="quote-text">“Oh, I’m not particular as to <span class="large">size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span class="small">you know</span>.”</p> 19 </blockquote> 20 <figcaption class="citation">Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption> 21 </figure> 22 </body> 23</html>请确保将这些更改保存到您的
index.html文件中,然后在您的 Web 浏览器中打开该文件. 如下图像所示,浏览器已经默认应用了一些风格。 此外,Google 字体的字体尚未可见,因为它在 CSS 中没有定义,尽管包含在<head>标签中。
最后,创建
styles.css文件,并在编辑器中打开它,这将是您在教程的剩余时间使用的文件。 将字体设置在body选择器上,以便有一个字体家族:Averia Serif Libre,字体将应用于页面上的所有元素:1[label styles.css] 2body { 3 font-family: 'Averia Serif Libre', serif; 4}将您的更改保存到
styles.css,然后在浏览器中重新加载 `index.html。 内容现在将使用一个看起来像一个较旧的打印书的字体,如下图像所示:
在本节中,你将设置你的HTML与所有内容和标记,你将需要在CSS中使用单元。你还创建了你的‘styles.css’文件,并在新的字体中添加,用于所有内容。
使用像素单位
px在本节中,您将专注于使用像素(‘px’)单元编码初始风格。‘px’是网页上众所周知的单元,与本教程所涵盖的其他单元不同,‘px’单元是一个物理依据的单元,因为其大小取决于设备显示单个像素的物理大小。
在文本编辑器中打开
styles.css并创建一个类选择器,以.element为<figure>元素的类。在这个选择器块中,你将定义布局和美观风格,设置为20px auto,设置为20px的padding,设置为1px solid black,设置为480px的max-width,最后设置为border-box的box- sizing`属性:1[label styles.css] 2body { 3 font-family: 'Averia Serif Libre', serif; 4} 5 6.excerpt { 7 margin: 20px auto; 8 padding: 20px; 9 border: 1px solid black; 10 max-width: 480px; 11 box-sizing: border-box; 12}
边缘将20px应用于容器的顶部和底部,而auto将容器设置为水平中心,一旦声明了宽度值。接下来,padding属性为容器内部的每个侧提供20px的空间。然后,边界:1px固体黑色;将整个容器周围的1px厚黑色边界应用于内容的定义范围。max-width允许容器在屏幕小于480px时保持宽度的灵活性,但在容器宽度为480px后停止生长。最后,盒子大小:边缘框;改变容器的模型框以确保最大宽度为480px。将这些添加项保存到您的
styles.css文件中,然后跳过您的浏览器并更新index.html。在容器内部的顶部将有额外的空间,这来自.title元素的默认值。
接下来,回到编辑器中的
styles.css并为h3元素创建一个类值为标题的类选择器。 目前,该内容具有浏览器的默认值为字体大小,字体重量和边界。 首先,更改字体大小为20px,这比浏览器的默认大小略大一些。 然后添加一个边界属性,值为0 0 10px,该属性将向顶部应用0的边界,然后向右侧和左侧应用0的边界,最后在标题的底部添加10px的边界。 CSS 中的值为0时,不需要任何单位:1[label styles.css] 2... 3.title { 4 font-size: 20px; 5 margin: 0 0 10px; 6}
<blockquote>的内容在右侧和左侧插入了浏览器的默认边缘值。对于这个设计的需求,可以删除边缘。创建一个类选择器,针对.quote并给它一个边缘属性,值为0。这将允许内容扩展到<figure>容器的全部内容宽度:1[label styles.css] 2... 3.quote { 4 margin: 0; 5}將您的變更儲存到「styles.css」檔案,然後返回您的瀏覽器,然後更新「index.html」檔案。現在「.title」將變得稍大一點,而上面面的差距要小得多。
回到文本编辑器中的
styles.css。由于blockquote内容是<figure>的主要焦点,所以通过瞄准quote-text并应用24px的字体大小来突出。然后,通过将顶部和底部的边界设置为10px,使用边界的短手``10px 0来缩小每个行之间的间隔。1[label styles.css] 2... 3.quote-text { 4 font-size: 24px; 5 margin: 10px 0; 6}接下来,要应用从摘要中启发的视觉强调,用
大的类属性瞄准<span>并设置字体大小为32px:1[label styles.css] 2... 3.large { 4 font-size: 32px; 5}在设置
.large文本后,创建一个类选择器来瞄准.small,并给它一个具有20px值的字体大小属性:1[label styles.css] 2... 3.small { 4 font-size: 20px; 5}將這些變更儲存到您的「styles.css」檔案中,並在瀏覽器中更新「index.html」。 摘要的內容將會變大,並將會更接近。 此外,詞「size」將顯示比主要文本更大,而詞「you know」將顯示較小。 以下圖像顯示瀏覽器中的樣子:
对于本节的最后一个样式,在文本编辑器中返回你的
styles.css文件。创建一个类选择器,以引用类为目标,该类用于figcaption元素。添加一个具有
1px固体#ccc值的边界顶部,以给它一个轻灰色边界。然后应用一个边界顶部: 20px;和一个边界顶部: 20px;,以设置边界与引文的最后一行和引文的第一行相等。这将提供所需的视觉分离。 最后,为了减少引文内容的强调,设置颜色属性为#555和字体大小为14px。 这将使内容不太明显,使其与其他黑色文本相比更轻灰色:1[label styles.css] 2... 3.citation { 4 border-top: 1px solid #ccc; 5 margin-top: 20px; 6 padding-top: 20px; 7 color: #555; 8 font-size: 14px; 9}在您的编辑器中将此添加文档保存到您的
tyles.css文件中,然后返回您的浏览器并刷新index.html页面以查看下图所示的更改:
px始于一个被计算机屏幕的物理像素定义的单位,这意味着一个10px宽和10px高盒使用100个像素在它显示的计算机屏幕上。在高分辨率显示中,像素要小得多,所以像素值经常翻番,这意味着1px在屏幕上占有4个像素。这是一种软件操纵像素的大小。像素翻番可以发生在模仿非原生屏幕分辨率的标准分辨率显示上,这意味着分辨率高于或低于屏幕上的物理像素数。由于像素翻倍和设备上的用户偏好,
px不是一个理想的衡量单位,虽然它被认为是一个物理单位,但它可以被计算机操纵,并可能导致元素看起来太小或变得模糊。 Sub-pixel rendering 是计算机遇到涉及十分点的像素计算时,并将像素之间的颜色混合,以应用小于1px的值,导致模糊边缘。在本节中,您使用
px单位来设置页面内容的属性值. 您了解到px单位是一种物理单位,尽管计算机可以操纵该值。使用百分比单位
%在本节中,您将使用百分比单位(
%)将尺寸值应用于 HTML 页面中的元素。与px单位不同,百分比单位是一个相对单位,不依赖于屏幕的物理属性。相反,百分比单位为浏览器提供一个值关系,它必须计算以产生像素值。 百分比单位,与其他相对单位一样,具有比像素单位的优势,它可以根据许多因素,包括用户的个人浏览器设置来扩展。百分比单位的最有用的应用之一是作为一个
宽度属性值。在文本编辑器中打开你的styles.css文件,并添加一个宽度:80%,并为组织目的,在你的最大宽度`属性之上添加该行:1[label styles.css] 2... 3.excerpt { 4 margin: 20px auto; 5 padding: 20px; 6 border: 1px solid black; 7 width: 80%; 8 max-width: 480px; 9 box-sizing: border-box; 10} 11...这是一个强大的组合,因为容器将是其父母的宽度的80%,直到它达到宽度为480px,在这个时候它将停止生长. 如果你熟悉的Responsive Web Design(https://alistapart.com/article/responsive-web-design/),大部分的概念是预测这个组合。
现在你已经使用了百分比单位,尝试在更多地方应用它,看看它是如何工作的。 开始用
.excerpt选择器的边际和padding像素值换成百分比。在这种情况下, 大小是
20px值的边缘和板块。由于边缘和板块的百分比单位是宽度的百分比,所以最大宽度值可以帮助确定约为背景的值。这使得必要的方程式 20/480,结果是 0.041666667。当处理百分比时, 结果必须在使用前总是以 100倍,使最终值 4.1666667%。1[label styles.css] 2... 3.excerpt { 4 margin: 4.1666667% auto; 5 padding: 4.1666667%; 6 border: 1px solid black; 7 width: 80%; 8 max-width: 480px; 9 box-sizing: border-box; 10} 11...将您的更改保存到
styles.css并在浏览器中重新加载index.html。 尝试更改浏览器窗口宽度的大小,并观察padding值如何在.excerpt容器达到max-width后继续增长。
这是不太可能的效果,但它是好的知道和看到哪些属性最好用百分比单位。
返回编辑器中的
styles.css文件,然后将4.1666667%返回到20px:1[label styles.css] 2... 3.excerpt { 4 margin: 20px auto; 5 padding: 20px; 6 border: 1px solid black; 7 width: 80%; 8 max-width: 480px; 9 box-sizing: border-box; 10} 11...下一个区域的百分比可以非常有用是
字体大小值。使用字体大小属性的百分比使用相同的公式来找到这个值。在你的styles.css文档中的.title选择器块,而字体大小是20px。从公式中size/context = result**,这个20px是size**这个场景中的context**是文档的默认浏览器size这个场景,即16px。 然后,公式是20 / 16**,并且因为这是一个百分比, result必须以100**倍增,给出一个最终值的125%**。 添加125%值代替20px`这个代码,可以帮助解释代码中的评论1[label styles.css] 2... 3.title { 4 font-size: 125%; /* target size: 20px */ 5 margin: 0 0 10px; 6} 7...接下来,将相同的公式应用到具有
24px字体大小的.quote-text选择器上,此值的 **结果是 150%,因为 24是 **150%**大于 16。1[label styles.css] 2... 3.quote-text { 4 font-size: 150%; /* target size: 24px */ 5 margin: 10px 0; 6} 7...接下来,将百分比值应用于
.large和.small选项需要了解背景值如何在公式中发生变化。浏览器的默认字体大小为16px,但.large和.small仅发生在一个具有引用文本类别的元素内部。这意味着它们的背景不再是16px,而是24px。因此,当前的字体大小为.large是32px,这两倍于16px的尺寸,通常意味着字体大小将是200%。由于背景已经改变,这将是双的24而不是16。因此,相应的公式需要32的24,结果是3333333333333。拿到 结果并以 100倍数,然后放心将十字位圆到
133.3%以获取新的字体大小值:1[label styles.css] 2... 3.large { 4 font-size: 133.3%; /* target size: 32px */ 5} 6...
.small选择器与.large具有类似的情况,不再是 16的因子,而是 24的因子。1[label styles.css] 2... 3.small { 4 font-size: 83.3%; /* target size: 20px */ 5} 6...最后,将相同的公式应用到
.citation选择器的字体大小。由于这个容器返回了 16的默认字体大小,所以该方程式现在是 14 / 16。1[label styles.css] 2... 3.citation { 4 border-top: 1px solid #ccc; 5 margin-top: 20px; 6 padding-top: 20px; 7 color: #555; 8 font-size: 87.5%; /* target size: 14px */ 9}在文本编辑器中将更改保存为
styles.css,然后在浏览器中重新加载index.html。你不会发现字体大小值的像素版本和百分比版本之间的差异,但从可访问性的角度来看,这更为通用,因为操作系统和浏览器为用户提供工具来更改默认字体大小。在本节中,您使用百分比单位来制作
贴、边缘、字体大小和宽度属性相对。您了解到字体大小是如何与母元素的字体大小相对的,以及计算所需的比例的公式。您还了解到百分比值并非总是最好的选择,如边界宽度值。在下一节中,您将使用百分比单位学到的内容应用于更具多功能的em单元。使用
EM单元在本节中,你将重塑CSS以使用
em单元。像百分比单元一样,em单元是一个相对单元,但它比百分比的基数不同于宽度或字体大小。em完全与字体大小或元素的继承字体大小相对。例如,浏览器中默认的字体大小是16px,使1em等于16px。从百分比单元中,1em与字体大小:100%;然而,如果宽度设置为1em,那么计算的宽度将是16px而不是完全可用的宽度。<$>[注] 注: 有几种方式 em 单元可以有点困惑。 第一种是关于打印类型,它也具有 em 单元。 这取决于字体中较低的
m字符的大小。 web em 单元是基于字体大小值的。 注释的第二个领域是,还有一个<em>HTML 元素。 这个元素不必与 em 单元有关,而是用来缩写和强调文本的强调而缩短。要开始使用
em单元,请在文本编辑器中打开styles.css。由于
em仅与字体大小相对,所以它可以可靠地应用于更多的属性,而不是百分比单位。 进入.excerpt选项块,然后使用公式 size / context = result,其中 context是 16。1[label styles.css] 2... 3.excerpt { 4 margin: 1.25em auto; 5 padding: 1.25em; 6 border: 0.0625em solid black; 7 width: 80%; 8 max-width: 30em; 9 box-sizing: border-box; 10} 11...与百分比公式不同,
结果不需要以 100倍增。相反,取结果并在末尾添加em单位。对于边缘和折叠上的20px,方程式 20 / 16结果为1.25em。对于边界厚度的1px,这意味着1 / 16**,这就是0.0625em。当处理1px的值时,它取决于你是否需要厚度来缩小。如果它不需要,请放心把它留为1px。最后,480px的最大宽度变成480 / 16**,结果是30em。将这些更改保存到
styles.css,并在浏览器中重新加载index.html,不会有视觉变化,因为这些值与像素值相同。接下来,转到编辑器中的
.title选择器中styles.css。从上一节,字体大小值为125%。由于公式对em和em的百分比单位相同,但以100来倍增,您可以分为返回十分点,这意味着字体大小的值将从125%改变到1.25em。由于em的值是由该元素的字体大小定义的,所以em的每一个其他实例都发生了变化,这意味着1em现在相当于1.25em,而em的所有其他用途都在标题内部:1[label styles.css] 2... 3.title { 4 font-size: 1.25em; /* target size: 20px */ 5 margin: 0 0 10px; 6} 7...在实践中,你可以通过将一个
em值应用到边缘来看到这一点。在这里,有一个10px的底部边缘。由于10px是20px的大小的一半,而1em等于字体大小的值,那么0.5em将永远是字体大小的一半。在边缘的属性中,你可以用10px换取0.5em。这里的优点是,如果设计改变并且字体大小需要增加,比例将保持,而底部边缘将始终是字体大小的半数:1[label styles.css] 2... 3.title { 4 font-size: 1.25em; /* target size: 20px */ 5 margin: 0 0 0.5em; /* target size: 10px */ 6} 7...将
em的概念转化为.quote-text和<span>的大小类将需要更多地使用该方程式。在font-size上使用 size / context = result公式,其意图值等于24px。1[label styles.css] 2... 3.quote-text { 4 font-size: 1.5em; /* target size: 24px */ 5 margin: 10px 0; 6} 7...无论
字体大小是em,百分比还是像素,字体大小定义了1em的大小,这意味着公式的背景现在等于24px,以便将相同的公式应用于.quote-text的边缘和.large和.small类,因为它们被用在.quote-text元素内部:1[label styles.css] 2... 3.quote-text { 4 font-size: 1.5em; /* target size: 24px */ 5 margin: 0.41667em 0; /* target size: 24px */ 6} 7 8.large { 9 font-size: 1.333em; /* target size: 32px */ 10} 11 12.small { 13 font-size: 0.8333em; /* target size: 20px */ 14} 15...当你做这些方程式时,可以自由地将其旋转到你喜欢的十进制点。
最后,将
em值应用于.citation选择器. 首先,将字体大小设置为0.875em,这将使它保持在14px大小。 即使font-size属性位于选择器块的底部,它仍然决定了选择器块中的所有其他属性中的1em值。 这意味着所有其他属性的 context是 14而不是 16。 在边界上的1px厚度会变成071428571em,如果您将其旋转到最接近的千分之一,则将变成1.4285714em29或1.43em:1[label styles.css] 2... 3.citation { 4 border-top: 0.071em solid #ccc; /* target size: 1px */ 5 margin-top: 1.43em; /* target size: 20px */ 6 padding-top: 1.43em; /* target size: 20px */ 7 color: #555; 8 font-size: 0.875em; /* target size: 14px */ 9}请确保将更改保存到
styles.css,然后继续进入最终部分。在本节中,您了解了 em 单位以及它是如何基于一个元素的
字体大小的。与百分比单位不同,em可以可预测地应用于更多的属性,并为属性以相互比例改变提供了方法。使用
REM单元在最后一节中,你将使用
rem单元,这与em单元相对较近。 rem中的R代表了 root 元素,这是网页的顶部元素,最有可能是<html>或body>。在那里em值可以根据字体大小值改变,rem具有基于根元素的字体大小的一致大小,这是默认的16px。这使得方程式具有稳定的和可预测的结果,同时具有em的可扩展的好处。要开始使用
rem值,请在文本编辑器中打开styles.css,然后转到.excerpt选择器. 由于所有值都设置为em使用16px的默认font-size,所有这些值都可以从em更改为rem而不会产生任何影响。 这里的优点也是,如果这个选择器添加了font-size或母容器的font-size被更改,这些值将不会改变,因为它们现在基于根源font-size:1[label styles.css] 2... 3.excerpt { 4 margin: 1.25rem auto; 5 padding: 1.25rem; 6 border: 0.0625rem solid black; 7 width: 80%; 8 max-width: 30rem; 9 box-sizing: border-box; 10} 11...接下来,在
styles.css中移动到.title选择器,并将字体大小更改为rem。由于此选择器上的em已经用默认font-size计算,所以不需要进行其他更改。1[label styles.css] 2... 3.title { 4 font-size: 1.25rem; /* target size: 20px */ 5 margin: 0 0 0.5em; /* target size: 10px */ 6} 7...请务必将您的更改保存到
styles.css. 在此时刻,没有任何可视化更改将改变index.html在浏览器中如何出现,但总是有必要定期检查。回到文本编辑器中的
styles.css,然后转到.quote-text选择器中。 这里的字体大小已经根据16px的背景设置,所以单位可以从em更改为rem而无需进一步调整。 但是,这里的边界不是意在与.quote-text的字体大小相比例,而是根源的字体大小。 这意味着计算10 / 16以获得根源字体大小的恒定关系,使边界值为0.625rem:1[label styles.css] 2... 3.quote-text { 4 font-size: 1.5rem; 5 margin: 0.625rem 0; 6} 7...选择器
.large和.small的字体大小属性可以继续作为em值,因为它们提供与.quote-text的字体大小相比的比例大小。 将这些值更改为稍微更容易理解的东西,尽管它会稍微改变设计。 更改.large字体大小为1.5em和.small字体大小为0.875em。 这将改变大小,但现在它将与.large和.small的75%相似:1[label styles.css] 2... 3.large { 4 font-size: 1.5em; 5} 6 7.small { 8 font-size: 0.75em; 9} 10...将这些更改保存到
styles.css,并在浏览器中更新index.html。使用这些选择器的文本大小将显示为下面的图像。
接下来,调整
.citation选择器以使用rem而不是em在所有属性上。由于border-top,margin-top和padding-top都被计算为14px的字体大小等级,您需要重新计算每个字体的16px的根字体大小。这将使1px的border-top厚度为1 / 16**,或0.0625rem。然后20px的margin-top和padding-top的所需值将是20 / 16**,结果是1.25rem。最后,由于字体大小已经基于默认的16px值,所以em可以更改为rem:1[label styles.css] 2... 3.citation { 4 border-top: 0.0625rem solid #ccc; 5 margin-top: 1.25rem; 6 padding-top: 1.25rem; 7 color: #555; 8 font-size: 0.875rem; 9}将您的更改保存到
styles.css,并通过在浏览器中刷新页面来验证您的index.html没有视觉更改。最后,可以使用
:root选择器更改根字体大小,并更改字体大小值,从而将1rem的定义更改为您想要尝试的任何值。打开你的
styles.css文件,在顶部添加一个:root选择器,然后将字体大小设置为20px:1[label styles.css] 2:root{ 3 font-size: 20px; 4} 5 6body { 7 font-family: 'Averia Serif Libre', serif; 8} 9...将此更改保存到
styles.css,然后返回您的浏览器并更新index.html。
你所有的风格都会大一点,如果提供可访问性工具或对网站进行广泛调整,这可能是非常有用的。建议保持默认的
16px大小,因为它更常见,但如果你正在改变大小,最好要大于小。在本节中,您在几个场景中使用了
rem值,并了解在rem旁边使用em有何用处,您还了解了:root选择器以及如何使用它来瞄准默认字体大小。结论
这些四个单位,像素(‘px’),百分比(‘%’),‘em’和‘rem’,是网络上发现的最常见的单元之一。它们都有自己的优势,并且了解它们如何工作和协作将帮助您决定最适合您的需求的局面。您了解到像素单元是基于一个可以由计算机操纵的物理屏幕属性。百分比单元取决于基数值是什么,但其最大强度是当被用作‘宽度’时。‘em’值为一个元素的‘字体大小’的共同基线提供更多的控制,允许相关属性之间的比例大小。最后,‘rem’取决于‘em’的优点,但将值设置为页面根元素的全球‘字体大小’。
如果您想阅读更多 CSS 教程,请尝试 How To Style HTML with CSS series中的其他教程。
