ホームページ >ウェブフロントエンド >htmlチュートリアル >#8.8.16概要# 難易度: 関係セレクター
#8.8.16概要# 難易度: 関係セレクター
- WBOYオリジナル
- 2016-08-10 08:49:421373ブラウズ
1.CSSとは何ですか?
CSS(Cascading Style Sheets):Cascading Style Sheets、Web ページのプレゼンテーションをコンテンツから分離するスタイル設計言語。
2. CSS でできることは何ですか?
a. いくつかのアニメーション効果
b.ページレイアウト
c. ウェブサイト全体のテーマを制御する
3. CSS 構文構造?
4.CSSの導入方法は？
a. インライン CSS スタイル コードを HTML コードに直接記述します
リーリー
b. 埋め込み タグの間に CSS スタイル コードを記述します。 通常、埋め込み CSS スタイルは < の間に記述されます。頭>
リーリー
c.外部スタイルcssスタイル、別のファイルに記述されます
リーリー
5.CSSの優先順位
a. 重みは同じです近接原理 (設定されている要素に近いほど優先度が高くなります)
優先度: インライン > 埋め込み > 外部 (前提: 埋め込まれた CSS スタイルの位置は外部スタイルの後ろにある必要があります。 )
b. 重みが違います
- A.インラインスタイルシートのウェイトは1000までです
- B. IDセレクターの重みは100です
- C.クラスクラスセレクターの重みは10です
- D. HTMLタグセレクターの重みは1です
CSS優先ルール:
A 各セレクターには重みがあり、重みが大きいほど優先度が高くなります
B 重みが等しい場合、最初に表示されるスタイルシート設定よりも、後に表示されるスタイルシート設定の方が優れています
C 作成者のルールは閲覧者のルールよりも優先されます。つまり、Web ページ作成者によって設定された CSS スタイルは、ブラウザによって設定されたスタイルよりも優先されます
D 継承された CSS スタイルは、後で指定された CSS スタイルほど良くありません
E 同じ属性設定セットでは、「!重要」のマークが付いたルールが最も優先されます
6. CSS コメント
a. 単一行のコメント コード //...
リーリー
b.複数行のコメントコード /*...*/
リーリー
7. セレクター
a.ワイルドカードセレクターb. 要素セレクター
HTML のスタイルを設定する場合、セレクターは通常、p、h1、em、a などの HTML 要素、または HTML 自体です
c. グループセレクター
通常、CSS スタイル内に同じ設定を使用する必要がある場所が複数ある場合、それらを 1 つずつ記述するのは面倒な作業であり、繰り返しが多く時間がかかり、管理が困難です。 CSS では、これらのセレクターを同じ設定でマージしたり、同じ定義を複数のセレクターに適用したり、セレクターをカンマで区切られたグループに結合したりできます。例: p,div,a{color:red;}
d.関係セレクター
A. DIV P
元素中所有
元素
B. DIV>P
元素中所有直接子元素
C.DIV+P 所有位于
元素后的第一个
元素
D.DIV~P
元素的所有相邻兄弟元素
举例：
A.DIV P
<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>关系选择符<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
div p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第一段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第二段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第三段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第四段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第五段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第六段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
B.DIV>P
<span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
div>p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
C.DIV+P
<span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
div+p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
D.DIV~P
<span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
div~p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSを使って三角形を作成する次の記事：CSSを使って三角形を作成する