ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS でスタイルを導入するにはどのような方法がありますか?
CSS でスタイルを導入するにはどのような方法がありますか?
- 清浅オリジナル
- 2018-11-17 16:26:396442ブラウズ
この記事では、CSS スタイルシートの導入方法とそのメリットとデメリットを紹介しますので、参考になると思います。
スタイルシートは 3 つの方法で CSS に導入できます。
(1) インライン スタイル
(2) 埋め込みスタイル
(3) 外部スタイル
これらの CSS スタイルにはそれぞれ長所と短所があります。
インライン スタイル
機能: (1) インライン スタイルは、コード内の HTML 要素に配置されます。
(2) インライン スタイルを使用する場合、スタイルは選択した要素にのみ影響します。
(3) インライン スタイルにはセレクターがありません
例:
<div style="width:100px;height:100px;border:1px solid #ccc"><div>
この CSS インライン スタイルは変更のみ可能ですこの div の幅と高さを変更しても、ページ上の div や属性のスタイルは変更されません。これは、インライン スタイルの制限の 1 つです。特定の要素のみを変更し、インライン スタイルも非常に特殊であるため、これはベスト プラクティスではありません。このため、他の非インライン スタイルでオーバーライドすることが困難になり、実際、Web ページでインライン スタイルを使用することはほとんどありません。
埋め込みスタイル
特徴: (1) スタイルタグ 77950c9f2251753dbe0034fb47748b31 を配置して作成された Web ページ頭の部分。
(2) 記述されたスタイルは、それを使用する Web ページでのみ使用されます。
(3) 埋め込みスタイルは「内部スタイル」とも呼ばれます
Example
<！DOCTYPE html>
<html>
<head>
<meta content =“text / html; charset = utf-8”/>
<title> Document </title>
<style>
div{
width:100px;
height:100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>埋め込みスタイルは、ドキュメントのヘッダーに埋め込まれたスタイルです。埋め込みスタイルは、スタイルが埋め込まれているページのマークアップにのみ影響します。繰り返しますが、このアプローチは CSS の利点の 1 つを無効にします。すべてのページにはスタイルがあるため、リンクの色を赤から緑に変更するなど、サイト全体の変更を行う場合は、すべてのページで埋め込みスタイル シートが使用されているため、すべてのページでこの変更を行う必要があります。これはインライン スタイルよりも優れていますが、多くの場合、依然として問題が発生します。
外部スタイルシート
特徴: (1) 別文書で記述し、各種Web文書に添付可能
(2) 改変可能呼び出したすべてのページに影響を与える
(3) 便利な変更操作
Example
<link href=“demo.css”rel=“stylesheet”type=“text/css> 在demo文件下写css样式
今日のほとんどの Web サイトでは外部スタイル シートが使用されており、外部スタイルは別個に記述されています。ドキュメントを作成し、さまざまな Web ドキュメントに追加します。外部スタイル シートは、接続されているすべてのファイルに影響します。つまり、20 ページの Web サイトがあり、すべてのページが同じスタイル シートを使用している場合、変更が必要な場合は、スタイル シートを編集するだけで、それらのページを完成させることができます。サイト管理がより簡単になります。外部スタイル シートの欠点は、ページがこれらの外部ファイルを取得して読み込む必要があることです。すべてのページが CSS テーブル内のすべてのスタイルを使用するわけではないため、多くのページでは実際に必要なサイズよりもはるかに大きな CSS ページが読み込まれます。
まとめ: 以上が CSS におけるスタイルシートの導入の紹介でした。この記事を通じて皆さんに CSS スタイルを理解していただければ幸いです。
以上がCSS でスタイルを導入するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。