CSS カスケード スタイル シートの詳細な説明

========================

CSS カスケードスタイルシート

=============== = =========

命名規則: 文字、数字、またはアンダースコアとマイナス記号を使用し、数字で始めないでください

CSS 構文

------ -----------------------

形式: セレクター {プロパティ:値;プロパティ:値;プロパティ:値;....}

セレクターはセレクターとも呼ばれます

CSS のアノテーション : /* ... */

2. HTML で CSS スタイルを使用する方法 (HTML に CSS を埋め込む方法);

------------------------------------------------- ---

1. インラインメソッド(インラインスタイル)

は、HTMLタグのstyle属性を使用してCSSスタイルを設定します

形式: <

htmlタグ style="属性:値;属性:値; ....">変更されたコンテンツ

:公式スクリプト">HTML で CSS スタイルを使用する方法< ;/p> ; 特徴: このタグにのみ適用されます。

2. 内部メソッド (埋め込みスタイル)

は、

head タグ内の タグを使用して設定します。 css スタイル

形式:

機能: 現在のページ全体に作用します

3. 外部インポート方法 (外部リンク)

3.1 (推奨) は、head タグ内の タグを使用して CSS ファイルをインポートし、それをこのページに適用して CSS スタイルを実装します。設定

形式: < link href="ファイル名.css" type="text/css" rel="stylesheet"/>

3.2 import を使用して、style タグ内の CSS ファイルをインポートすることもできます。

例:

機能: Web サイト全体に作用します

優先順位: スタイルが競合する場合、近接性の原則が採用され、変更されたコンテンツに最も近い CSS 属性の値が優先されます。

スタイルの競合がない場合は、オーバーレイ効果が使用されます。

3. **css2 セレクター:

--------------------------------- -- --------------------------------

1. htmlセレクター(

タグセレクター)

は、 html タグ セレクターとして使用されます

p{....} など Web ページ内のすべての p タグはこのスタイルを採用します

h2{....} Web ページ内のすべての h2 タグはこのスタイルを採用します

2.

classクラス選択シンボル (カスタム名 (クラス名) でセレクターを定義するにはドットを使用します)

定義: . クラス名 {style....}

匿名クラス

他のセレクター名。 name {style.. ..}

使用: ...

.mc{color:blue;} /* 任意のクラス属性value は mc すべてこのスタイルを採用 */

p.ps{color:green;} /*p タグ内の class 属性値のみ ps はこのスタイルを採用します*/

注: クラスセレクターWeb ページに含めることができます 再利用

3. ID セレクター

定義: #id name {style....}

使用方法: ...< /html タグ >

注: ID セレクターは Web ページ内で 1 回のみ使用されます

セレクターの優先順位: 大きいものから小さいもの [ID セレクター]->[クラス セレクター]-> ;[html セレクター]->[

html 属性]

4. 関連するセレクター (セレクターを含む)

形式: セレクター 1 セレクター 2 セレクター 3...{スタイル.... }

例: table a{....} /*table タグ内の a タグのみがこのスタイルを採用*/

h1 p{color:red} /*h1 タグ内の p タグのみがこのスタイルを採用* /

5. セレクターの組み合わせ (セレクターグループ)

形式: セレクター 1、セレクター 2、セレクター 3...{スタイル....}

h3,h4,h5,#one ,.one{color: green;} /*h3、h4、h5 はすべてこのスタイルを採用*/

6.

擬似クラスselect(擬似要素)セレクター:

形式: タグ名: 擬似クラス名 {Style.. ..}

a:link {color: #FF0000; text-decoration: none} /* 未訪問のリンク*/

a:visited {color: #00FF00; text-decoration: none} /* 訪問済みのリンク*/

a:hover {color: #FF00FF; text-decoration: 下線} /* リンクにマウスを置く*/

a:active {color: #0000FF; text-decoration: 下線 } /*アクティブ化リンク*/

7. －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

1. 関係セレクター: div>p は、div 要素であるすべてのサブ要素 p を選択します

div+p は、div 要素の直後の p 要素を選択します

div~p は、div 要素を選択します 後続のすべての兄弟要素 p

2. 属性セレクター: [attribute] 属性属性を持つ要素を選択します。

[attribute=value] 属性attributeと属性値がvalueに等しい要素を選択します。

[attribute~=value] 属性属性を持ち、その属性値がスペースで区切られた単語のリストであり、そのうちの 1 つが value に等しい要素を選択します。

[attribute|=value] は、att 属性を持つ E 要素を選択し、その属性値は val で始まりコネクタ "-" で区切られた

string

です。

[attibute^=value] は、attribute 属性を持ち、その値が value で始まる E 要素と一致します。

[attribute$=value] は、attribute を持ち、値が value で終わる E 要素と一致します

[attribute*=value]属性属性と値を持つ E 要素

には値

が含まれます。 3. 構造擬似クラスセレクター:

:

:first-letter

オブジェクト

の最初の文字のスタイルを設定します。

::first-line オブジェクト内の最初の行のスタイルを設定します。

:before

(オブジェクトツリーの論理構造に従って) オブジェクトの前に出現するコンテンツを設定します。

:after

(オブジェクト ツリーの論理構造に従って) オブジェクトの後に何が起こるかを設定します。

:lang

(言語) は、特別な言語を使用して E 要素と一致します。 :element1~element2:

:first-of-type

は、同じ型の最初の兄弟要素と一致します

:last-of-type

は、同じ型の最後の兄弟要素と一致します :only- of-type は同じ型の唯一の兄弟要素と一致します

:only-child は親要素の唯一の子要素と一致します :nth-child(n) は親要素の n 番目の要素と一致します 子要素

:nth -last-child(n) は、同じ型の最後から 2 番目の n 番目の兄弟要素に一致します :last-child() は、親要素の最後の子要素に一致します

:root は、ドキュメント内の要素のルート要素に一致します。 HTML では、ルート要素は常に HTML です

:empty は子要素のない要素 (テキスト ノードを含む) と一致します

4. *state

疑似クラスセレクター

:link セット

ハイパーリンク

a スタイルアクセスされる前に。

:visited は、リンクアドレスが訪問されたときのハイパーリンクのスタイルを設定します

:active は、ユーザーによってアクティブ化されたときの要素のスタイルを設定します (マウスのクリックとリリースの間に発生する

イベント

)

* :hover マウスでホバーされたときの要素のスタイルを設定します

*

:focus
フォーカスを取得したときの要素のスタイルを設定します

:target 関連する URL が指す E 要素と一致します :enabledユーザーインターフェース上の利用可能な状態の要素と一致します

:disabled ユーザーインターフェース上の無効な要素と一致します :checked ユーザーインターフェース上の選択された要素と一致します

:not(selector) セレクターを含まない要素と一致します

::selection 選択するオブジェクトを設定します Style when

5. その他の疑似クラスセレクター

E:not(s): {attribute}

単純なセレクター s

に一致しないすべての要素 E に一致します p:not(.bg) {

background-color

:#00FF00;}

============ == =============================================== == =======================

5. CSS でよく使用される属性:

---------- -------------------------------------------------- -- ------------------------

1. color カラー属性:

a. HSL カラー: 色相 (H)、彩度 ( S)、明るさ (L)、およびさまざまな色を取得するための 3 つのカラー チャネルの重ね合わせ。

背景色: hsl (240、100%、50%);

b.色相(H)、彩度(S)、明度(L)、透明度(A)

background-color: hsla(0,100%,50%,0.2);

*c. RGBカラー：3色の変化赤 (R)、緑 (G)、青 (B) のチャンネル

背景色: rgba(200,100,0);

d. RGBA カラー: 赤 (R)、緑 (G)、青 (B) )、透明度 (A)

背景色: rgba(0,0,0,0.5); *e.

Picture

透明度設定 img{ opacity:0.25;}

2 .

font *

font-size

: フォント サイズ: 20px、親オブジェクトのパーセンテージに基づいて 60%

*font-family: フォント: Arial、Arial

font-style

: 通常; ; 斜体フォント *font-weight: 太字: 太字

font-variant: small-caps 小さい大文字フォント

font-stretch : [理解] テキストの伸縮は法線に相対的ですブラウザで表示されるフォントの幅 (ほとんどのブラウザはサポートしていません)。

3. テキスト属性:

text-indent: 1 行目のインデント: text-indent:30px;

text-overflow: テキストのオーバーフローに省略記号を使用するかどうか (... ）。 clip|ellipsis(表示省略マーク)

*text-align: テキストの位置: left center right

text-transform: オブジェクト内のテキストの大文字小文字: c api talize (頭文字) | 小文字

*text-decoration: フォント 線画: 無し、下線、通し線

text-decoration-line: [理解] 文字装飾線 位置(ブラウザ非対応)

*text-shadow: テキストに影とぼかし効果があるかどうか

vertical-align: テキストの垂直方向の配置

direction: テキストの流れの方向。 ltr | rtl

white-space:nowrap; /*すべてのテキストを同じ行に表示する*/

*letter-spacing: テキストまたは文字の間隔

word-spacing : 単語の間隔

*line-height: 行の高さ

*color: フォントの色

*4. ボーダー:

ボーダー: 幅のスタイルの色

border-color;

border -style; ボーダースタイル: 実線実装、点線、破線

border-width:

border-left-color;

border-left-style;

border-left -width:

...

CSS3 スタイル

border-radius: 角丸処理

box-shadow: オブジェクトの影を設定または取得

5. 背景属性: 背景

*background-color : 背景色

*background-image: 背景画像

*background-repeat: 繰り返すかどうか、繰り返す方法(タイル)

*background-position: 配置

background-attachment: 背景を固定するかどうか、

スクロール: デフォルト値。 背景画像对はオブジェクトのコンテンツとともに回転します

修正済み: 背景画像の固定

CSS3 の属性

*

Background-siZe

: 背景サイズ (background-size: 100px 140px など)

マルチレイヤー背景: O 背景: URL (test1.jpg) 繰り返しなしスクロール 10px 20px、url (test2.jpg) 繰り返しなしスクロール 50px 60px、url (test3.jpg) 繰り返しなしスクロール 90px 100px

: コンテンツボックス,コンテンツボックス,コンテンツボックス;

背景クリップ

:

パディング-ボックス,パディングボックス,パディングボックス;

背景サイズ:50px 60px,50px 60px,50px 60px ;

6. *内部パディング (内部パッチ)

パディング: オブジェクトの 4 辺の内部マージンを取得または設定します (padding:10px 10px;

padding-top

)。 : オブジェクトの上端を取得または設定します

の内側のマージン

padding-right

: オブジェクトの右側の内側のマージンを取得または設定します

padding-bottom

: の内側のマージンを取得または設定しますオブジェクトの下部

padding-left

: オブジェクトの内側のマージンを取得または設定します 左側の内部マージン

7. *外側のパディング (外側のパッチ)

マージン

: を取得または設定しますオブジェクトの 4 辺の外側のマージン (margin:10px; margin:5px auto;

margin-top

): オブジェクトの上端の外側のマージンを取得または設定します

margin-right

:オブジェクトの右側の外側マージンを取得または設定します

margin-bottom

: オブジェクトの下端の外側マージンを取得または設定します

margin -left

: オブジェクトの拡張マージンを取得または設定しますオブジェクトの左側

8. 位置位置決め​​

*position: 位置決め方法: 絶対 (絶対位置決め

)、固定 (相対位置決め基準、内部相対位置決めに使用可能) 絶対位置決め)

*

z-index

: 積み重ね順。値が大きいほど上位になります。

*top: 直前に配置された親の上部を基準としたオブジェクトの位置を取得または設定します

right: 直前に配置された親の右を基準としたオブジェクトの位置を取得または設定します

bottom: 取得または、最後に配置された親を基準としたオブジェクトの位置を設定します 配置された親オブジェクトの下部に関連する位置

*left: 最も最近配置された親オブジェクトの左側に関連するオブジェクトの位置を取得または設定します

9. レイアウトレイアウト

*

display

: 表示するかどうかとその方法: nonehide 、 block block display...

*

float

: オブジェクト

float: value none | を指定するかどうか、およびその方法を指定します。 left | right

*

clear: clear float: none | left right | Both 両側

visibility: オブジェクトを表示するかどうかを設定または取得します。表示|非表示|折りたたまれます。 表示属性とは異なり、この属性は非表示のオブジェクトのために占有する物理スペースを予約します。

クリップ: オブジェクトの

可視領域 を取得または設定します。領域外の部分は透明になります。 rect (top-right-bottom-left)

例: Clip:rect(auto 50px 20px auto); 上と左はクリップされず、右 50、下 20。

*オーバーフロー: 非表示: 非表示、表示: を超えます。クリップされていません コンテンツを切り取ります

overflow-x

: コンテンツが指定された幅を超えた場合のコンテンツの管理方法: 表示されます auto

overflow-y

: コンテンツが指定された高さを超えた場合のコンテンツの管理方法

10. フレキシブルボックス フレキシブルボックス (詳細はマニュアルを参照)

box-orient: フレキシブルボックスモデルオブジェクトの子要素の配置を設定または取得します。水平(水平)|垂直(垂直)

box-pack は、フレキシブル ボックス モデル オブジェクトの子要素の配置を設定または取得します。

box-align は、フレックスボックス モデル オブジェクトの子要素の配置を設定または取得します。

box-flex は、フレックス ボックス モデル オブジェクトの子要素が残りのスペースを割り当てる方法を設定または取得します。

box-flex-group は、フレックス ボックス モデル オブジェクトの子要素が属するグループを設定または取得します。

box-ordinal-group は、フレキシブル ボックス モデル オブジェクトの子要素の表示順序を設定または取得します。

box-direction は、フレックスボックス モデル オブジェクトの子要素の順序が逆になるかどうかを設定または取得します。

box-lines は、フレキシブル ボックス モデル オブジェクトの子要素を新しい行に表示できるかどうかを設定または取得します。

11. ユーザーインターフェイス ユーザーインターフェイス

*cursor マウスポインタが採用するシステム定義済みのカーソル形状。ポインターの小さな手、URL のカスタマイズ

ズームはオブジェクトのズーム率を設定または取得します: 通常|5 倍|200% パーセンテージ

ボックスサイズ設定はオブジェクトのボックス モデル構成モードを設定または取得します。 content-box | border-box

content-box: パディングとボーダーは定義された幅と高さに含まれません。

border-box: パディングとボーダーは、定義された幅と高さ内に含まれます。

サイズ変更は、オブジェクトの領域でユーザーが要素のズームとサイズの調整を許可するかどうかを設定または取得します。

none: ユーザーによる要素のサイズ変更を許可しません。

両方: ユーザーは要素の幅と高さを調整できます。

水平: ユーザーは要素の幅を調整できます。

垂直: ユーザーは要素の高さを調整できます。

outline 複合プロパティ: オブジェクトの外側の線の輪郭を設定または取得します

outline-width オブジェクトの外側の線の輪郭の幅を設定または取得します

outline-style 線を設定または取得しますオブジェクトの外側の輪郭

のスタイル outline-color オブジェクトの外側の線の輪郭の色を設定または取得します

outline-offset オブジェクトの外側の線の輪郭のオフセット位置の値を設定または取得します

nav-index は、オブジェクトの NavigationOrder を設定または取得します。

nav-up は、オブジェクトのナビゲーション方向を設定または取得します。

nav-right は、オブジェクトのナビゲーション方向を設定または取得します。

12. 複数列

columns オブジェクトの列数と各列の幅を設定または取得します

column-width オブジェクトの各列の幅を設定または取得します

column-count オブジェクトの列数を設定または取得します

column-gap オブジェクトの列間のギャップを設定または取得します

column-rule オブジェクトの列間の境界を設定または取得します

column-rule-width Setまたはオブジェクトの列を取得します 列間の境界線の太さ

column-rule-style オブジェクトの列間の境界線のスタイルを設定または取得します

column-rule-color オブジェクトの列間の境界線の色object

column-span icon 要素がすべての列にまたがるかどうか

column-fill オブジェクトのすべての列の高さが均一かどうか

column-break-before オブジェクトの前で行が区切られているかどうか

column- Break-after オブジェクトの後で改行かどうか

column-break-inside オブジェクトの内部の行が改行かどうか

13. Table関連属性:

table-layout レイアウトアルゴリズムを設定または取得テーブルの

border-collapse テーブルの行とセルの端を一緒にマージするか、標準の HTML スタイルに従って分離するかを設定または取得します。表の境界線が独立している場合の行とセルの境界線の水平方向と垂直方向の間隔

caption-side 表のキャプション オブジェクトが表のどちら側にあるのかを設定または取得します

| cell 表のセルに内容がない場合にセルの境界線を表示するかどうかを設定または取得します Hide | show

14. Transition:

transition オブジェクトが変形するときの

トランジション効果

を取得または設定します

transition-property はオブジェクトの遷移に関連するプロパティを取得または設定します

transition-duration はオブジェクトの遷移の継続時間を取得または設定します

transition-timing-function はオブジェクトの遷移のタイプを取得または設定します

transition -Delay オブジェクトが遷移を遅らせる時間を取得または設定します

15. Animation アニメーション

アニメーション オブジェクトに適用されるアニメーション効果を取得または設定します

anime-name オブジェクトに適用されるアニメーション名を取得または設定します

animation-duration オブジェクトを取得または設定します アニメーションの継続時間を取得または設定します

animation-timing-function はオブジェクトのアニメーションの遷移タイプを取得または設定します

animation-Delay オブジェクトのアニメーション遅延の時間を取得または設定します

animation- iteration-count は、オブジェクト アニメーションの ループ 回

を取得または設定します

anime-direction は、オブジェクト アニメーションがループ内で逆に移動するかどうかを取得または設定します

anime-play-state は、オブジェクト アニメーションの状態を取得または設定します

animation-fill-modeは、オブジェクトのアニメーション時間外の状態を取得または設定します

16. 2D Transform 2D Transform:

transform オブジェクトの変形を取得または設定します

transform-origin 原点を取得または設定しますオブジェクト内の変換によって参照されます

17. メディア クエリのプロパティメディア クエリ

width は、出力デバイスでのページの表示領域の幅を定義します

height は、出力デバイスのページの表示領域の高さを定義します出力デバイスのページ

device-width は出力デバイスの画面の表示幅を定義します

device-height は出力デバイスの画面の表示高さを定義します

向きの定義 「高さ」が大きいかどうか「幅」以上。値のportraitはyesを表し、landscapeはnoを表します

aspect-ratioは「width」と「height」の比率を定義します

device-aspect-ratioは「device-width」と「device-height」の比率を定義します。一般的なモニター比: 4/3、16/9、16/10 など

device-aspect-ratio は、「device-width」と「device-height」の比率を定義します。たとえば、一般的なモニター比率: 4/3、16/9、16/10

カラーは、出力デバイスの各セットのカラーオリジナルの数を定義します。カラー デバイスではない場合、値は 0 に等しくなります。

color-index は、出力デバイスのカラー ルックアップ テーブル内のエントリの数を定義します。カラー ルックアップ テーブルが使用されない場合、値は 0 に等しくなります。

monochrome は、モノクロ frame バッファ内のピクセルごとに含まれるモノクロ オリジナルの数を定義します。モノクロデバイスではない場合、値は 0 に等しくなります。

解像度はデバイスの解像度を定義します。例: 96dpi、300dpi、118dpcm

scan は TV 機器のスキャン プロセスを定義します

グリッドは、出力デバイスがラスターを使用するかドット マトリックスを使用するかをクエリするために使用されます。有効な値は 1 と 0 のみです。1 ははいを表し、0 はいいえを表します

以上がCSS カスケード スタイル シートの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。