Css_html/css_WEB-ITnose を理解したかのように、何でも書きます。-htmlチュートリアル-php.cn

CSS、カスケード スタイル シート、カスケード スタイル シート。 HTML ページのスタイルを制御するために使用されます。彼の基本的な形式は 2 つの部分で構成されます:

セレクター宣言ブロック

1. CSS コメントを使用する /* comment content*/

1. 外部スタイルシートをインポートする

rel: 関係を示します。ここでの関係は、rel が「代替スタイルシート」として定義されている場合は「スタイルシート」です。スタイルシート、 title 属性を使用して候補スタイルのリストを生成します。

type: リンクによってロードされるデータタイプを記述します。

media: 使用されるメディア。このスタイルでは、すべてはすべてを意味します。

2. ページに埋め込まれた CSS /*スタイルシートの内容*/ メディア属性を使用できます。

3. 外部スタイルシートを埋め込みスタイルシートにインポートします

@import url(mycss.css) media; /* スタイルシートコンテンツ*/

&lt ;/style>

media は前のリンクと同じ機能を備えており、必須ではありません。

4. インラインスタイル

要素の style 属性を直接使用して、p タグ内の色を赤に指定します

xxxx

2.セレクター

1 グループ化

h1, h2, p { color : red; } この文は、h1、h2、p タグのフォントの色が赤色であることを示します。カンマがないと意味が全く異なります。 * { color: grey; font-size: 80px;} * は、すべてのラベル要素のフォントがグレーで、サイズが 80 ピクセルであることを示すワイルドカード セレクターです。 2 クラス セレクターは大文字と小文字を区別します

.warning

{ font-weight : 太字 ; } クラス値が「警告」のラベルを示し、すべてのフォントが太字になります。前に英語のピリオドがあります。クラス選択は、p.warning.help などと一緒に使用できます。これは、クラス属性に警告とヘルプが含まれる p 要素と一致します。間にスペースはありません。 3 ID セレクターでは大文字と小文字が区別されます # warning

{ font-weight :bolold ; } ID 値が「warning」のラベルを示し、すべてのフォントが太字になります。先頭にポンド記号が付きます。 p#warning は、warning の ID を持つ p 要素を表します ID セレクターまたはクラス セレクターを使用しますか? クラス名は再利用できますが、HTML内のタグのIDは一意です。これは、ID セレクターが HTML ドキュメント内で最大 1 回のみ使用されることを意味します。

4 属性セレクター [ ]

4.1 属性による選択

h1[class] { color: silver } は、class タグを持つすべての h1 要素が選択され、フォントの色がグレーに設定されることを意味します。 * [id] は id 属性を持つすべての要素を選択することを意味します。他の属性の選択にも同じことが当てはまります。 4.2 属性値に基づいて選択する

a[href =”http://www.baidu.com”] は、Baidu の a タグに等しいすべてのハイパーリンクを選択することを意味します。

p[calss="warning"] は、クラスが warning に等しいすべての p タグを選択することを意味します。 4.3 いくつかの属性値に基づいて選択する

p[class~=”warning”] は、この文字列を含まず、単語をスペースで区切った単語を含むクラス属性を示します。属性内のスペースで区切られた単語に基づいて選択を完了します。これは p.class

p[class ^=”warning”] と同等で、calss 属性が文字列 warning で始まる p タグを意味します。

p[class $=”warning”] は、calss 属性が文字列 warning で終わる p タグを表します。

p[ class *=”warning”] は、文字列 warning の p タグを含む calss 属性 を表します。

4.4 子孫セレクター #d1 h1{ color : red } は、d1 要素のすべての子孫 h1 のフォントの色が赤であることを意味します。

#d1 > h1{ color : red } は、要素 d1 の直接の子要素 h1 のフォントの色がすべて赤色であることを意味します。 #d2 + div{ color : red } は、要素 ID d2 の直後の兄弟ノード div のフォントが赤色であることを意味します。

4.5 疑似クラスセレクター 4.5.1 リンク疑似クラス

a:link 未訪問のハイパーリンクを表します

a:visited 訪問済みのハイパーリンクを表します 4.5.2 動的疑似クラス input: フォーカスは現在入力があることを示しますフォーカスされた入力要素。

p:hover は、マウスが現在ホバリングしている要素を示します。

button : active ユーザー入力によってアクティブ化された要素を表します。

注: a タグに疑似クラス スタイルを設定する場合は、「LOVE-HA」を使用することをお勧めします。 4.5.3 静的疑似クラス

h1:first-child最初の子要素 h1。例: h1 d1外 h1 d1 内 ＆gt; ＆lt;/div＆gt; ＆lt;/body＆gt;

* : lang(fr) すべてフランス語を選択します。これは言語を選択するためのものです

4.6 擬似要素セレクター p:first-letter ブロックレベル要素の最初の文字を選択します。一般的に使用されるブロックレベル要素 p div h 。 。 。 。

p:first-line は、ブロックレベル要素のテキストの最初の行を選択します

注: first-letter 属性と first-line 属性の使用は制限されており、すべての属性が有効であるわけではありません。

h1:before ｛contetn: “myContetn”;｝ ラベル h1 の前に myContent を追加すると、後でスタイルを設定できます。

h1:after｛contetn: “myContetn”;｝ ラベル h1 の後に myContent を追加すると、後でスタイルを設定できます。

3. ポジショニングとフローティングについて

ポジションの4つの属性。 1. 静的: デフォルト値。配置を行わない場合、要素は通常のフローに表示されます。 2. 相対: 相対的に配置された要素を生成し、上、下、左、右の設定を通じて通常の位置を基準にして配置します。これは元の位置と同等のオフセット位置であり、他の要素をカバーする可能性があります。彼の元の地位は維持されるだろう。

3. 絶対: 絶対配置の要素を生成し、静的配置以外の最初の親要素を基準にして配置します。この配置された要素は通常のフローには含まれず、完全に独立しています。他の要素を上書きする可能性があります。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

4. 修正: 絶対的に配置された要素を生成し、ブラウザ ウィンドウを基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

それらの上位と下位の関係は、z-index を使用して決定されます。

Float、float: left | right none

通常のフローからは削除されますが、レイアウトには影響します。