フロントエンド開発ツールの完璧な外観 CSS_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:50:32
オリジナル
958 人が閲覧しました

まずはHTMLの知識をマスターしてください! ! ! !詳細については、「HTML での共通タグの整理」を参照してください

4. CSS の開始

1. CSS スタイルを理解します
CSS スタイルを使用する利点の 1 つは、特定のスタイルを定義することで、Web ページの異なる場所にあるテキストのフォント、フォント サイズ、色を統一できることです

2. CSS スタイルの利点
を使用します。 < ;/span>囲みでCSSスタイルを統一設定します

3. CSSコードの構文
}) 選択されたシンボル: セレクターとも呼ばれ、スタイル ルールの要素を Web ページに適用する必要があることを示します。 Web ページ内のすべての段落 (p) のテキストは青色に変わりますが、他の要素 (OL など) は影響を受けません。 宣言される。複数のステートメントがある場合は、英語のセミコロン「;」で区切ることができます

4. CSS コメントコード
/*コメントステートメント*/ を使用してそれを示します (HTML では を使用します)

5. CSS スタイルの基礎知識
1. インライン CSS スタイル (既存の HTML タグに直接記述する)

ここのテキストは赤色です。

ここのテキストは赤色です。



2. 埋め込み CSS スタイル (現在のファイルに記述)
タグの間に CSS スタイル コードを記述します
外部 CSS スタイル の間に記述する必要があり、通常、埋め込み CSS スタイルは の間に記述されます

3. 外部 CSS スタイル (別のファイル内に記述されます)
この CSS スタイル ファイルには拡張子「.css」があり、 内で CSS スタイル ファイルをロックしました。 HTML ファイル
& lt; link href = "base.css" rel = "styleSheet" type = "text /css" /& gt;
1、CSS スタイル ファイル名 などの意味の英語の文字が付けられます。 main.css。
2. rel="stylesheet" type="text/css"は固定の記述方法であり、変更することはできません。
3. タグの位置は一般的に に記述されます。 {} より前の部分が「セレクター」であり、「セレクター」は {} 内の「スタイル」のオブジェクトを指定します。 style" Web ページ内のどの要素が使用されているかを示します。

2. タグセレクター タグセレクターは実際には HTML コード内のタグです
3. クラスセレクター1 英語のドットの先頭、2. クラスの名前は can を選択します任意の名前を付けることができます (中国語ではありません) = "クラス選択名" クラスを設定します
& lt; span class = "ストレス" & gt; マウス & lt;/span & gt;クラスの前*/

4. ID セレクター
多くの点で、ID セレクターはクラス セレクターに似ています。
違い:
タグ内。 优的
の 3 つのメソッドの優先順位
これら 3 つのスタイルの優先順位を覚えておいてください: 内部担保 & gt; 埋め込み & gt; 外部タイプ: 埋め込みタイプ: 埋め込みタイプ CSS スタイルの位置外部スタイルの後ろにある必要があります
要約すると、近接原則 (設定されている要素に近いほど優先度が高くなります)

6. CSS セレクター
1. セレクターとは
スタイル宣言 (定義) は以下で構成されます。 2 つの部分
selector {
style;
}
1. ラベルに class = "クラス名" の代わりに ID = "ID 名" を設定します。
2. ID セレクターの前には、英語のドット (.) ではなくポンド記号 (#) が付いています。

2. タグ セレクター
タグ セレクターは、実際には HTML コード内のタグ 、、

です。 12px; line-height:1.6em;}
3.クラスセレクター名{cssスタイルコード;}。ステップ: 適切なラベルを使用して、変更するコンテンツをマークします。 ステップ 2: class = "クラス選択デバイス名" を使用してクラスを設定します
ステップ 3: クラスセレクターの CSS スタイルを設定します

4. ID セレクター
多くの場合このように、ID セレクターはクラス セレクター
に似ています。 違い:
1. ラベルに class="クラス名 " の代わりに id="ID 名" を設定します。
2. ID セレクターの前には、英語のドット (.) ではなくポンド記号 (#) が付いています。


HTML ドキュメントでは、ID セレクターは 1 回だけ使用できます。クラス セレクターは複数回使用できます。
2. クラス セレクターの単語リスト メソッドを使用して、要素に複数のスタイルを同時に設定できます。 1 つの要素に複数のスタイルを同時に設定できますが、これはクラス セレクターを使用する場合にのみ実現でき、ID セレクターは使用できません (ID ワード リストは使用できません)。
5。子セレクター
指定されたラベル要素の下に子孫要素を選択する。最初のスパン{色:}
このセレクターと子セレクターの違いに注意してください。子セレクターは、その直接の子孫のみを参照します。あるいは、子要素に作用する最初の世代の子孫として理解することもできます。子孫セレクターは、すべての子子孫要素に作用します。子孫セレクターはスペースを介して選択しますが、子セレクターは「>」を介して選択します
概要: > 要素の最初の世代の子孫に作用し、スペースは要素のすべての子孫に作用します。

7. ユニバーサル セレクター
は (*) 記号で指定されます。その機能は、HTML 内のすべてのラベル要素と一致するようにすることです。次のコードを使用して、HTML 内の任意のラベル要素のフォントの色を赤に設定します
* {color: red; }

8. 疑似クラスセレクター
を使用すると、HTML に存在しないタグ (タグの特定の状態) のスタイルを設定できます。たとえば、マウスオーバー状態のフォントの色を設定します。 HTML のタグ要素:
a: hover{color:red;}
疑似クラスセレクターについては、これまでのところ、すべてのブラウザに対応している「疑似クラスセレクター」は、 a タグ: hover (これのみがすべてのブラウザーに対応)
現在では、a:hover の組み合わせがより一般的に使用されます

9. グループ化セレクター
HTML 内の複数のラベル要素に同じスタイルを設定する場合、グループ化を使用できますセレクター (,)

' ' s

7. CSS の継承、カスケード、特殊性
1. 継承
CSS の一部のスタイルは継承されます。
継承は、スタイルを特定の HTML タグ要素だけでなく、その子孫にも適用できるようにするルールです。
一部の CSS スタイルは継承されないことに注意してください。ボーダーなど: 1px 赤一色
継承できないスタイル:
表示、マージン、ボーダー、パディング、背景、高さ、最小高さ、最大高さ、幅、最小幅、最大幅、オーバーフロー、位置、左、 right 、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before、および unicode-bidi

2. 特異性
ブラウザは、 Weight 使用する CSS スタイルを決定するには、最も高い重みを持つ CSS スタイルを使用します。ラベルの重みは 1、クラス セレクターの重みは 10、ID セレクターの重みは最大 100 です。 または p {color: red;} /*正しい値は 1* /
p span {color: green;} /*正しい値は 1+1 = 2* /
.warning {color:white;} /*power value IS 10*/
Pspan.warning {color:purple;}/*重量は1+1+10 = 12*/
1 = 111*/
であり、重み付き1 = 111*/
です。

3. カスケード
スタッキングとは、HTML ファイル内の同じ要素に複数の CSS スタイルが存在する可能性があることを意味し、同じ重みを持つスタイルが存在する場合、これらの CSS スタイルの順序に基づいて決定されます。最後は適用されます。 标 内部結合テーブル (ラベルの内部) & gt; スタイル テーブルに埋め込まれています (現在のファイル内) & gt; 外部スタイル テーブル (外部ファイル内)。
4.重要性
、、、、、および。

8. CSS の書式設定と組版
1. テキストの組版
body{font-family:"宋体";}
body{font-family:" Microsoft Yahei";}
注: 最初の方法は 2 番目の方法よりも互換性があります。 pont 2.フォントサイズ、色
フォントサイズ、色のボディ{font-size:#666} p a {font-style:yatalic;}
5 5. underline
p {2em;}
2em はテキストのサイズの 2 倍を意味します。
8.ライン間隔(線の高さ)
P {ラインハイト:1.5em;}
9.文字間隔
{
文字-Spacing:50px;
ワード間隔を使用して達成する10.アラインメントAlignmentブロック要素のテキストと画像の使用を使用して使用して使用する使用を使用して左、右、右、中央
9、 CSS ボックス モデル
1. 要素分類
HTML のラベル要素は、通常、ブロック要素、内部関連要素 (内部要素とも呼ばれます)、および行内のインライン ブロック要素
の 3 つの異なるタイプに分類されます。
div >、

... 、

一般的に使用されるインライン要素:
scan>、
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!