将<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类的类选择器组合在一起。