瀏覽器不解釋我的CSS

我是web dev的新手，並且正在使用Flask構建的第一個完全自定義網站上工作。我使用HTML5 Boilerplate作爲基本代碼結構，Jinja作爲我的頁面模板。這裏是文件結構：瀏覽器不解釋我的CSS

. 
├── 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

這裏是base.html樣子：

<!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>

而且在main.css的Author's custom styles部分（HTML5樣板源here）我已經添加了這些最初的兩種風格：

* { 
    font-family: 'Roboto', sans-serif; 
} 

.navigation { 
    list-style-type: none; 
    margin: 0; 
    padding: 20px 0; 
} 

.navigation li { 
    display: inline; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 400; 
    font-size: 12px; 
    margin-right: 25px; 
    text-transform: uppercase; 
}

除了當我啓動服務器並轉到網站時，自定義樣式似乎沒有影響。由於該網站看起來不像原始html，但是我的自定義樣式不被解釋，所以css的某些部分肯定有效。我在HTML模板中做錯了什麼？

任何幫助表示讚賞。

謝謝！

來源

2017-01-07 Marto

CSS RESET會幫助你。您的實際問題是在Web瀏覽器中。他們通過DEFAULT改變了風格屬性，字體，邊距，填充和其他許多東西。爲了解決這個問題，你可以直接添加以下代碼到你的樣式表，它不能正常工作，以及你期望：

注：追加CSS重置你把你的代碼之前。

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*/

來源

2017-01-07 14:41:29 Adola

謝謝我會試試這個。雖然這不是'normalize.css'應該做的嗎？如果沒有，這會覆蓋那些會傷害網站的東西嗎？ – Marto

瀏覽器不解釋我的CSS

回答

相關問題