为不同的HTML元素定义了不同的字体大小

Question

创建一个基本的图像卡，我需要调整标题的大小，第一个标题需要22px，第二个需要11px。我新的HTML，所以我真的不知道从哪里去我所建立的代码。我正在使用visual studio代码来编写命令行。

<!--cards -->
<div class="card">
<div class="image">
<img src="https://freedesignfile.com/upload/2018/02/People-in-the-desert-experience-camel-travel-Stock-Photo-01.jpg" alt="a man in the desert" width=4 0px; height=192px>
</div>
<div class="title">

<h1>
Title goes here </h1>
<h2>
Secondary text</h2>
</div>
<div class="des">
<p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
<!--cards -->

Answer 1

这就是css的用法:

h1 {
font-size: 22px;
}
h2 {
font-size: 11px;
}

<div class="card">
<div class="image">
<img src="https://freedesignfile.com/upload/2018/02/People-in-the-desert-experience-camel-travel-Stock-Photo-01.jpg" alt="a man in the desert" width=40px; height=192px>
</div>
<div class="title">
<h1>Title goes here</h1>
<h2>Secondary text</h2>
</div>
<div class="des">
<p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
</div>

Answer 2

使用font-size

<!--cards -->
<div class="card">
<div class="image">
<img src="https://freedesignfile.com/upload/2018/02/People-in-the-desert-experience-camel-travel-Stock-Photo-01.jpg" alt="a man in the desert" width= 40px; height=192px>
</div>
<div class="title">

<h1 style="font-size:22px;">
Title goes here </h1>
<h2 style="font-size:11px;">
Secondary text</h2>
</div>
<div class="des">
<p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
<!--cards -->

Answer 3

你只能通过使用CSS来实现…这里有三种添加样式表的方法:https://www.w3schools.com/css/css_howto.asp

在你的情况下，CSS属性将对你有帮助的是font-size财产。你要操作的html元素是:h1和h2;在我看来，作为初学者，最安全的方法是在HTML header标签中添加CSS文件，并使用如下的样式标签:

h1 {font-size: 12px;} h2 {font-size:11px;}

<h1>
Title goes here </h1>
<h2>
Secondary text</h2>

灰狗分开的你好冷冷的奇妙的边缘远远的排除。