我是编码和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>
解决方法
你的CSS看起来很好,没有问题,但我提供了2个建议:
1)将CSS移动到单独的文件中.这允许浏览器缓存它并减少您(及其)的带宽使用.它还可以缩小您的HTML文件,使其更易于阅读.
2)尽管ID选择器完全没问题,但我倾向于选择类选择器(例如.class-selector {…})而不是ID选择器(例如#id-selector {…}),因为您可能需要第二个包装器div后面的代码,你的ID必须是唯一的.使用class属性将允许您在代码中具有两个(或更多)具有相同样式的包装器(这是CSS的一部分).我不止一次看到人们创建了一遍又一遍地重复自己的样式表,因为他们只使用ID选择器来设置内容的样式,这违背了CSS的要点.