CSSの基本構文

基本的な構文ルール

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

selector {
    declaration1; 
    declaration2;
    ... 
    declarationN;
}

セレクターは通常、スタイルを変更する必要がある HTML 要素です。各宣言はプロパティと値で構成されます。各属性には値があります。プロパティと値はコロンで区切られます。

selector {property: value

例:

h1{
   color:red;
   font-size:14px;
}

複数の属性がある場合は、セミコロンを使用して区切ります。このコード行は、h1 要素内のテキストの色を赤として定義し、フォントサイズを 14 ピクセルに設定します。

下の図は、上記のコードの構造を示しています:

QQ截图20161011103552.png

注: 値が 1 単語より大きい場合は、次のように引用符を追加する必要があります

p{font-family:"sans serif"}

例:

右クリック編集領域に新しいindex.htmlとMyCss.cssを作成します

2つのファイルにそれぞれ次のコードを入力します(括弧はコード補完をサポートします):index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引外部资源 MyCss.css-->
        <link rel="stylesheet" href="MyCss.css" type="text/css">
    </head>
    <body>
        <h1>
            PHP中文网
        </h1>
    </body>
</html>

MyCss.css

h1{
    color: red;font-size: 50px;
}

h1 でテキストの色を定義します。要素を赤に設定し、フォントサイズも 50 ピクセルに設定します。

Ctrl+s 2 つのファイルを保存し、index.html をクリックして実行中の効果を確認します:

QQ截图20161203142306.png

学び続ける

新しいファイル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <!--引外部资源 MyCss.css-->
 <link rel="stylesheet" href="MyCss.css" type="text/css">
 </head>
 <body>
 <h1>
 PHP中文网
 </h1>
 </body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX