Question

我是编码和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>

Answer 1

如有疑问，请使用W3C Validator。只需复制＆amp;将代码粘贴到表单中，它会告诉您错误。

对我而言，它只是指向<meta>标记：

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

您忘记了UTF-8之前的开场日报。

但你的CSS完全没问题。只要它有效且适用于所有浏览器，请不要担心。

Answer 2

您的CSS似乎很好，没有问题，但我提供了2条建议：

1）将CSS移动到单独的文件中。这允许浏览器缓存它并减少您（及其）的带宽使用。它还可以缩小您的HTML文件，使其更易于阅读。

2）虽然ID选择器完全没问题，但我倾向于选择类选择器（例如.class-selector { ... }）而不是ID选择器（例如#id-selector { ... }），因为您可能需要在代码中稍后使用第二个包装器div ，你的身份证必须是独一无二的。使用class属性将允许您在代码中具有两个（或更多）具有相同样式的包装器（这是CSS的一部分）。我不止一次看到人们创建了一遍又一遍地重复自己的样式表，因为他们只使用ID选择器来设置内容的样式，这会破坏CSS的重点。

Answer 3

只要您在各种浏览器中获得所需的输出，那就没问题了。但是，您可能希望将CSS代码放在外部文件中并链接到它。这样，相同的样式可以应用于多个页面。我看到你有一个没有href属性值的链接标记所以它只是提供了css文件的名称。

Answer 4

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

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

更新：你忘记在html之后和之前的charset之前放置simicolon：

<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="" />

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

4 个答案: