CSS 構文


CSS 構文ルールは、セレクターと 1 つ以上の宣言 (宣言グループ) という 2 つの主要な部分で構成されます。 セレクターは通常、スタイルを変更する必要がある HTML 要素です。各宣言はプロパティと値で構成されます。プロパティは設定するスタイル属性であり、プロパティと値はコロンで区切られます。 CSS 宣言は常にセミコロン (;) で終わり、宣言のグループは中かっこ ({}) で囲まれます。

インスタンスのデモ

インスタンス

<html>
<head>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p> 

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

インスタンス

<html>
<head>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>

<body>

<h1>This is a header 1</h1>
<hr>

<p>You can see that the style 
sheet formats the text</p>

<p><a href="http://www.w3cschool.cc" 
target="_blank">This is a link</a></p>

</body>
</html>

インスタンスを実行»

クリック「インスタンスの実行」ボタンをクリックすると、オンラインの例が表示されます

CSS の例

CSS ルールは、セレクターと 1 つ以上の宣言の 2 つの主要な部分で構成されます:

1.jpg

セレクターは通常、HTML 要素ですスタイルを変更する必要があります。

各宣言は属性と値で構成されます。

プロパティは、設定するスタイル属性です。各属性には値があります。プロパティと値はコロンで区切られます。

CSS の例

CSS 宣言は常にセミコロン (;) で終わり、宣言グループは中括弧 ({}) で囲まれます:

p {color:red;text-align:center;

CSS を読みやすくするには、次のことができます。属性:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	color:red;
	text-align:center;
} 
</style>
</head>

<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

サンプルの実行»

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

CSSコメント

コメントはコードを説明するために使用され、コードの説明として使用できます。 like それを編集すると、ブラウザはそれを無視します。

CSS コメントは「/*」で始まり「*/」で終わります。例は次のとおりです。

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}