HTML（CSSスタイル仕様）を読む必要があります

HTML（CSSスタイル仕様）を読む必要があります

CSS スタイル仕様

1. クラスセレクター

2. タグセレクター

3. IDセレクター

4. CSSスタイルの子セレクター

クラスセレクター

1. 覚えておかなければならない固定構造が CSS スタイルのタグになります。すべてのスタイルはCSSスタイルタグで記述できます

<スタイル タイプ="text/css">

</スタイル>

2. type="text/css"は、このタグをCSSスタイルタイプとして宣言することを意味します

タイプ: タイプとは
テキスト: テキストの意味
css: カスケード スタイル シート

3. クラスセレクタ構文形式。クラス名（ドット＋クラス名）

書き込み場所: CSSスタイルタグ内でメソッドを呼び出し、HTMLタグ内にclass=クラス名を記述します。

4. 命名規則

純粋な文字または文字と数字の組み合わせを使用することをお勧めします。数字で始めないでください。他の名前も使用できますが、使用方法についてはお問い合わせください。

5. インライン CSS を CSS タグに抽出する必要があるのはなぜですか?

利点1: HTML階層を明確に保ち、​​エラーを検出しやすくする利点2: CSSスタイルを再利用できる

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "ja" >   
  4.   
  5. <ヘッド>   
  6.   
  7.      <メタ 文字セット= "UTF-8" >   
  8.   
  9.      < title >クラスセレクター</ title >   
  10.   
  11.      <スタイル タイプ= "text/css" >   
  12.   
  13. /*クラスセレクタ*/
  14.   
  15. .box{幅: 200px; 高さ: 50px; 背景色: 水色; 境界線: 10px サーモン色}
  16.   
  17.      </スタイル>   
  18.   
  19. </ヘッド>   
  20.   
  21. <本文>   
  22.   
  23. < div  クラス= "ボックス" > </ div >   
  24.   
  25. < div  クラス= "ボックス" > </ div >   
  26.   
  27. < div  クラス= "ボックス" > </ div >   
  28.   
  29.    
  30.   
  31. </本文>   
  32.   
  33. </html>​​   
スタイル結果

IDセレクター

1. IDセレクタの構文形式は#ID名です

書き込み場所: CSSスタイルタグ内でメソッドを呼び出し、HTMLタグ内にid="ID名"と記述します。

2. 命名規則

前のセクションのクラス名と同じ理由

3. インラインCSSをCSSタグに抽出する理由

利点1: HTMLレベルを明確に保ち、​​エラーを検出しやすくする利点2: 優先順位を区別する。再利用する必要がある場合は、クラスセレクタを選択してください

4. ID は繰り返しの呼び出しを許可しません。ID は ID カード番号のようなものです。それぞれ異なります。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "ja" >   
  4.   
  5. <ヘッド>   
  6.   
  7.         <メタ 文字セット= "UTF-8" >   
  8.   
  9.         <タイトル>タイトル</タイトル>   
  10.   
  11.         <スタイル タイプ= "text/css" >   
  12.   
  13. /*IDセレクタ*/
  14.   
  15. /*ID のユニークな識別子の意味、設計の目的は ID をユニークにすることです*/
  16.   
  17. #box{幅: 200px;高さ: 50px;背景色: ビスク}
  18.   
  19. #boy、#boy1、#boy2{幅: 200px;高さ: 50px;背景色: ビスク;
  20.   
  21. 境界線: 2px 海緑実線}
  22.   
  23. #gil,.doc{幅: 200px;高さ: 50px;背景色: ビスク;
  24.   
  25. 境界線: 2px 海緑実線}
  26.   
  27. /*複数の共有パラメータを設定する*/
  28.   
  29.    
  30.   
  31.      </スタイル>   
  32.   
  33.    
  34.   
  35. </ヘッド>   
  36.   
  37. <本文>   
  38.   
  39.      < div   id = "ギル" > </ div >   
  40.   
  41.      < div  クラス= "doc" > </ div >   
  42.   
  43.      < div  クラス= "doc" > </ div >   
  44.   
  45.    
  46.   
  47. </本文>   
  48.   
  49. </html>​​   
スタイル結果

タグ名セレクター

複数のタグが同じ属性を使用する場合は、セレクターとして記述できます。以下のタグはすべてこの属性を共有しています

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. < html   lang = "ja" >   
  3. <ヘッド>   
  4.      <メタ 文字セット= "UTF-8" >   
  5.      <タイトル>タイトル</タイトル>   
  6.      <スタイル タイプ= "text/css" >   
  7. /*タグ名セレクター*/
  8. div{境界線: 10px サーモン色; 幅:99px;高さ: 20px}
  9.      </スタイル>   
  10. </ヘッド>   
  11. <本文>   
  12.      < div >ジェイ・チョウ</ div >   
  13.      < div >孫七湖</ div >   
  14.      < div >張潔</ div >   
  15. </本文>   
  16. </html>​​   

CSS スタイルの子セレクター

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "ja" >   
  4.   
  5. <ヘッド>   
  6.   
  7.      <メタ 文字セット= "UTF-8" >   
  8.   
  9.      < title >子セレクター</ title >   
  10.   
  11.      <スタイル タイプ= "text/css" >   
  12.   
  13. div b{色: 深紅}
  14.   
  15. /*div の下の b 子タグにのみ影響します*/
  16.   
  17. div > b{色: スカイブルー}
  18.   
  19. /*息子にのみ影響し、孫には影響しません*/
  20.   
  21.      </スタイル>   
  22.   
  23. </ヘッド>   
  24.   
  25. <本文>   
  26.   
  27.      < div > < b >アメリカ合衆国</ b > </ div >   
  28.   
  29.      < div > < b > < b >中国</ b > </ b > </ div >   
  30.   
  31.    
  32.   
  33. </本文>   
  34.   
  35. </html>​​   
スタイル結果

2. スタイルの優先

1. CSSの実行順序。同じ優先順位で、次のCSS行が前のCSS行と競合する場合は、次の行が標準になります。

優先度が異なる場合は、優先度の高い方が優先度の低い方に優先されます。

2. セレクタの優先順位

1位：インラインスタイル1000
2位：IDセレクター100
3位:要素名.クラス名 10;
4位:クラス名 5位:タグ名1;

3. 注意事項:

書いた CSS が動作しない場合は、まずコードが間違っていないか確認し、次に優先順位が間違っていないか確認してください。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "ja" >   
  4.   
  5. <ヘッド>   
  6.   
  7.      <メタ 文字セット= "UTF-8" >   
  8.   
  9.      < title >優先度の定義</ title >   
  10.   
  11.      <スタイル タイプ= "text/css" >   
  12.   
  13. .red{色: 水色}
  14.   
  15. .blue{色: 深紅}
  16.   
  17. .dce{色: アンティークホワイト}
  18.   
  19. /* 同じレベルの同じ属性の場合、標準的な呼び出しは次のようになります*/
  20.   
  21. div{色: 青}
  22.   
  23. /*影響が広いほど、優先度は低くなります*/
  24.   
  25.    
  26.   
  27. #blue{ 色: スプリンググリーン}
  28.   
  29. #ket{色: 青紫}
  30.   
  31. div.red{色: 水色}
  32.   
  33. /*クラス名>要素名*/
  34.   
  35. /*ID は最も優先度が高い*/
  36.   
  37. #alex b{色: シャルトリューズ}
  38.   
  39. b{色: 青;境界線: 2px コーンシルク実線}
  40.   
  41.    
  42.   
  43.      </スタイル>   
  44.   
  45. </ヘッド>   
  46.   
  47. <本文>   
  48.   
  49. < div   id = "ケット"  クラス= "赤"   style = "color: black" >セックスファースト</ div >   
  50.   
  51. <!-- 行内で最も高いスタイル -->   
  52.   
  53. < div   id = "青"   class = " red " >優先度</div>   
  54.   
  55. < div   class = "blue red dce" >優先度</ div >   
  56.   
  57. < div   id = "alex" > < b >中国</ b > </ div >   
  58.   
  59. < b >アメリカ合衆国</ b >   
  60.   
  61. </本文>   
  62.   
  63. </html>​​   
スタイル

以上が、編集者がお届けするHTML（CSSスタイル仕様）必読記事の内容です。123WORDPRESS.COMを応援していただければ幸いです～

元のアドレス: http://www.cnblogs.com/pythonxiaohu/archive/2016/06/25/5616511.html

<<:  MySQLチュートリアルDMLデータ操作言語の例の詳細な説明

>>:  Docker クロスサーバー通信オーバーレイソリューション (パート 1) Consul 単一インスタンス

推薦する

Linux で文字列を整理するためのヒント

Linuxの操作では、ファイル内の文字列を置換したりカウントしたりすることが多いです。ここでまとめを...

WeChatミニプログラムでEchartとサブパッケージを使用するための完全な手順

序文休日は終わっていますが、それは別の形で（お腹に触れることで）私たちに現れます。ミニプログラムでデ...

WeChatミニプログラムが星評価を実装

この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具...

Docker Gitlab+Jenkins+Harborは永続的なプラットフォーム運用を構築します

CI/CD の概要CIワークフロー設計Gitコードバージョン管理システムはコマンドラインでのみ管理で...

MySQL インデックスがソートに与える影響の分析例

この記事では、例を使用して、MySQL インデックスがソートに与える影響を説明します。ご参考までに、...

ページ内にマーキーとフラッシュが共存する場合の競合解決

競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...

MySQL sql_mode の使用に関する詳細な説明

目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...

Linux Autofs 自動マウント サービスのインストールと展開のチュートリアル

目次1. autofs サービスの紹介2. Autofsのインストールと展開3. Autofs効果の...

JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明

目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...

Docker での Redis の最も詳細なインストールと構成 (画像とテキスト付き)

1. Dockerに適したRedisのバージョンを見つけるdocker hubで見つけることができ...

Nginx 7層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解

この記事は主に、Nginx 7 層負荷分散のいくつかのスケジューリング アルゴリズムを紹介します。こ...

InnoDB ロック (レコード、ギャップ、Next-Key ロック) の詳細な説明

レコード ロックは、単一のインデックス レコードをロックします。レコード ロックは常にインデックスを...

JDBC 接続 (MySQL への接続) の 6 ステップのサンプル コード

JDBC の 6 つのステップ: 1. ドライバーを登録する2. データベース接続を取得する3. デ...

Nginx に React プロジェクトをデプロイする方法の例

テストプロジェクト: react-demo react-demo プロジェクトをサーバーにクローンし...

データベースのデフォルトパスを変更した後にmysqlが起動できない問題の解決策

序文mysql がデフォルトのデータベース パスを変更したため、サービスを開始できませんでした。ログ...