ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 3 日目のメモ

HTML5 3 日目のメモ

黄舟
黄舟オリジナル
2016-12-28 17:14:001484ブラウズ

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) に注目してください。



声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:2日目のHTML5メモ次の記事:2日目のHTML5メモ