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

推薦する

CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...

JavaScript での AOP プログラミングの基本実装

AOP の紹介AOP (アスペクト指向プログラミング) の主な機能は、コアビジネスロジックモジュール...

Apple 電卓の JS 実装

この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

<br />一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われていま...

Win10にMySQL8圧縮パッケージ版をインストールするチュートリアル

1 公式サイトからMySQL8をダウンロードしてインストールするMySQL8 ダウンロードアドレスこ...

JS 4つの楽しいハッカー背景効果コードを共有する

目次例1例2例3例4例1 <html> <ヘッド> <title>...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

JSブラウザイベントモデルの詳細な説明

目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...

vue.js パッケージ化プロジェクトの後の空白ページの解決策

Vueに触れたばかりのパートナーの多くは、開発環境ではVueプロジェクトは正常であるが、パッケージ化...

Vue は動的な円形のパーセンテージ進捗バーを実装します

最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装...

CSS カウンターを使用して数字の順序付きリストを美しく表示する方法

Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できる...

Vue で webSocket を使用してリアルタイムの天気を更新する方法

目次序文webSocket の操作と例について:ウェブソケット1. webSocketについて2. ...

MySQL 5.7 クラスタ構成手順

目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...

MySQLはストアドプロシージャを使用して数百万のデータを素早く追加します。サンプルコード

序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...

LinuxにMySQLをインストールし、外部ネットワークアクセスを構成する例

設定手順1. DNSが設定されているかどうかを確認するDNSが設定されていない場合は、前の記事を参照...