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 spec甚至明确警告不要试图做那样的事情：

请注意。 CSS为“类”属性提供了如此强大的功能，作者可以设想基于几乎没有相关表示的元素（例如HTML中的DIV和SPAN）设计自己的“文档语言”，并通过“类”属性分配样式信息。作者应该避免这种做法，因为文档语言的结构元素通常具有公认和接受的含义，而作者定义的类可能不具备。

关于语义的主题，一个一个一个表建议你滥用它的收缩包装布局功能。请改用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标记所做的就是它将字体外观设置为依赖于浏览器的等宽字体，并将字体大小设置为依赖于浏览器的缩小尺寸，尽管后者（文档记录不完整））仅适用于某些环境和某些浏览器。除此之外，它可以是例如影响自动翻译程序（如谷歌翻译），以便他们不翻译内容，将其视为“不是任何人类语言” - 这通常是好的，但你不能在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选择器，前面没有任何点或#个字符，称为element selector。

您使用的另一个选择器td.bordered将一个匹配所有<td>标记的元素选择器与一个与bordered类匹配的类选择器组合在一起。

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

3 个答案: