HTML CSS

1つ。 CSSの基礎(chǔ)入門

カスケードスタイルシート (Cascading Style Sheet) は「CSS」と呼ばれ、通常「スタイルシート (Style Sheet)」とも呼ばれ、Web ページのスタイルデザインに使用されます。たとえば、クリックされていないときはリンクワードを青色にし、マウスをその上に移動(dòng)すると赤色に変わり、下線が引かれるようにする場(chǎng)合、これはスタイルです。スタイルシートを設(shè)定することで、HTML上の各マークの表示屬性を統(tǒng)一的に制御することができます。カスケードスタイルシートを使用すると、Web ページの外観をより効果的に制御できるようになります。カスケードスタイルシートを使用すると、Web ページ要素の位置と外観を正確に指定し、特殊効果を作成する機(jī)能が拡張されます。

CSSとは、英語のCascadingStyle Sheets（カスケーディングスタイルシート）の略で、HTMLやXMLなどのファイルスタイルを表現(xiàn)するために使用されるコンピュータ言語です。 CSS の最新バージョンは CSS3 です。これは、Web ページのパフォーマンスとコンテンツを完全に分離できるスタイルデザイン言語です。従來の HTML のパフォーマンスと比較して、CSS は Web ページ內(nèi)のオブジェクトの位置とレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォントサイズスタイルをサポートし、Web ページのオブジェクトとモデルスタイルを編集する機(jī)能があり、予備的な実行が可能です。デザインは現(xiàn)在、テキスト表示に基づいた最も優(yōu)れた表現(xiàn)力のあるデザイン言語です。 CSS は、さまざまなユーザーの理解力に応じて記述方法を簡(jiǎn)素化または最適化し、あらゆるタイプの人にとって読みやすいものにすることができます。

Ⅱ。 CSS の使用方法

サイトページでスタイルシートを使用するには、次の 3 つの方法があります:

インラインスタイル - HTML 要素で "style" 屬性を使用します

內(nèi)部スタイルシート - HTML ドキュメント內(nèi)header <head> 領(lǐng)域は CSS を含めるために <style> 要素を使用します

外部參照 - 外部 CSS ファイルを使用する

それぞれの方法には長所と短所があります:

サイト上のページに同じスタイルを一貫して適用する場(chǎng)合は、外部參照スタイルシート を使用します。 1 つ以上の外部スタイルシートでスタイルを定義し、それらをすべての Web ページにリンクすると、すべての Web ページにわたって一貫した外観が確保されます。スタイルを変更する場(chǎng)合は、外部スタイルシートで 1 回変更するだけで済み、その変更はスタイルシートにリンクされているすべてのページに反映されます。通常、外部スタイルシートには、ニュースリリースシステムの一般的なスタイル Common.css など、ファイル拡張子として .css が付いています。次に、このスタイルを必要とするページに次のようにリンクします。

<link href="/css/Common.css" rel="stylesheet" type="text/css"/>現(xiàn)在の Web ページのスタイルを定義したいだけの場(chǎng)合は、內(nèi)部スタイルシートを使用できます。內(nèi)部スタイルシートは、Web ページの <HEAD> タグ內(nèi)に「埋め込まれる」カスケードスタイルシートです。埋め込みスタイルシート內(nèi)のスタイルは、同じ Web ページでのみ使用できます。例:

<style type="text/css">

body {background:grey;}

</style> ;

インラインスタイルを使用して、カスケードスタイルシート屬性を Web 要素に適用します。例:

<pstyle="@importurl('style3.css');">CSS ドキュメント</p>

 ;

Web ページが外部スタイルシートにリンクしている場(chǎng)合、Web ページ用に作成されたインラインスタイルまたは內(nèi)部スタイルは、外部スタイルシートで指定されたプロパティを拡張またはオーバーライドします。

Web ページで外部スタイルシートのスタイルを使用するには、[形式] メニューにある [スタイルシートリンク] コマンドを使用して、Web ページをスタイルシートにリンクします。 1 つまたは複數(shù)のスタイルシートを、Web ページビューモードの現(xiàn)在の Web ページ、フォルダリストで選択した Web ページ、またはサイト上のすべての Web ページにリンクできます。

[スタイル] ボックスには、見出し 1 などの標(biāo)準(zhǔn) HTML タグと、埋め込みスタイルシートまたは Web ページにリンクされている外部スタイルシートに含まれるクラスまたは ID セレクターがリストされます。 Web ページ要素にスタイルを適用するには、スタイルを選択し、[スタイル] ボックスでスタイルまたはセレクターをクリックします。

Microsoft FrontPage 2000 では、特定の書式設(shè)定機(jī)能がインラインスタイルとして自動(dòng)的に適用されます。例: ([書式] メニューの) [境界線と影] コマンドを使用して通常の段落の周囲にボックスを適用すると、FrontPage は書式設(shè)定情報(bào)を段落記號(hào)のインラインスタイルプロパティとして書き込みます (例: <pstyle= border-style) ：ソリッド」＞）。ただし、一部のプロパティの適用には CSS の使用が必要であり、その他のプロパティの適用には HTML の使用が必要です。 CSS を使用してインラインスタイルのみを適用したい場(chǎng)合は、[スタイル] ボタン (Web 要素の [プロパティ] ダイアログボックスにあります) を使用して、クラスまたは ID セレクター、またはインラインスタイルを適用できます。

例 1

Background-color 屬性は要素の背景色を定義します:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
</head>
<body style="background-color: green;">
<h2 style="background-color: red;">標(biāo)題</h2>
<p style="background-color: blue;">內(nèi)容</p>
</body>
</html>

例 2

font-family (font)、color (color)、を使用します。および font-size (フォントサイズ) 屬性を使用して、フォントのスタイルを定義します:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<h1 style="font-family:verdana;">文字的標(biāo)題</h1>
<p style="font-family:arial;color:red;font-size:20px;">下面是一句話。</p>
</body>
</html>

例 3

text-align (テキスト配置) 屬性を使用して、テキストの水平方向と垂直方向の配置を指定します。

りー

學(xué)び続ける

||

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <h2 style="background-color: yellow;">標(biāo)題</h2> <p style="text-align:center;">居中對(duì)齊的內(nèi)容</p> <p style="font-family:arial;color:red;font-size:20px;">下面是一句話。</p> </body> </html>

提出するリセットコード
自動(dòng)運(yùn)転