========================
CSS カスケードスタイルシート
=============== = =========
命名規則: 文字、数字、またはアンダースコアとマイナス記号を使用し、数字で始めないでください
CSS 構文
------ -----------------------
形式: セレクター {プロパティ:値;プロパティ:値;プロパティ:値;....}
セレクターはセレクターとも呼ばれます
CSS のアノテーション : /* ... */
2. HTML で CSS スタイルを使用する方法 (HTML に CSS を埋め込む方法);
------------------------------------------------- --- 1. インラインメソッド(インラインスタイル)は、HTMLタグのstyle属性を使用してCSSスタイルを設定します 形式: <htmlタグ style="属性:値;属性:値; ....">変更されたコンテンツ :公式スクリプト">HTML で CSS スタイルを使用する方法< ;/p> ; 特徴: このタグにのみ適用されます。 head タグ内の タグを使用して設定します。 css スタイル 優先順位: スタイルが競合する場合、近接性の原則が採用され、変更されたコンテンツに最も近い CSS 属性の値が優先されます。 タグセレクター) classクラス選択シンボル (カスタム名 (クラス名) でセレクターを定義するにはドットを使用します) html 属性] 擬似クラスselect(擬似要素)セレクター: 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 で始まりコネクタ "-" で区切られた です。 [attibute^=value] は、attribute 属性を持ち、その値が value で始まる E 要素と一致します。 [attribute$=value] は、attribute を持ち、値が value で終わる E 要素と一致します [attribute*=value]属性属性と値を持つ E 要素 には値 が含まれます。 3. 構造擬似クラスセレクター: : の最初の文字のスタイルを設定します。 ::first-line オブジェクト内の最初の行のスタイルを設定します。 (オブジェクトツリーの論理構造に従って) オブジェクトの前に出現するコンテンツを設定します。 (オブジェクト ツリーの論理構造に従って) オブジェクトの後に何が起こるかを設定します。 (言語) は、特別な言語を使用して E 要素と一致します。 :element1~element2: は、同じ型の最後の兄弟要素と一致します :only- of-type は同じ型の唯一の兄弟要素と一致します :only-child は親要素の唯一の子要素と一致します :nth-child(n) は親要素の n 番目の要素と一致します 子要素 :nth -last-child(n) は、同じ型の最後から 2 番目の n 番目の兄弟要素に一致します :last-child() は、親要素の最後の子要素に一致します :root は、ドキュメント内の要素のルート要素に一致します。 HTML では、ルート要素は常に HTML です :empty は子要素のない要素 (テキスト ノードを含む) と一致します 4. *state ハイパーリンク イベント :focus :target 関連する URL が指す E 要素と一致します :enabledユーザーインターフェース上の利用可能な状態の要素と一致します :disabled ユーザーインターフェース上の無効な要素と一致します :checked ユーザーインターフェース上の選択された要素と一致します :not(selector) セレクターを含まない要素と一致します ::selection 選択するオブジェクトを設定します Style when 単純なセレクター s に一致しないすべての要素 E に一致します p:not(.bg) { :#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) 透明度設定 img{ opacity:0.25;} 2 . : フォント サイズ: 20px、親オブジェクトのパーセンテージに基づいて 60% *font-family: フォント: Arial、Arial : 通常; ; 斜体フォント *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 -style; ボーダースタイル: 実線実装、点線、破線 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: 背景を固定するかどうか、 スクロール: デフォルト値。 背景画像对はオブジェクトのコンテンツとともに回転します Background-siZe マルチレイヤー背景: O 背景: URL (test1.jpg) 繰り返しなしスクロール 10px 20px、url (test2.jpg) 繰り返しなしスクロール 50px 60px、url (test3.jpg) 繰り返しなしスクロール 90px 100px 背景クリップ パディング-ボックス,パディングボックス,パディングボックス; padding-top padding-right margin-top *position: 位置決め方法: 絶対 (絶対位置決め z-index *top: 直前に配置された親の上部を基準としたオブジェクトの位置を取得または設定します bottom: 取得または、最後に配置された親を基準としたオブジェクトの位置を設定します 配置された親オブジェクトの下部に関連する位置 display float float: value none | を指定するかどうか、およびその方法を指定します。 left | right clear: clear float: none | left right | Both 両側 visibility: オブジェクトを表示するかどうかを設定または取得します。表示|非表示|折りたたまれます。 表示属性とは異なり、この属性は非表示のオブジェクトのために占有する物理スペースを予約します。 可視領域 を取得または設定します。領域外の部分は透明になります。 rect (top-right-bottom-left) overflow-y 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 サイトの他の関連記事を参照してください。
フォーカスを取得したときの要素のスタイルを設定します
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
