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

推薦する

Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)

簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...

Web デザイナーにはどのような知識体系が必要ですか?

製品設計者は、複雑で大規模な製造システムと多様な市場に直面しているため、知識体系には幅広さと深さの両...

MySql8.0以降のバージョンでROOTパスワードを正しく変更する方法

展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....

Linuxでテキスト比較を実現するコツを教えます

序文コードを書く過程で、必然的にコードに何らかの変更を加えることになります。しかし、変更を加えるとき...

VMWare15 は Mac OS システムをインストールします (グラフィック チュートリアル)

設置環境WIN10 VMware Workstation Pro 15.0.0 ビルド 101344...

Linux で同じバージョンの R を使用して Seurat2 と Seurat3 を同時にインストールするチュートリアル

Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...

あまり使われていない、または誤解されている HTML タグ 10 個

ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...

CSS3でよく使われるスタイルの詳しい解説[基本的なテキストとフォントのスタイル]

概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつ...

JavaScript で支払いの 10 秒カウントダウンを実現

この記事では、支払いの10秒カウントダウンを実現するためのJavaScriptの具体的なコードを参考...

MySQLループは数千万のデータを挿入する

1. テストテーブルを作成する テーブル `mysql_genarate` を作成します ( `id...

Linux のハードリンクとソフトリンクの原理と使用法の分析

Linux システムには、ファイル共有を解決するために使用できるリンク ファイルと呼ばれる種類のファ...

MySQLはカスタム関数を使用して親IDまたは子IDを再帰的に照会します

背景： MySQL では、レベルに制限がある場合、たとえば、ツリーの最大深度を事前に決定できる場合、...

インデックスとテーブルリターンをカバーするMySQLの使い方

インデックスの2つの主要なカテゴリ使用されるストレージエンジン: MySQL 5.7 InnoDBク...

Docker 経由で wsl の tar ファイルを作成する方法

最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...

DIVのぼかし機能を実装する方法

マウスを動かしたときにDIVが消えるように手ぶれ補正を使用するdiv タグ自体は onblur イベ...