Question

好的，我已经写了几个月的HTML了。但这是我的第一个真正的完整网页。对于ltitle背景，我正在为我的公司创建一个网页。这将是非常深入的。但是，我无法弄清楚如何使用两个CSS文件或源。我需要一个在实际HTML页面文件中，并且还能够使用外部CSS文件。这可能吗？这是我的一些代码。

<style type="text/css">
    #aboutUs {
        z-index: 100;
        position: absolute;
        color: white;
        font-size: 24px;
        margin-left: 25px;
        top: 18px;
        margin-right: 25px;
    }
</style>

位于页面顶部^^

<head>
    <!-- Cheange Title of Webpage below -->
    <title>DTSU - Home</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>

，这是在标题^^

<p>
    <div id="mainNavD">
        <a href="home.html" id="home">About Us</a>
        <a href="aboutUs.html" id="aboutUs">About Us</a>
        <a href="services.html" id="services">Services</a>
        <a href="support.html" id="support">Support</a>
        <a href="contactUs.html" id="contactUs">Contact Us</a>
        <a href="information.html" id="information">Information</a>
        <a href="sponsored.html" id="sponsored">Sponsored</a>
        <a href="reviews.html" id="reviews">Reviews</a>
        <img src="pictures/mainNavBar.jpg"/>
    </div>
</p>

这就是需要使用infile CSS格式化的内容。其余部分将由外部CSS处理。

我如何让两人合作？

这是整个文件，不包括css

<style type="text/css">

#aboutUs { 
    z-index: 100; 
    position: absolute; 
    color: white; 
    font-size: 24px;
    margin-left:25px; 
    top: 18px; 
    margin-right: 25px; 
}

#services {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    margin-left: 80px;
    top: 18px;
    margin-right: 25px;
}

#support {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    margin-left: 25px;
    top: 18px;
    margin-right: 25px;
}

#contactUs {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    margin-left: 25px;
    top: 18px;
    margin-right: 25px;
}

#information {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    margin-left: 25px;
    top: 18px;
    margin-right: 25px;
}

#sponsored {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    margin-left: 25px;
    top: 18px;
    margin-right: 25px;
}

#reviews {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    margin-left: 25px;
    top: 18px;
    margin-right: 25px;
}

</style>

<!DOCTYPE html>
<html> 
    <head>
        <!-- Cheange Title of Webpage below -->
        <title>DTSU - Home</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    </head>
    <body>
        <!-- Div Buttons for Pages -->
        <p>
            <div id="mainNavD">
                <a href="home.html" id="home">About Us</a>
                <a href="aboutUs.html" id="aboutUs">About Us</a>
                <a href="services.html" id="services">Services</a>
                <a href="support.html" id="support">Support</a>
                <a href="contactUs.html" id="contactUs">Contact Us</a>
                <a href="information.html" id="information">Information</a>
                <a href="sponsored.html" id="sponsored">Sponsored</a>
                <a href="reviews.html" id="reviews">Reviews</a>
                <img src="pictures/mainNavBar.jpg"/>
            </div>
        </p>
        <!-- Header and Logo Combo -->
        <div id="headerD">
            <img src="pictures/header.jpg" />
            <div id="logoD"></div>
        </div>
    </body>
</html>

Answer 1

将您的样式放在实际的HTML内部而不是之前。另外，如果您想让它更漂亮，可以在@import的第一行使用<style>。

<head>
...
<style type="text/css">

    @import "stylesheet.css";

    #aboutUs {
        z-index: 100;
        position: absolute;
        color: white;
        font-size: 24px;
        margin-left: 25px;
        top: 18px;
        margin-right: 25px;
    }

  .... other style rules ....

</style>
...
</head>

Answer 2

在这种情况下，您不需要2个不同的CSS文件。如果你只是将css添加到id为mainNavD的div块，它只会将这些样式应用于该div块。这是将ID添加到您的html标签的目的，以便您可以唯一地识别它们。

您也可以使用内联样式，只需直接在html文件中添加样式即可。只需谷歌“html inline css”并阅读即可。

Answer 3

<style>标记应位于标题内，尽管在Chrome文件中将文件放在文件顶部对我来说无效。试试这个：

<head>
  <!-- Cheange Title of Webpage below -->
  <title>DTSU - Home</title>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <style type="text/css">
    #aboutUs { z-index: 100; position: absolute; color: white; font-size: 24px; margin-left: 25px; top: 18px; margin-right: 25px; }
  </style>
</head>

你应该没问题。否则，请发布您的整个文件。

Answer 4

您可以将两个不同的样式表应用于同一页面，方法是分别包含每个文件，例如

<head>
    <!-- Cheange Title of Webpage below -->
    <title>DTSU - Home</title>
    <link type="text/css" rel="stylesheet1" href="stylesheet.css" />
    <link type="text/css" rel="stylesheet2" href="stylesheet.css" />
</head>

请记住，如果在每个样式表中为ul元素定义不同的样式（例如），样式表2中的样式将覆盖另一个样式。

如何在HTML文件中添加外部CSS文件和CSS？

4 个答案: