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 をインストールする詳細なチュートリアル

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

推薦する

nginxプロセスロックの実装の詳細な説明

目次1. nginxプロセスロックの役割2. エントリーレベルのロックの使用3. nginxプロセス...

MySQL の sql_mode モード例の詳細な説明

この記事では、MySQL の sql_mode モードについて例を挙げて説明します。ご参考までに、詳...

検証コード干渉を実装する js (動的)

この記事の例では、検証コードの動的干渉を実装するためのjsの具体的なコードを共有しています。具体的な...

16進カラーコード(完全版)

赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...

Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解

サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...

MySQL での挿入効率のいくつかの例の比較

序文最近、仕事の都合で、約 1000w の大量のデータを MySQL に挿入する必要があり、時間がか...

Node の SMS API で検証コード ログインを実装するためのサンプル コード

1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...

jsはシンプルなショッピングカートモジュールを実装します

この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...

JavaScript デザインパターン プロキシパターンの学習

目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...

MySQLにおけるSQLの実行順序についてのちょっとした質問

今日、仕事中に左結合に関するSQLの問題に遭遇しました。後で解決しましたが、この問題を通じてSQLの...

Linux サーバーが処理できる接続数をご存知ですか?

序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...

JS オブジェクト コンストラクター Object.freeze

目次概要例1) オブジェクトをフリーズする2) 配列をフリーズする3) 浅い凍結4) ディープフリー...

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

この記事では、MySQL 5.7.20のインストールと設定方法を参考までに紹介します。具体的な内容は...

CSSの絶対と相対について

冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...

Linux seqコマンドの使い方

1. コマンドの紹介seq (シーケンス) コマンドは、指定されたステップ サイズに従って、開始番号...