CSS は、Cascading Style Sheets の略です。 HTML 要素のスタイルを設定するために使用されます。 HTML は、Web ページにコンテンツを作成または追加するために使用されます。その後、開発者は CSS を使用して HTML コンテンツを特定のスタイルでレンダリングし、見栄えを良くします。
CSS ルール セットには主に 2 つの部分が含まれています。 1 つは CSS セレクターで、もう 1 つは宣言ブロックです。
CSS セレクターは HTML 要素の選択に使用され、宣言ブロックには HTML 要素に適用されるキーと値の形式の CSS プロパティが含まれています。
＃＃＃文法＃＃＃ユーザーは、CSS ルール セットを使用して、次の構文に従って HTML 要素のスタイルを設定できます。
リーリー上記の構文では、「selector」は HTML 要素のクラス名、ID などであり、HTML 要素を選択するために使用されます。宣言ブロックには、HTML 要素に適用する複数の CSS プロパティとその値が含まれています。
例 1 (CSS クラス名セレクター)
以下の例では、CSS ルールセットを定義するときにクラス名を CSS セレクターとして使用します。以下のコードには、異なるクラス名を持つ 3 つの div 要素があります。各 div 要素をクラス名で選択し、異なる CSS スタイルを適用しました。これはユーザーが出力で確認できます。
リーリー例 2 (CSS ID セレクター)
以下の例では、CSS ルール セットを定義するときに、HTML 要素の ID を CSS セレクターとして使用します。 HTML では、2 つの要素に同じ ID を含めることはできません。
ここでは、「card」という ID を持つ div 要素があり、これには「content1」と「content2」に等しい ID を持つ他の 2 つの div 要素が含まれています。すべての HTML 要素のスタイルは、ユーザーが出力で確認できる ID でアクセスすることによって設定されます。
リーリー例 3 (CSS 複数セレクター)
以下の例では、複数の CSS セレクターを使用して、同じ CSS スタイルを複数の HTML 要素に一度に適用します。
異なるクラス名と ID を持つ 3 つの
要素があります。 CSS では、「.text1、.text2、#para1」CSS セレクターを使用して、宣言ブロックに追加されたのと同じスタイルをすべての HTML 要素に適用します。
さらに、異なる要素に異なるスタイルを適用するために、クラス名と ID CSS セレクターを使用して 3 つの HTML 要素すべてを個別に選択しました。
リーリー例 4 (CSS ネストされた要素セレクター)
次の例では、CSS のネストされたセレクターを紹介します。 HTML では、div 要素には、クラス名「link」を持つ複数の
要素が含まれます。出力では、CSS スタイルが div 要素の子孫であるすべての
HTML 要素に適用されていますが、div 要素の外側の要素には適用されていないことがわかります。リーリー 例 5 (CSS 疑似セレクター)
この例では、CSS 疑似セレクターの使用を示します。 CSS 擬似セレクターにはさまざまな種類があり、ここではそのうちのいくつかを使用します。
ここでは、「element」クラス名を持つ 4 つの子要素を含む「container」div 要素があります。ユーザーが div 要素の上にマウスを移動したときに、「:hover」疑似セレクターを使用して、「container」div 要素の背景色を変更します。
その後、「:first-child」、「:last-child」、「:nth-child()」CSS セレクターと「.element」セレクターを使用して、最初の子要素と最後の子要素を選択します。それぞれ要素要素と n 番目の子です。
出力では、最初の子、最後の子、2 番目の子に異なる CSS スタイルが適用されていることがわかります。
リーリーユーザーは、このチュートリアルでさまざまな CSS ルール セットの使用方法を学びました。クラス名と ID をセレクターとして使用します。さらに、複数の CSS セレクターとネストされた CSS セレクターの使用について学びました。前の例では、CSS ルールセットの疑似セレクターを使用する方法を学びました。
以上がCSS ルールセットは何に使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
マークダウンに埋め込まれたコンテンツApr 13, 2025 am 09:12 AMMarkdownはHTMLをサポートしているため、たとえばYouTubeビデオを埋め込む必要がある場合は、埋め込みコードをコピーして貼り付けて、Markdownドキュメントにドロップするだけです。
何が私たちが読んでいるのか、2019年Apr 13, 2025 am 09:10 AMそうです、だから、（そう）インターネット上で読むべき多くのこと。実際、非常に多くのことで、すべてに追いつくのは難しいです。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
Dreamweaver Mac版
ビジュアル Web 開発ツール
