css は「Cascading Style Sheet」の略です

ステートメント、この記事は Learning Mooc http://www.imooc.com/learn/9 の HTML+CSS の CSS ノートです。問題がある可能性があります。今後も学習と修正を続けます

構成:

セレクター {属性: 値; ステートメント}

コメント/ /

カテゴリ: 3 つのタイプ

Inline
css スタイル シートCSS コードを直接記述することです

埋め込み
タグの間に CSS スタイル コードを記述できます。 通常、埋め込み CSS スタイルは

の間に記述されます。

外部スタイル
CSS コードは別の外部ファイルに記述されており、この CSS スタイル ファイルには拡張子「.css」があり、(style タグ内ではなく) 「head」内で link タグを使用します。次のコードに示すように、CSS スタイル ファイルを HTML ファイルにリンクします。

優先順位 : 同じ重みの場合、inline > 埋め込み > 外部、埋め込み > 外部には、埋め込まれた CSS スタイルの位置が外部の後ろにある必要があるという前提があります。 実際、要約すると、これは近接性の原則 (設定されている要素に近いほど優先度が高くなります) です。

さまざまなセレクター:

1. タグ セレクター

HTML コード内のタグ。

2. クラス セレクター

. クラス セレクター {} は、class = "クラス セレクター名" を使用してラベルのクラスを設定します

3. ID セレクター

メソッド: #Selector { } ラベル "ID" に id = を設定しますname"

クラスと ID セレクターの違い

類似点: 任意の要素に適用可能
相違点:
1. ID セレクターのみ 1 回のみ使用可能文書の中で。クラス セレクターとは異なり、ID セレクターは HTML ドキュメント内で 1 回だけ使用できます。クラス セレクターは複数回使用できます。
2. クラス セレクターの単語リスト メソッドを使用して、要素に複数のスタイルを同時に設定できます。 1 つの要素に複数のスタイルを同時に設定できますが、これはクラス セレクターを使用する場合のみ実現できます。 ID セレクターは使用できません (ID ワード リストは使用できません)。例:
(span class="stress bigsize") 4. 子セレクター

大なり記号 (>) は、指定されたラベル要素の最初の世代の子要素を最初に選択するために使用されます。 >span {color:red;}

5. (子孫) セレクターを含みます

つまり、スペースの追加は、指定されたラベル要素の下の子孫要素を選択するために使用されます。例: .first span{color:red;}

Compare

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

5. ユニバーサル セレクター

ユニバーサル セレクターは、HTML

6 のすべてのタグ要素と一致する最も強力なセレクターです。セレクター

HTML に存在しないタグ (タグの特定の状態) のスタイルを設定できます
link 未訪問 (デフォルト) -- マウスホバー (マウスを横に置く) -- アクティブリンク アクティブ化 (マウス押した) -- 訪問済み 訪問後 (クリック後)
シーケンス: 訪問したリンク hover active
a:hover{color:red;}

7. グループセレクター

複数のラベル要素が設定されている場合同じスタイルでは、グループ セレクター (,) h1、span{color:red;} を使用できます。

1. 継承

CSS の一部のスタイルを継承できるようにするルールです。特定の HTML タグ要素だけでなく、その子孫にも適用されます。

2. 特徴:

同じ要素に異なる CSS スタイル コードを設定することがあります。その場合、どの CSS スタイルがその要素で有効になりますか?
重みのルールは次のとおりです。
ラベルの重みは 1、クラス セレクターの重みは 10、ID セレクターの重みは最大 100 です。注: 別の特別な重みがあります。継承にも重みがありますが、それはわずか 0.1 であると提案されている文献もあるため、継承の重みが最も低いことがわかります。

3. カスケード:

HTML ファイル内の同じ要素に複数の CSS スタイルがあり、それらの複数の CSS スタイルが同じウェイト値を持つ場合はどうなるでしょうか?
カスケードとは、HTML ファイル内の同じ要素に複数の CSS スタイルが存在する場合、それらの CSS スタイルの順序に基づいて決定されることを意味します。最後の CSS スタイルが適用されます。
インライン スタイル シート (タグ内) > 埋め込みスタイル シート (現在のファイル内) > 外部スタイル シート (外部ファイル内) です。

4. 重要:

Web ページのコードを作成する場合、特定のスタイルに最高の重みを設定する必要がある特殊な状況がいくつかあります。
現時点では、! important を使用して問題を解決できます。
p{color:red! important;} //注意: ! important はセミコロンの前に書く必要があります

書式設定と組版

1. フォント

font-family;
color< ; br/>font-weight:bold;//太字
font-style:italic //斜体
text-decoration:underline;//下線
:line-through;//取り消し線

2. 段落の書式設定

text-indent:2em;//インデント -- 注: 2em はテキストのサイズの 2 倍を意味します。
line-height:1.5em; //行間隔--(行の高さ)
letter-spacing://漢字の間隔、文字と文字の間隔の設定; ;word-spacing://単語間隔設定
text-align; //Alignment

要素分類

ブロック要素
要素をブロックとして表示する設定です。レベル要素。
ブロックレベル要素の特徴:
1. 各ブロックレベル要素は新しい行で始まり、後続の要素も新しい行で始まります。 (本当に大げさですが、ブロックレベルの要素が 1 行を占めます)
2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。
3. 要素の幅が設定されていない場合は、幅が設定されていない限り、その親コン​​テナの 100% になります (親要素の幅と同じ)。
インライン要素
ブロック要素は、コード display:inline
インライン要素の機能:
2. 要素の高さ、幅、上下の余白は設定できません。
3. 要素の幅はテキストまたはテキストです。画像の幅は変更できません。
インラインブロック要素
インラインブロック要素(inline-block)は、インライン要素とブロック要素の両方の特徴を持ち、要素Setを変換するコードです。インラインブロック要素。
inline-block 要素の特徴:
1. 高さ、幅、行の高さ、上下の余白。要素のすべてを設定できます。
月餅間の距離はマージンと呼ばれ、月餅のパッケージは境界線です。ボックスモデルの境界線は、コンテンツとパディングを囲む線です。この線の太さ、スタイル、色（3つ）を設定できます。境界線のプロパティ)。

書き込み

div{ border:2px ソリッドレッド;}

or

div{ border-width:2px; border-color:red;}
下側の境界線の一方的な設定を提供します

注:
1. 境界線のスタイル (境界線のスタイル) 一般的なスタイルは次のとおりです:
（破線）｜点線（点線）｜実線（実線）。

2. border-color (境界線の色) の色は、次のような 16 進数の色に設定できます。
border-color:#888;// 先頭のシャープ記号忘れないで。

3. border-width (境界線の幅) の幅は次のように設定することもできます。
最も一般的なのは、ピクセルです。 (ピクセル)。

幅と高さ

ボックスモデルの幅と高さは、CSS で定義されている幅 (幅) と高さ (高さ) を参照するオブジェクトの幅と高さとは異なります。 to は、入力される

コンテンツ範囲

です。
つまり、要素の実際の幅 (ボックスの幅) = 左境界 + 左境界 + 左パディング + コンテンツの幅 + 右パディング + 右境界 + 右境界となります。要素の高さについても同様です。

css-width.png

Padding

要素のコンテンツと境界線の間の距離を設定できます。これは「パディング」と呼ばれ、上、右、下、左に分割することもできます。 ）。

Border

要素と他の要素の間の距離は、マージンを使用して設定できます。境界は、上、右、下、左に分割することもできます。
div{margin:20px 10px 15px 30px;}
これらを個別に記述することもできます:

div{ margin-top:20px; margin-right:10px; ; margin -bottom:15px; margin-left:30px;}
上下左右の余白が 10px の場合、次のように記述できます。 ;}< br/>上下の境界線が同じ 10 ピクセル、左右の境界線が同じ 20 ピクセルの場合、次のように記述できます:

div{ margin:10px 20px;}

レイアウトモデル

レイアウトモデル ボックスモデルをベースにしており、私たちがよく呼ぶCSSレイアウトスタイルやCSSレイアウトテンプレートとは異なります。レイアウト モデルが基礎である場合、CSS レイアウト テンプレートは最終的な外部表現です。

CSS には、英語で要約すると、Flow、Layer、Float という 3 つの基本的なレイアウト モデルが含まれています。

Web ページでは、要素には 3 つのレイアウト モデルがあります:

1、

フロー モデル (フロー)

フローはデフォルトの Web ページ レイアウトですモード。つまり、デフォルト状態の Web ページの HTML Web 要素は、フロー モデルに従って Web ページのコンテンツを配信します。
最初のポイントは、デフォルトではブロック要素の幅が 100% であるため、ブロック要素は含まれる要素内で上から下に順番に垂直方向に拡張されます。実際、ブロック要素はすべて行の形式で位置を占めます。
2 番目のポイントは、フロー モデルの下で、インライン要素は、含まれている要素内で左から右に水平に表示されます。 (インライン要素は、行を占めるブロック要素ほど横暴ではありません)

2. Float モデル (Float)

2 つのブロック要素を並べて表示します。デフォルトでは、どの要素も表示できません。フローティングですが、CSS を使用してフローティング フロートとして定義できます: 左または右; 人気のレイヤー編集機能と同様に、各レイヤーを正確に配置して操作できますが、Web デザインの分野では、レイヤー レイアウトは機動性のため普及していませんでした。 Web ページのサイズ。ただし、Web ページ上でローカルにレイヤー レイアウトを使用することには依然として利点があります。
レイヤー モデルには 3 つの形式があります

:

1.

絶対位置(位置: 絶対)
位置を設定: 絶対 (絶対位置を示します) ) ;このステートメントの機能は、要素をドキュメント フローの外にドラッグし、left、right、top、bottom 属性を使用して、位置決め属性で最も近いブロックを含む親

を基準とした絶対配置を実行することです。そのような包含ブロックが存在しない場合、それは body 要素に対して相対的、つまりブラウザ ウィンドウに対して相対的になります。

2、相対配置(position: 相対)

通常のドキュメント フロー内の要素のオフセット位置を left、right、top、bottom 属性によって決定します。相対位置決めのプロセスでは、まず静的 (フロート) モードで要素を生成し (要素はレイヤーのように浮遊します)、次に前の位置に対して相対的に移動します。移動の方向と振幅は左と右によって決まります。 、top、bottom 属性、オフセット前の位置は変更されません。

3. 固定配置(位置:固定)

固定: 絶対配置タイプと同様に固定配置を示しますが、その相対移動座標はビュー (画面内の Web ページ ウィンドウ) そのものです。ビュー自体は固定されているため、画面上でブラウザ ウィンドウの画面位置を移動したり、ブラウザ ウィンドウの表示サイズを変更したりしない限り、ブラウザ ウィンドウのスクロール バーがスクロールしてもビューが変化することはありません。常にブラウザ ウィンドウ内のビューの特定の位置にあり、ドキュメントの流れに影響されません。これは、background-attachment:fixed 属性と同じ機能を持ちます。 略称

ボックスモデルコード略称 ボックスモデルでは、マージン(margin)、パディング(padding)、ボーダー(border)を設定します 上下左右の4方向のマージンを設定します。時計回りの方向：右上、左下。

box-abb.png

カラーの省略形

設定した色が 16 進数のカラー値の場合、各 2 桁の値が同じ場合は、次のように省略できます。半分。

フォントの略語

font-abb.png

注:

1. この略語を使用するには、少なくとも font-size 属性と font-family 属性、およびその他の属性 (font など) を指定する必要があります。 -weight、font-style、font-varient、line-height) が指定されていない場合は、自動的にデフォルト値が使用されます。

2. 省略する場合は、font-size と line-height の間に「/」を斜めに追加します。

一般に、中国語の Web サイトには英語がまだ比較的少ないため、次の略語コードがよく使用されます:

body{ font:12px/1.5em "宋体",sans-serif;}
フォント サイズ、行間、中国語フォント、英語フォントの設定のみです。

単位と値

色

Web ページの色の設定は非常に重要で、フォントの色 (color)、背景の色 (background-color)、境界線の色 (border) などが含まれます。色には多くの方法があります:
1. 英語のコマンド color p{color:red;}2. RGB カラー p{color:rgb(133,45,200);}3. 16 進数の色の原理は次のとおりです。こちらもRGBの設定ですが、各項目の値が0～255から16進数の00～ffに変更されます。 p{color:#00ffff;}

length value

1.pixel
2.em この要素は、要素の font-size の font-size 値を与えます。が 14px の場合、1em = 14px、フォントサイズが 18px の場合、1em = 18px。
以下の特殊な場合に注意してください: font-size の単位が em に設定されている場合、このときの計算基準は p の親要素の font-size に基づきます。
3. パーセンテージ
p{font-size:12px;line-height:130%}行の高さ (行間隔) をフォントの 130% (12 * 1.3) に設定します。 = 15.6 ピクセル)。

ヒント

水平方向の中央揃え

1. インライン要素
設定された要素がテキストや画像などのインライン要素の場合、親要素に text-align:center を設定することで水平方向の中央揃えが実現されます。 。 2. ブロック状の固定幅要素
固定幅とブロック状の2つの条件を満たす要素は、「左右の余白」の値を「自動」に設定することで中央揃えにすることができます。 3. ブロック状の可変幅要素
可変幅のブロック状要素を中央に配置するには 3 つの方法があります (これら 3 つの方法は現在よく使用されています):

3.1 table タグを追加します
原則: table タグの長さの適応性を利用します。つまり、タグの長さは定義されず、デフォルトで親要素本体の長さになりません。 (テーブルの長さはテーブル内のテキストの長さに応じて決定されます)、固定幅のブロック要素を作成し、固定幅ブロックの中央揃えマージン方法を使用して水平方向に中央揃えにすることがわかります。 手順: 最初のステップ: 設定する必要がある中央の要素の外側に table タグ (、、 を含む) を追加します。

ステップ 2: このテーブルの「左右のマージンを中央に設定」します (これは固定幅ブロック要素と同じ方法です)。 3.2 表示の設定: インラインメソッド: 最初のメソッドと同様に、表示タイプをインライン要素に設定し、可変幅要素の属性を設定します。
ブロックレベル要素の表示をインラインタイプに変更します(設定インライン要素を表示するには )、次に text-align:center を使用して中央揃え効果を実現します。
いくつかの問題があります。ブロック要素の表示タイプがインラインに変更され、インライン要素に変換されるため、長さの値の設定などの一部の機能が失われます。
3.3 Position:relative と left:50% を設定します: 相対位置を使用して要素を左に 50% シフトします。つまり、中央揃えの目的を達成します
親要素を float に設定し、親要素にposition:relativeおよびleft:50%を設定し、子要素にposition:relativeおよびleft:-50%を設定して、水平方向のセンタリングを実現します。

理解: ul レイヤーの親レイヤー (つまり、以下の例では div レイヤー) の中央に、ul レイヤーの親レイヤー (div レイヤー) を 2 つに分割する二等分線があると想像してください。 ul レイヤーの css コードは、ul レイヤーを 2 つの部分に分割し、ul レイヤーの親レイヤー (div レイヤー) の二等分線に揃えます。 li レイヤーの二等分線と ul レイヤーの左端 (div レイヤーの二等分線でもあります) を結ぶことで、li レイヤーのセンタリングが実装されます。

垂直方向の中央揃え

1. 親要素によって高さが決定される単一行のテキスト

親要素によって高さが決定される単一行のテキストを垂直方向に中央揃えする方法は次のとおりです。親要素の高さと行の高さを一貫して設定することで実現されます。 (高さ: 要素の高さ、行の高さ: 名前が示すように、行の高さ (行間隔) はテキスト内の行間のベースライン間の距離を指します)。

line-height と font-size の計算値の差を CSS では「行間隔」と呼びます。それを 2 つに分割し、テキスト行の上部と下部に追加します。

2. 親要素の一定の高さを持つ複数行のテキスト。

2.1 insert table (tbody、tr、td を含む) タグを使用し、vertical-align: middle を設定します。

CSS には垂直方向の中央揃えのための属性vertical-align があります。親要素がこのスタイルを設定すると、すべての inline-block タイプの子要素に役立ちます。

表示を暗黙的に変更します

要素に次の 2 つの文のいずれかを設定する場合 (要素の以前のタイプに関係なく、display:none を除く):

position : 絶対
float : left または float :そうです

簡単に言うと、上記 2 つの文のいずれかが HTML コードに含まれている限り、要素の表示タイプは自動的に display:inline-block (ブロック要素) に変更されます。もちろん、要素の幅は変更できます。高さとデフォルトの幅は親要素を占有しません。