2016-05-27 2 views
0

私はCSSを使用してのヒントについては、オンラインの記事を読んで、ポインタの一つは:CSS - 作成/使用マスタースタイルシート

マスタースタイルシートを使用してください。 "私が見ている最も一般的な間違いの1つは、初心者や中間者がCSSになるときに犠牲になる デフォルトのブラウザスタイルを削除するのは ではありません。これは、ブラウザ間でのデザインの外観が の不一致につながり、最終的にはデザイナーの多くがブラウザを非難しています。それは コースの間違った責任です。ウェブサイトをコーディングするとき、あなたが何かを行う前に、あなたは スタイリングをリセットする必要があります。」

は誰でもに関してどのようなチュートリアルに私を指す(あるいはここに助ける)ことができるか私ができるセットアップのためのマスターCSSのページを私のマスターCSSページのクラスをWebページのオブジェクトに呼び出す方法についても説明します。例えば

私は、私のマスターCSSページに をいくつかのスタイルを設定した場合、私はクラス=「メイン・ヘッダ・ブルー」へのdivにクラスを設定することができ、それは私のマスターCSSのページからそのスタイルを呼び出して適用されますそれは私のdiv(と私のWebページからこのクラスを呼び出すことができます)

すべての助けやアドバイスをいただきありがとうございます。前もって感謝します。

+0

FWIWでは、デフォルトのブラウザスタイルをダンプしないでください。 CSSリセットはあなたが探しているもので、あらゆる種類の不必要なクラフト(隠れているようなフォーカス状態)が含まれています。ブラウザ間の不一致は正常であり、適合性の高い将来的なウェブの一部です。 – aardrian

答えて

1

は、あなたの答えです。これは、2つのスタイルシートを挿入する場合は、一番上のものが最初に適用された後、第2 1を意味最初のスタイルシート

が上書きされます、つまり:あまりにもスタイルにも適用される

<link rel="stylesheet" type="text/css" href="mystyle.css"> 
<link rel="stylesheet" type="text/css" href="mystyle2.css"> // this one overrides the first 

div { 
    background-color:green; 
} 

div { 
    background-color:red; 
} 
// the background color is red. 

これは、最初のスタイルシートがマスタースタイルシートである可能性があります。それには「マスタースタイル」が含まれ、2つ目は「デフォルトを上書きする」ためのものです。これは、第三者からスタイルシートをインポートする場合に便利です(例:ブートストラップ)。


第2の解釈はSASSです。 SASSでは、他のスタイルシートに適用される変数を含むマスタースタイルシートを作成できます。だから、マスタースタイルシートに、あなたはこれを言う:

$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 

は、その後、あなたがそれらを使用して、あなたの他のスタイルシートに:

body { 
    font: 100% $font-stack; 
    color: $primary-color; 
} 
+0

本当に、私は彼がcss reset(normalize.css/reset.css/etc)を参照していると思います。 – giorgio

+0

ありがとう、これは私が探していたものです!利用可能な場合は受け入れます。 –

3

あなたが探しているものはNormalize.cssだと思います。このアセットを独自のカスタムスタイルの前に追加することで、ドキュメントの余白やパディングなどのブラウザの不一致を取り除くのに役立ちます。

それ以外の場合は、通常と同じようにスタイルを変更してください。あなたに他の質問があれば教えてください!

CSSは、トップダウンの視点からのスタイルを適用している:私は私の解釈を願っています

0

「マスター」スタイルシートを設定する基本的な方法は次のとおりです。

  • Webページ(フォルダ) :

    は、あなたがこのようなフォルダ構造を持っていると仮定しますの

    • CSS(フォルダ)
      • のstyle.css(ファイル)

は、あなたがたindex.htmlという名前のファイルを持っているとしましょう(ファイル)

  • index.htmlをあなたのプロジェクトフォルダのルートにあります。あなたはこのようにindex.htmlの中にスタイルシート(style.cssに)を参照/含める必要があります。

    <!DOCTYPE html> 
    <html lang="en"> 
        <head> 
        <link rel="stylesheet" href="css/style.css"> 
        </head> 
        <body> 
        <div class="mydiv">Your content</div> 
        </body> 
    </html> 
    

    次に、あなたのstyle.cssファイルでこれを持つことができます。

    .mydiv { 
        width: 300px; 
        height: 300px; 
        background-color: red; 
    } 
    

    これが作るだろう<body>内の<div>は、widthおよびheightが300ピクセル、background-colorが赤であるとします。そして、あなたは<div>クラスmydivを与えることによって、このスタイルをウェブページのどこにでも呼び出すことができます。

    それは単に置くだけです。

  • 関連する問題