Browser interpretiert meine CSS nicht

Ich bin neu in Web Dev und arbeite an meiner ersten vollständig benutzerdefinierten Website mit Flask gebaut. Ich habe HTML5 Boilerplate für die Basiscode-Struktur und Jinja verwendet, um meine Seiten zu erstellen. Hier ist die Dateistruktur:Browser interpretiert meine CSS nicht

. 
├── app 
│   ├── __init__.py 
│   ├── forms.py 
│   ├── static 
│   │   ├── browserconfig.xml 
│   │   ├── crossdomain.xml 
│   │   ├── css 
│   │   │   ├── main.css 
│   │   │   └── normalize.css 
│   │   ├── img 
│   │   │   ├── apple-touch-icon.png 
│   │   │   ├── favicon.ico 
│   │   │   ├── tile-wide.png 
│   │   │   └── tile.png 
│   │   ├── js 
│   │   │   ├── main.js 
│   │   │   ├── plugins.js 
│   │   │   └── vendor 
│   │   │    ├── jquery-1.12.0.min.js 
│   │   │    └── modernizr-2.8.3.min.js 
│   │   └── robots.txt 
│   ├── templates 
│   │   ├── 404.html 
│   │   ├── about.html 
│   │   ├── base.html 
│   │   └── index.html 
│   └── views.py 
├── config.py 
├── profile.py 
├── run.py 
├── tests.py 
└── tmp 
    └── tmp.log

Hier ist, was base.html wie folgt aussieht:

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 

     <title>{{ title }}</title> 

     <meta name="description" content="{{ description }}"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
     <link rel="/static/img/apple-touch-icon" href="/static/img/apple-touch-icon.png"> 
     <!-- Place favicon.ico in the root directory --> 

     <link rel="stylesheet" href="/static/css/normalize.css" type="text/css"> 
     <link rel="stylesheet" href="/static/css/main.css" type="text/css"> 
     <script src="/static/js/vendor/modernizr-2.8.3.min.js"></script> 
    </head> 
    <body> 
     <!--[if lte IE 9]> 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> 
     <![endif]--> 

     <!-- Add your site or application content here --> 
     <div class="header"> 
      <div class="container"> 
       <ul class="navigation"> 
        <li><a href="/index">Home</a></li> 
        <li><a href="/about">About</a></li> 
       </ul> 
      </div> 
     </div> 

     {% block content %}{% endblock %} 

     <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
     <script>window.jQuery || document.write('<script src="/static/js/vendor/jquery-1.12.0.min.js"><\/script>')</script> 
     <script src="/static/js/plugins.js"></script> 
     <script src="/static/js/main.js"></script> 

     <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. --> 
     <!-- <script> 
      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= 
      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; 
      e=o.createElement(i);r=o.getElementsByTagName(i)[0]; 
      e.src='https://www.google-analytics.com/analytics.js'; 
      r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); 
      ga('create','UA-XXXXX-X','auto');ga('send','pageview'); 
     </script> --> 
    </body> 
</html>

Und im Author's custom styles Abschnitt von main.css (html5 vorformulierten Quelle here) Ich habe diese ersten Stylings hinzugefügt:

Mit Ausnahme, wenn ich den Server starte und auf die Website gehe, scheint keiner der benutzerdefinierten Stile Wirkung zu haben. Ein Teil des CSS funktioniert definitiv, weil die Seite nicht wie Roh-HTML aussieht, aber meine benutzerdefinierten Stile werden nicht interpretiert. Mache ich etwas falsch in der HTML-Vorlage?

Jede Hilfe wird geschätzt.

Vielen Dank!

Quelle

2017-01-07 Marto

CSS RESET wird Ihnen helfen. Das eigentliche Problem, das Sie haben, ist im Webbrowser. Sie ändern die Stilattribute, Schriftarten, Ränder, Auffüllen und viele andere Dinge durch DEFAULT. Um dies zu beheben, können Sie direkt den folgenden Code zu Ihrem Stylesheet anhängen, die nicht so gut funktioniert wie erwartet:

Hinweis: Fügen Sie die CSS-Reset vor Sie Ihren Code setzen.

html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, 
    b, u, i, center, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, 
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary, 
    time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    } 
    /* HTML5 display-role reset for older browsers */ 
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section { 
    display: block; 
    } 
    body { 
    line-height: 1; 
    } 
    ol, ul { 
    list-style: none; 
    } 
    blockquote, q { 
    quotes: none; 
    } 
    blockquote:before, blockquote:after, 
    q:before, q:after { 
    content: ''; 
    content: none; 
    } 
    table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    } 
    /*Your own CSS code*/

Quelle

2017-01-07 14:41:29 Adola

Danke, ich werde es versuchen. Aber sollte das nicht "normalize.css" tun? Wenn nicht, wird das alles dort überschreiben, was die Seite verletzen wird? – Marto

Browser interpretiert meine CSS nicht

Antwort

Verwandte Themen