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

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. 要素の分類 -- ブロックレベルの要素

ブロックレベル要素とは何ですか? HTML では、

、

、

、

、

および
• はブロックレベルの要素です。 display:block を設定すると、要素がブロック レベルの要素として表示されます。次のコードは、インライン要素 a をブロック要素に変換し、a 要素がブロック要素の特性を持つようにします。

  a{display:block;}

  ブロックレベル要素の特徴:

  1. 各ブロックレベル要素は新しい行で始まり、後続の要素も新しい行で始まります。

  2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。

  3. 幅が設定されていない場合、要素の幅は親コンテナの 100% (親要素の幅と同じ) になります。

  11. 要素の分類 - インライン要素

  HTML では、、、、、 は典型的なインライン要素（インライン要素）。もちろん、display:inline コードを使用してブロック要素をインライン要素として設定することもできます。次のコードは、ブロック要素 div をインライン要素に変換します。ページから使用される div 要素には、インライン要素の特性があります。
  インライン要素の特徴:
  1) と他の要素は同じ行にあります。
  2) 要素の高さ、幅、行の高さ、上下の余白は設定できません。
  3)要素はその内容です。テキストまたは画像の幅は変更できません。
  12. ボックスモデル - 境界線
  ボックスモデルの境界線は、コンテンツとフィラーを囲む線です。この線の太さ、スタイル、色 (境界線の 3 つの属性) を設定できます。
  次のコードは、境界線の太さ 2px、単色のスタイル、赤色の境界線を設定する div のコードです:
  div{
  border:2px Solid red;
  }
  上記はボーダーコードの省略形。個別に記述できます:
  div{
  border-width:2px;
  border-style:solid;
  border-color:red;
  }
  注:
  1 . border-style (ボーダー スタイル) 一般的なスタイルは次のとおりです。
  点線 (点線) | 実線 (実線)。
  2. border-color (境界線の色) の色は、次のように 16 進数の色に設定できます。
  border-color: #888; 先頭のハッシュ記号を忘れないでください。
  3. border-width (ボーダー幅) の幅は、次のように設定することもできます。
  太さ (ただし、あまり一般的ではありません)、ピクセル (px) が最も一般的に使用されます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。