How to change font size in html?

2019-06-15 00:30发布

站内问答 / 前端开发
444 5 4

I am trying to make a website and I want to know how to change the size of text in a paragraph. I want paragraph 1 to be bigger than paragraph 2. It doesn't matter how much bigger, as long as it's bigger. How do I do this?

My code is below:

<html>
<head>
<style>
  p {
    color: red;
  }
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>

标签： html fonts size
举报
5条回答
在下西门庆
2楼-- · 2019-06-15 00:31

Give them a class and add your style to the class.

<style>
  p {
    color: red;
  }
  .paragraph1 {
    font-size: 18px;
  }
  .paragraph2 {
    font-size: 13px;
  }
</style>

<p class="paragraph1">Paragraph 1</p>
<p class="paragraph2">Paragraph 2</p>

Check this EXAMPLE

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
3楼-- · 2019-06-15 00:31

You can't do it in HTML. You can in CSS. Create a new CSS file and write:

p {
 font-size: (some number);
}

If that doesn't work make sure you don't have any "pre" tags, which make your code a bit smaller.

查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
4楼-- · 2019-06-15 00:41

Or add styles inline:

<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>
查看更多
0人赞 添加讨论(0) 举报
放我归山
5楼-- · 2019-06-15 00:48

If you're just interested in increasing the font size of just the first paragraph of any document, an effect used by online publications, then you can use the first-child pseudo-class to achieve the desired effect. 

p:first-child
{
   font-size:   115%; // Will set the font size to be 115% of the original font-size for the p element.
}

However, this will change the font size of every p element that is the first-child of any other element. If you're interested in setting the size of the first p element of the body element, then use the following:

body > p:first-child
{
   font-size:   115%;
}

The above code will only work with the p element that is a child of the body element.

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
6楼-- · 2019-06-15 00:58

If you want to do this without adding classes...

p:first-child {
    font-size: 16px;
}

p:last-child {
    font-size: 12px;
}

or

p:nth-child(1) {
    font-size: 16px;
}

p:nth-child(2) {
    font-size: 12px;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)