CSSファイルをページに適切に含める方法

今日、私はGoogle PageSpeed Insightsを使用して自分のサイトをチェックしようとしましたが、その推奨事項は：「レンダリングをブロックしないようにする」CSSページの上部にのCSS（例：<ヘッド>タグ）を含めると、ページの後半に他のコンテンツのスタイルが含まれることがわかります。この勧告のためのドキュメントでは、この構成例だった：CSSファイルをページに適切に含める方法

<html> 
    <head> 
    <style> 
     .blue{color:blue;} 
    </style> 
    </head> 
    <body> 
    <div class="blue"> 
     Hello, world! 
    </div> 
    </body> 
</html> 
<link rel="stylesheet" href="small.css">

しかし、問題は、HTML W3バリデータは（「ストレイ開始タグリンク」）をスローし、エラーということで、私は内部の<リンク>を含めるようにしようとしているときと同じです<本体>タグ。だから問題は：ページにCSSを含めるための良い方法は何ですか（推奨されている構造を使用するのが普通ですか、いいえ）。

出典

2017-01-25 bashkovpd

https://varvy.com/pagespeed/ それはあなたがそれを把握するのに役立ちます、このサイトを使用します –

CSSを頭に入れ、できるならばCSSを組み合わせ、それに応じてCSSファイルにラベルを付けます（media = "print"など）。 https://varvy.com/pagespeed/render-blocking-css.htmlこれは、できることをもっと詳しく説明していますが、たとえば、インライン展開するCSSをキャッシュできないため、ページが再びリクエストされた場合にはページが遅くなることに注意してください。

このページに記載されていないもう1つのことは、javascriptを使って動的にCSSを挿入することです：リンク要素を作成し、dom-readyの頭に挿入します。

出典

2017-01-25 07:42:31 cloned

CSS（カスケードスタイルシート）、内部スタイルシート、外部スタイルシートまたはインラインの3つのオプションがあります。あなたが使用しようとしているものは、内部スタイルシートです。外部では、CSSを外部の.cssファイルに書き、HTMLコードで参照します。

<style> 
body { 
    background-color: lightblue; 
} 
</style>

あなたは、例えば、あなたがCSSで強化したいものは何でもして体を置き換えることができます、あなたは、青にする必要があるものを

などを指定していないあなたのコードで

h1、head、divなど

外部スタイルシートの場合は、同じように別のファイルに作成してリンクします。

<head> 
<link rel="stylesheet" type="text/css" href="small.css"> 
</head>

インラインが（名前が示唆するように）、特定の行自体で行われます。これは、単一の要素だけをスタイルする場合に便利です。例えば

<h1 style="color:green;margin-left:15px;">Hello World!</h1>

私が死んで、http://www.w3schools.com/css/を見てお勧め役に立つ

出典

2017-01-25 07:43:14 stackman

CSSファイルをページに適切に含める方法

答えて

関連する問題