Question

我刚刚开始阅读HeadFirst HTML和CSS书籍。在本书的以下示例代码中，当我在IE / Firefox / Chrome中查看时，HTML代码中的CSS样式未应用。

<html>
<head>
<title>Starbuzz Coffee</title>
<style type=”text/css”>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffee Beverages</h1>
<h2>House Blend, $1.49</h2>
<p>A smooth, mild blend of coffees from Mexico, Bolivia and
Guatemala.</p>
<h2>Mocha Caffe Latte, $2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, $1.89</h2>
<p>A mixture of espresso, steamed milk and milk foam.</p>
<h2>Chai Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>
</html>

请你评论为什么它没有按预期工作。虽然我使用与上面相同的代码从互联网上下载了一个文件index.html，但是它给出了预期的输出。

谢谢，

Answer 1

您写的type=”text/css”需要type="text/css"。

属性值通常用 U + 0022：QUOTATION MARK 字符分隔。还有其他有效选项，但您使用的是 U + 201D：右双引号，这不是其中之一。

validator会选择这个。

您的问题可能是由使用文字处理程序编写代码引起的。使用文本编辑器（例如Sublime Text，Atom或Brackets）。

Answer 2

简单：进入偏好设置。从那里，看看Tab＆＃34; New Document＆＃34;并确保方框＆＃34;智能行情＆＃34;是联合国已检查。您可以随意取消选中其他拼写自动修正，因为您刚刚开始并且需要一个不会弄乱您正在撰写的内容的纯文本编辑器。

P.S。，Brackets非常好，因为它具有直观的感觉，但它最适合谷歌浏览器，所以如果你还没有它，你可能必须下载该浏览器。另一方面，如果你刚开始使用TextEdit可以正常使用Safari。

Answer 3

尝试仅使用< style >而不是< style type=”text/css” >或< style type="text/css" >打开代码。有同样的问题，这个问题适合我。

未应用CSS样式：Head First HTML示例

3 个答案: