CSS 構(gòu)文
CSS 構(gòu)文
CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構(gòu)成されます:
セレクターは、通常、HTML を変更する必要があるスタイルです。要素。
各宣言は屬性と値で構(gòu)成されます。
プロパティは、設(shè)定するスタイル屬性です。各屬性には値があります。プロパティと値はコロンで區(qū)切られます。
CSSの例
CSS宣言は常にセミコロン(;)で終わり、宣言グループは中括弧({})で囲まれます:
p {color:red ;text -align:center;}
CSS を読みやすくするために、1 行に屬性を 1 つだけ記述できます:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
color: #ff122b;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>這一段是用CSS樣式化。</p>
</body>
</html>上記の CSS スタイルは
ラベルの色は に設(shè)定されています#ff122b、テキストは中央に配置されます
プログラムを?qū)g行して試してください
CSS コメント
コメントはコードを説明するために使用され、自由に編集できますが、ブラウザはそれを無(wú)視します。
CSS コメントは「/*」で始まり「*/」で終わります。例は次のとおりです:
/*これはコメントです*/
p
{
text-align:center;
/*これはです。別のコメント */
color:black;
font-family:arial;
}
その他の例
インスタンス 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title> <style>
body {background-color:#8cd6ff;}
h1 {font-size:36px;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>
<body>
<h1>這個(gè)頭是36 pt</h1>
<h2>這個(gè)頭是藍(lán)色的</h2>
<p>這一段有一個(gè)50像素的左邊框</p>
</body>
</html>プログラムを?qū)g行して試してください
インスタンス 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>這是一個(gè)標(biāo)題</h1>
<hr>
<p>您可以看到鏈接格式文本</p>
<p><a href="http://php.cn"
target="_blank">鏈接</a></p>
</body>
</html>プログラムを?qū)g行して試してください
