CSS 内联和嵌入式样式表 [关闭]答案

【问题标题】：CSS inline and embedded stylesheets [closed]CSS 内联和嵌入式样式表 [关闭]
【发布时间】：2014-06-04 23:17:56
【问题描述】：

我报名参加了 HTML-CSS 课程，我正在完成一项期末作业，但我试了一整天都无法解决。 wc3 的验证器说我的代码没有太大问题。首先的问题是文本没有像我在课堂上写的那样格式化为粗体和斜体，第三个是没有显示没有边框的框。

<html>
  <head>
    <STYLE TYPE="text/css" MEDIA=screen>
      p#speciell {
        font-style: italic;
      }

      p#speciell2 {
        font-weight : bold;
      }

      #DatorID {
        font-family : Helvetica, italic, underline;
        font-size : 25px;
        background : #ffffff;
        color : maroon;
      }

      .block3 { 
        font-family: Times New Roman;
        font-size: 16px;
        background: #c9e9ff;
        border: 6px #a52a2a
        border-style: double;
        border-color: #a52a2a;
        Padding: 5px;
        color: navy;
        width; 70%;
      }
    </STYLE>
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen />
  </head>
  <body>
    <p class ="#speciell"> Text </p>
    <p class ="#speciell2"> Text </p>
    <div class="block">
      Text I want in a box with the formats
    </div>

【问题讨论】：

你有一个 block3 类的规则，你的元素有一个 block 类。没有匹配。
您对 ID speciell 和 speciell2 有一个规则，并且您的元素具有类 #speciell 和 #speciell2。没有匹配项，而且您以错误的方式使用#。它应该用于为某些元素 ID 定义规则。对于课程，您应该使用.。

标签： html css css-float

【解决方案1】：

那里有一些错误。

您有一个类block3 的规则，并且您的元素有一个类block。不匹配。
您有一个用于 ID speciell 和 speciell2 的规则，并且您的元素具有类 #speciell 和 #speciell2。没有匹配项，而且您以错误的方式使用#。它应该用于为某些元素 ID 定义规则。对于课程，您应该使用.。

修复这些，你会得到：

<p class="speciell">Text</p> <!-- Removed the # from the class name -->
<p class="speciell2">Text</p> <!-- Removed the # from the class name -->
<div class="block">Text I want in a box with the formats</div>

还有：

p.speciell { /* Replaced the # that defines an ID with a . that defines a class */
    font-style: italic;
}
p.speciell2 { /* Replaced the # that defines an ID with a . that defines a class */
    font-weight : bold;
}
#DatorID {
    font-family : Helvetica, italic, underline;
    font-size : 25px;
    background : #ffffff;
    color : maroon;
}
.block { /* Corrected the class name */
    font-family: Times New Roman;
    font-size: 16px;
    background: #c9e9ff;
    border: 6px #a52a2a;
    border-style: double;
    border-color: #a52a2a;
    Padding: 5px;
    color: navy;
    width:70%; /* Corrected a typo */
}

Demo

【讨论】：

除了将这些ID更改为类之外，我会避免使用“block”作为类名； block 是 CSS 显示属性，并没有很好地定义类。它会起作用，但令人困惑。此外，我会将类名更改为更有意义的名称；请记住，在专业领域中，其他开发人员可能必须编辑您的代码，以使其保持逻辑和简单。
+1 用于添加好的信息。
我还会删除任何多余的类（即#DatorID 可能是不必要的）。作为过去的 HTML/CSS 讲师，这些小事在学生的工作中起到了很好的作用。
感谢您的回答！这是我错过的非常简单的事情。虽然我对 CSS 和 HTML 完全不熟悉。还有一个问题，如何让边框在盒子上可见？
现在应该可以看到了。发布答案时，我错过了这一点（另一个错字）。它已更新。