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 単一インスタンス

推薦する

Docker nginx + https サブドメイン設定の詳細なチュートリアル

今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...

CentOS 6 ZLMediaKit のコンパイルとインストール分析

Centos6にZLMediaKitをインストールするZLMediaKit の作者は Ubuntu ...

Nginx 構成の実装 HTTPS セキュリティ認証

1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...

Apache Log4j2 が核レベルの脆弱性と迅速な修正を報告

Apache Log4j2 が核レベルの脆弱性を報告し、スタックリーダーの友人たちは大騒ぎになりまし...

JavaScript でフォロー広告を実装するためのサンプルコード

フローティング広告は、ウェブサイト上で非常に一般的な広告形式です。フローティング広告は、ユーザーの閲...

ウェブは画像をクリックするとファイルをアップロードするウィンドウをポップアップするコードを実現します

コードをコピーコードは次のとおりです。 <スタイル> .fileInputContain...

MySQL で高性能なインデックスを作成するための完全な手順

目次1. インデックスの基本1. インデックスの種類1.1 Bツリーインデックス1.2 ハッシュイン...

MySQLのビューとインデックスの使い方と違いの詳細な説明

MySQL ビュー簡単に言えば、MySQL ビューは SELECT コマンドを定義するためのショート...

SQLインジェクションの詳しい解説 - セキュリティ編（第2部）

この記事に誤りがあったり、ご提案がありましたら、お気軽にご連絡ください。よろしくお願いいたします。は...

Zabbixリモートコマンド実行の詳細な例

目次1つ。環境二。予防三つ。例Zabbix トリガーがしきい値に達すると、アラート メッセージの送信...

Nginx と GeoIP モジュールを使用して IP の地域情報を読み取る方法

LinuxにGeoIPをインストールする yum で nginx-module-geoip をインス...

Linux でテキストを表示するためのヒント (非常に実用的!)

序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...

Vue における属性とプロパティの具体的な使用法と違い

目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...

MySQLのネクストキーロックのロック範囲についての簡単な説明

序文ある日、突然 MySQL の次のキー ロックについて尋ねられ、私の即座の反応は次のようなものでし...

CSS3のボックスサイズプロパティの興味深いボックスモデルについての簡単な説明

誰もがボックス モデルの構成を、内側から外側まで、コンテンツ、パディング、境界線、マージンについて知...