你可以使用 HTML span
标签作为容器将内联元素组合在一起,以便你可以使用 JavaScript 设置样式或操作它们。
在本文中,我将向你展示如何使用 span
标签使你的内容的某个部分与其他部分区别开来。然后你应该能够开始在你的编程项目中使用它。
span
标签有什么用
span
标签就像一个 div
,用于对相似的内容进行分组,以便可以对它们设置样式。
但是 span
的不同之处在于它是一个内联元素,而不像 div
是一个块元素。
另外,请记住,除非你设置样式,否则 span
本身不会对其内容产生任何影响。
span
标签有两个主要用途——操作特定文本或给文本设置样式。
如何使用 span
标签设置文本的样式
如果你想让一些特定的文本或任何其他内容与其他内容不同,你可以将它放在一个 span
标签中,给它一个 class 属性,然后通过属性值进行样式设置。
在下面的示例中,我通过将某些文本放在 span
标签中来更改文本的颜色、背景颜色和字体样式。
如何改变文本的颜色
<p>This a <span class="crimson-text">crimson text</span> within others.</p>
.crimson-text {
color: crimson;
}
我添加了一些基本的 CSS 来使页面上的所有内容居中:
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
}
如何改变背景颜色
<p>
A <span class="green-background">green background color</span> perfectly
implies the beauty of nature.
</p>
.green-background {
background-color: #2ecc71;
}
如何改变字体样式
<p>
An <span class="font-style">italic</span> font style could be instrumental
in laying emphasis on a text.
</p>
.font-style {
font-style: italic;
}
如何用 span
标签操作 JavaScript
正如可以通过在内容周围放一个 span
标签来设置内容样式一样,你也可以通过将内容放在一个 span
标签中来操作内容。你给它一个 id 属性,然后用 JavaScript 通过它的 id 选择它,这样你就可以操作它。
在下面的示例中,我使用 JavaScript 将其他文本中的一些文本更改为大写:
<p>
The text, <span id="uppercase"> freecodecamp</span>, was turned to
upperase with JavaScript
</p>
const uppercase = document.querySelector("#uppercase");
uppercase.style.textTransform = "uppercase";
小结
在本教程中,你学习了如何使用 CSS 和 JavaScript 通过将特定文本放在 span
标签中,并为其设置唯一的 class
或 id
属性来对其进行操作。
请注意,在这种情况下,你应该使用用于样式的 class 和用于使用 JavaScript 操作的 id 以避免混淆。
感谢你阅读本文!
原文:Span HTML – How to Use the Span Tag with CSS,作者:Kolade Chris