HTML 内で CSS を参照する方法-CSSチュートリアル-php.cn

HTML 内で CSS を参照する方法

php中世界最好的语言

リリース： 2017-11-21 17:24:33

オリジナル

2864 人が閲覧しました

CSS スタイルシートを参照するには、div 内で CSS スタイルを直接使用して div+css Web ページを作成する方法、HTML の組み込みスタイルを使用する方法、@import を使用して外部 CSS ファイルを参照する方法、およびリンクを使用して外部 CSS ファイルを参照する方法があります。これらはすべて CSS ファイルです。メリットとデメリットがあるため、今日はこれら 4 つの方法の違いについて詳しく説明します。

CSS スタイルシートを参照するために別の方法を使用しても、最終的には同じ効果が得られますが、CSS ファイルを適用するために別の方法を使用すると、SEO と Web ページを開く速度と効率に影響します。次に、HTML 内で CSS を参照する方法の例を 1 つずつ説明します

<style type="text/css"> 
<!-- 
.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/ 
--> 
</style>

ログイン後にコピー

3. @import を使用して外部 CSS ファイルを参照します。メソッド

<!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 タグを使用して参照する必要があります。

4. リンクを使用して外部 CSS ファイルを呼び出します

外部 wcss を呼び出すにはを配置します。 cssファイルを使用してcssファイルを参照するhtmlを実装します

このメソッドは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 つの方法は、必要な友人が保存できるようにするためです。このサイトの他の更新にも引き続き注目してください。