2016-11-13 5 views
0

私はindex.htmlページとstyle.cssファイルを持っています。どこのCSSを.htmlページに入れる必要がありますか?

私は.sliderというスタイルクラスと.logoというスタイルクラスを持っています。 style.cssページ内に.slider.logoの両方を入れるか、.sliderをindex.htmlに、.logoを.cssに入れますか?

私はスタイルをグローバルstyle.css内の1ページにのみ関連付ける必要があるかどうかを知っていないので、これを尋ねています。または、それを適用するページにインラインで配置する必要がありますか?

答えて

1

いずれにしても、違いはありません。個人的には、私はすべてのCSSを1か所に収めたいと思っていますが、あなたは何でもできます。 1つのドキュメントにすべてのCSSを置いた場合は、コメントを使用してグループに分けて、すべてを簡単に見つけることができます。

2

通常、ページ固有のCSSが埋め込まれています。ここで私は自分のCSSを行う方法です。

グローバルCSS(別々のファイル(複数可)):

<link type="text/css" rel="stylesheet" href="css/style.css" media="all" /> 

注:私たちはプラグイン/テーマとこれらのプラグインのトンを使用して、今日のウェブの世界では/themesは新しいバージョンを展開する傾向があるので、これらのプラグイン/テーマを上書きするときは、そのテーマに固有のCSSファイルを作成してください。例えば

ブートストラップ3.1

<link href="/css/bootstrap.3.1.css" rel="stylesheet" type="text/css"> 

それが出て来るときあなたは最新バージョンを使用できるように、すべてのブートストラップ・オーバーライドのためにこれを作成します。

<link href="/css/bootstrap.overrides.css" rel="stylesheet" type="text/css"> 

ページ固有のCSS(埋め込み):

<head> 
<!-- last element in head //--> 
<style type="text/css"> 
     .pageSpecific 
     { 
     color: red; 
     } 

    </style> 
</head> 

私は、開発段階で午前またはhtml要素は、CSSの分類を必要としないとき。

シンプルなスタイルのフォーマット(インライン):

<th style="min-width: 65px;">Column Header</th> 

あなたにもプリント特定のCSSを持っていることがあります。

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

と、このファイル内のようなあなたのCSSをラップ:

@media print{ 
<!-- print specific css here//--> 
} 

CSSの分類は後で、ページ固有のように見えるかもしれません。再利用性のために常にコーディングしてください!最後に

は:

私は生産に私のファイル(複数可)を入れcss minifierを使用したいです。私はUglyJsを使ってjavascriptファイルと同じことをします。あなたが使うことができるLESS CSSもありますが、今のところ私はこれらの単純な慣習に似ています。

+0

なぜ 'media = all'を使用していますか?これにはまったく理由がありません。あなたのCSSは、なぜ軽いリーダーに送られる必要がありますか?または印刷する?なぜ 'media = screen、tv、projection'を使うのではなく、見ることができるCSSにとって本当に便利なのでしょうか? (はい、私は 'tv'と' projection'がバリデーションエラーを返すことを知っています - バリデーションがキオスクモード、フライングLCD、そして "スクリーン"に従わない他のスクリーンのことを忘れているようだから) 。 – junkfoodjunkie

+0

'@media screen'の代わりにこれを使用する場合のペナルティは何ですか?私は自分のcssを自分のプリントCSSに持ち帰り、必要に応じて '@media print'ルールでオーバーライドします。私は 'screen、print'を置くことができると思いますが、もう一度、ペナルティは何ですか? – yardpenalty

+0

ペナルティはありませんが、通常、画面に使用されるCSSの多くは印刷物には含まれていません。通常は、完全に別のprint.cssが使用されます。これは、通常のWebページには何も印刷されていないコンテンツ(ページをカバーする背景画像など)がたくさんあるためです。書式設定は、画面や印刷ページ、その他の項目を非表示にしたり、強調したりする場合にはあまり効果的ではありません。それは当然問題のサイトに少し依存しますが、ほとんどの場合、スクリーンCSSは印刷で役に立たず、その逆もあります。 – junkfoodjunkie

2

スタイルは3か所のいずれかになります。 htmlページ

  • で要素自体
    1. インライン別のファイルに

    私はあなたのhtmlの<head><style>タグにそれを置くか、またはそれを置くのいずれかを示唆しています別のファイルで、どちらかと同じように動作します。明らかに別のファイルにスタイルを持つことは、必要に応じて別のページでそれらのスタイルを再利用できることを意味します。

  • -2

    インラインまたはオンページのCSSは絶対に使用しないでください。スタイルシートにすべてが入っているはずです(そのうちの1つはメディアタイプごとに1つだけにしてください) - なぜですか?スタイルシートはキャッシュされているため、キャッシュはHTMLファイル(キャッシュされている可能性もありますが、動的コンテンツの場合はCSSよりも頻繁に読み込まれることがあります)よりも優れています。

    第2に、すべてが1つのファイル内にあるわけではないにしても、更新して変更するのは悪夢です。

    +2

    該当しません。場合によっては、同じプロジェクトのcssファイルを区切ることがあります。あなたがブートストラップのようなテーマを持ってきている間は、すべての上書きを1つのCSSファイルに入れたいと思うことは言うまでもありません。ブラウザのデベロッパーツールで、スタイルの書式がどこから来ているのかを簡単に確認できます。インライン私はそれに同意できますが、埋め込まれたCSSは同意できません。埋め込まれたCSSには何も問題はありません。私はコストが最小であっても、それが決して使用されないことをcssを通してすべての単一ページの読み込み暗号化を望んでいません。 – yardpenalty

    +0

    まず、ブートストラップのようなものは絶対に使わないでください。それは純粋で完全なゴミであり、HTMLとCSSの両方があまりにも多くのコードでオーバーロードされます。第2に、すべてのCSSを1つのファイルに追加するコストは最小であり、それらを分離することは実際にはありません。サイト全体のCSSファイルは最大50KBでなければなりません。また、SCSS/SASSまたはLESSを使用して、開発中にすべてを分離し、レンダリング後にコンカチネーションした場合、シンプルです。 – junkfoodjunkie

    +1

    もしあなたがブートストラップを使用しないなら、どのように反応するのですか?私はブートストラップに多額の綿毛がありますが、私のページの読み込み時間はそれを使用することで苦しんでいないことに同意します。私は私の店のためのカスタムスタイリングを書く時間がなく、私はしたいと思いません。あなたがどのように応答性を扱うかについてはちょっと好奇心旺盛です。 – yardpenalty

    関連する問題