ホームページ > 記事 > ウェブフロントエンド > CSS スタイルを HTML にインポートする 4 つの方法を共有する
CSS スタイルを HTML にインポートする 4 つの方法を共有する
- yuliaオリジナル
- 2018-09-17 10:46:165239ブラウズ
ページをレイアウトする場合、必然的に CSS と HTML が使用されます。HTML はページの主要なコンテンツであり、CSS はページのパフォーマンスです。平たく言えば、CSS は HTML を装飾するために使用されます。では、HTML に CSS スタイルを実装するにはどうすればよいでしょうか?このとき、CSS ファイルを HTML に導入する必要があります。今日は、CSS を HTML にインポートする方法について説明します。必要に応じて参照してください。
CSS を HTML にインポートするには、インライン スタイル、埋め込みスタイル、外部スタイルという 4 つの方法があります。外部スタイルは、インポート スタイルとリンク スタイルに分かれています。1. インライン スタイル、つまり、CSS スタイルを HTML タグに直接追加し、style とともに追加します。
例: div のフォントを 40 ピクセル、色を赤に設定します。コードは次のとおりです:<div style="font-size: 40px;color: red;">今天星期一</div>レンダリング:
2。つまり、CSS スタイルは < で記述されます。 ;style type=" text/css"> を入力し、
の間に style を配置します。 例: で @import URL を使用します。 例: import を使用して、div のフォントを 40px に、色を黄色に設定します。コードは次のとおりです。<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("css/import.css");
</style>
</head>
<body>
<div>今天星期三</div>
</body>レンダリング:
、つまり、
内にあります。 > ; を追加して、スタイル効果を実現する外部 CSS ファイルを呼び出します。 例: 外部スタイル リンクを使用して、div の色を緑に設定し、フォントを 40 ピクセルに設定します。コードは次のとおりです:<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div>今天星期三</div> </body> </html>
レンダリング:
##概要:
1 . インライン方式は検索が面倒で不便であり、CSS の利点が反映されていないため、お勧めできません。 2. 埋め込みは大きなページには推奨されませんが、スタイルが少ない小さな Web ページには使用できます。
3. これも外部スタイルです。インポート スタイルとリンク スタイルの違いは何ですか?
リンクリンクメソッドを使用すると、ページのメインコンテンツが読み込まれる前に CSS スタイルファイルが読み込まれるため、ユーザーが見る Web ページには最初からスタイル効果が適用されます。インポート方法を使用すると、ページ全体が読み込まれてからCSSスタイルファイルが読み込まれるため、スタイルが表示されず、スタイルを設定した後の効果がフラッシュ後に表示される場合があります。したがって、ユーザー エクスペリエンスの観点から、CSS スタイルを導入するにはリンク スタイルを使用することをお勧めします。
上記では、CSS を HTML にインポートする 4 つの方法を紹介しました。具体的な方法は状況によって異なりますが、最も一般的に使用される方法は、学習中の友人が練習して試してみることです。それはあなたを助けます！
以上がCSS スタイルを HTML にインポートする 4 つの方法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。