CSSから

始めましょう.

定義

CSSは、Webページのコンテンツの外観を変更するために使用されるスタイリング言語ですので、Webページのコンテンツのプレゼンテーションやデザインを変更することができます、私たちは私たちの創造性を表現し、それを達成する方法で自由を与えることができます.

構文

CSSの構文は簡単で分かりやすい

selector {
   property1: value;
   property2: value;
}

最初の部分はセレクタです-私たちはHTMLの要素を選択しています-次に、私たちは開始と終了のブラケットを持っている必要があります-私たちは選択されたHTML要素に適用されるスタイルを定義します-ここでは、セレクタに一致するHTML要素のための色、フォントサイズのような私たちのためにそれらのスタイルを操作するプロパティ値のペアを提供します.例:

h3 {
  color: blue;
}

セレクタ

多くのタイプのセレクタがありますが、最も一般的に使われるのは、要素、クラス、IDセレクタです.
元素

html element {
  property: value;
}

HTML要素をセレクタとして使用できます.<h3> Title </h3>

h3 {
  color: blue;
}

これは、Webページ内のすべてのH 3要素を選択します.
クラス

.classname {
  property: value;
}

クラスセレクタは最も一般的に使用され、汎用性の高いもので、クラス属性によってHTML要素を選択できます.<h1 class="big-header"> Title </h1>

.big-header {
  color: purple;
}

この期間はCSSに次のようなものがあるのはクラス名で、HTML要素名ではないことを伝えます.再利用可能なコンポーネントを作成する最も簡単な方法を提供します
あなたのサイトが基本的なスタイルを共有するが、背景色のような何かユニークなものを持っている3種類のボタンがあるならば、あなたは基本的な一般的なスタイリングで3つの異なるクラスのために1つのクラスを持つことができます.<button class="btn btn-1"> Button 1 </button><button class="btn btn-2"> Button 2 </button><button class="btn btn-3"> Button 3 </button>

.btn {
    padding: 10px;
    color: white;
}
.btn-1 {
    background-color: blue;
}
.btn-2 {
    background-color: purple;
}
.btn-3 {
    background-color: red;
}

私たちはユニークなスタイルのために3を作成しました、そして、一般的なスタイルのための1とHTML要素のクラス属性で、我々はクラス名を含んで、スペースによって彼らを切り離さなければなりません.
ID

#element-ID {
  property: value;
}

別の一般的に使用されるセレクタはID 1です.HTML要素の属性id属性を使用して選択する必要もあります.ここでの違いは、1つの要素だけを持つことができ、HTMLページを通して一意である必要があります.<h1 id="main-header"> Title </h1>

#main-header {
      color: white;
}

このセレクタでは、単純に、クラス名の前に使用された期間と同じように、パウンド記号を使用しなければなりません.
クラスセレクタが最も一般的に使用されている理由を見ることができます.上記のボタンの例を見てください.

結合セレクタ

.selector-1.selector-2 {
          property1:value;
          property2:value;
}

また、複数のセレクタを組み合わせてHTML要素を定義することもできます.使用しているすべてのセレクタ名をスペースなしで指定するだけです.例えば、<h1 class="large-header">Title </h1>

h1.large-header {
         font-size: 200%;
}

<h2 id="big-blue" class="large-blue"> Title </h2>

#big-blue.large-blue {
         font-size: 200%;
}

また、使用するメソッドとセレクタを組み合わせることができます
HTMLページ内の祖先要素の関係.

.ancestor .child {
         property: value;
}

ここでは、祖先と子セレクタの間にコンマを使用しなければなりません.例えば、

 <div>
   <p> Selection </p>
   <p> Selection </p>
   <p> Selection </p>
   <span>
      <p> Selection </p>
   </span>
 </div>

div p {
    color: red;
}

これはdiv要素内のすべてのp要素を選択します.
セレクタを結合する別の方法は、コンマを使用して、同じ方法でスタイルを定義する要素を定義します.

.big {
    font-size: 200%;
    color: purple;
}
.large {
    font-size: 200%;
    color: purple;
}

.big, .large {
    font-size: 200%;
    color: purple;
}

今日はみんなだ.
ありがとう!

CSSから始めて、別のインストールで復帰します.