將<code>tag in CSS class</code>

Question

我是CSS新手。

有什么辦法可以將代碼標簽放入CSS類中？

為了顯示代碼，起初我使用內聯樣式：

<table>
  <tr>
    <td style="border:solid 2px #5882FA">
         <code> 
               some codes 
         </code>
    </td>
  </tr>
</table>

然后我發現了內部樣式表。 所以我用

<header>
   <style>
      td.bordered{border:solid 2px #5882FA}
   </style>
</header>
 .
 .
 .
<table>
  <tr>
    <td class="bordered">
         <code> 
               some codes 
         </code>
    </td>
  </tr>
</table>

我想知道是否也可以將代碼標簽放入樣式表中，因此我不需要每次顯示代碼時都編寫代碼。

Answer 1

不能。您可以將樣式應用於表數據單元，該樣式將復制給定瀏覽器的代碼元素默認樣式，並且可以使用::before和::after生成偽元素，但是無法應用語義含義與使用CSS的HTML元素相關聯。

CSS規范甚至明確警告不要嘗試執行此類操作：

注意。 CSS為“ class”屬性提供了如此強大的功能，以至於作者可以根據幾乎沒有關聯表示的元素（例如HTML中的DIV和SPAN）設計自己的“文檔語言”，並通過“ class”屬性分配樣式信息。 作者應避免這種做法，因為文檔語言的結構元素通常具有公認的含義，而作者定義的類則可能沒有。

關於語義的問題，一張一張一張的表格建議您濫用它的收縮包裝布局功能。 使用display: inline-block代替。

因此，您的代碼應該看起來像這樣：

<style>
    code {
        display: inline-block;
        border: solid 2px #5882FA;
    }
</style>

<code> 
    some codes 
</code>

Answer 2

否。首先，沒有“ CSS類”。 類是標記語言（HTML）的概念。 可以使用類選擇器在CSS中對其進行引用，但這只是按其類引用元素的一種方式。 其次，標簽也是標記語言的概念，您不能在CSS中創建標簽或元素。 在CSS中，您只需按元素名稱來引用它們。

但是，如果我們將問題解釋為“我可以格式化CSS中的某些元素，就像它們內部包含code元素一樣”，那么答案是“是的，有保留”。

在大多數情況下， code標記所做的只是將字體設置為與瀏覽器相關的等寬字體，並將字體大小設置為與瀏覽器相關的縮小字體，盡管后者（記錄不足）適用於某些情況和某些情況。僅瀏覽器。 除此之外，它可能會影響自動翻譯程序（例如Google Translate），以使它們不翻譯內容，因為它“不是用任何人類語言” —通常很好，但是您不能在CSS中做到這一點。 code標記也可能具有其他影響。

因此，您可以使用例如

td.bordered {
  /* put your settings for the border here */
  font-family: monospace;
  font-size: 90%;
}

但是請注意，這不一定會產生與使用code元素相同的效果。 另一方面，這實際上不是問題：確定所需的呈現並在CSS中實現，而不是嘗試模仿某些假定的默認code呈現。

Answer 3

如果您的目標是在<code>標記的內容周圍顯示邊框，則可以使用以下CSS規則：

code {
    border: solid 2px #5882FA;
}

code選擇器之前沒有任何點或#字符，稱為元素選擇器 。

您使用的另一個選擇器td.bordered將匹配所有<td>標簽的元素選擇器與匹配帶bordered類的類選擇器組合在一起。