ホームページ > 記事 > ウェブフロントエンド > HTML5 3 日目のメモ
CSS
html: 構造
css: パフォーマンス
CSS: カスケード スタイル シート
機能: html を変更および美化します。構造とスタイルの分離が達成されます。
カスケード スタイル シート
DIV+CSS を使用する利点:
1. パフォーマンスとコンテンツの分離
2. メンテナンスと修正が容易
スタイル シート
セレクター
構文: セレクター {style 1: style value 1; style 2: style value 2;}
スタイルシートの分類:
1、インラインスタイルシート (構造とプレゼンテーションの分離なし、最優先)
構文:
2、内部スタイルシート; -- HTML5 の記述方法 ->
2) インポートされたスタイルシート (ほとんど使用されません)
構文: < ;style>
@import URL (CSSスタイルシートへのパス);
スタイルシートの優先順位:
近接原則
インラインスタイルシートが最も優先されます
コメント:
html comments
css comments/*CSS*/
コメントをネストすることはできません
セレクター:
基本セレクター:
1) グローバルセレクター: * は意味します 構文: *{style}
* はすべてのタグを表し、すべてのタグ スタイルが変更されます
2) タグ セレクター
p{ }
h1{ }
機能: 同じタグには同じスタイルがあります
3) カテゴリ セレクター
最初に定義してから引用します
定義: .クラスセレクター名{スタイル}
引用: class="カテゴリセレクターの名前"
特徴: 一度定義すると複数回使用できます。 2 つのカテゴリ セレクターを使用する場合はスペースを使用してください
4) ID セレクター
最初に定義してから引用します
定義: #id セレクターの名前 {スタイル}
引用: id="ID セレクターの名前"
特徴: ユニーク
id.同じ名前の ID は同じページ内に 1 回だけ表示できます
高優先度
セレクターの優先度:
インライン スタイル シート>id>.class>element(タグ セレクター) >* (グローバル セレクター)
重み: 1000 > 100> 10 > 1 > 0
色の値の表現:
1、単語の表現: 赤、緑、青、黄、オレンジ、ピンク、紫、黒;白;
2、16 進表記: (0-9 a-f) #ff0000 #红红青青蓝蓝
#f00 #红青青
3、rgb 表記: (0-255)
背景色: rgb(255,0,0) rgb (赤、緑、青)
rgb(255,255,255) 白
4、rgba 表記:
a は透明度を表します (0 ~ 1 の間の変化、0 は完全な透明を表し、1 は不透明を表します) ;)
background-color:rgba(255,0,0,0.5)
background-color:rgba(255 ,0,0,.5)
rgb が等しい場合、一種のグレーを表します
上記は HTML5 の 3 日目のメモの内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。