卡卡網(wǎng)

在本文中，我將向你展示如何使用 span 標(biāo)簽使你的內(nèi)容的某個(gè)部分與其他部分區(qū)別開來。

span標(biāo)簽是做什么用的？

span標(biāo)簽就像是一個(gè)DIV，用于包含類似的內(nèi)容，以易于一起樣式化。

但span不同之處在于它是一個(gè)內(nèi)聯(lián)元素，而不是div，后者是一個(gè)塊元素。

另外，請(qǐng)記住，span除非你設(shè)置樣式，否則它本身不會(huì)對(duì)其內(nèi)容產(chǎn)生任何影響。

span標(biāo)簽有兩個(gè)主要用途：

• 使用 JavaScript 設(shè)置樣式
• 操作特定文本。

如何使用span標(biāo)簽設(shè)置文本樣式

如果你想讓一些特定的文本或任何其他內(nèi)容與其他內(nèi)容不同，你可以將它包裝在一個(gè)span標(biāo)簽中，給它一個(gè)類屬性，然后用屬性值來對(duì)它進(jìn)行樣式設(shè)置。

在下面的例子中，我通過span標(biāo)簽來改變一些文本的color，background-color以及font-style。

如何更改文本顏色

<p>This a <span class="crimson-text">crimson text</span> within others.</p>

.crimson-text {
      color: crimson;
}

我添加了一些基本的 CSS 來使頁面上的所有內(nèi)容居中：

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;
}

如何使用JavaScript操作span標(biāo)簽

你可以給span標(biāo)簽一個(gè)id屬性，然后用 JavaScript 通過它的 id 選擇它，這樣你就可以操作它了。

在下面的示例中，我使用 JavaScript 將文本中的一些文本更改為大寫： 

<p>
   The text, <span id="uppercase"> webkaka</span>, was turned to
   upperase with JavaScript
</p>

const uppercase = document.querySelector("#uppercase");

uppercase.style.textTransform = "uppercase";

結(jié)論

在本教程中，介紹了如何巧用span標(biāo)簽把部分文本更改樣式， 和通過 JavaScript 操作特定文本的方法。

標(biāo)簽: span