logo标签列表

这是使用CSS样式化HTML文档的正确方法吗？

htmlcss
4

我刚刚接触编码和CSS，已经做出了一个示例页面，但不确定我的CSS使用是否正确。虽然我看起来已经得到了所需的布局，但我想知道是否有任何错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content= "" />

    <title>Example</title>

    <base href="" />

    <link rel="stylesheet" type="text/css" href="" />

    <style type="text/css">

    body {

        margin: 0;
        padding: 0;

    }

    #wrapper {


    }

    #header {

        background-image: url('images/bg-inner-page.gif');
        height: 200px;

    }

    #logo {

        position: relative;
        top: 50px;
        left: 100px;

    }

    #topnav {

        position: relative;
        top: 35px;
        left: 300px;

    }

    #content {

        background-color: orange;

    }

    #footer {

        background-color: blue;

    }

    </style>
</head>

<body>

    <div id="wrapper">
        <div id="header">
            <div id="logo">
                logo
            </div>

            <div id="topnav">
                nav
            </div>
        </div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>
1
你说的错误是什么意思？你说它正在工作？你想知道这是否是最佳实践吗？那真的是一个不同于你所问的问题。 - spinon
@spinon - 我所说的错误是指，我是否正确地使用了CSS，例如正确使用填充、边距、继承等。我说它有效是因为它给我提供了我想要的布局，但我不知道我的编码是否高效，以及我是否正确地使用了标签、属性、选择器等。 - PeanutsMonkey
4个回答
3

当你不确定时，使用W3C验证器。只需将代码复制并粘贴到表单中，它会告诉你哪里出了问题。

对我来说，它只指向那个<meta>标签：

<meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />

你忘记在UTF-8前面加上开头引号了。

但是你的CSS完全没问题。只要它有效并且能在所有浏览器中正常工作，就不用担心它。

1
我喜欢HTML验证器，这个Firefox插件。https://addons.mozilla.org/en-US/firefox/addon/html-validator/ - Jared Farrish
它们都是一样的东西，但附加组件非常好用，因为可以帮你省去几次点击。 - Blender
3
实际上，正确的HTML是 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />，而不是 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />。 - Kevin Ji
1
@PeanutsMonkey - 我认为应该是 content="text/html; charset=UTF-8"；请注意在 html 后面有一个分号。 - Jared Farrish
@PeanutsMonkey - 跨平台？是什么意思？扩展/插件通常是特定于浏览器的，尽管有些针对某些浏览器的版本（例如Firebug-获取它）。我还喜欢Firecookie和Web Developer（虽然从FF4开始Web Developer可能已经包含在FF中）。由于我对工具包的熟悉，我主要是一个FF开发人员。 - Jared Farrish
显示剩余10条评论
2

你的CSS看起来没问题，但我有两个建议：

1）将你的CSS代码移到一个单独的文件中。这可以让浏览器缓存它并减少你（和他们）的带宽使用量。同时也使你的HTML文件更小，更易于阅读。

2）虽然ID选择器完全没有问题，但我倾向于使用类选择器（例如.class-selector { ... }）而不是ID选择器（例如#id-selector { ... }），因为你可能需要在代码中稍后添加第二个包装div，而且你的ID必须是唯一的。使用类属性将允许你在代码中具有相同样式的两个（或更多）包装器（这是CSS的美妙之处之一）。我曾经看到过很多人创建样式表，因为他们只使用ID选择器来为内容设置样式，这导致他们的样式表反复重复，这违背了CSS的初衷。

我会重新表述(2)。在这种情况下使用id选择器是可以的。只有在有许多外观相似的元素时，例如带标题的图像时，才使用类。 - Blender
@Blender - 是的，之前措辞不太好，希望现在读起来更好些。 - Karl Nicoll
1
只要在各种浏览器中获得所需的输出，那就没问题了。但是，您可能希望将CSS代码放在外部文件中并链接到它。这样相同的样式可以应用于多个页面。我看到您有一个没有href属性值的链接标记，所以只需要提供css文件的名称即可。
谢谢。我对我的代码担心的是它是否高效。不想要只能运行的代码。希望有能够运行、高效并符合标准的代码。 - PeanutsMonkey
0

你的代码看起来很好，除了这一行：

<meta http-equiv="Content-Type" content="text/html" charset=UTF-8" />

更新：您忘记在html和charset之间加上分号，应该像这样：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

将CSS代码与HTML分离以减小页面大小、节省带宽是一个好的实践。 有一些行可以避免这种情况，比如：

 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <meta name="author" content= "" />

 <base href="" />

如果您没有任何外部CSS文件，请避免使用此行。
<link rel="stylesheet" type="text/css" href="" />
@SIFE - 你关于双引号的第一个提示可能是错误的。在 text/html 后面应该有一个分号，而不是另一个双引号。 - Jared Farrish
1
@SIFE - 为什么我要避免使用meta和base标签？我将外部CSS代码放在这里的原因是因为我打算在内部样式表正常工作后将其移动到外部样式表中。 - PeanutsMonkey
@Jared 我忘了，谢谢提醒。@PeanutsMonkey 如果你不打算使用它，请避免使用它。我以为你要把这个页面作为模板，所以我说你不需要<link rel="stylesheet>。 - SIFE
@SIFE - 谢谢。通常我会把所有的代码都放在那里，这样我就有一个模板可以使用，但是你说得对，如果我不使用代码，就不应该把它放在文档中。 - PeanutsMonkey
1
@SIFE - 你的编辑不完全正确-你用了冒号而不是分号，并且缺少一个空格（不确定后者是否必需）。 - Jared Farrish
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接