ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML と CSS の知識を史上最も包括的にわかりやすくまとめた本。 _html/css_WEB-ITnose

HTML と CSS の知識を史上最も包括的にわかりやすくまとめた本。 _html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:56:012200ブラウズ

1. html+css の基礎
1-1
Html と CSS の関係
Web フロントエンド開発の基本技術を学ぶには、HTML、CSS、JavaScript 言語を習得する必要があります。これら 3 つのテクノロジーが何を達成するために使用されるかを見てみましょう:
1. HTML は Web コンテンツのキャリアです。コンテンツとは、Web ページ作成者がユーザーが閲覧できるようにページに配置する情報であり、テキスト、写真、ビデオなどが含まれます。
2. CSS スタイルはパフォーマンスです。ウェブページのコートのようなものです。たとえば、タイトルのフォント、色の変更、またはタイトルに背景画像や枠線などを追加します。コンテンツの外観を変更するために使用されるこれらすべてのものは、プレゼンテーションと呼ばれます。
3. JavaScript は、Web ページに特殊効果を実装するために使用されます。たとえば、ドロップダウンメニュー上でマウスをスライドすると、ドロップダウンメニューがポップアップ表示されます。または、テーブルの上にマウスを置くと、テーブルの背景色が変わります。話題のニュース（ニュース写真）もローテーションします。アニメーションとインタラクションは一般的に JavaScript を使用して実装されていることがわかります。
1-2
1. HTML タグは大文字と小文字を区別しません。

と

は小文字を使用するため、小文字を使用することをお勧めします。

1-3
HTML ファイルには独自の固定構造があります。

...

1. はルートタグと呼ばれ、すべての Web ページのタグは内にあります。
2. タグは、すべての head 要素のコンテナであるドキュメントの head を定義するために使用されます。ヘッダー要素には、、<script>、<style>、<link>、<meta> などのタグが含まれます。ヘッダータグについては、次のセクションで詳しく説明します。 3. <body> タグと </body> タグの間のコンテンツは、<h1>、<a>、<img> などの Web ページのメインコンテンツです。 content タグ。ここのタグ内のコンテンツがブラウザに表示されます。 1-4 1. head セクションでは次のタグを使用できます: <title>...</title> <link> ;style > ...</style> <script>...</script> </head> 2. コードのコメントは、プログラマーが以前のコードの目的を思い出すのを容易にするだけでなく、他のプログラマーを支援するプログラムの機能をすぐに理解できるため、複数の人が共同で Web ページのコードを開発することが容易になります。 文法:  3. CSS コメントコード Html のコメントと同様に、CSS にもコメントステートメントがあります。(HTML で使用される) を示すには /コメントステートメント/ を使用します。 ) 1-5 1. 意味化: 簡単に言うと、各タグの目的を理解します (どのような状況でこのタグを使用できますか?) たとえば、タイトルWeb ページ上の記事の多くはタイトルタグを使用する必要があり、Web ページ上の各列の列名にもタイトルタグを使用できます。 2. セマンティクスの役割 1) 検索エンジンによってインデックスされやすくなります。 2) スクリーンリーダーが Web コンテンツを読みやすくします。 2. タグを理解する (その 1) 2-1 記事を Web ページに表示するには、 タグの中に記事の段落を入れます。。 構文: 段落テキスト 2-2 <hx> 記事のタイトルを作成します。 タイトルタグは合計 6 つあり、h1、h2、h3、h4、h5、および h6 は、第 1 レベルの見出し、第 2 レベルの見出し、第 3 レベルの見出し、第 4 レベルの見出し、第 5 レベルの見出し、および第 6 レベルの見出しです。それぞれレベルの見出し。そして重要度の降順に。 <h1> は最高レベルです。 文法: <hx>タイトルテキスト</hx> (xは1-6) 前述のように、titleタグは記事のタイトルに使用できますが、さまざまなコラムのタイトルにも使用できます。ウェブページ上で 2-3 段落とタイトルを使用して、段落内の特定の単語を強調したい場合は、 タグまたは を使用できます。 ただし、強調の調子には違いがあります。 は強調を意味し、 はより強い強調を意味します。ブラウザでは、 はデフォルトで斜体で表現され、 は太字で表現されます。 2 つのタグと比較して、国内のフロントエンドプログラマは現在、強調を表現するために を使用することを好みます 2-4 、、 の違い: 1. タグと タグは段落内のキーワードを強調するために使用され、意味上の意味は強調です。 2. タグにはセマンティクスがありません。その機能は、別のスタイルを設定し、段落を囲み、CSS を使用してスタイルを設定することです。 2-5 q タグ、短いテキストの引用 たとえば、Web ページの記事で特定の作家の詩を引用し、記事をより目立たせる場合は、<q> を使用します。タグは必要なものです。 構文: <q>テキストを引用</q> 1. 引用するテキストを二重引用符で囲む必要はないことに注意してください。ブラウザは自動的に q タグに二重引用符を追加します。 2. ここで <q> タグを使用する本当の重要な点は、二重引用符のデフォルトのスタイルではなく (この場合、キーボードで二重引用符を入力することもできます)、そのセマンティクスにあることに注意してください。他の人の言葉 blockquote タグ、長いテキストの引用 <blockquote> は、他の人のテキストを引用するためにも使用されます。ただし、これは長いテキストへの参照です <q> は短いテキストへの参照です。たとえば、<q> タグは文を引用するために使用されます。 構文: <blockquote>テキストを引用</blockquote> ブラウザは <blockquote> タグをインデント形式で解析します 2-6 改行タグ ラベルは、Word 文書の改行に相当します。 行タグ <hr/> の分割 <hr/> タグも タグと同様に空のタグであるため、開始タグは 1 つだけあり、終了タグはありません。 ブラウザの <hr/> タグのデフォルトのスタイルは、線が太く、色が灰色になっているので、見苦しいと感じる人もいるかもしれませんが、これらの外部スタイルは、CSS スタイルシートを学習した後に変更されます。将来的には変更可能です。 2-7 HTML 特殊文字 スペース: (; セミコロンは必須) 2-8 アドレスタグ、Web ページにアドレス情報を追加 構文: <address>アドレス情報< address> 例: <address>No. 10 Dewai Street, Xicheng District,Beijing</address> ブラウザに表示されるスタイルは斜体です。以下のコースで実行できます CSS スタイルを使用して <address> タグのデフォルトのスタイルを変更します 2-9 言語技術を紹介する Web サイトでは、Web 上にコンピュータ専門のプログラミングコードを表示することが避けられません。コードがコード行の場合、次の例のように <code> を使用できます。 構文: < ;code>コード言語</code> 注: 通常、記事に複数行のコードを挿入する場合は、<code> タグを使用できます。 <pre class="brush:php;toolbar:false"> タグ。 <pre class="brush:php;toolbar:false"> タグの主な機能: フォーマット済みテキスト。通常、pre 要素で囲まれたテキストには空白と改行が保持されます。前の方法を使用する場合は、改行には 記号を入力し、スペースにはを入力する必要があります。 注: <pre class="brush:php;toolbar:false"> タグは、コンピューターのソースコードを表示するためにのみ使用されるわけではありません。ただし、<pre class="brush:php;toolbar:false"> の一般的なアプリケーションでも使用できます。 ; タグはコンピュータのソースコードを表示します。 3. タグを理解する (その 2) 3-1 1. 順序なしリスト ul-li は、順序のない情報のリストです。構文: <ul> <li>情報</li> </ul> <li>Wonderful Boy</li> <li>美しさは突然現れる</li> 魂に響くメロディー</ul> ul-li Web ページに表示されるのは一般的に次のとおりです。 li の各項目の前にはドットが付きます 2. 順序付きリスト <ol> <li>Information</li> <li>Information</ li> ...... </ol> 例: <ol> <li>フロントエンド開発インタビューのヒント</li> ;li>HTML をゼロから学ぶ</li> <li>JavaScript 完全ガイド</li> </ol> <ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开 3-2 <div>容器标签 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。 语法： <div>…</div> 論理部分を特定します: 論理部分とは何ですか?これは、ページ上の相互に関連する要素のセットです。たとえば、Web ページの独立した列セクションは、典型的な論理部分です。以下の図に示すように: 図の赤い枠でマークされた部分は論理部分であり、<div> タグはコンテナとして使用できます 注: <div> はブロックレベルの要素です。つまり、ブラウザは通常、div 要素の前後に改行を置きます。 3-3 テーブルを作成する 5 つの要素: table、tbody、tr、th、td 1. <table>…</table>: テーブル全体は <table> タグで始まります。 < /table> は終了を示します。 2. <tbody>…</tbody>: テーブルのコンテンツが多い場合、テーブルのダウンロードと表示に少し時間がかかりますが、<tbody> タグが追加されている場合、テーブルは待機する必要があります。すべてのテーブルの内容がダウンロードされるまで、右側のコードエディターのコードなど。 (このタグは基本的にもうあまり使われていません) 3. <tr>…</tr>: テーブルの行なので、tr のペアがいくつかあり、テーブル内に複数の行があります。 4. <td></td>: テーブル内のセル。1 つの行には複数の <td>...<td/> のペアが含まれており、1 行に何列あるかを示します。 5. <th>…</th>: テーブルの先頭のセル、テーブルヘッダー。 6. テーブル内の列の数は、行内のデータセルの数によって異なります。 最適化のためにテーブルにいくつかのタグを追加する必要があります。タイトルと要約を追加できます <table summary="このテーブルには、U ディスクとヘッドフォンの在庫を含む、2012 年から 2013 年の在庫レコードが記録されます"> caption> ;2012 年から 2013 年の在庫記録</caption> 3-4 1. <a> で作成されたハイパーリンクを使用します。 Web ページリンクがある限り、どこにでもあると言えます。このラベルは存在します。 構文: <a href=”リンク先 URL”>リンクに表示されるテキスト</a> 例: <a href = "http://www.imooc.com">ここをクリックしてください! < ;/a> 上記の例の機能は、「ここをクリックしてください!」というテキストをクリックすることで、Web ページが http://www.imooc.com にリンクされます。 3-5 <img> タグを理解してウェブページに写真を挿入しましょう ウェブページを美しく美しくするために、<img> タグを使用することができます。画像を挿入します。 構文: <img src="画像アドレス" alt="ダウンロード失敗時の置換テキスト" title = "プロンプトテキスト"> 例: <img src = "myimage.gif" alt = "My Image " title = "My Image" /> 説明: 1. src: 画像の場所を特定します。 2. alt: 画像が表示されない場合 (ダウンロードが失敗した場合) を指定します。、この属性で指定されたテキストが表示されます。 3. title: 画像が表示されているときに画像の説明を提供します (画像上にマウスを移動すると表示されるテキスト) 4. 画像は画像にすることができます。 GIF、PNG、または JPEG 形式のファイル。 4. フォームタグ (ユーザーとの対話) 4-1 フォームは、ビューアによって入力されたデータをサーバーに送信できるため、サーバー側のプログラムはフォームから渡されたデータを処理できます。 文法: <form Method="送信メソッド" action="サーバーファイル"> 説明: 1.<form>: <form> で始まり、次で終わります。 </フォーム>。 2. アクション: ビューアによって入力されたデータが送信される場所 (PHP ページ (save.php) など)。 3.method: データ送信の方法 (get/post)。 4-2 <input>入力ボックス テキスト入力ボックス、パスワード入力ボックス テキスト入力ボックスは、ユーザーがフォームに文字や数字などを入力するときに使用します。テキストボックスをパスワード入力ボックスに変換することもできます。 文法: <form> <input type="text/password" name="name" value="text" </form> 1. type="text" の場合、入力ボックスはテキスト入力ボックスです。 type="password" の場合、入力ボックスはパスワード入力ボックスです。 2. name: バックグラウンドプログラム ASP および PHP で使用するテキストボックスに名前を付けます。 3. 値: テキスト入力ボックスのデフォルト値を設定します。 (通常はプロンプトとして使用されます) 4-3 テキストフィールド、複数行のテキスト入力をサポート ユーザーがフォームに大きなテキストセクションを入力する必要がある場合は、テキスト入力フィールドを使用する必要があります。 文法: <textarea rows="行数"cols="列数">Text</textarea> 1. <textarea> で始まり </textarea> で終わるタグです。仕上げる。 2.cols: 複数行の入力フィールドの列数。 3. rows: 複数行の入力フィールドの行数。 4-4 ラジオボタン、チェックボックス 構文: <input type="radio/checkbox" value="value" name="name" selected="checked"/> 1. 次のように入力します。 type="radio" の場合、コントロールはラジオボタンです type="checkbox" の場合、コントロールはチェックボックスです 2. value: サーバーにデータを送信する値 (バックグラウンドプログラム PHP によって使用されます) 3 . name : バックグラウンドプログラム ASP および PHP で使用するコントロールに名前を付けます 4. selected: selected="checked" を設定すると、このオプションがデフォルトで選択されます 注: 同じグループ内のラジオボタンの名前の値は、一貫性があるため、同じグループ内のラジオボタンのみがラジオ選択として機能します。 4-5 ドロップダウンリストボックス、スペースの節約 ドロップダウンリストは Web ページでもよく使用され、Web ページのスペースを効果的に節約できます。単一選択と複数選択の両方を選択できます。 構文: <option value="Submit value">Option</option> 送信された値はサーバーに送信された値であり、オプションは表示された値です。 <form action="save.php" method="post" > option value="ショッピング">ショッピング</option> </select> </form> 4-6 複数の選択にはドロップダウンリストボックスを使用します ドロップダウンリストは複数の選択にも使用できます。選択操作では、<select> タグに multiple="multiple" 属性を設定します。複数選択機能を実行するには、Ctrl キーを押しながら複数のオプションをクリックします。 次のコード: <label>Hobbys:</label> <select multiple="multiple"> ＆lt; option value = "book＆gt; lt＆lt;/gt;/option＆gt;リセット。 1. 送信ボタン: ユーザーがフォーム情報をサーバーに送信する必要がある場合、送信ボタンを使用する必要があります。 構文: <input type="submit" value="submit"> type: type 値が submit に設定されている場合のみ、ボタンは送信できます。 value: ボタンに表示されるテキスト 2 . リセットボタンを繰り返してフォーム情報をリセットします ユーザーが「ユーザー名」を入力し、書き込みエラーを見つけた後など、ユーザーがフォーム情報を初期状態にリセットする必要がある場合、リセットボタンを使用してフォーム情報を復元できます。入力ボックスを初期状態に戻します。タイプを「リセット」に設定するだけです。 構文: <input type="reset" value="Reset"> type: type 値がリセットに設定されている場合のみ、ボタンにはリセット機能があります 値: ボタンに表示されるテキスト 5、CSSスタイル 5-1 CSSスタイルを理解する CSSとは「Cascading Style Sheets」の略で、主にブラウザ内でのHTMLコンテンツの文字サイズ、色、フォントの追加などの表示スタイルを定義するために使用されます。の上。 次のコード: p{ font-size:12px; font-weight:bold;CSS スタイルを使用する利点の 1 つは、特定のスタイルを定義することで、Web ページの異なる場所にあるテキストのフォント、フォントサイズ、色を統一できることです。 5-2 CSS コード構文 css スタイルはセレクターと宣言で構成され、宣言は属性と値で構成されます selector {property: value} p{color:red;} selector: セレクターとも呼ばれます、スタイルルールが適用される Web ページ内の要素を示します。この例では、Web ページ内のすべての段落 (p) のテキストが青に変わりますが、他の要素 (ol など) は影響を受けません。。 宣言: 英語の中括弧「{{}」で囲まれたものが宣言であり、属性と値は英語のコロン「:」で区切られています。複数のステートメントがある場合は、以下に示すように英語のセミコロン「;」で区切ることができます: p{font-size:12px;color:red;} 5-3 CSS スタイルコードから挿入基本的には、 インライン、埋め込み、外部 1. インライン CSS スタイル は、次のコードのように、既存の HTML タグに CSS コードを直接記述することです: < ;p style="color: red"> ここの文字は赤です。 CSS スタイルコードは、二重引用符で囲んで記述します。CSS スタイルコード設定が複数ある場合は、セミコロンで区切って記述できます。次のコード: ここのテキストは赤色です。 2. 埋め込み CSS スタイル は、CSS スタイルコードを <style type="text/css"></style> タグの間に記述できることを意味します。たとえば、次のコードは 3 つの タグのテキストを赤色に設定します。 <style type="text/css"> </style>埋め込みスタイル CSS スタイルは <style></style> の間に記述する必要があり、通常、埋め込み CSS スタイルは <head></head> の間に記述します。 3. 外部CSSスタイル を別ファイルに記述する 外部CSSスタイル（外部スタイルとも言います）とは、CSSコードを別の外部ファイルに記述することですこのCSSスタイルファイルは拡張子が「.css」で終わります。 . 次のコードに示すように、<head> 内で (<style> タグ内ではなく) <link> タグを使用して、CSS スタイルファイルを HTML ファイルにリンクします。 .css" rel="stylesheet" type="text/css" /> 注: 1. CSS スタイルファイル名は、main.css のように、意味のある英語の文字で名前が付けられます。 2. rel="stylesheet" type="text/css"は固定の書き方なので変更できません。 3. <link> タグの位置は通常、タグ内に記述されます。 6. CSS セレクター 各 CSS スタイル定義は 2 つの部分で構成され、形式は次のとおりです: Selector { Style; } {} より前の部分は「セレクター」であり、「セレクター」は{} 内の「スタイル」のオブジェクトは、「スタイル」が Web ページ内のどの要素に作用するかを表します 6-1、タグセレクター タグセレクターは、実際には HTML コード内のタグです。右側のコードエディタの <html>、<body>、<h1>、、<img> など。たとえば、次のコード: p{font-size:12px;line-height:1.6em;} 上記の CSS スタイルコードの機能は、p タグのフォントサイズを 12px、行間隔を 12px に設定することです。 1.6em。 6-2、クラスセレクター クラスセレクターは、右側のコードエディターのコードなど、CSS スタイルのコーディングで最も一般的に使用されます。「マウスのように臆病」および「勇気」のフォント設定として実装できます。赤い。 構文: .クラスセレクター名{CSS スタイルコード;} 注: 1. 英語のドットで始めます 2. クラスセレクター名は任意に名前を付けることができます (ただし、中国語で名前を付けないでください) 使用方法: 最初にステップ 1: 次のように、適切なタグを使用して、変更するコンテンツをマークします: マウスのように臆病 ステップ 2: class="クラスセレクター名" を使用してタグのクラスを設定します。 , 次のように: マウスのように臆病 ステップ 3: 次のようにクラスセレクターの CSS スタイルを設定します: .stress{color:red;}/Beforeクラス英語のドットを追加します/ 6-3、ID セレクター 多くの点で、ID セレクターはクラスセレクターと似ていますが、いくつかの重要な違いもあります。 1. id="ID 名を設定します。 class="クラス名" の代わりにタグ "。 2. ID セレクターの前には、英語のドット (.) の代わりにポンド記号 (#) が付きます。 6-4、クラスと ID セレクターの違い 類似点: どの要素にも適用可能 相違点: 1. ID セレクターはドキュメント内で 1 回のみ使用できます。クラスセレクターとは異なり、ID セレクターは HTML ドキュメント内で 1 回だけ使用できます。クラスセレクターは複数回使用できます。 次のコードは正しいです: 私が 3 年生のとき、私は ネズミのように臆病 という小さな女の子でした。授業中の先生の質問に答えたら先生に叱られるのではないかと心配でした。私には先生の質問に答える勇気がありませんでした。 次のコードは間違っています: 私は 3 年生のとき、ネズミのように臆病だった ;. 間違って答えたら先生に責められるのを恐れて、私はあえて先生の質問に答えませんでした。私には先生の質問に答える勇気がありませんでした。 2. クラスセレクターの単語リストメソッドを使用して、要素に複数のスタイルを同時に設定できます。 1 つの要素に複数のスタイルを同時に設定できますが、これはクラスセレクターを使用する場合にのみ実現でき、ID セレクターは使用できません (ID ワードリストは使用できません)。 以下のコードは正しいです (完全なコードについては、右側のコードエディタを参照してください) .stress{ color:red; } .bigsize{ font-size:25px } 到着3 年生次の学期では、私たちのクラスには公開授業が行われます... 上記のコードの機能は、「3 番目」という 3 つの単語を設定することです。 Grade" テキストの色は赤で、フォントサイズは 25 ピクセルです 次のコードは間違っています (完全なコードについては、右側のコードエディターを参照してください) #stressid{ color:red; } #bigsizeid{ font-size:25px; ❤️ 「3 年生」の 3 つの単語のテキストの色を赤、フォントサイズを 25 ピクセルに設定できます。 6-5、サブセレクター さらに便利なセレクターサブセレクター、つまり大なり記号 (>) もあります。これは、指定されたラベル要素の子要素を選択するために使用されます。たとえば、次のコード: .food>li{border:1px Solid red;} このコード行は、クラス名 food の下のサブ要素 li に赤い実線の境界線を追加します。 6-6、(子孫) セレクターを含みます 指定されたラベル要素の下の子孫要素を選択するために使用されるセレクター、つまりスペースを追加するものを含みます。たとえば、右側のコードエディターのコードは次のとおりです。 .first span{color:red;} このセレクターと子セレクターの違いに注意してください 1. 子セレクターは、その直接の子孫またはユーザーのみを参照します。子要素の最初の世代の子孫に作用するものとして理解できます 2. 子孫セレクターは、すべての子子孫要素に作用します。子孫セレクターはスペースで選択し、子セレクターは「>」で選択します。 概要: > 要素の最初の世代の子孫に作用し、スペースは要素のすべての子孫に作用します。 6-7、ユニバーサルセレクター ユニバーサルセレクターは、HTML 内の任意のタグ要素と一致するように指定される最も強力なセレクターです。ラベル要素のフォントの色はすべて赤に設定されます: * {color:red;} 6-8、擬似クラスセレクター さらに興味深いのは、擬似クラスセレクターです。なぜこれが擬似クラスセレクターと呼ばれるのかです。クラスセレクター? HTML が存在しないラベルのスタイルを設定できます。たとえば、HTML のラベル要素のマウスオーバー状態のフォントの色を設定します。 a:hover{color:red;} これは、コード行により、マウスをロールオーバーすると、/a> タグで囲まれたテキストコンテンツ内の「As Cowardly as a Mouse」のフォントの色が赤に変わります。 6-9、グループ化セレクター HTML 内の複数のラベル要素に同じスタイルを設定したい場合は、グループ化セレクター (,) を使用できます。次のコードは、コードエディターの h1 タグとspan タグです。右同時に、フォントの色を赤に設定します: h1,span{color:red;} これは、次の 2 行のコードに相当します。 7. CSS の継承、階層化、および詳細性。 7-1 一部の CSS スタイルは継承されますが、継承とは何ですか?継承は、スタイルを特定の HTML タグ要素だけでなく、その子孫にも適用できるようにするルールです。たとえば、次のコード: 特定の色が p タグに適用される場合、この色の設定は p タグだけでなく、p タグ内のすべてのサブ要素テキストにも適用されます。ここで、サブ要素はスパンです。鬼ごっこ。 ただし、一部の CSS スタイルは継承されないことに注意してください。ボーダー:1px 赤一色 7-2 など重みに基づいてどの CSS スタイルを使用するかを決定します ブラウザは重みに基づいてどの CSS スタイルを使用するかを決定します。最も高い重みを持つ CSS スタイルが使用されます。 重みのルールは次のとおりです: ラベルの重みは 1、クラスセレクターの重みは 10、ID セレクターの重みは最大 100 です。たとえば、次のコード: p{color:red;} /重みは 1/ p span{color:green;} /重みは 1+1=2/ .warning{color: white; } /重みは 10/ p scan.warning{color:purple;} /重みは 1+1+10=12/ #footer .note p{color: yellow;} /重みは 100+10+1=111/ です 注: 別の特別な重みがあります。継承にも重みがありますが、それは非常に低いです。一部の文献では、それが 0.1 のみであると提案されているため、継承には重みがあることが理解できます。最小の重み 7-3、カスケード 質問について考えてみましょう: HTML ファイル内の同じ要素に複数の CSS スタイルがあり、これらの複数の CSS スタイルが同じ重み値を持つ場合はどうなるでしょうか?このセクションのカスケードは、この問題の解決に役立ちます。 カスケードとは、HTML ファイル内の同じ要素に対して複数の CSS スタイルが存在できることを意味します。同じ重みを持つスタイルが存在する場合、それらの CSS スタイルの順序に基づいて決定され、最後の CSS スタイルが適用されます。 次のコードのようにします: p{color:red;} p{color:green;} 3 年生のとき、私はまだ ネズミのように臆病でした< ;/ スパン> 小さな女の子。 最後に、p のテキストが緑色に設定されます。このカスケードは、前のスタイルを上書きすることが分かります。 したがって、前の CSS スタイルの優先順位を理解するのは難しくありません。 インラインスタイルシート (タグ内) > 埋め込みスタイルシート (現在のファイル内) > 外部スタイルシート (外部ファイル内)。 7-4、重要性 重要性 Web ページのコードを作成するとき、特定のスタイルに最高の重みを設定する必要がある特殊な状況がいくつかあります。現時点では、! important を使用してそれを解決できます。 次のコード: p{color:red! important;} p{color:green;} 3 年生のとき、私はまだネズミのように臆病でした ; /span>小さな女の子。 このとき、p 段落のテキストは赤色で表示されます。 注: !重要はセミコロンの前に書く必要があります 8. CSS の書式設定と組版 8-1 テキストの組版 1. テキストの組版 - フォント CSS スタイルを使用して、テキストのフォントを設定できます。 Web ページのフォントサイズ、色、その他のスタイル属性。次のコードは、Web ページのテキストのフォントを Song Diagnostics に設定する例を見てみましょう。 body{font-family:"宋体";} ここで珍しいフォントを設定しないように注意してください。設定したフォントがユーザーのローカルコンピュータにインストールされていない場合、ブラウザのデフォルトフォントが表示されるからです。 (設定したフォントスタイルがユーザーに表示されるかどうかは、設定したフォントがユーザーのローカルコンピューターにインストールされているかどうかによって異なります。) 2. テキストレイアウト - フォントサイズ、色 次のコードを使用してフォントサイズを設定できます。 Web ページのテキストを 12 ピクセルに設定し、フォントの色を #666 (グレー) に設定します。 body{font-size:12px;color:#666} 3. テキストレイアウト -- 太字 を使用することもできます。 CSS スタイルを使用してテキストスタイルを変更します: 太字フォント、斜体、下線、取り消し線。次のコードを使用して、テキストを太字スタイルで表示するように設定できます。 p spa{font-weight:bold;} 4. テキストの組版 - イタリック 次のコードは、ブラウザでテキストをイタリックスタイルで表示することができます。 p>三私が 1 年生のとき、私はまだ <a>ネズミのように臆病 </a> の小さな女の子でした。 5. テキストレイアウト - 下線 場合によっては、テキストを視覚的に強調できる下線スタイルに設定することができます。これを実現するには、次のコードを使用します。 :underline;} 3 年生のとき、私はまだ <a>ネズミのように臆病</a> の小さな女の子でした。 取り消し線は、電子商取引 Web サイトでよく見られます。 p a{text-decoration:line-through;} 8-2 段落の組版 1. 段落の組版 -- インデント 中国語のテキストでは、段落の前に 2 つのスペースを残すのが通例です。この特別なスタイルを使用できます。実装するコードは次のとおりです: p{text-indent:2em;} 注: 2em はテキストのサイズの 2 倍を意味します。 2. 段落レイアウト - 行間隔 このセクションでは、段落レイアウトで重要な役割を果たす別の行間隔属性 (line-height) について学習します。次のコードは、段落の行間隔を 1.5 倍に設定します。 p{line-height:1.5em;} 3. 段落レイアウト - 単語間隔、文字間隔 テキスト間隔と文字間隔の設定: Web ページのレイアウトでテキスト間隔または文字間隔を設定したい場合は、次のコードに示すように、letter-spacing を使用してこれを実現できます。 ;h1>The Great Gates Than </h1> 注: このスタイルを英単語で使用すると、文字間の間隔が設定されます。 単語間隔の設定: 英語の単語間の間隔を設定したい場合はどうすればよいですか?これは、単語間隔を使用して実現できます。次のコード: h1{ word-spacing:50px; } ... <h1>imooc へようこそ!</h1> 9、CSS ボックスモデル 9-1 要素の分類 CSS のレイアウトを説明する前に、事前に知っておく必要があります。CSS では、HTML のラベル要素は、一般的にブロック要素、インライン要素、インラインブロック要素の 3 種類に分類されます。 一般的に使用されるブロック要素は次のとおりです: <div>、、<h1>...<h6>、<ol>、<ul>、<dl>、<table> <address>、<blockquote>、<form> 一般的に使用されるインライン要素は次のとおりです: <a>、、 、、 ;、<label>、<q>、<var>、<cite>、<code> 一般的に使用されるインラインブロック要素は次のとおりです: 要素の分類 - ブロックレベルの要素 ブロックレベルの要素とは何ですか? HTML では、<div>、、<h1>、<form>、<ul> および <li> はブロックレベルの要素です。 display:block を設定すると、要素がブロックレベルの要素として表示されます。次のコードは、インライン要素 a をブロック要素に変換します。ページの a 要素には、ブロック要素の特性があります。 a{display:block;} ブロックレベル要素の特徴: 1. 各ブロックレベル要素は新しい行で始まり、後続の要素も新しい行で始まります。 (本当に強引です。ブロックレベルの要素が 1 行を占めます) 2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。 3. 設定されていない場合、幅が設定されていない限り、要素の幅は親コンテナの 100% (親要素の幅と同じ) になります。 9-3 要素の分類 - インライン要素 HTML では、、<a>、<label>、<img>、 ; は典型的なインライン要素です。もちろん、display:inline コードを使用してブロック要素をインライン要素に設定することもできます。 インライン要素の特徴: 1. 他の要素と同じ行にあります。 2. 要素の高さ、幅、行の高さ、上下の余白は設定できません。 3. 要素の幅はテキストまたはそれに含まれる画像の幅幅は変更できません。 9-4 要素の分類 - インラインブロック要素 インラインブロック要素(inline-block)は、インライン要素とブロック要素の両方の特徴を持ち、インラインブロック要素に対して要素を設定するコードです。 (css2.1 の新機能)、<img><input> タグはそのようなインラインブロックタグです。 インラインブロック要素の特徴: 1. 他の要素と同じ行に配置します。 2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。 9-5 ボックスモデル - 境界線 (1) ボックスモデルの境界線は、コンテンツとフィラーを囲む線です。この線の太さ、スタイル、色 (境界線の 3 つの属性) を設定できます。 たとえば、次のコードは、境界線の太さ 2px、ソリッドスタイル、および赤色の境界線を設定する div のコードです。 div{ border:2px Solid red } 上記は、次の省略形です。ボーダーコード: div{ border-width:2px; border-color:red; 1. Border-style (ボーダースタイル) 共通スタイルは次のとおりです: 破線 (破線) | 点線 (点線) | 2. border-color (ボーダーカラー) の色は、次のように 16 進数の色に設定できます: border-color:#888;// 先頭のハッシュ記号を忘れないでください。 9-6 ボックスモデル - ボーダー (2) ここで質問がありますが、p タグに個別に下のボーダーを設定したいが、他の 3 つの辺にはボーダーのスタイルを設定しない場合はどうすればよいでしょうか。 CSS スタイルを使用すると、一方向のみの境界線のスタイルを設定できます: div{border-bottom:1px Solid red;} 次のコードを使用して、もう一方の方向の上、右、左の境界線を設定することもできます。 3 つの側面: border-top:1px ソリッドレッド; border-right:1px ソリッドレッド border-left:1px 赤一色; 9-7 ボックスモデル - ボーダー 要素と他の要素の間の距離は、マージンを使用して設定できます。境界は、上、右、下、左に分割することもできます。次のコード: div{margin:20px 10px 15px 30px;} div{ margin-top:20px; margin-bottom:15px; mar gin- left:30px ; } 上下左右の境界線が両方とも 10px の場合は、次のように記述できます: div{ margin:10px;} 上下左右の境界線が同じ 10px の場合右側の境界線は 20px なので、次のように記述できます: div{ margin:10px 20px; } 要約すると、パディングとマージンの違いは、パディングは境界線の内側にあり、マージンは境界線の外側にあります。 9-8 ボックスモデル -- パディング 要素のコンテンツと境界線の間の距離を設定できます。これはパディングと呼ばれます。充填は上下左右に分けることもできます。次のコード: div{padding:20px 10px15px 30px;} 順序を混同しないでください。上記のコードは、次のように個別に記述することができます。と左のパディングは両方とも 10px; 次のように書くことができます div{padding:10px;} 上下のパディングが同じ 10px、左右のパディングが同じ 20px の場合、次のように書くことができます: div{padding:10px 20px;} 9-9 ボックスモデルコードの略語 ボックスモデルについて話すとき、マージン、パディング、ボーダーは上下左右の 4 方向に設定されることを思い出してください。余白は時計回りに上、右、下、左に設定されます。マージンとパディングの具体的な適用例は次のとおりです: margin: 10px 15px 12px 14px; /* 上が 10px に設定され、右が 15px に設定され、下が 12px に設定され、左が 14px に設定されます。 / 通常、3 つの省略形があります: 1. 次のコードのように、上、右、下、左の値が同じ場合: margin:10px 10px 10px 10px; は次のように省略できます。 margin:10px; 2. 上下の値が同じ場合、次のコードのように値は同じになります。 margin:10px 20px 10px 20px; は次のように省略できます。 : margin:10px 20px; 3. 次のコードのように、left と right の値が同じ場合: margin:10px 20px 20px; margin:10px 20px 30px; 注: パディングとボーダーの省略方法はマージンと同じです。 9-10 カラー値の省略形 設定した色が 16 進数のカラー値の場合、各 2 桁の値が同じであれば、半分に省略することもできます。 例 1: p{color:#000000;} は次のように省略できます: p{color: #000;} 例 2: p{color: #336699;} は次のように省略できます: p{ color: #369;} 10. CSS レイアウトモデル 10-1 CSS レイアウトモデル CSS ボックスモデルの基本概念とボックスモデルタイプを理解したので、次は CSS ボックスモデルの基本モデルを詳しく掘り下げることができます。ウェブページのレイアウト。レイアウトモデルは、ボックスモデルと同様、CSS の最も基本的かつ中心的な概念です。ただし、レイアウトモデルはボックスモデルに基づいており、私たちがよく CSS レイアウトスタイルや CSS レイアウトテンプレートと呼ぶものとは異なります。レイアウトモデルが基礎である場合、CSS レイアウトテンプレートは最終的な外部表現です。 CSS には 3 つの基本的なレイアウトモデルが含まれており、英語で要約すると、Flow、Layer、Float となります。 Web ページには、要素の 3 つのレイアウトモデルがあります: 1. フローモデル (Flow) 2. フロートモデル (Float) 3. レイヤーモデル (Layer) 10-2 フローモデル (1) フロー (フロー): トップダウン。 まず、フローモデルについて説明しましょう。フローはデフォルトの Web ページレイアウトモードです。つまり、デフォルト状態の Web ページの HTML Web 要素は、フローモデルに従って Web コンテンツを配信します。 流体レイアウトモデルには 2 つの典型的な特性があります: まず、ブロック要素は垂直に拡張され、含まれる要素内で上から下に分散されます。これは、デフォルトでは、ブロック要素の幅がすべて 100% であるためです。実際、ブロック要素は行の形式でその位置を占めます。たとえば、右側のコードエディターでは 3 つのブロック要素タグ (div、h1、p) の幅が 100% として表示されます。 2 番目のポイント、フローモデルでは、インライン要素は、含まれる要素内で左から右に水平に表示されます。 (インライン要素はブロック要素ほど横暴ではなく、単独で行を占有します) 右側のコードエディターのインライン要素タグ a、span、em、strong はすべてインライン要素です。 10-3 フローティングモデル 块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。 div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div> 注意：设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。 10-4 什么是层模型？ 什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。 层模型有三种形式： 1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed) 1，层模型--绝对定位（相对于父类） 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div> 2，层模型--相对定位（相对于以前） 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 如下代码实现相对于以前位置向下移动50px，向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div> 3. レイヤーモデル -- 位置を固定 (Web ページウィンドウを基準にして) 特定の座標を固定しました。 fixed: 絶対位置決めタイプと同様に、固定位置決めを示しますが、その相対移動座標はビュー (画面内の Web ページウィンドウ) そのものです。ビュー自体は固定されているため、画面上でブラウザウィンドウの画面位置を移動したり、ブラウザウィンドウの表示サイズを変更したりしない限り、ブラウザウィンドウのスクロールバーがスクロールしてもビューが変化することはありません。常にブラウザウィンドウ内のビューの特定の位置にあり、ドキュメントの流れの影響を受けません。これは、background-attachment:fixed? 属性と同じ機能を持ちます。次のコードは、ブラウザビューに対して右に 100 ピクセル、下に 50 ピクセル移動できます。また、スクロールバーをドラッグしても位置は固定されます。＃div1 {width：200px：read solid：sixeと Absolute 私の友人はセクション 12-6 で相対配置方法を学びました。position:absolute を使用すると、ブラウザ (本体) を基準にして設定された要素を配置できるかどうかを考えたことがありますか。要素？答えはもちろん「はい」です。役立つためにposition:relativeを使用しますが、次の仕様に従う必要があります: 1. 参照位置の要素は、相対位置の要素の先行要素である必要があります: <div id="box1"><!- -参照配置要素- -> box2の親要素です(もちろん親要素は先行要素でもあります)。 2. オフセット配置を実行するには、position:relative; width:200px; height:200px; を使用して参照配置要素を追加する必要があります。 #box2{ 位置: 絶対; 左: 30 ピクセル; </h1></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">声明：<div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox">前の記事：<a class="dBlack" title="HTMLのsubmitメソッドを使用してフォームを送信した後、別のpage_html/css_WEB-ITnoseで値を取得する方法" href="https://m.php.cn/ja/faq/276328.html">HTMLのsubmitメソッドを使用してフォームを送信した後、別のpage_html/css_WEB-ITnoseで値を取得する方法</a>次の記事：<a class="dBlack" title="HTMLのsubmitメソッドを使用してフォームを送信した後、別のpage_html/css_WEB-ITnoseで値を取得する方法" href="https://m.php.cn/ja/faq/276330.html">HTMLのsubmitメソッドを使用してフォームを送信した後、別のpage_html/css_WEB-ITnoseで値を取得する方法</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><a href="https://m.php.cn/ja/article.html" class="bBlack">続きを見る</a><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><a href="https://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><a href="https://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><a href="https://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><a href="https://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><a href="https://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"> © php.cn All rights reserved </div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append(""); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><script> var _paq = window._paq = window._paq || []; / tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script></html>