未应用 CSS 样式表

【问题标题】：CSS stylesheet not being applied未应用 CSS 样式表
【发布时间】：2016-02-28 21:58:33
【问题描述】：

大约一周以来，我在加载 CSS 样式表时遇到了问题。我有以下代码：

版本 1：

<!DOCTYPE html>

<html>
    <head>
    <style type="text/css">
    <?PHP include_once "school.css"; ?>
    </style>
</head>

版本 2：

<!DOCTYPE html>

<html>
    <head>
    <link rel="stylesheet" type="text/css" href="school.css" />
</head>

我使用在线验证页面测试了样式表，并且没有错误消息。我在以下设备上使用以下浏览器：Chrome 和 Firefox：Windows XP、Windows 7、Nexus 7。它们都显示相同的问题：

我加载页面，样式表似乎已加载，但未应用。当我浏览页面时，样式表仍未应用。应该应用相同的样式表，但不是。当我刷新或强制刷新页面时，正在应用样式表，从那时起一切正常。即使我更改样式表然后刷新页面，更改也会毫无问题地显示出来。只有在第一次加载时才会出现问题。

我有许多带有样式表的类似页面，它们仍然有效。这是样式表：

/***********
* MY STYLE *
***********/


/* GENERAL */

    html, body {
        padding: 0;
        margin: 0;
        border: 0;
        width: 100%;
        height: 100%;
    }
    body {
        font-family: "MS Gothic";
    }

/* COLORS */

    body {
        color: black;
    }
    #banner a, h2, #tabbar a, th, input[type="submit"] {
        color: #ffe6cc;
        text-shadow:
         0.05em  0.05em  0.05em #2f2200,
         0.05em  0       0.05em #2f2200,
         0.05em -0.05em  0.05em #2f2200,
         0       0.05em  0.05em #2f2200,
         0      -0.05em  0.05em #2f2200,
        -0.05em  0.05em  0.05em #2f2200,
        -0.05em  0       0.05em #2f2200,
        -0.05em -0.05em  0.05em #2f2200;
    }
    body {
        background-color: #ffe6cc;
    }
    #banner, h2, #tabbar a {
        background-color: #665533;
    }
    th, input[type="submit"] {
        background-color: #887755;
    }

/* BORDERS */

    .tablePrices tr:first-child > *, .tabbar, #imgTeacher, #aMap img, input[type="text"], input[type="submit"], input[type="tel"], input[type="email"], select, textarea {
        border-top: 0.15em solid #2f2200;
    }
    .tablePrices tr:first-child > *:first-child, .tablePrices tr > *:first-child, #imgTeacher, #aMap img, input[type="text"], input[type="submit"], input[type="tel"], input[type="email"], select, textarea {
        border-left: 0.15em solid #2f2200;
    }
    .tablePrices tr > *, .tabbar a, #imgTeacher, #aMap img, input[type="text"], input[type="submit"], input[type="tel"], input[type="email"], select, textarea {
        border-right: 0.15em solid #2f2200;
    }
    h1, h2, #navMenu h2:last-child:last-child > div, h3, .tablePrices tr > *, #imgTeacher, #aMap img, input[type="text"], input[type="submit"], input[type="tel"], input[type="email"], select, textarea {
        border-bottom: 0.15em solid #2f2200;
    }

/* BANNER */

    #banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    .banner h1 {
        margin: 0;
        padding: 0;
        text-align: center;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
    }
    .banner a {
        display: block;
        font-weight: bold;
        padding: 0.5em 0;
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    h2 {
        margin: 0;
    }
    h2 span {
        display: block;
    }

/* TABBAR */

    #tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
    #tabbarDummy {
        visibility: hidden;
    }
    .tabbar a {
        display: inline-block;
        font-weight: bold;
        width: 20%;
        margin: 0;
        padding: 0;
        text-align: center;
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .tabbar a:last-child {
        border-right: 0;
    }

/* ARTICLE */

    article {
        padding: 1em 1em 0 1em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    article > *:last-child {
        margin-bottom: 1em;
    }

    p {
        margin: 0 0 0.5em 0;
    }

/* COURSES */

    .tablePrices {
        border-collapse: separate;
        border-spacing: 0;
        width: 50%;
        min-width: 15em;
        margin: 0 auto 0.5em auto;
    }
    .tablePrices th {
        padding: 0.2em;
    }
    .tablePrices td {
        padding: 0.2em;
        text-align: center;
    }
    .tablePrices tr:first-child > *:first-child {
        -webkit-border-top-left-radius: 0.5em;
        -moz-border-topleft-radius: 0.5em;
        border-top-left-radius: 0.5em;
    }
    .tablePrices tr:first-child > *:last-child {
        -webkit-border-top-right-radius: 0.5em;
        -moz-border-topright-radius: 0.5em;
        border-top-right-radius: 0.5em;
    }
    .tablePrices tr:last-child > *:first-child {
        -webkit-border-bottom-left-radius: 0.5em;
        -moz-border-bottomleft-radius: 0.5em;
        border-bottom-left-radius: 0.5em;
    }
    .tablePrices tr:last-child > *:last-child {
        -webkit-border-bottom-right-radius: 0.5em;
        -moz-border-bottomright-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
    }

/* TEACHER */

    #imgTeacher {
        float: right;
        margin: 0 0 0.5em 0.5em;
        max-width: 50%;
        -webkit-border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #pTeacher {
        margin-bottom: 1em;
    }
    #divTeacher {
        clear: both;
        margin-bottom: 0.5em;
    }

/* MAP */

    #aMap {
        display: block;
        margin: 0 0 0.5em 0;
        padding: 0;
        text-align: center;
    }
    #aMap img {
        display: block;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        -webkit-border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #divMap {
        text-align: center;
    }
    #divMap p {
        width: 100%;
        max-width: 600px;
        margin: 0 auto 0.5em auto;
        text-align: left;
    }

/* INQUIRY */

    #tableInquiry {
        border-collapse: collapse;
        width: 100%;
        max-width: 600px;
        margin: 0 auto 1em auto;
    }
    #tableInquiry .tdLabel {
        width: 1%;
        white-space: nowrap;
        padding: 0.1em;
        text-align: right;
    }
    #tableInquiry .tdLabelLong {
        padding: 0.1em;
        text-align: left;
    }
    #tableInquiry .tdRed {
        color: red;
    }
    #tableInquiry .tdField {
        width: 99%;
        padding: 0.1em;
    }
    #tableInquiry .tdTrial {
        width: 100%;
        text-align: center;
    }
    #tableInquiry .tdSpacer {
        width: 100%;
        height: 0.5em;
    }
    #tableInquiry .spanNoWrap {
        white-space: nowrap;
    }
    #tableInquiry .tdButton {
        padding: 0.1em;
        text-align: right;
    }
    #pInquirySuccess {
        color: #009900;
        text-align: center;
    }

/* INQUIRY: INPUT FIELDS */

    input[type="text"], input[type="tel"], input[type="email"], select, textarea {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0.1em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 0.3em;
        -moz-border-radius: 0.3em;
        border-radius: 0.3em;
    }
    textarea {
        height: 12em;
        resize: vertical;
    }
    input[type="submit"] {
        display: inline-block;
        margin: 0;
        padding: 0.2em 0.3em;
        -webkit-border-radius: 0.3em;
        -moz-border-radius: 0.3em;
        border-radius: 0.3em;
    }

/* BANNER IMAGE */

@media only screen and (max-width: 319px) {
    #banner h1 {
    background-image: url("/images/school/banner_small.jpg");
    }
}
@media only screen and (min-width: 320px) and (max-width: 759px) {
    #banner h1 {
    background-image: url("/images/school/banner_medium.jpg");
    }
}
@media only screen and (min-width: 760px) {
    #banner h1 {
    background-image: url("/images/school/banner.jpg");
    }
}

/* PORTRAIT: FONT SIZE */

@media only screen and (orientation: portrait) and (max-width: 279px) {
    * { font-size: 12px; }
}
@media only screen and (orientation: portrait) and (min-width: 280px) and (max-width: 319px) {
    * { font-size: 14px; }
}
@media only screen and (orientation: portrait) and (min-width: 320px) and (max-width: 399px) {
    * { font-size: 16px; }
}
@media only screen and (orientation: portrait) and (min-width: 400px) and (max-width: 479px) {
    * { font-size: 20px; }
}
@media only screen and (orientation: portrait) and (min-width: 480px) {
    * { font-size: 24px; }
}

/* LANDSCAPE: FONT SIZE */

@media only screen and (orientation: landscape) and (max-width: 419px) {
    * { font-size: 12px; }
}
@media only screen and (orientation: landscape) and (min-width: 420px) and (max-width: 479px) {
    * { font-size: 14px; }
}
@media only screen and (orientation: landscape) and (min-width: 480px) and (max-width: 599px) {
    * { font-size: 16px; }
}
@media only screen and (orientation: landscape) and (min-width: 600px) and (max-width: 719px) {
    * { font-size: 20px; }
}
@media only screen and (orientation: landscape) and (min-width: 720px) {
    * { font-size: 24px; }
}

/* PORTRAIT */

@media only screen and (orientation: portrait) {

    .banner a {
        font-size: 200%;
    }

    h2 {
        padding: 1em 1em;
    }
    h2 span {
        font-size: 150%;
    }

    .tabbar img {
        display: block;
        width: 2em;
        margin: 0.5em auto;
    }
    .tabbar span {
        font-size: 75%;
        display: block;
        text-align: center;
        padding: 0 0 0.666em 0;
    }

}

/* LANDSCAPE */

@media only screen and (orientation: landscape) {

    .banner a {
        font-size: 150%;
    }

    h2 {
        padding: 0.5em 1em;
    }
    h2 span {
        font-size: 125%;
    }

    .tabbar img {
        display: inline-block;
        width: 2em;
        margin: 0.25em 0.5em 0.25em 0;
        vertical-align: middle;
    }
    .tabbar span {
        font-size: 75%;
        display: inline-block;
        padding: 0;
        vertical-align: middle;
    }

}

有什么想法吗？提前致谢。

伯恩哈德

【问题讨论】：

  • css文件和你的页面在同一个文件夹吗？
  • 你用的是哪一个？版本 1 还是版本 2？你的html文件和css文件的文件夹结构是什么？
  • Mladen Oršolić 是的，当然。刷新页面时，它已正确应用。
  • mwan 文件夹结构？它在“www/design/school_3/”中。怎么说呢，刷新页面后样式表工作得很好。
  • 我尝试了两个版本。两者都是同样的问题。

标签： css


【解决方案1】：

您可以使用此代码

Version 1 :

    <?php
    function my_theme_enqueue_styles()
    {
    $parent_style = 'adforest-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/css/school.css' );

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/school.css', array( $parent_style ), wp_get_theme() >get('1.0.0') );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    ?>

    @import url("../css/school.css");




    Version 2 :

    <link rel="stylesheet" type="text/css" href="css/school.css" />
&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

【讨论】：

    猜你喜欢
    • 2015-06-08
    • 2021-09-13
    • 2012-11-12
    • 2016-10-13
    • 2016-12-07
    • 2021-09-09
    • 2019-12-05
    • 2022-10-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode