CSS ファイルをインポートする 4 つの方法 (インライン、インライン、外部、インポート) の詳細な説明

CSS ファイルをインポートする 4 つの方法 (インライン、インライン、外部、インポート) の詳細な説明

CSS インポート方法 - インライン

スタイルタグ属性を通じて、CSSのキーと値のペアがタグに直接書き込まれます。

<p style="幅: 100px;高さ: 100px;背景: 赤;"></p>
 <!--注: このコードは、幅と高さが 100 ピクセルで背景が赤いコンテナを表します-->

CSS インポート方法 - 埋め込み (embedded)

スタイル タグを使用して、CSS 属性名と属性値を HTML ページに導入します。通常、スタイル タグは head タグ内に配置されます。 CSS スタイルをヘッド タグに配置する必要があるのはなぜでしょうか。コードは上から下に実行されるためです。構造が最初に読み込まれると、ユーザーには美化されていない無味乾燥なコンテンツが表示されます。スタイルを最初に読み込み、次に構造を読み込むのは、子供が服を着て生まれてくるようなものです。

 <ヘッド>
     <スタイル タイプ="text/css">
        p{
             幅: 100px;高さ: 100px;背景: 赤;
         }
     </スタイル>
 </head>

上記のコードも、幅と高さが 100 ピクセルで背景が赤いコンテナーを記述していますが、埋め込み方式で導入されています。

チェーン以外のCSSインポート方法

リンクタグを通じてHTMLページに独立したCSSファイルを導入する

<link rel="スタイルシート" type="text/css" href="./style.css">

rel="stylesheet" は現在のページと href で指定されたドキュメントの関係を記述します。つまり、href でリンクされたドキュメントは新しいスタイル テーブルであり、type="text/css" は MINME タイプ (CSS ドキュメント) を指定します。 href="./style.css"はリンクされた文書の場所を指定します

CSSインポート方法

<スタイル タイプ="text/css">
     @import url("style.css");
</スタイル>

@import url を通じて別の CSS ファイルを導入します。url("style.css") はリンクされたドキュメントの場所を指定します。

これで、CSS ファイルのインポート方法 (インライン、インライン、外部、インポート) に関する記事は終了です。CSS インポート方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  DockerがMySQL構成実装プロセスを開始

>>:  UIエンジニアのキャリアについての私たちの考え

推薦する

Vue が Bibibili のホームページを模倣する際の問題

エンジニアリング構造プロジェクトは2つの部分に分かれています。bilibili-apiはAPIインタ...

検索ナビゲーションバー付きの CSS サンプルコード

この記事では、CSS を使用して検索機能付きのナビゲーション バーを作成する方法を説明します。以下の...

IE 8/Chrome/Firefox と互換性のあるコメント返信ポップアップマスク効果実装アイデア

平日はニュースに注目して、テンセントをよく閲覧しています。しかし、コメントへの返信はほとんど見られま...

VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス

目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...

JavaScriptはクリックトグル機能を実装します

この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...

MySQLクエリで大文字と小文字を区別しない問題を解決する方法

質問最近、SSH フレームワークを使用して実用的なプロジェクトを完了していたときに、長い間悩まされて...

dockerを使用してGrafana+Prometheus構成をデプロイする

docker-compose-monitor.yml バージョン: '2' ネットワ...

vue2 vue3 での Echarts の詳細な使用方法

目次1. インストール2. vue2でEchartsを使用するmain.jsファイル内コンテナが与え...

CSSの省略記号とパディングを組み合わせた場合の問題の詳細な説明

CSS によるテキストの切り捨てテキストを自動的に切り捨てるスタイル コードを実装するには、次のコー...

Linux で複数の mysql5.7.19 (tar.gz) ファイルをインストールする方法

LinuxでのMySQL-5.7.19バージョンの初心者向けの最初のインストールについては、前の記事...

Mac に Windows サービスを備えた仮想マシンをインストールする方法

1. 仮想マシンをダウンロードする公式ダウンロードウェブサイト: https://www.vmwar...

win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する

Ubuntu 18のインストール中に、USBディスクからUbuntuのインストールを開始すると、mm...

Linuxで静的ネットワーク接続を構成する方法

Linux システムのネットワーク接続を構成するのは難しい場合があります。幸いなことに、多くの新しい...

Win10 構成 Tomcat 環境変数チュートリアル図

設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...

Vue3+スクリプト設定+ts+Vite+Volarプロジェクト

目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...