Question

我正在测试与视频教程平行的代码。我有两个CSS文件。第一个工作正常。第二个CSS似乎不适用于HTML。我的文件夹结构如下。

/
- css（screen_style.css，screen_layout_large.css）
- 图片（banner_large.jpg，logo_large.png等）
- 的index.html

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

        <title>Lynda.com | Creating a Responsive Web Design</title>

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

    </head>
    <body>
        <div class="page">
            <header>
                <a class="logo" href="#"></a>
            </header>

            <article>
                <h1>Welcome</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>

            <div class="promo_container">
                <div class="promo one">
                    <div class="content">
                        <h3>Promo Heading Here</h3>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        <p><a class="cta" href="">Visit our blog</a></p>
                    </div>
                </div>
                <div class="promo two">
                    <div class="content">
                        <h3>Promo Heading Here</h3>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>
                        <p><a class="cta" href="">Read the article</a></p>
                    </div>
                </div>
                <div class="promo three">
                    <div class="content">
                        <h3>Promo Heading Here</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor inci did unt.</p>
                        <p><a class="cta" href="">Learn more</a></p>
                    </div>
                </div>
            </div>

            <nav>
                <a href="#">About Us</a>
                <a href="#">Contact Us</a>
            </nav>

            <footer>
                &copy; AG IT Solutions.
            </footer>
        </div>

    </body>
</html>

CSS / screen_tyle

@charset "UTF-8";

/* Global Content Formatting and Styles */

body {
    color: #575c7a;
    line-height: 1.5em;
    font-family: Arial;
    font-size: 14px;
    background:#515673 url(../images/background_gradient.jpg) repeat-x 0 0;
}

.page {
    max-width: 980px;
    margin: 0 auto 0 auto;
    padding: 0;
    position: relative;
    background-color: #fff;
}

h1 {
    font-size: 2em;
    font-weight: normal;
    color: #a6430a;
    margin: 0 0 0.5em 0;
}

h2 { font-size: 1.7em; margin: 0 0 1em 0;}

h3 { font-size: 1.5em; margin: 0 0 1em 0;}

p { margin:0 0 0.75em 0;}

a { color:#de9000;}

a:hover {color:#009eff;}

a.cta { 
    text-transform: uppercase;
    font-size:.9em;
    font-weight:bold;
    text-decoration:none;
    margin: .5em 0 0 0;
    padding: 0 12px 0 0;
    background: url(../images/cta_arrow.png) no-repeat right 0;
}

a.cta:hover {
    background-position:right -50px;
}

.promo h3 {font-size: 1.1em; margin:0;}

.promo p {line-height:1.2em; font-size:.9em; margin-bottom:.5em;}

.promo { background-repeat: no-repeat;}

.promo.one { background-image: url(../images/promo_1.jpg);}
.promo.two { background-image: url(../images/promo_2.jpg);}
.promo.three { background-image: url(../images/promo_3.jpg);}

footer { 
    font-size: .85em; 
    color: #9ba0bd;
    background-color:#575c7a;
    padding: 10px 10px 10px 10px;
}

CSS / screen_layout_large

@charset "UTF-8";

/* Layout (global rules for all sizes) */

body {
    margin: 0; 
    padding: 0;
}

header a.logo {
    display: block;
    position: absolute;
    background-position: 0 0;
    background-repeat: no-repeat;
}

/* Layout Large Screens (default for older browsers) */

header {
    height: 275px;
    background: url(../images/banner_large.jpg) no-repeat right 0;
}

header a.logo {
    width: 150px;
    height: 85px;
    top: 28px;
    right: 30px;
    background-image: url(../images/logo_large.png);
}

在screen_layout_large.css中编写脚本的标题部分中没有加载任何图像。填充也不起作用。我试过用css属性包含！important。但问题似乎是CSS没有链接。当我删除第一个CSS时，它只有纯HTML。

Answer 1

尝试打开您的开发者工具（ F12 用于Google Chrome），在head元素内找到您的两个links到css文件。 Mouse2 - ＆gt; 在新标签页中打开链接

mathematics exchange question

如果两个文件都不为空（您应该看到任何css属性），请告诉我们。 如果其中一个为空，则表示您没有正确连接。

Answer 2

清除浏览器现金是此特定问题的解决方案......

第二个CSS没有链接/应用

2 个答案: