検索

第2章 CSSの適用方法

Dec 19, 2016 pm 04:01 PM

C SSSSの宣言方法

この章からCSSの応用について紹介していきます。もちろん、最初に紹介するのはスタイルシート(スタイルシート)の作成方法であり、その宣言方法やWebページへの適用方法も含めて最後にCSSの特徴についてもいくつか説明します。大まかに言えば、CSS を宣言するには 3 つの方法があります。 1. 基本宣言: CSS を宣言する最も一般的な方法。要素{プロパティ:値} 中国語で表現すると要素(ラベル){プロパティ(プロパティ)名:設定値} 例:H3{COLOR:BLUE}の文の集合です。 2. 集団宣言: 1 つまたは複数のコンポーネント (ラベル) のスタイル ルール (プロパティ) のグループまたは配列 (ルールの各グループ間はセミコロンで区切られます) を同時に宣言します (各コンポーネント (ラベル) の間はカンマで区切られます)。コンポーネント(ラベル) {プロパティ(プロパティ)名1:設定値1; プロパティ(プロパティ)名2:設定値2;... } または コンポーネントA(ラベルA)、コンポーネントB(ラベルB)、コンポーネントC(ラベル) C), ... {プロパティ (属性) 名 1: 設定値 1; プロパティ (属性) 名 2: 設定値 2;...} 例: TD {COLOR: BLUE;font-size: 9pt;} またはTD,P,DIV {COLOR: BLUE;font-size: 9pt; } 3. サブ項目の宣言: 多くのスタイル ルールをグループ化し、個別に宣言します。コンポーネント A (ラベル A) {プロパティ (プロパティ) 名 1: 設定値 1; プロパティ (プロパティ) 名 2: 設定値 2; }コンポーネント A (ラベル A) {プロパティ (プロパティ) 名 3: 設定値 3 ;属性) 名前 4: 設定値 4; } 例: TD { COLOR: BLUE; font-size: 9pt}TD { font-family: "standard italic style";宣言されたプロパティが異なるため、互いに競合することはありません。誤って同じプロパティを 2 回宣言した場合、後で宣言した設定のみが有効になります。ちなみに、文の形式が正しければ、大文字小文字、空白、改行に関係なく、自分の習慣に従って記述できます。

CSS 応募方法

次に紹介するのは、作成したスタイルシートをWebページに適用する基本的な4つの方法です。 1. STYLE 属性を使用します。STYLE 属性を個々のコンポーネント タグに直接追加します。 この使い方の利点は、タグごとに柔軟にスタイルを適用できることですが、欠点は文書全体の「統一性」がないことです。 。 2. STYLE タグを使用します。 タグにスタイル ルールを記述します。 例: 通常は 構造は Web ページの

セクションに記述されます。この使用法の利点は、宣言されたコンポーネントがある限り、スタイル ルールが適用されることです。欠点は、個々のコンポーネントに柔軟性がないことです。 3. LINK タグを使用します。スタイル ルールを .css スタイル ファイルに記述し、それを タグで導入します。スタイル ルールを example.css ファイルとして保存すると、スタイル内のすべてを適用するには、Web ページに を追加するだけで済みます。ファイルのスタイルが策定されました。 LINK タグは通常、Web ページの /HEAD> セクションに記述されます。この使用法の利点は、同じスタイル ルールが適用される複数のドキュメントを同じスタイル ファイルに割り当てることができることです。欠点は、個々のファイルやコンポーネントに柔軟性がないことです。 4. @import を使用して導入します。これは LINK の使用法とよく似ていますが、 に配置する必要があります。 例: 文末のセミコロンに注意してください。 lineは絶対に欠かせない!覚えて、覚えて!もちろん、LINK を使用する場合でも @import を使用する場合でも、他の人の既存のスタイル シートを直接適用することは可能です。ただし、インターネットのマナーとして、このようなことを下手に行う場合は、少なくとも相手に通知し、同意を得るべきです。 4 つの適用方法にはそれぞれ長所と短所があり、矛盾することなく総合的に使用できます。ただし、同じプロパティが繰り返し宣言されている場合は、アプリケーションの優先順位の問題を考慮する必要があります。一般に、優先順位は次の原則に従います。 Web デザイナーのスタイル設定 > ユーザーのスタイル設定 > ブラウザのスタイル設定 STYLE 属性のスタイル設定 > STYLE タグのスタイル設定 > チェーン リンクされたスタイル設定の後に宣言されたスタイル設定 > いわゆる「前のスタイル設定の「リンクされたスタイル設定」は、上記の LINK タグと @import の 2 つの適用方法を指します。ノットはスタイル設定に含まれます。上記は、CSS の最も基本的な宣言と適用方法の紹介です。これらの基本的な理解と方法があれば、すぐにスタイル シートの作成を開始できます。上記の基本的な申告・申請方法以外にも申告・申請方法がありますので、次の章で紹介します。

上記は第 2 章 CSS 適用方法の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。


声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
cohost.orgの失われたCSSトリックcohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee'の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG'の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind'の@Apply機能は、響きよりも優れていますTailwind'の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind'の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター