CSSスタイルとセレクターの使い方

CSSスタイルとセレクターの使い方

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>要素の最初の文字*/
p:first-line /*<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データベースに接続すると中国語の文字化けが発生する問題

>>:  HTML いくつかの特別な分割線効果

推薦する

JSはBaidu Newsナビゲーションバーの効果を実現

この記事では、Baidu News Navigation Barの効果を実現するための具体的なJSコ...

Ubuntu 18.04.4 に MySQL をインストールするプロセスの詳細な説明

Ubuntu 18.04.4 に MySQL をインストールするプロセスを見てみましょう。内容は次の...

offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft などのプロパティの図。

注 1: 上の画像の背景全体がこの Web ページのフルサイズであり、中央の小さなボックスがブラウザ...

SQL 最適化チュートリアル: IN クエリと RANGE クエリ

序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...

CentOS 8.1 で LEMP (Linux+Nginx+MySQL+PHP) 環境を構築する (チュートリアルの詳細)

目次ステップ1: CentOS 8でパッケージを更新するステップ2: CentOS 8にNginx ...

Linux仮想マシンを作成し、仮想マシンネットワークを設定する方法に関するVMwareの詳細なチュートリアル

VMware で Linux 仮想マシンを作成し、VMware と仮想マシンのネットワークを設定する...

虫眼鏡コンポーネントのネイティブ js 実装

この記事の例では、参考までに虫眼鏡コンポーネントを開発するためのjsの具体的なコードを共有しています...

複数の画像を切り替えるJavaScript

この記事では、複数の画像を切り替えるJavaScriptの具体的なコードを参考までに紹介します。具体...

nginx を使用して静的リソース サーバーを構築する方法

Windows を例にとると、Linux も実際には同じです。静的リソースサーバーを構築するパソコン...

nginx と Tencent Cloud の無料証明書を使用して https を作成する方法

httpsを取得する方法を勉強しています。最近、Tencent Cloud が提供する無料の SSL...

JavaScript の組み込みオブジェクト 数学と文字列の詳細な説明

目次数学オブジェクト共通プロパティ一般的な方法Math.random()文字列メソッド長さプロパティ...

MAC での MYSQL5.7.17 接続失敗の問題と解決策

MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...

ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか

まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...

MySQL マルチテーブル結合クエリの詳細な説明

目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...

CSSのclip-pathプロパティを使用して不規則なグラフィックを表示する

clip-path CSS プロパティはクリッピングを使用して要素の表示可能領域を作成します。領域内...