浏览器不解释我的 CSS答案

【问题标题】：Browser not interpreting my CSS浏览器不解释我的 CSS
【发布时间】：2017-01-07 14:34:19
【问题描述】：

我是 Web 开发新手，正在开发我的第一个使用 Flask 构建的完全自定义网站。我使用HTML5 Boilerplate 作为基本代码结构，使用Jinja 对我的页面进行模板化。这是文件结构：

.
├── 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（html5 样板源代码here）的Author's custom styles 部分中，我添加了这些初始样式：

* {
    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;
}

除了当我启动服务器并访问该站点时，自定义样式似乎都没有生效。 css 的某些部分肯定可以正常工作，因为该站点看起来不像原始 html，但我的自定义样式没有被解释。我在 html 模板中做错了吗？

感谢任何帮助。

谢谢！

【问题讨论】：

标签： python css html flask jinja2

【解决方案1】：

CSS RESET 会帮助你。您遇到的实际问题出在网络浏览器中。它们通过 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*/

【讨论】：

谢谢，我会试一试。虽然这不是normalize.css 应该做的吗？如果没有，这会覆盖那里会损害网站的任何内容吗？