ホームページ > 記事 > ウェブフロントエンド > HTML 内で CSS を参照する方法
HTML 内で CSS を参照する方法
- php中世界最好的语言オリジナル
- 2017-11-21 17:24:332814ブラウズ
CSS スタイル シートを参照するには、div 内で CSS スタイルを直接使用して div+css Web ページを作成する方法、HTML の組み込みスタイルを使用する方法、@import を使用して外部 CSS ファイルを参照する方法、およびリンクを使用して外部 CSS ファイルを参照する方法があります。これらはすべて CSS ファイルです。メリットとデメリットがあるため、今日はこれら 4 つの方法の違いについて詳しく説明します。
CSS スタイル シートを参照するために別の方法を使用しても、最終的には同じ効果が得られますが、CSS ファイルを適用するために別の方法を使用すると、SEO と Web ページを開く速度と効率に影響します。次に、HTML 内で CSS を参照する方法の例を 1 つずつ説明します
1.
<style type="text/css">
<!--
.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/
-->
</style><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css引用方法实例</title> <style type="text/css"> <!-- @import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/ --> </style> </head> <body> <div class="ceshi">我是测试内容</div> </body> </html>Wcss.css ファイル Code.ceshi {font-size:14px; color:#FF0000;}
このメソッドの使用と組み込みの参照 CSS スタイル シート メソッドの使用には類似点があることがわかります。どちらも、HTML 外部 CSS の先頭にある style タグを使用して参照する必要があります。
このメソッドはstyleタグを必要としませんが、スタイルをリンクすることで外部スタイルを直接参照します
外部cssスタイルメソッドを参照するには、一般的にリンクを使用することをお勧めします。
リンクを使用して外部 CSS を参照する利点
1. この方法を使用して外部 CSS ファイルを参照すると、検索エンジンのスパイダーがクロールするため、CSS スタイルを直接追加するよりも HTML ページのソース コードが大幅に小さくなります。場合によっては CSS ファイルがクロールされないため、HTML ソース コードが非常に小さくなり、スパイダーのクロールが速くなり、処理が少なくなり、この Web ページの重みが増加し、ランキングに有利になります。
2. HTML を保存すると、ページをロードして 2 行で同時にページを開くのと同じように、Web ページをダウンロードするときにブラウザーがスレッドを分離できるため、Web ページを非常に速く開くことができます。 (ユーザーがこの Web ページを閲覧すると、HTML ソース コードと CSS ファイルが同時にダウンロードされるため、高速になります)
3. Web ページのスタイルを変更するのに便利です。変更するには、CSS スタイルを変更するだけです。 Web ページのアート スタイル。このメソッドを Web サイト プロジェクトで使用すると、サイト全体で共通の CSS スタイルが使用されるため、サイト全体のスタイルを簡単に変更できます。
CSS スタイル シートを引用する 4 つの方法は、必要な友人が保存できるようにするためです。このサイトの他の更新にも引き続き注目してください。 関連する推奨事項:以上がHTML 内で CSS を参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。