CSSを使用してページを制御する方法-CSSチュートリアル-php.cn

CSSを使用してページを制御する方法

王林

リリース： 2020-06-05 09:14:42

転載

3525 人が閲覧しました

CSSを使用してページを制御する方法

CSS を使用してページを完全に制御します。主に 4 つの方法があります: インラインスタイル、インラインスタイル、リンクスタイル、インポートスタイルです。これら 4 つの方法をそれぞれ見てみましょう。メソッド:

1. インラインスタイル

1. 特徴: 最も直接的なもの。

2. 使い方

HTMLタグ内のstyle属性を直接使用し、その中にCSSコードを記述します。

3. 例

<html>
<head>
<title>页面标题</title>
   </head>
<body>
	<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
	<p style="color:#000000; font-style:italic;">正文内容2</p>
	<p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
</body>
</html>

ログイン後にコピー

CSSを使用してページを制御する方法

4. 評価

インラインスタイルは CSS を使用する最も簡単な方法ですが、各タグに style 属性を設定すると、その後のメンテナンスコストが依然として非常に高く、Web ページが肥大化しやすいため、お勧めできません。

2. 埋め込みスタイル

1. はじめに

埋め込みスタイルシートは、とに CSS を記述します。タグで宣言します。

2. 例の説明

<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
	color:#6600CC;
	text-decoration:underline;
	font-weight:bold;
	font-size:25px;
}
-->
</style>
   </head>
<body>
	<p>紫色、粗体、下划线、25px的效果1</p>
	<p>紫色、粗体、下划线、25px的效果2</p>
	<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>

ログイン後にコピー

CSSを使用してページを制御する方法

3. 分析

(1) 例からわかるように、すべての CSS コード部分これらは同じ領域に集中しているため、後のメンテナンスが容易になり、ページが大幅にスリム化されます。

(2) ただし、ページが複数あり、異なるページの

タグを同じスタイルにしたい場合、インラインスタイルは少々面倒で、維持コストも安くありません。

(3) したがって、インラインスタイルは、特別なページに個別のスタイルを設定する場合にのみ適しています。

3. リンクスタイル

1. 位置

リンク CSS スタイルは、最も頻繁に使用され、最も実用的な方法です。

2. メソッド

HTML のタグとタグの間にステートメントを追加します: 。

3. 例

(1) CSS ファイル: 1.css

h2{
	color:#0000FF;
}
p{
	color:#FF00FF;
	text-decoration:underline;
	font-weight:bold;
	font-size:20px;
}

ログイン後にコピー

(2) HTML フレームワーク

<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
   </head>
<body>
	<h2>CSS标题1</h2>
	<p>紫色、粗体、下划线、25px的效果1</p>
	<h2>CSS标题2</h2>
	<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>

ログイン後にコピー

CSSを使用してページを制御する方法