css詳細（インターンシップ初日）_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:51:15

オリジナル

1181 人が閲覧しました

1. CSS ファイルを head タグに導入します

2. 構文:

注: ラベルの for 属性の値は、関連するコントロールの id 属性の値と同じである必要があります。

チェックボックスでの複数選択とラジオでの単一選択。

3. CSS スタイルの優先順位: インライン>埋め込み>外部

インライン: 超クールなインターネット

埋め込み : scan{ color:red; }

外部型:

4. CSS のクラスセレクター構文:

.クラスセレクター名{CSS スタイルコード;}

テキスト

ID セレクターの構文:

#setGreen{ color:green }

< ;span id="setGreen">パブリッククラス

注: ID セレクターはドキュメント内で 1 回のみ使用でき、クラスセレクターは複数回使用できます。クラスセレクターの単語リストメソッドを使用すると、要素に複数のスタイルを同時に設定できますが、ID セレクターでは設定できません。例:

.stress{

color:red;

}

.bigsize{

font-size:25px;

}

到着 3 年生次の学期、私たちのクラスは公開授業を行いました...

5 さらに便利なセレクターサブセレクター、つまり大なり記号 (>) もあります。 ) 、指定されたラベル要素の最初の世代の子要素を選択するために使用されます。たとえば、右側のコードエディターのコード: .food>li{border:1px Solid red;}

このコード行は、下位要素 li (果物と野菜) に赤い実線の境界線を追加します。クラス名は食べ物。

6. 指定されたラベル要素の下にある子孫要素を選択するために使用されるセレクター、つまりスペースの追加が含まれます。たとえば、右側のコードエディターのコード: .first span{color:red;}

このコード行は、テキストの最初の段落にある「マウスのように臆病」のフォントの色を赤に変更します。

このセレクターと子セレクターの違いに注意してください。子セレクターは、その直接の子孫のみを参照します。または、子要素に作用する最初の世代の子孫として理解することもできます。子孫セレクターは、すべての子子孫要素に作用します。子孫セレクターはスペースで選択し、子セレクターは「>」で選択します。

概要: > 要素の最初の世代の子孫に作用し、スペースは要素のすべての子孫に作用します。

7. 疑似クラスセレクター

さらに興味深いのは、疑似クラスセレクターと呼ばれる理由です。これにより、HTML に存在しないタグのスタイルを設定できるようになります。たとえば、HTML でマウスがラベル要素上に移動したときにフォントの色を設定します:

a:hover{color:red;}

上記のコード行は、マウスが移動したときにフォントの色を赤に設定します。ラベルをロールオーバーします。これにより、テキストの最初の段落のテキストに「マウスのように臆病」な特殊効果が追加され、マウスをロールオーバーするとフォントの色が赤に変わります。

疑似セレクターについて:

疑似クラスセレクターに関して、これまでのところ、すべてのブラウザーと互換性のある「疑似クラスセレクター」は、 a タグ: hover で使用される「疑似クラスセレクター」です (実際には、特に CSS3 には多くの疑似クラスセレクターがありますが、すべてのブラウザと互換性があるわけではないため、このチュートリアルでは最も一般的に使用されるセレクターについてのみ説明します)。実際、:hover は p:hover などの任意のタグに配置できますが、互換性も非常に悪いため、現在では a:hover の組み合わせがよく使用されます。

8. Web ページのコードを作成するとき、特定のスタイルに最高の重みを設定する必要がある特殊な状況がいくつかあります。現時点では、! important を使用してそれを解決できます。

次のコード:

p{color:red! important;}

p{color:green;}

3年生のとき、私はまだ

この時、p段落内の文字が赤色で表示されます。注: ! important はセミコロンの前に記述する必要があります。

9. 中国語のテキストでは、段落の前に 2 つのスペースを残すのが通例です。この特別なスタイルは、次のコードで実装できます:

p{text-indent:2em;}

1922 年の春有名になりたい作家ニック・キャラウェイ（トビー・マグワイア）は、アメリカ中西部を離れ、ニューヨークにやって来ました。それは道徳心が薄れ、ジャズが人気を博し、密輸が王道となり、株価が高騰していた時代でした。アメリカンドリームを追求するために、彼はニューヨーク近くの湾に引っ越しました。

注: 2em はテキストのサイズの 2 倍を意味します。

段落のレイアウト -- 行間隔 (行の高さ) p{line-height:2em;}

10. 要素の分類 -- ブロックレベルの要素