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 いくつかの特別な分割線効果

推薦する

Windows Server 2012 でファイル サーバーを構築するための詳細な手順

ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...

MySQL ベースのシーケンス実装方法

チームは新しいフレームを交換しました。すべての新しいビジネスでは、新しいフレームワークと新しいデータ...

MySQL インデックスの知識の要約

MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...

MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...

HTMLノードの追加と削除の簡単な例

<br />HTMLノードの追加と削除の簡単な例<input type="...

Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...

MySQLの高性能最適化スキルの概要

データベースコマンド仕様すべてのデータベース オブジェクト名には小文字を使用し、アンダースコアで区切...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

Vue で eslint 検出をオフにする方法 (複数の方法)

目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...

ウェブデザインにおける装飾要素の応用の概要

<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...

ウェブサイトのユーザーエクスペリエンスデザイン(UE)

Google Reader で、JunChen が書いた「フロー理論と設計」というタイトルの投稿を見...

JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?

目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...

マウスの尾行効果を実現する JavaScript

マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...

Docker ベースの MySQL マスタースレーブ レプリケーションを実装する方法

序文MySQL マスター/スレーブ レプリケーションは、アプリケーションの高パフォーマンスと高可用性...

MySQL のインデックスにおける NULL の影響についての詳細な説明

序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...