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

推薦する

Element-ui NavMenuサブメニューを使用して再帰的に生成する場合のエラーの詳細な説明

ナビゲーションバーのサブメニューを再帰的に生成すると、メニューは正常に生成できるが、マウスをホバーす...

CSS で TikTok テキスト揺れエフェクトを実装する例

日々の開発において、フロントエンドの学生はアニメーションやデザインについてよく議論します。デザイナー...

Vueフレームワークで習得しなければならない重要な知識を学びます

1. Vueとは何かVue は、ユーザー ページを構築するためのプログレッシブ フレームワークです。...

IDEA を使用して Web プロジェクトを作成し、Tomcat に公開する方法

目次ウェブ開発1. Web開発の概要Tomcatのインストールと設定Tomcatをインストールする2...

CentOS7.4 で JDK1.8 をインストールするためのグラフィカル チュートリアル

Linux インストール JDK1.8 手順1. CentOS に独自の openJDK があるかど...

ビジネス HTML メール作成に関する提案

許可ベースの電子メール マーケティングにより、マーケティングとプロモーションのコストを大幅に削減でき...

React で Antd の Form コンポーネントを使用してフォーム機能を実装する方法

1. 構造部品1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン...

例によるMySql CURRENT_TIMESTAMP関数の分析

時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...

Reactにおける制御されたコンポーネントと制御されていないコンポーネントの簡単な分析

目次制御されていないコンポーネント制御コンポーネント知らせ結論は制御されていないコンポーネントフォー...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

JavaScript プリミティブデータ型シンボルの詳細な説明

目次導入説明名前の競合私有財産要約する導入シンボル変数を作成する最も簡単な方法は、Symbol() ...

mysql.data.dll ドライバーのさまざまなバージョンの簡単な分析

ここにmysqlドライバmysql.data.dllがあります知らせ：ここではX86バージョンが多く...

Vueが初めて要素を取得できなかったときの解決記録

序文Vue で要素を初回取得できない問題の解決方法は、ポップアップ ウィンドウで要素を取得するために...

MySQLコマンドプロンプトで入力エラーが発生したときに前のコマンドを修正する方法

目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...