2

我是 html/css 的新手，我正在为学校做一些事情。我用 DIV id 做了不同的事情，然后在我的外部 css 表中添加了一个 # ，这一切都奏效了，我创建了一个很好的布局。现在我想要斜体、红色和其他常规文本的某些部分。我想用 div 包裹需要斜体的部分。但这一次它似乎不起作用。有人知道我在做什么错吗？其他 DIVS 确实有效：

重要提示：所有 CSS 都必须在外部 CSS 表中。我不知道为什么，但它在学校是强制性的。所以我不能做 DIV style="。它必须与#

HTML：

<div id="navigation">
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="nieuwsartikel.html">Nieuwsartikel</a></li>
            <li><a href="sfeerverslag.html">Sfeerverslag</a></li>
            <li><a href="column.html">Column</a></li>
        </ul>
    </nav>
</div>

<div id="content">
    <article>
        <h1>
            De Groot spreekt over informatieoorlog
        </h1>

<div id="italic">
    Aan de bar van het duistere bestofte cafeetje in Amsterdam zit ze, Naomi de Groot. Bijna onherkenbaar, vermomd door middel van een paarse pruik en een enorme zonnebril. Nederlands meest bekende complottheoriste kijkt wantrouwend naar haar bestelde glas cola, ze schuift het aan de kant en pakt uit haar tasje een fles met zelf gefilterd water. ‘je kan niet voorzichtig genoeg zijn’ fluistert ze. Ik kan niet wachten om haar te interviewen over haar gedachtes en visies met betrekking tot internet privacy.
</div>

我的 CSS：

#content h2
{
    color:#000;
    font-size: 160%;
    margin: 0 0 .5em;
}

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

#italic
{
    font-style:italic;
    color:red;
}

#footer
{
    background:#ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}
4

6 回答 6

1

这应该工作http://jsfiddle.net/VyeU7/

基本的CSS规则：

Html 标签定义了该标签的样式，例如

div
{css here}

前导点定义具有该类的所有元素的样式，例如

.yourclass
{css here}

前导标签定义具有该 id 的元素的样式（通常，id 应仅适用于单个元素）

#element_id
{css here}
于 2013-10-29T19:30:04.133 回答
0

如果您只想设置文本样式并且将其斜体以增加重点，则应考虑将文本包装在em标签中，如下所示：

<em>Aan de bar van het duistere bestofte cafeetje in Amsterdam zit ze, 
 Naomi de Groot. Bijna onherkenbaar, vermomd door middel van een paarse 
 pruik en een enorme zonnebril. Nederlands meest bekende complottheoriste kijkt
 wantrouwend naar haar bestelde glas cola, ze schuift het aan de kant en pakt uit
 haar tasje een fles met zelf gefilterd water. ‘je kan niet voorzichtig genoeg zijn’
 fluistert ze. Ik kan niet wachten om haar te interviewen over haar gedachtes en
 visies met betrekking tot internet privacy.</em>

CSS：

em {
   color: red;
}

由于 em 标签通常由浏览器将斜体作为默认样式，您可以选择明确样式规则或让浏览器决定。

于 2013-10-29T19:25:52.833 回答
0

要包含某些段落的某些样式，您需要使用“类”而不是 id

也一样

.reditalic
{
    color:red;
    font-style:italic;
}

然后在任何你需要它的地方做

<div class="reditalic">the text</div>

或者

<p class="reditalic">the text</p>

等等

于 2013-10-29T19:26:39.950 回答
0

正如我现在所看到的，您的 HTML 代码很好:) 您的 css 中只是有一个小错字：

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

应该 ：

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg);
}

瞧，一切都会好起来的。

jsFiddle

成功绿色！

于 2013-10-29T19:33:35.043 回答
0

您的 CSS 中有语法错误。它位于一条长线的末尾，因此很难看到：

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg); }
}

注意额外的闭合花括号。这可能导致浏览器在出现此错误后忽略所有 CSS 规则（或以其他方式误解它们）。只需摆脱额外的支撑：

body 
{ 
    background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg);
}

在这里工作（当然，结合关闭你的 HTML 标签）。

注意：当您的标记/样式出现奇怪行为时，您应该做的第一件事就是验证它们。

于 2013-10-29T19:34:04.980 回答
0

您在“内容” div 中缺少结束标记</article>和结束</div>标记。

此外，如果您想要斜体字，您可以将其包装在<em>标签中。

于 2013-10-29T19:23:47.260 回答