CSS インライン スタイル、埋め込みスタイル、外部参照スタイルを使用する 3 つの方法

CSS インライン スタイル、埋め込みスタイル、外部参照スタイルを使用する 3 つの方法

3 つの方法を使用する簡単な例は次のとおりです。

インラインスタイル:

<!doctypehtml>
<html>
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>CSS インライン スタイル</title>
</head>
<本文>
<div style="width:100px;height:100px;background:red;"></div>>
 
</本文>
</html>

インラインスタイル:

<!!doctype html>
<html>
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>CSS 埋め込みスタイル</title>
</head>
<本文>
<スタイル タイプ="text/css">
#div{幅:100px;高さ:100px;背景:赤;}
</スタイル>
<div id="div"></div>>
 
</本文>
</html>

外部タイプ:

<!doctypehtml>
<html>
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>CSS 埋め込みスタイル</title>
 <link rel="スタイルシート" type="text/css" href="ccss.css">
</head>
<本文>
<div id="div"></div>>
 
</本文>
</html>

cssファイル

#div{幅:100px;高さ:100px;背景:赤;}

要するに:

インライン スタイル: コードは特定の Web ページ上の要素に記述されます。例: <div style="color:#f00"></div>

インライン: </head> の前に記述します。例: <style type="text/css">.div{color:#F00}</style>

外部スタイル: 外部 CSS ファイルを参照します。例: <link href="css.css" type="text/css" rel="stylesheet" />

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  VirtualBox に CentOS、JDK、Hadoop をインストールする詳細なチュートリアル

>>:  初心者でもウェブサイトアイコンを作成する手順をすぐに学べます

推薦する

Webpackプラグインを書いてnpmに公開するための80行のコード

1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...

Nginx の break と last の違いの詳細な分析

まずは違いについて話しましょう最後に、書き換えられたルールは、次の場所と一致させるために書き換えられ...

APP (IOS、Android) を呼び出すモバイル H5 の記述例

iOS 1. URLスキームこのソリューションは基本的に、WeChat、QQ 組み込みブラウザ、QQ...

Ubuntu 16.04 にソースコードから Mininet をインストールする

ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...

Apache Web サーバーを使用して 2 つ以上のサイトを構成する方法

人気があり強力な Apache Web サーバーで 2 つ以上のサイトをホストする方法。前回の記事で...

スケーラブルな列の完全な例を実現するための Ant 設計 Vue テーブル

ant-design-vue テーブルのスケーラブルな列の問題に対する完璧なソリューション。固定列と...

MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル (Windows 版)

1. はじめにプロジェクトではMySQLを使用しています。インターネット上の例を参考にインストール...

Linuxはscpコマンドを使用してファイルをローカルコンピュータにコピーし、ローカルファイルをリモートサーバーにコピーします。

以下のように表示されます。リモート サーバーのファイルをローカルにコピーします。 scp -r -P...

HTML フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...

MySqlデータベースをバックアップするいくつかの方法

mysqldump ツールのバックアップデータベース全体をバックアップする $> mysqld...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

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

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

時点に基づくMySQLクイックリカバリソリューション

なぜこのような記事を書いたかというと、数日前の夜、仕事が終わろうとしていたときに、業務側で突然、テー...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...

Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...