検索

CSS実践チュートリアル(1)

Dec 17, 2016 am 11:37 AM
css

CSS (Cascading Stylesheets) は Web ページを作成するための新しいテクノロジーで、現在ではほとんどのブラウザーでサポートされており、Web デザインに欠かせないツールの 1 つとなっています。 CSS を使用すると、Web ページのフォーマット コードが簡素化され、ダウンロードと表示速度が向上し、アップロードする必要があるコードの量が削減され、繰り返し作業の負荷が大幅に軽減されます。特に何百もの Web ページがあるサイトに直面している場合、CSS は私たちへの神からの贈り物のようなものです。 ^_^

はじめに

CSS (Cascading Stylesheets) は、Web ページを作成するための新しいテクノロジーであり、現在ほとんどのブラウザーでサポートされており、Web デザインに不可欠なツールの 1 つとなっています。

W3C (The World Wide Web Consortium) は、動的 HTML (Dynamic HTML) を 3 つの部分に分割して実装します: スクリプト言語 (JavaScript、Vbscript などを含む)、動的効果をサポートするブラウザー (Internet Explorer、Netscape Navigator などを含む)。 ) と CSS スタイル シート。

1.カスケード スタイル シートの特徴

これまでの Web ページにはダイナミクスが欠けていたことは言うまでもなく、Web コンテンツのレイアウトには多くの困難があり、専門家や特に忍耐強い人でなければ、作成するのは困難です。あなたのアイデアと創造性に従ってWebページに情報を表示します。 HTML 言語の本質を習得した人でも、この情報のレイアウトを習得するまでに多くのテストに合格する必要があります。そのプロセスは非常に長くて苦痛です。インターネットを発展させ、より多くの人がこのカラフルな世界にできるだけ早く足を踏み入れられるようにするために、新しい HTML 補助ツールが登場しようとしています。

スタイル シートは、この要求のもとに誕生しました。最初に行う必要があるのは、Web ページ上に要素を正確に配置し、Web デザイナーがディレクターのようにテキストと画像で構成されるアクターを簡単に制御できるようにすることです。ウェブサイトのステージ上のスクリプトに。

次に、Web ページ上のコンテンツ構造と形式制御を分離します。閲覧者が見たいのは Web ページ上のコンテンツ構造であり、閲覧者がこの情報をよりよく確認できるようにするには、形式制御を使用する必要があります。以前は、Web ページ上で 2 つが交互に配置されていたため、表示や変更が非常に不便でした。現在では、2 つを分離することで、Web デザイナーが非常に容易になります。コンテンツ構造とフォーマット制御が分離されているため、Web ページはコンテンツのみで構成され、すべての Web ページのフォーマット制御は特定の CSS スタイル シート ファイルに向けられます。これは 2 つの側面で利点があります:

まず、Web ページのフォーマット コードが簡素化され、外部スタイル シートもブラウザによってキャッシュに保存されるため、ダウンロードと表示の速度が向上し、コードの数をアップロードします (繰り返したフォーマットは 1 回しか保存されないため)。

2 番目に、Web サイトの形式を保存する CSS スタイル シート ファイルを変更するだけで、サイト全体のスタイルと特性を変更できます。これは、ページ数の多いサイトを変更する場合に特に便利です。 Web ページを 1 つずつ変更する必要がなくなり、何百もの Web ページがあるサイトに直面している場合、CSS はまさに神からの贈り物のようなものです。 ^_^

Ⅱ。カスケード スタイル シートを追加する方法

Web ページにスタイル シートを追加する方法は 4 つあります。

1.最も簡単な方法は、HTML 識別子 (タグ) に直接追加することです:

/tag>

例:

CSS インスタンス

コードの説明:

フォントサイズ 10pt の「CSS インスタンス」を青色で表示します。この方法は使い方が簡単で直感的に表示できますが、このような追加では「コンテンツ構造とフォーマット制御が別々に保存される」というスタイルシートの利点を十分に活用できないため、一般的には使用されていません。

2. HTML ヘッダー情報識別子に追加されました :





スタイルシートの具体的な内容-->





type="text/css" は、CSS をサポートしていないブラウザが CSS コードを除外するのに役立つ MIME タイプを使用することを示します。設定したスタイルシートはソースコードの形で目の前に表示されます。ただし、上記の状況が起こらないようにするには、コメント識別子「」をスタイル シートに追加する必要があります。

3.リンク スタイル シート

も HTML ヘッダー情報識別子 :







*.css は個別に保存されたスタイル シート ファイルであり、
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか?@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか?Apr 18, 2025 am 11:34 AM

先日、この質問がありました。私の最初の考えは、奇妙な質問です!特異性はセレクターに関するものであり、アットレールはセレクターではないので、...無関係ですか?

@mediaと@supportのクエリをネストできますか?@mediaと@supportのクエリをネストできますか?Apr 18, 2025 am 11:32 AM

はい、あなたはできます、そしてそれは本当にどの順序で重要ではありません。 CSSプリプロセッサは必要ありません。通常のCSSで動作します。

クイックガルプキャッシュバストクイックガルプキャッシュバストApr 18, 2025 am 11:23 AM

CSSやJavaScript(および画像とフォントなど)などのアセットにファーアウトキャッシュヘッダーを確実に設定する必要があります。それはブラウザを伝えます

CSSの品質と複雑さを監視するスタックを探してCSSの品質と複雑さを監視するスタックを探してApr 18, 2025 am 11:22 AM

多くの開発者は、CSSコードベースを維持する方法について書いていますが、そのコードベースの品質をどのように測定するかについて多くの人が書いていません。確かに、私たちは持っています

データリストは、値を強制せずに値を提案するためのものですデータリストは、値を強制せずに値を提案するためのものですApr 18, 2025 am 11:08 AM

短い任意のテキストを受け入れるために必要なフォームを持っていたことがありますか?名前などのように。それはまさにそのためのものです。たくさんあります

チューリッヒでのフロント会議チューリッヒでのフロント会議Apr 18, 2025 am 11:03 AM

私は、フロント会議のためにスイスのチューリッヒに向かうことにとても興奮しています(その名前とURLが大好きです!)。私はこれまでスイスに行ったことがないので、興奮しています

CloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますCloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますApr 18, 2025 am 10:58 AM

ソフトウェア開発における私のお気に入りの開発の1つは、サーバーレスの出現です。詳細に行き詰まる傾向がある開発者として

NUXTアプリケーションで動的ルートを作成しますNUXTアプリケーションで動的ルートを作成しますApr 18, 2025 am 10:53 AM

この投稿では、私が構築して展開して展開してネットライフを使用して、着信データの動的ルートを作成する方法を示すeコマースストアのデモを使用します。それはかなりです

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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

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

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。