HTML で CSS を使用する 3 つの方法: 1. インラインスタイル: 要素のスタイル属性を通じて設定する <p style="font-size:20px; color:red">こんにちは</p> 属性はセミコロンで区切られます。 2. 内部スタイル: <head> の <style> 要素で CSS スタイルを定義します。 <スタイル> p{フォントサイズ: 20px;色: 赤} </スタイル> 3. 外部スタイル: CSSファイルでCSSスタイルを定義し、HTMLの<head>の<style>を通じて外部スタイルシートを導入します。 p{フォントサイズ: 20px;色: 赤} <link href="xxx.css" type="text/css" rel="スタイルシート" /> CSS ファイルに <style> タグを追加せず、CSS スタイルを直接記述します。 内部|外部スタイルの構文は次のとおりです: セレクタ{属性名 1: 属性値 1; 属性名 2: 属性値 2} これら 3 つの方法では、属性はセミコロンで区切られます。 CSS コメント: /* コメント */ CSS セレクター 1. 要素セレクター、クラスセレクター、IDセレクター p{color: red} /* 要素セレクター、すべての p 要素のスタイルを設定します*/ .red{color: red} /* クラスセレクター。要素内で class="red" によって参照されます*/ #user{color: red} /* id セレクターは、id="user" によって要素内で参照され、最大 1 回しか使用できません */ 2. ユニバーサルセレクター、グループセレクター *{color: red} /*ユニバーサルセレクター、すべての要素のスタイルを設定します*/ h1,.red{color: red} /*セレクターをグループ化し、複数のセレクターに同時に同じスタイルを設定します*/ 3. 子孫セレクター、子セレクター、隣接兄弟セレクター、後続兄弟セレクター div p{color: red} /*子孫セレクター。<p> が息子、孫、ひ孫などであるかどうかに関係なく、<div> 内のすべての <p> 要素を選択します。<p> が <div> の子孫である限り*/ div>p{color:red} /*子セレクター、<p>を選択します。<p>は<div>の子である必要があります*/ div+p{color:red} /*隣接兄弟セレクター、<p>を選択します。<p>は<div>の後の最初の兄弟要素である必要があります*/ div~p{color:red} /*後続の兄弟セレクター。<div> の後のすべての <p> 要素を選択します。<p> は <div> の兄弟要素である必要があります*/ 4. 属性セレクター [attr] /*attr属性を含む*/ [attr=value] /*attr属性を持ち、属性値はvalue*/ [attr^=value] /*attr属性があり、属性値はvalueで始まります(valueがそれで始まっていれば問題ありません*/ [attr|=value] /*attr属性があり、属性値はvalueで始まり、valueと後続の部分は-で接続されます*/ [attr$=value] /*attr属性があり、属性値はvalueで終わります*/ [attr*=value] /*attr属性があり、属性値にvalueが含まれています(valueが含まれていても問題ありません)*/ [attr~=value] /*attr 属性があり、属性値には value という単語が含まれます。value は完全な単語である必要があります (他の単語とはスペースで区切られます)*/ 属性セレクターは、他のセレクターと組み合わせて使用されることがよくあります。次に例を示します。 button[type="button"] /*type="button"の<button>をすべて選択*/ 属性セレクターでは、 attr を引用符で囲むことはできませんが、 value は引用符で囲むことも囲まないこともできます。 5. <a> リンク a:link /*未訪問のすべての <a>* 要素/ a:hover /*マウスを<a>要素に移動する*/ a:active /*<a>がクリックされたとき*/ a:visited /*すべての訪問済み <a>*/ これら 4 つの設定は、異なる時点における <a> 要素のスタイルです。 :hover 疑似クラスはすべての要素で使用できます。 6. フォーム要素 :focus /*フォーカスするとき*/ :checked /*選択された場合*/ :enabled /*利用可能*/ :disabled /*無効*/ :read-only /*読み取り専用*/ 単独でもフォーム要素と組み合わせても使用できます。 :集中{ } 入力:フォーカス{} 7. 空の要素 :empty{ } /*すべての空要素*/ p:empty{ } /*すべての空の<p>要素*/ 空の要素は、属性やコンテンツを持たない要素です。例: <p></p>。 8. 非 :not(p) /*<p>以外の要素をすべて選択*/ () 内では要素セレクターのみを使用するようにしてください。他のセレクターを使用するとエラーが発生しやすくなります。 9. タイプシリーズ p:first-of-type /*同じレベルの最初の <p>*/ p:nth-of-type(n) /*同じレベルのn番目の<p>*/ p:nth-last-of-type(n) /*同じレベル内の最後のn番目の<p>*/ p:last-of-type /*同じレベル内の最後の <p>*/ p:only-of-type /*同じレベルの唯一のもの<p>*/ 例: p:最初のタイプ{色:赤} <本文> <h1></h1> <p></p> <!--選択--> <p></p> <div> <h2></h2> <p></p> <!--選択--> <p></p> </div> </本文> 同じレベルの最初の <p> である限り。 10. 子供シリーズ p:first-child /* <p> と一致します。<p> は親要素の最初の子要素である必要があります */ p:nth-child(n) /*<p>に一致します。<p>は親要素のn番目の子要素である必要があります*/ p:nth-last-child(n) /*親要素のn番目最後の子要素である<p>に一致します*/ p:last-child /*親要素の最後の子要素である <p> と一致します*/ p:only-child /* <p> と一致します。<p> は親要素の唯一の子要素である必要があります */ 例: p:最初の子{色:赤} <本文> <h1></h1> <p></p> <p></p> <div> <p></p> <!--選択--> <p></p> </div> </本文> 11. 最初の単語、最初の行 p:first-letter /*<p>要素の最初の文字*/ 12. :前 :後 p:before{ /*<p>の前にコンテンツを追加*/ 内容:「こんにちは」 } p:after{ /*<p>の後にコンテンツを追加*/ 内容:「さようなら」 } 追加した内容はデフォルトではインライン要素ですが、<p>要素と同じ行に表示されます(追加した内容を<p>要素の一番前または一番後ろに置くのと同じです)。追加されるのは実要素ではないので、疑似要素と呼ばれます。 ブロック レベルに設定することができ、追加されたコンテンツはブロック レベル要素として表示されます。 p:before{ /*<p>の前にコンテンツを追加*/ 内容:"こんにちは"; 表示: ブロック } p:after{ /*<p>の後にコンテンツを追加*/ 内容:"さようなら"; 表示: ブロック } 追加された要素のスタイルを設定できます。 p:前{ content:"hello "; /* 属性はセミコロンで区切られます*/ display: block; /*追加されたコンテンツのスタイルを設定する*/ フォントサイズ: 20px; 色:赤 } 写真を追加: p:前{ content:""; /* content 属性は必須であり、テキストが追加されていない場合は空の文字列に設定できます*/ display: block; /*ブロックレベルに設定し、幅と高さを設定する必要があります。その後、追加された背景画像を表示できます*/ 幅: 100ピクセル; 高さ: 100ピクセル 背景画像: url("1.png"); } クリアフロート: p:前{ コンテンツ:""; クリア: 両方 } 疑似要素では、単一または二重のコロンを使用できます。 :before <=> ::before :after <=> ::after コロンの付いたセレクターには、first-letter、:first-line、:before、:after の 4 つの疑似要素があり、残りは疑似クラスです。 セレクターは組み合わせて使用できます。 同様に (内部スタイルと外部スタイルの両方)、ID セレクターの優先度が最も高く、クラス セレクターが 2 番目、属性セレクターが最も低くなります。 (ポジショニングが具体的かつ詳細であるほど、優先度が高くなります) 同じ CSS 属性が使用されている場合、その行内では優先度が最も高く、内部と外部の優先度は同じです。<head> 内の <link /> と <style> の順序を見ると、後者の方が優先度が高くなります (後でレンダリングされたスタイルが前のスタイルを上書きします)。 要約する 以上が CSS スタイルの使用方法とセレクターの紹介です。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: IdeaでMySQLデータベースに接続すると中国語の文字化けが発生する問題
ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...
チームは新しいフレームを交換しました。すべての新しいビジネスでは、新しいフレームワークと新しいデータ...
MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...
1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...
<br />HTMLノードの追加と削除の簡単な例<input type="...
1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...
データベースコマンド仕様すべてのデータベース オブジェクト名には小文字を使用し、アンダースコアで区切...
1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...
目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...
<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...
Google Reader で、JunChen が書いた「フロー理論と設計」というタイトルの投稿を見...
目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...
マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...
序文MySQL マスター/スレーブ レプリケーションは、アプリケーションの高パフォーマンスと高可用性...
序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...