CSSの概念と原則
CSSとは何ですか
また、文字列形式のリストとして知られている：（カスケーディング・スタイル・シート、略しCSS英語）、HTMLやXMLドキュメントアプリケーションとしてカスケーディングスタイルシート、カスケーディング・スタイル・シート、カスケーディング・スタイル・シート、構造化文書のための方法（カスケーディング・スタイル・シート））など、W3Cやメンテナンスによって定義されたコンピュータ言語を、スタイル（フォント、色、間隔を追加します。最新バージョンはW3C勧告として、CSS2.1です。CSS3は現在、最新のブラウザでサポートされている、とCSS4の次のバージョンはまだ開発が進められています。
CSSは、HTML、またはXMLなどの装飾のために、HTMLやXMLと連携して動作しなければならない、単独で使用することはできません。本論文では、装飾HTMLページに使用する CSS技術。どのCSSこれらの要素を示すために、どのような外観（サイズ、重量、色、配置及び場所）に決定し、そこにどのようなHTMLページを決定する責任があります。CSSスタイルのページ要素を、ページレイアウトを設定する設定するために使用することができ、設定はグローバルスタイルのすべてのページに適用されます。CSSを適用するスタイルの要素を追加するページに直接散布することができ、また、中央集中型のWebページ、リンクスタイルのウェブページの導入だけでなく、リードインタイプの導入に組み込むことができます。
CSSの作品
ブラウザが文書を表示すると、そのスタイル情報と、文書の内容を結合する必要があります。二つの段階では：
1.ブラウザがHTMLやCSS、DOM（ドキュメントオブジェクトモデル）に変換され、DOM文書は、文書の内容とそのスタイルを兼ね備えた、コンピュータメモリに表し
2.ブラウザは、DOMの内容を表示します。
動作します：
使用CSS
- 外部スタイルシート：ヘッド部を加えたリンクHTMLファイルでは、リンクのCSSスタイルを追加し、より多くの使用 ;
- 内部スタイルシート：スタイル要素に配置されました。
- インラインスタイル：CSSの宣言は、一つだけの要素に影響を与えます。
CSSボックスモデル
ボックスモデルは何である（ボックスモデル））
ボックスモデルは、CSSを学習する前に、我々は最初のボックスモデルが何であるかを説明し、そのため、CSSの変更の概念を理解する上で大きな助けの概念や原理を理解するために：
すべてのHTML要素はCSSでボックスとして考えることができる、「ボックスモデル「この用語は、箱のデザインやレイアウトに使用され、HTMLのCSSボックスモデルの性質上の要素であって、周囲のパッケージ：マージン、ボーダー、パディング、および実際のコンテンツは、カートリッジモデルは、米国および他の要素を可能に要素のバウンディングボックスとの間のスペースは、要素の周囲に配置します。
例のボックスモデル
Googleのブラウザに、例えば、開くために私のブログを示すように、ページを右クリックし、画面の下部を残すためのオプション右下の「スタイル」の「チェック」をクリックして、あなたは、CSSボックスモデルを見ることができます。
以下はパラメータであり、いくつかの説明：
- 余白（マージン） - それは外部から透明であり、フレームの領域外をクリア。
- ボーダー（国境） - 内側と外側の余白コンテンツの境界線の周り。
- パディング（パディング） - コンテンツの周りの明確な領域は、パディングは透明です。
- コンテンツ（コンテンツ、即ち、画像の自動×自動） - ボックスの内容、テキストや画像を表示します。
セレクタ
どのような選択肢があります
CSSセレクタは、最初のCSSルールの一部です。これは、ルールの属性値がCSSに適用されるHTML要素を選択する必要があり、ブラウザを伝えるために、要素と他の項目の組み合わせです。要素が呼び出されるように、セレクタの選択された「選択オブジェクト」。
示されるように、数字「H1」と「P」は「色、背景色」プロパティの要素を定義する単純なセレクタです。
タイプセレクタ
- 単純セレクタ（単純セレクタ）* SSES）：整合状態における1つ以上の要素が決定され、そのようなマウスポインタ要素をホバリング、またはによって、現在選択され、またはチェックボックスを選択し、又は要素がDOMツリーではありません親ノードの最初の子ノード。
- 擬似要素（擬似要素）：例えば、各セグメント、またはコンテンツの前に生成された要素の最初のワードの位置を決定することに関連する1つの以上の要素に一致します。
- コンバイナ（コンビネータ）：ここだけではなく、選択自体、ならびににおける効率的な方法のための2つ以上の選択肢の組み合わせを選択する非常に特定方法。たとえば、あなたが唯一のdivを選択するか、または直接の段落の見出しの後ろにできる直接の子ノードをパラグラフ。
- マルチセレクタ（複数のセレクタ）：これらは別々の選択ではない。このアイデアはカンマで区切られた以下セレクタCSSルールの複数であり、これらからセレクタによって選択されたステートメントのセットに適用されますすべての要素。
より多くの知識は、関連するデバイスを選択するためには、両方のサイトすることができセレクタはじめに1、はじめにセレクタ2
CSSスタイルコレクションのプレゼンテーション
カラー
CSSの色はRGBカラー値（RGB）進数（16進数）表記法の組み合わせを使用して定義され、配置された光源の最小値は0（16進数00）、最大値は255である（Xとすることができます進FF）。
- 16進数の色
3つの二重桁とは書かれており、＃1 0000FF値は青色で表示されているような、＃記号で始まります - RGBの色の
RGB（赤、緑、青） 。各パラメータ（0％〜100％）色強度が0と255の間の整数、またはパーセント値であってもよい定義（赤、緑、青）、RGB（0,0,255）とRGB（0 ％、0％、100％） - RGBA色は
、オブジェクトの不透明度パラメータアルファは0.0（完全に透明）から1.0（完全に不透明）ディジタルRGBA（255,0,0,0.5）にある指定-アルファチャンネルと、RGBカラー値が拡張され; - HSL色
HSLは、色相（色合い）、彩度（飽和）、明度（輝度）をいう-円筒座標（色相、彩度、明度）色表記HSLを表す色相がカラーホイールの度合い（0から360まで）であります- 0（または360）240は青色であり、120は緑色で、赤色です。
0％は灰色意味し、フルカラーの100％;飽和は、パーセント値です。明度が同じ割合で、0％は、黒、白100％の例である：HSL（120,65％、75％ ）。 - HSLAカラー
マルチHSLのアルファチャンネルよりも-それは、オブジェクトの不透明度HSLA（色相、彩度、明度、指定アルファ）、 例：HSLA（120,65％、75％ 、0.3）。
国境（ボーダー）
私たちは、共有するためにここにいるウェブサイトをデバッグする良いあなたは彼または彼女が望んでいる。このウェブサイトのスタイルにデバッグすることができ、その後、彼自身のコードを追加し、ここで私が使用する方法をご紹介しています：
缶誰もがこのサイト：対応するセクション（青色で示されたモジュール）を選択し
、次のインタフェースが表示されることがあり入力するクリック：
あなたが望むスタイルをデバッグすることができます（赤枠の部分に示すように）左側に、そして「これを使用する」をクリックします（赤い矢印の部分）、選択されたコードを生成するために使用することができます。
デバッグのフレーム部分ボーダー、ボックスシャドウ二つの部分の。
背景（バックグラウンド）
デバッグが背景である背景、グラデーション二つの部分。
テキスト（テキスト）
テキストデバッグフォント、テキストの影二つの部分では。
操作の写真
参照ページ操作の絵
ページレイアウト
レイアウトのより多くの知識として、著者は、著者自身の物語のレベルに限定されるものではなく、ここでいくつかのリンクを共有するために、あなたは学ぶために、対応するWebサイトにアクセスすることができます。
- 位置
参照サイト：通常のレイアウト - フロート
参考サイト：フローティングレイアウト - フレキシボックスの
特徴：
- メイクレイアウトが柔軟かつ直感的になります。
- 容器は均等にその要素を配分する方法を決定 - サブ要素と他との間の間隔の大きさを含みます。
- サブエレメントは自動的に別の画面内の任意の優れた表示装置を充填するためには利用可能な表示スペースのサイズ、高さと幅を調整します。
- アプリケーションコンポーネントと少量のレイアウトに適し。
- フレックス項目（フレックスアイテム）主軸に沿って左から右へ。
参考サイト：弾性ボックスレイアウト
4.グリッド
機能：
- 強力な、柔軟な、シンプル
- 分離の構造と性能
- ターゲットレイアウトの大きな割合を
参考ウェブサイト：グリッドレイアウト