CSS中具有不同颜色和大小的多个H1标题

8fq7wneg 于 2023-10-21 发布在其他

关注(0)|答案(4)|浏览(127)

我一直在使用CSS和HTML的这一点和即时通讯试图复制正是这一形象在这里

下面是我尝试使用多个h1来做的事情，但后来我搜索了如何拥有多个h1，建议一般不要这样做

h1
{
    border : 0px none blue ;
    width : 1000px ;
}

<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset ="UTF-8">
<title>Headings!</title>

<style>
h1 {color : Red ; background : Blue ;}\

h1 {color : Orange}

h1 {color : Yellow}

h1 {color : Green}

h1 {color : blue}

h1 {color : purple}
</style>
<link rel ="stylesheet" href = "heading.css">

</head>
<body>
<h1>This is a heading using h1<h1>

<h1><p style="text-indent:300px;">This is a heading using h1<h1>

<h1><pre>This is a heading using h1</pre><h1>

<h1>This is a heading using h1<h1>

<h1>This is a heading using h1<h1>

<h1>This is a heading using h1<h1>

</body>

</html>

我把它们都放在同一个文件夹里，但我承认我不知道我在做什么

css

来源：https://stackoverflow.com/questions/77309134/multiple-h1-headings-with-differing-colors-and-sizes-in-css

4条答案

按热度按时间

gg0vcinb1#

您可以使用类将不同的样式应用于不同的h1元素。
类可以在html中用class=""属性设置，也可以在css中使用，方法是在类名前用.寻址。
以下代码适用于生产站点：

h1
{
    border : 0px none blue ;
    width : 1000px ;
}

<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset ="UTF-8">
<title>Headings!</title>

<style>
.first {color : Red ; background : Blue ;}\

.second {color : Orange}

.third {color : Yellow}

.fourth {color : Green}

.fifth {color : blue}

.sixth {color : purple}
</style>
<link rel ="stylesheet" href = "heading.css">

</head>
<body>
<h1 class="first">This is a heading using h1<h1>

<h1 class="second"><p style="text-indent:300px;">This is a heading using h1<h1>

<h1 class="third"><pre>This is a heading using h1</pre><h1>

<h1 class="fourth">This is a heading using h1<h1>

<h1 class="fifth">This is a heading using h1<h1>

<h1 class="sixth">This is a heading using h1<h1>

</body>

</html>

赞(0）回复(0）举报 2023-10-21

mzmfm0qo2#

当你只针对h1标签制定规则时，它会影响所有的标签！实现这一点的最好方法是为你想做的每一件事创建一个CSS类。你应该用一种描述它们所做的事情的方式来命名它们，就像这样：

/*This will target ALL <h1> tags*/
h1 {
    border : 0px none blue ;
    width : 1000px ;
}

.bg-blue {background: Blue;}

.indented {text-indent: 300px;}

.text-red {color: Red;}
.text-orange {color: Orange;}
.text-yellow {color: Yellow;}
.text-green {color: Green;}
.text-blue {color: blue;}
.text-purple {color: purple;}

<h1 class="text-red bg-blue">This is a heading using h1<h1>

<h1 class="orange"><p class="indented">This is a heading using h1<h1>

<h1 class="text-yellow"><pre>This is a heading using h1</pre><h1>

<h1 class="text-green">This is a heading using h1<h1>

<h1 class="text-blue">This is a heading using h1<h1>

<h1 class="text-purple">This is a heading using h1<h1>

赞(0）回复(0）举报 2023-10-21

ctzwtxfj3#

当你在开发一个真实的网站时，在同一个页面上有多个h1标签并不是一个好的做法。你在这里做的看起来像是某种练习/学习练习，所以这不是问题。
这个练习鼓励你使用相同的h1标签作为挑战，所以你必须找到一种方法，不要在样式部分只使用“h1”选择器，因为这些样式会影响每个h1标签。
您可以使用内联样式，就像使用

<h1><p style="text-indent:300px;">This is a heading using h1</p><h1>

(don不要忘记关闭<p>标签，虽然你只能在这里使用h1标签：<h1 style="text-indent:300px;">This is a heading using h1<h1>）
作为旁注，您可以使用text-align: center将h1的文本居中
更好的方法是使用classes：

<h1 class="class-name-here">This is a heading using h1<h1>

然后，在标记之间，您可以使用类选择器（类名称前有一个点：

<style>
    .class-name-here {
      text-align: center;
    }
</style>

然后你可以为每个h1使用不同的类来得到你需要的，你可以选择你想要的类名，越直观越好。
另一个侧记：你在<style>标签之间写了什么，你可以在你链接的CSS工作表上写：heading.css

赞(0）回复(0）举报 2023-10-21

gzszwxb44#

如果你在生产中不需要这个页面，你可以有尽可能多的H1。如果你准备网页生产你应该只有一个H1

赞(0）回复(0）举报 2023-10-21

我来回答

CSS中具有不同颜色和大小的多个H1标题

4条答案

相关问题

热门标签

最新问答