我开始制作我的第一个网站，到目前为止，我有一个菜单，但问题是我不知道如何使用外部CSS进行格式化....
我的意思是，如果我放body { background-color: yellow}并使用<link rel="stylesheet" type="text/css" href="style1.css" />，我会在外部css中知道它会将黄色应用于我网站的背景颜色。
我无法弄清楚如何使用css文件将菜单和字体应用到我制作的所有网页中....我不想在每个网页上发布相同的css代码作为我正在关注的教程的页面说，只需将css文件导入到要应用格式的所有网页中，而不是将css代码粘贴到每个网页中，这是一个很好的编程....
这是我的代码，基本上我想知道的是如何将代码的css部分放入css文件中，以便我可以为所有网页调用它而不是直接将其放入我的代码中，请注意css根据您用于模糊等的浏览器而变化。
简而言之：我的CSS文件会是什么样子以及我的htm文件代码会是什么样子？
<!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" />
<title>Blurry Menu</title>
<style type="text/css">
body {
background: #1a1a1a url(bg.jpg);
}
#blur {
position: relative;
top: 50px;
width: 100%;
border: 2px solid #000000;
border-style: solid none;
}
#blur:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 2px solid #212121;
content: '';
}
#blur:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 2px solid #212121;
content: '';
}
#blur ul {
position: relative;
top: 0;
width: 960px;
margin: 0 auto;
list-style-type: none;
overflow: hidden;
}
#blur li {
float: left;
position: relative;
}
#blur a {
position: relative;
float: left;
padding: 20px 25px;
margin-left: 10px;
text-decoration: none;
font-family: "trebuchet ms";
font-variant: small-caps;
color: transparent;
text-shadow: 0 0 2px #cacaca;
z-index: 100;
}
/* normal styles */
#blur a:hover, #blur a:focus {
color: #ffffca;
text-shadow: 0 0 0 transparent;
}
/* active styles */
#blur .active a, #blur .active a:hover {
color: #cacaca;
text-shadow: 0 0 2px #cacaca;
}
</style>
<!--[if IE]>
<style type="text/css">
#blur {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
}
#blur ul li a {
color: #ffffca;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur()";
filter: progid:DXImageTransform.Microsoft.Blur();
}
#blur ul a:hover, #blur ul .active a, #blur ul a:focus {
position: relative;
margin: 2px 0 -10px 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(enabled = false)";
filter: progid:DXImageTransform.Microsoft.Blur(enabled = false);
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
#blur ul a:hover, #blur ul .active a {
position: relative;
margin: 2px 4px 0 10px;
filter: progid:DXImageTransform.Microsoft.Blur(enabled = false);
}
</style>
<![endif]-->
</head>
<body>
<div id="blur">
<ul>
<li>
<a href="http://dev.icalapp.rogersdigitalmedia.com.rogers-test.com/website.php">Home</a>
</li>
<li>
<a href="http://dev.icalapp.rogersdigitalmedia.com.rogers-test.com/How-to.htm">How-to</a>
</li>
<li class="active">
<a href="http://dev.icalapp.rogersdigitalmedia.com.rogers-test.com/Edit.php">Edit</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：2)
将样式表放在标题中，例如
<head>
<title>My Awesome Site</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
... href引用样式表的位置。然后，您可以应用样式表规则，就像使用内部样式表一样。
创建外部样式表时，请记住，不要在文档本身中包含<style>标记。
答案 1 :(得分：0)
答案 2 :(得分：0)
<link rel="stylesheet" type="text/css" href="theme.css" />
是你想要的。我建议阅读http://www.w3schools.com/css/default.asp了解基础知识。
答案 3 :(得分：0)
一种简单的方法是
<link rel="stylesheet" href="/css/master.css" type="text/css" media=">
这需要放在您页面的head部分。
href引用文件的路径。
您还可以使用@import方法。
<style type="text/css">
@import url("/css/master.css");
</style>
答案 4 :(得分：0)
将CSS移动到新文件，例如“style.css”，然后在网页中导入样式表。为此，请将以下标记添加到HTML的HEAD部分：
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
有关详细信息，建议您浏览this page。
答案 5 :(得分：0)
将内联样式放在文档中，并使用扩展名.css命名。然后使用以下行在您的标记之间引用它。
<link rel="stylesheet" href="path/to/file.css" type="text/css" />
href既可以是相对的（../ images / file.css），也可以是绝对的（/ images / file.css）。
如果您需要访问不同的媒体，您可以为样式表添加媒体标记（如media =“screen”）或media =“print”，以便在打印页面时使用。
答案 6 :(得分：0)
随着html5的发展，您可以声明您的文档类型＆lt;！doctype＆gt;并利用外部css 将所有css放在名为style.css的文件中，然后你就可以用
来访问它＆lt; link rel =“stylesheet”href =“path / to / file.css”/＆gt;
并将你的css嵌入你的网站
注意：在html5类型中是可选的