Question

我是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%;
}

Answer 1

这应该有效http://jsfiddle.net/VyeU7/

基本css规则：

Html标记定义该标记的样式，例如

div
{css here}

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

.yourclass
{css here}

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

#element_id
{css here}

Answer 2

您错过了“内容”div中的结束</article>和结束</div>标记。

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

Answer 3

如果您只想对文本进行样式设置并使用斜体添加重点，则应考虑将文本包装在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标签通常以浏览器斜体显示为默认样式，因此您可以选择使样式规则显式或让浏览器决定。

Answer 4

要包含某些段落的某些样式，您需要使用＆＃34;类＆＃34;不是id

所以

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

然后你需要它的所有地方

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

或

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

等

Answer 5

你的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

Succes verder！

Answer 6

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);
}

Works here（当然，与关闭HTML标记相结合）。

注意：当您使用标记/样式遇到奇怪的行为时，您应该执行的第一个事情是validate them。

我想要我的DIV的CSS不起作用

6 个答案: