Браузер не интерпретирует мой CSS

Я новичок в веб-разработчике и работаю над своим первым полностью настраиваемым сайтом, созданным с помощью 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>

И в Author's custom styles разделе main.css (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; 
}

За исключением случаев, когда я запускаю сервер и перехожу на сайт, ни один из пользовательских стилей, кажется, не влияет. Некоторая часть css определенно работает, потому что сайт не выглядит как raw html, но мои пользовательские стили не интерпретируются. Я делаю что-то неправильно в html-шаблоне?

Любая помощь приветствуется.

Спасибо!

источник

2017-01-07 Marto

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

источник

2017-01-07 14:41:29 Adola

Спасибо. Я попробую. Хотя это не значит, что должен делать 'normalize.css'? Если нет, заменит ли это что-нибудь там, что повредит сайту? – Marto

ответ

Смежные вопросы