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

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

推薦する

JSにおけるnewの原理と実装について詳しく話しましょう

目次意味コンストラクタ本体は異なる戻り値なし戻りオブジェクト非オブジェクトを返すプロパティバインディ...

jsはタイトルと説明のキーワードを検出し、見つかった場合は置換するか他のページにジャンプします。

キーワード 一般タイトルには、クラック、キー、シリアル番号、キージェネレータなどの単語を含めることは...

Linux で MySQL 8.0 サービスを完全に削除する方法

この記事を読む前に、Linuxコマンド、特にcentos7.3環境でyumを使用してインストールされ...

Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル

1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...

Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...

MySQLデータベースで列を追加、削除、変更する方法

この記事では、例を使用して、MySQL データベースの列を追加、削除、および変更する方法について説明...

CSS スティッキーレイアウトを使用してヘッダーを上部に配置する方法

適用シナリオ:新しい要件の 1 つはアンケート調査を行うことですが、必然的に多くの質問が含まれ、1 ...

ZabbixはSNMPに基づいてLinuxホストを監視します

序文: Linux ホストは、エージェント プログラムをインストールする場合でも、SNMP を使用す...

ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...

Nginx 仮想ホストを構成する 3 つの方法 (ドメイン名に基づく)

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮...

Vue3とTypeScriptを組み合わせたプロジェクト開発の実践の概要

目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...

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

この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

動的な背景グラデーション効果を実現するCSS3

CSS3 を学ぶということは、新しい機能と基本的な理論に慣れることを意味します。この記事では、ケー...

img 画像タグに alt 属性を付与する必要がありますか?

img 画像タグに alt 属性を追加しますか?画像 img タグの alt 属性を見落とすことはよ...