Блог

Главная - Вопросы по программированию - Моя таблица стилей связана, но стиль не применен, как я могу заставить ее работать?

Моя таблица стилей связана, но стиль не применен, как я могу заставить ее работать?

#css #node.js #express

#css #node.js #выразить

Вопрос:

Я пытаюсь связать таблицу стилей с приложением, которое я в настоящее время создаю, используя express и node.js. Проблема в том, что таблица стилей привязывается к веб-странице, если я нажимаю inspect / sources, я вижу, что она связана и код внутри нее, но он не применяется к моей веб-странице.

Таблица стилей сохраняется в разделе public / stylesheets / app.css.

Мой код на app.js:

 var express = require("express");
var mongoose = require("mongoose");
var bodyParser = require("body-parser");
var app = express();

// Mongoose Config

mongoose.connect("mongodb://localhost/restful_blog_app");
app.set("view engine", "ejs");
app.use(express.static(__dirname   '/public'));

app.use(bodyParser.urlencoded({extended:true}));
        
var blogSchema = new mongoose.Schema({
    
    title:String,
    image:String,
    body:String,
    created:{type: Date, default: Date.now}
});

var Blog = mongoose.model("Blog", blogSchema);

// RESTFUL ROUTES
app.get("/", function(req,res){
    res.redirect("/blogs")
});
app.get("/blogs", function(req,res){
    Blog.find({},function(err,blogs){
        if(err){
            console.log(err);
        } else{
            res.render("index.ejs", {blogs: blogs});
        }
    });
});
app.get("blogs/new", function(req,res){
    res.render("new.ejs");
});
    




app.listen(process.env.PORT || 3000, process.env.IP, function(){
    console.log("Server started!!!");
});

Тот, который включен в header.ejs:

  <!DOCTYPE html>
<html>
    <head>
      <title>Blog App</title>
        <link rel="stylesheet" type="text/css" href="./stylesheets/app.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css" integrity="sha512- AdxWMqfOdtwMuXK482e5OgHYzN06s97n3NTAeAdTlUvlIgCBx3SUKvMculJIedylDfVCaQFdD6HaojI4aeBUA==" crossorigin="anonymous" />
    <script type="text/javascript" rel="https://code.jquery.com/jquery-3.5.1.js"></script>
    </head>
    <body>
        <div class="ui fixed inverted menu">
            <div class="ui container">
                <div class="header item"><i class="paper plane outline icon"></i>Blog Site</div>
                <a href="/" class="item">Home</a>
                <a  class ="item" href="/blogs/new">New Post</a>
            </div>
        </div>

И код в таблице стилей

 i.icon{
    font-size: 2em;
}

.container.main{
    margin-top: 7.0em;
}

body{
    background-color:red;
}

Я также использую semantic UI для стиля

Комментарии:

1. href должно быть href="./stylesheets/app.css" , я предполагаю, что здесь приведена файловая структура, поэтому, если бы вы могли опубликовать свою файловую структуру, можно было бы дать лучший ответ.

2. Можете ли вы добавить больше HTML? Мы не знаем, как выглядит ваша разметка.

3. ОБНОВЛЕНИЕ: это весь мой файл header.ejs

4. Вы получаете сообщение об ошибке в консоли браузера? Например, если отображается ошибка 404, это означает, что путь в href указан неправильно. Другой альтернативой было бы то, что semantic.css перезаписывает ваши новые стили, когда вы загружаете его после вашей таблицы стилей.

5. @VictoriaRuiz нет, я не получаю никакой ошибки, на самом деле, если я посмотрю на inspect / sources, я увижу, что таблица стилей есть, но если я посмотрю на inspect / networks, я увижу, что она не связана

Ответ №1:

Итак, проблема заключалась в порядке ссылок на несколько таблиц стилей.

Первоначальный порядок был:

Это означает, что сначала читается и применяется таблица стилей приложения, а затем применяется таблица стилей для semantic-ui.

Если у чего-то есть стили, примененные в обеих таблицах стилей, последний будет иметь приоритет над первым (при условии, что специфичность селектора одинакова, и не применяется !important.

Вы можете прочитать больше о приоритете здесь:https://css-tricks.com/precedence-css-order-css-matters

Ответ №2:

РЕШАЕМАЯ ПРОБЛЕМА: кажется, проблема заключалась в том, что я поместил ссылку на таблицу стилей перед ссылкой на UI-semantic idk, почему это было бы проблемой, но, по крайней мере, это решило ее.

Кстати, если кто-нибудь знает, почему происходит это взаимодействие, пожалуйста, оставьте объяснение

Ответ №3:

Похоже, ваш путь к файлу css неверен