ブラウザは私のCSSを解釈していません

私はWeb Devを初めて使い、Flaskで構築された最初の完全カスタムサイトに取り組んでいます。私はベースコード構造のためにHTML5 Boilerplateを使用し、Jinjaはマイページをテンプレートにしました。ここではファイル構造は次のとおりです。ブラウザは私のCSSを解釈していません

<!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）で、私はこれらの初期のスタイリング追加しました：：

をここで

. 
├── 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は、次のようになります

私がサーバーを起動してサイトに行ったときを除いて、カスタムスタイリングは影響を及ぼしていないようです。サイトが生の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を解釈していません

答えて

関連する問題