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

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

推薦する

CSS スタッキングと Z インデックスのサンプルコード

カスケードとカスケードレベルHTML 要素は 3 次元の概念です。水平方向と垂直方向に加えて、「Z ...

MySQL で '%' を含むフィールドをクエリする方法の詳細な説明 (ESCAPE の使用法)

SQLのlike文では、例えば SELECT * FROM user WHERE username...

Vue CLI のモードと環境変数の詳細な説明

序文実際のプロジェクトの開発では、通常、プロジェクト開発フェーズ、テストフェーズ、最終オンラインフェ...

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...

CSS の位​​置属性 (absolute|relative|static|fixed) の概要と応用

まず、CSS3 Api の position 属性の定義を見てみましょう。 static: 特別な配...

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...

MySql はコミットする必要がありますか?

MySQL が挿入などの操作を実行するときにコミットする必要があるかどうかは、ストレージ エンジン...

WeChatアプレットを少なく使う方法(最適な方法)

序文私は less/sass を書くことに慣れていますが、小さなプログラムを開発するときには、まだ ...

Linux xargsコマンドの使用

1. 機能: xargs は、stdin 内のスペースまたは改行で区切られたデータをスペースで区切ら...

CentOS 8にJenkinsをインストールする方法

CentOS 8 に Jenkins をインストールするには、root アカウントまたは sudo ...

WeChatミニプログラムの開発をスピードアップするためのヒント

1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...

小さなページングデザイン

ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...

CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード

今日は、CSS 3.0 で実装されたネオン ボタン アニメーション効果を紹介します。効果は次のとおり...

DockerコンテナのIPアドレスを表示する方法

私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...