Web基礎エピソード2:CSS入門

11581 ワード
webdev css html テキストリンク

導入
このシリーズでは、Web基礎トピックを議論しようとします.最初のエピソードでは、覆われていた.このエピソードでは、私は基本的なCSSの概念をカバーしようとします.

目次
  • What is CSS?
  • CSS Example

  • CSS Selectors
  • CSS Selectors Examples
  • Ways of adding CSS to our HTML file
  • CSS Box Model

  • CSS display property
  • inline
  • inline-block
  • block
  • CSS Position Property

  • CSS Structural Classes
  • Some Structural class examples
  • CSS Specificity
  • CSS Media Query
  • Conclusion
  • References

    • CSSとは
    CSS(Catalading Style Sheets)は、色、レイアウト、フォントを含むWebページのプレゼンテーションを記述するための言語です.これは、1つのデバイスを、大画面、小さな画面、またはプリンタなどのさまざまな種類にプレゼンテーションを適応させることができます.CSSはHTMLから独立しており、XMLベースのマークアップ言語で使用することができます.CSSからHTMLを分離することで、サイトを共有し、スタイルシートをページ間で共有したり、テーラーページを異なる環境に簡単に保つことができます.また、CSSは、複数のWebページのレイアウトを一度に制御できるようにすることによって、多くの仕事を保存します.

    CSSの例
    これはCSSファイルの例です.
    body  {  
background-color:  lightblue;
font-family:  verdana;  
font-size:  20px;  
}  

h1  {  
color:  white;  
text-align:  center;  
}
    この例では、backgound-color のbody 青をつけるfont-family 20 pxのVerdanaのfont-size . 今のところh1 ヘッダーを定義するcolor (テキストの色)白でテキストを中央揃えにするtext-align .

    CSSセレクタ
    CSSセレクタは、我々がスタイルにしたがっているHTML要素を選ぶのを助けます.
    CSSセレクタを5つのカテゴリーに分けることができます.
  • 単純なセレクタ:名前、ID、クラスに基づいて要素を選択します
  • Combinatorセレクタ:それらの間の特定の関係に基づく要素を選択してください
  • 擬似クラスセレクタ:ある状態に基づいて要素を選択する
  • 擬似要素セレクタ:要素の一部を選択し、スタイルを作成する
  • 属性セレクタ:属性または属性値に基づいて要素を選択する

    • CSSセレクタの例

  • CSS要素セレクタ
    • p {  
text-align:  center;  
color:  red;  
}
    ヒアオール<p> (段落)要素はスタイルです.

  • CSS IDセレクタ
    • #section-intro {  
text-align:  center;  
color:  red;  
}
    ここでIDセクションを持つHTML要素がスタイル化されます.

  • CSSクラスセレクタ
    • .center {  
text-align:  center;  
color:  red;  
}
    ここでは、クラス名センターを持つすべてのHTML要素がスタイル化されます.
  • CSSユニバーサルセレクター
    • ページ上のすべてのHTML要素を普遍的に選択するには、次のコードを使用します.
    * {  
text-align:  center;  
color:  blue;  
}

    HTMLファイルにCSSを追加する方法
    スタイルシートを挿入するには3つの方法があります.
  • 外部CSS
  • 内部のCSS
  • インラインCSS

    • ボックスモデル
    CSSボックスモデルは、すべてのHTML要素をラップするボックスです.これは、マージン、ボーダー、パディング、および実際のコンテンツで構成されます.以下のイメージはボックスモデルです.


    CSSdisplay プロパティ
    The display property 1 i要素の表示動作を指定.
    使用法:
    .class-name{
display: block;
}
    inlineインライン要素として要素を表示します.どんな高さと幅特性もそれに影響を及ぼしません.さらに、インライン要素は同じ行にとどまらざるを得ません.ここにデフォルトを持ついくつかの要素がありますinline プロパティー
  • span
  • a
  • img
    • inline-blockインラインレベルのブロックコンテナとして要素を表示します.高さと幅の値を設定できます.それは本質的に同じことですinline , 高さと幅の値を設定できます.
    block元素block 新しいラインで起動し、利用可能なフル幅を取る.つまり、ブロック要素は親要素の幅を占有します.
    ここにデフォルトを持ついくつかの要素がありますblock プロパティー
  • div
  • h1
  • p
  • li
  • section

    • CSSの位置プロパティ
    The position property 1 i要素に使用する位置決め方法の型を指定する.例えば、static , relative and absolute
  • position: static;
  • HTML要素はデフォルトで静的に配置されます.
  • 静的配置要素は、上部、下部、左、および右のプロパティの影響を受けません.
  • ある要素position: static; は特別な方法では配置されませんページの通常の流れに従って常に配置されます.
  • position: relative;
  • ある要素position: relative; は通常の位置に比例して配置される.
  • 相対的に配置された要素の上部、右、下部、および左のプロパティを設定すると、通常の位置から離れて調整されます.
  • 他のコンテンツは、要素によって残っている任意のギャップに収まるように調整されません.
  • position: absolute;
  • ある要素position: absolute; は、最寄りの位置にある祖先に相対的に配置される.
  • 絶対位置の要素が位置する先祖を持っていない場合、それはドキュメント本体を使用し、ページのスクロールとともに移動します.
  • 絶対位置の要素は、通常の流れから削除され、要素を重ねることができます.

    • CSSクラス
    構造擬似クラスは、親要素の階層内に存在する子要素へのアクセスを許可します.最初の子要素、最後の子要素、親要素の階層内に存在する代替要素を選択できます.

    構造クラスの例
    例
    選択する:first-child親の最初の子:last-child親の最後の子:nth-child(2n+1)あらゆる奇数児:nth-child(2n)あらゆる偶数の子供:nth-last-child(2n+1)最後の要素から始まるすべての奇数要素

    CSS特異性
    時々、CSSは闘争を支配します.たとえば、複数のセレクタがドキュメント内の同じ要素を対象とする場合、適用する規則はCSS固有性によって決まります.CSSでは、異なるセレクタに重みがあります.つ以上の規則が同じ要素に衝突するとき、より特定のものが適用されます.
    これらは、異なるセレクタの特定の優先順位です
  • インラインCSSは、HTMLの要素の開始タグのスタイル属性として表示されます.このCSSはHTMLに最も近いので、特異性が最も高い.
  • idセレクタ:ページ要素に特有のID、したがって非常に特異的です.
  • クラスセレクタ、属性セレクタ、および擬似クラスセレクタ:これらの3つのセレクタ型は、等しい特異性を持ちます.すべての3つのタイプが同じHTML要素に適用されるならば、スタイルシートで最新に現れているものは適用されて、残りを上書きします.
  • タイプセレクタ:指定されたノード名を持つ構文要素を持つすべてのHTML要素を選択します.これらは要素名と擬似要素です.

    • メディアクエリ
    メディアクエリは非常にデバイスのすべてのタイプで動作する応答のWebデザインを作成するのに非常に便利です.これは@media 特定の条件がtrueの場合にのみCSSプロパティのブロックを含める規則.
    @media only screen and (max-width: 600px) {  
body {  
background-color: lightblue;  
}  
}
    上の例では、ブラウザウィンドウがbackground-color ライトブルーに.
    一方、Webページを開発し、それは他の画面サイズの前に最初にモバイル版を作成することをお勧めします.

    結論
    CSSトピックの紹介を終わります.

    参考文献
    CSS Basics w3schools
    Box Model
    CSS display property
    Structural Classes
    CSS Specificity
    技術スラグの証明の道
    javascript - async, await