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

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

推薦する

Vue でデータコレクターを設計する

目次シナリオ中核問題ステータス監視状態監視の利点国家監視の欠点復興実行のアイデア依存関係の収集要約す...

HTML テーブルタグチュートリアル (12): 境界線スタイル属性 FRAME

FRAME プロパティを使用して、表の境界線のスタイル タイプを制御します。基本的な構文<T...

CSS で要素を中央揃えにする N 通りの方法

目次序文インライン要素の中央揃えテキストを垂直に中央揃え要素を水平方向に中央揃えにするブロックレベル...

Vueにおける混合継承の詳細な説明

目次混合継承の影響: 1. 継承Vue.extend メソッド​プロパティを拡張する2. ミックスイ...

CentOS 7.4 に MySQL 5.7 を手動でインストールする方法

MySQL データベースは、特に JAVA プログラマーの間で広く使用されています。クラウド データ...

Vue2.x - アンチシェイクとスロットリングの使用例

目次ユーティリティ: vue での使用:説明する:画像安定化:スロットル:ユーティリティ: // 手...

XHTML の一般的な構造タグ

構造本文、見出し、HTML、タイトル文章abbr、頭字語、アドレス、引用ブロック、br、引用、コード...

vue3.0 sfcのセットアップの変更について簡単に説明します。

目次序文標準的なSFCの書き方スクリプト設定可変露出部品の取り付け小道具カスタムイベント要約する序文...

Spring Cloud での Docker デプロイメントに jib を使用する詳細な手順

ジブの紹介Jib は Google が開発した、Java アプリケーションの Docker および ...

nginx で http でアクセスする Web サイトを https に変更する方法

目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....

MySQL 5.7.17 のインストールと設定のグラフィックチュートリアル

ブロガーはこう述べています。「私は『史上最も簡単な MySQL チュートリアル』という一連のブログ記...

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

ミニプログラムはミニプログラムクラウドを使用してWeChatの支払い機能を実装します

目次1. WeChat Payを開く1.1 アフィリエイト加盟店番号1.2 加盟店番号を追加する1....

MySQL 集計統計データの低速クエリの最適化

前面に書かれた注文テーブル、アクセス記録テーブル、商品テーブルなど、日常生活でデータベースを操作する...

XHTML CSSを使用して正式なブログを書く

ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...