ホームページ > 記事 > ウェブフロントエンド > CSS導入方法
HTMLにCSSを導入するには4つの方法があります。そのうち 2 つは CSS コードを HTML ファイルに直接追加するもので、他の 2 つは外部 CSS ファイルを導入するものです。これらの方法とその長所と短所を見てみましょう。
インラインメソッドは、HTML タグの <code><span style="font-size: 16px;">style</span>
属性中添加 CSS。
示例:
<span style="font-size: 16px;"><p style="background: red"></p><br></span>
这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <span style="font-size: 16px;"><p></span>
拥有相同的样式,你不得不重复地为每个 <span style="font-size: 16px;"><p></span>
添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。很显然,内联方式引入 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。
嵌入方式指的是在 HTML 头部中的 <span style="font-size: 16px;"><style></span>
标签下书写 CSS 代码。
示例:
<span style="font-size: 16px;"><head><br> <style><br><br> .content {<br> background: red;<br> }<br><br> </style><br></head><br></span>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。
链接方式指的是使用 HTML 头部的 <span style="font-size: 16px;"><head></span>
标签引入外部的 CSS 文件。
示例:
<span style="font-size: 16px;"><head><br> <link rel="stylesheet" type="text/css" href="style.css"><br></head><br></span>
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例:
<span style="font-size: 16px;"><style><br> @import url(style.css);<br></style><br></span>
链接方式(下面用 link 代替)和导入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用 @import。
link 属于 HTML,通过 <span style="font-size: 16px;"><link></span>
标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;
@import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载;
小结:我们应尽量使用 <span style="font-size: 16px;"><link></span>
style 属性に CSS を直接追加することを指します。
例:
<span style="font-size: 16px;"><p style="background: red"></p><br></span>
<p><p><span style="font-size: 16px;"></span></p>
を必要とする場合に、現在のラベルのスタイルを変更するだけです。同じスタイルの場合、
ごとに同じスタイルを繰り返し追加する必要があります。スタイルを変更したい場合は、すべてのスタイルのコードを変更する必要があります。 。 CSS コードをインラインで導入すると、HTML コードが冗長になり、Web ページの保守が困難になるのは明らかです。
タグの下にCSSコードを記述することを指します。
🎜🎜🎜例: 🎜🎜<span style="font-size: 16px;"><head><br> <style><br><br> .content {<br> background: red;<br> }<br><br> </style><br></head><br></span>🎜🎜埋め込みCSSは、現在のWebページでのみ有効です。 CSS コードは HTML ファイル内にあるため、コードがより集中的になり、テンプレート Web ページを作成する際に通常は有利になります。テンプレート コードを見れば、HTML 構造と CSS スタイルが一目でわかるからです。埋め込み CSS は現在のページでのみ有効であるため、複数のページで同じ CSS コードを導入する必要がある場合、この方法で記述するとコードの冗長性が生じ、メンテナンスに役立ちません。 🎜🎜🎜🎜Linkメソッド🎜🎜🎜🎜Linkメソッドは、HTMLヘッダーで🎜
🎜<head>🎜
🎜タグを使用して外部CSSファイルを導入することを指します。 🎜🎜🎜🎜例: 🎜🎜<span style="font-size: 16px;"><head><br> <link rel="stylesheet" type="text/css" href="style.css"><br></head><br></span>🎜🎜これは CSS を導入する最も一般的で推奨される方法です。このアプローチを使用すると、すべての CSS コードが 1 つの CSS ファイル内にのみ存在するため、保守性が高くなります。また、すべての CSS コードは CSS ファイル内にのみ存在します。CSS ファイルは、今後ページを切り替えるときにのみ導入されます。 🎜🎜🎜🎜インポートメソッド🎜🎜🎜🎜インポートメソッドは、CSSルールを使用して外部CSSファイルを導入することを指します。 🎜🎜🎜🎜例: 🎜🎜
<span style="font-size: 16px;"><style><br> @import url(style.css);<br></style><br></span>🎜🎜リンクメソッドとインポートメソッドを比較してください🎜🎜🎜🎜リンクメソッド(以下のリンクに置き換えられます)とインポートメソッド(以下の@importに置き換えられます)はどちらも外部CSSを導入する方法です2 つのアプローチを比較し、@import が非推奨になった理由を説明しましょう。 🎜🎜
🎜<link>🎜
🎜 タグの href 属性を通じて導入されます。 while @import CSS に属するため、インポート ステートメントは CSS で記述する必要があります。そうしないと、外部ファイルが正しくインポートされないことに注意してください。 🎜🎜@import は CSS2.1 でのみ登場した概念であるため、ブラウザのバージョンが低い場合は、外部スタイル ファイルを正しくインポートできません。🎜🎜🎜🎜🎜🎜リンクは同時にロードされますが、@import によって参照されるファイルはページが再度完全にダウンロードされるまで待機します 🎜🎜🎜概要: 🎜🎜<link>🎜
🎜 タグを使用して外部 CSS ファイルをインポートすることを避けるか、他の 3 つの方法を控えめに使用してください。 🎜🎜🎜🎜🎜🎜参考文献: 🎜🎜🎜🎜🎜🎜http://www.stevesouders.com/blog/2009/04/09/dont-use-import🎜🎜🎜🎜🎜🎜http://matthewjamestaylor.com /blog/adding-css-to-html-with-link-embed-inline-and-import🎜🎜🎜🎜🎜🎜🎜🎜HTMLにCSSを導入する方法🎜🎜🎜🎜HTMLにCSSを導入するには4つの方法があります。そのうち 2 つは CSS コードを HTML ファイルに直接追加するもので、他の 2 つは外部 CSS ファイルを導入するものです。これらの方法とその長所と短所を見てみましょう。
インラインメソッドは、HTML タグの <code><span style="font-size: 16px;">style</span>
属性中添加 CSS。
示例:
<span style="font-size: 16px;"><p style="background: red"></p><br></span>
这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <span style="font-size: 16px;"><p></span>
拥有相同的样式,你不得不重复地为每个 <span style="font-size: 16px;"><p></span>
添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。很显然,内联方式引入 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。
嵌入方式指的是在 HTML 头部中的 <span style="font-size: 16px;"><style></span>
标签下书写 CSS 代码。
示例:
<span style="font-size: 16px;"><head><br> <style><br><br> .content {<br> background: red;<br> }<br><br> </style><br></head><br></span>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。
链接方式指的是使用 HTML 头部的 <span style="font-size: 16px;"><head></span>
标签引入外部的 CSS 文件。
示例:
<span style="font-size: 16px;"><head><br> <link rel="stylesheet" type="text/css" href="style.css"><br></head><br></span>
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例:
<span style="font-size: 16px;"><style><br> @import url(style.css);<br></style><br></span>
链接方式(下面用 link 代替)和导入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用 @import。
link 属于 HTML,通过 <span style="font-size: 16px;"><link></span>
标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;
@import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载;
小结:我们应尽量使用 <span style="font-size: 16px;"><link></span>
style 属性に CSS を直接追加することを指します。
例:
<span style="font-size: 16px;"><p style="background: red"></p><br></span>これは通常、悪い書き方です。複数の
を必要とする場合に、現在のラベルのスタイルを変更するだけです。同じスタイルの場合、
ごとに同じスタイルを繰り返し追加する必要があります。スタイルを変更したい場合は、すべてのスタイルのコードを変更する必要があります。 。 CSS コードをインラインで導入すると、HTML コードが冗長になり、Web ページの保守が困難になるのは明らかです。
埋め込みメソッド
🎜🎜🎜埋め込みメソッドとは、HTMLヘッダーの🎜🎜<style>🎜
🎜タグの下にCSSコードを記述することを指します。 🎜🎜🎜🎜例: 🎜🎜<span style="font-size: 16px;"><head><br> <style><br><br> .content {<br> background: red;<br> }<br><br> </style><br></head><br></span>🎜🎜埋め込みCSSは、現在のWebページでのみ有効です。 CSS コードは HTML ファイル内にあるため、コードがより集中的になり、テンプレート Web ページを作成する際に通常は有利になります。テンプレート コードを見れば、HTML 構造と CSS スタイルが一目でわかるからです。埋め込み CSS は現在のページでのみ有効であるため、複数のページで同じ CSS コードを導入する必要がある場合、この方法で記述するとコードの冗長性が生じ、メンテナンスに役立ちません。 🎜🎜🎜🎜Linkメソッド🎜🎜🎜🎜Linkメソッドは、HTMLヘッダーで🎜
🎜<head>🎜
🎜タグを使用して外部CSSファイルを導入することを指します。 🎜🎜🎜🎜例: 🎜🎜<span style="font-size: 16px;"><head><br> <link rel="stylesheet" type="text/css" href="style.css"><br></head><br></span>🎜🎜これは CSS を導入する最も一般的で推奨される方法です。このアプローチを使用すると、すべての CSS コードが 1 つの CSS ファイル内にのみ存在するため、保守性が高くなります。また、すべての CSS コードは CSS ファイル内にのみ存在します。CSS ファイルは、今後ページを切り替えるときにのみ導入されます。 🎜🎜🎜🎜インポートメソッド🎜🎜🎜🎜インポートメソッドは、CSSルールを使用して外部CSSファイルを導入することを指します。 🎜🎜🎜🎜例: 🎜🎜
<span style="font-size: 16px;"><style><br> @import url(style.css);<br></style><br></span>🎜🎜リンクメソッドとインポートメソッドを比較してください🎜🎜🎜🎜リンクメソッド(以下のリンクに置き換えられます)とインポートメソッド(以下の@importに置き換えられます)はどちらも外部CSSを導入する方法です2 つのアプローチを比較し、@import が非推奨になった理由を説明しましょう。 🎜🎜
🎜<link>🎜
🎜 タグの href 属性を通じて外部ファイルを導入します。 @import は CSS に属しているため、インポート ステートメントは CSS で記述する必要があります。そうしないと、外部ファイルが正しくインポートされないことに注意してください。 🎜 <link>🎜
🎜 タグを使用し、他の 3 つの方法は避けるか、あまり使用しないようにする必要があります。 🎜🎜🎜🎜関連おすすめ: 🎜🎜🎜🎜🎜CSSを導入する4つの方法🎜🎜🎜🎜🎜【CSSの基礎】優先順位、導入方法、Hack_html/css_WEB-ITnose🎜🎜🎜🎜CSSを導入する4つの方法と優先度Level_html/css _WEB -ITnose🎜🎜🎜🎜以上がCSS導入方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。