目次
CSS機能：Webコンテンツとスタイルの分離を実現
CSSルールは、セレクターと1つ以上の宣言という2つの主要な部分で構成されています。
4つのセレクター
- クラスセレクター（クラスセレクター）
- IDセレクター
- html要素セレクター
- ワイルドカードセレクター
CSSセレクターの優先度：IDセレクター>クラスセレクター> HTML要素セレクター本体>ワイルドカードセレクター
クラスセレクタの基本構文
.类选择器名{
属性1：属性值；
属性2：属性值；
......
}
IDセレクターの基本構文
#id选择器名{
属性1：属性值；
属性2：属性值；
......
}
HTML要素セレクターの基本構文
某个html元素{
属性1：属性值；
属性2：属性值；
......
}
ワイルドカードセレクターの基本構文
*{
属性1：属性值；
属性2：属性值；
......
}
スタイルシートの挿入方法
- 外部スタイルシート
- 内部スタイルシート
- インラインスタイル
外部スタイルシート
スタイルを多くのページに適用する必要がある場合は、外部スタイルシートが理想的です。外部スタイルシートを使用する場合は、ファイルを変更することでサイト全体の見た目を変えることができます。各ページは、<link>タグを使用してスタイルシートにリンクされています。<link>タグは（ドキュメントの）先頭にあります：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>外部スタイルシートは、任意のテキストエディタで編集できます。ファイルにhtmlタグを含めることはできません。スタイルシートは、.css拡張子を付けて保存する必要があります。
内部スタイルシート
単一のドキュメントに特別なスタイルが必要な場合は、内部スタイルシートを使用する必要があります。<style>タグを使用して、ドキュメントヘッドの内部スタイルシートを定義できます
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>インラインスタイル
プレゼンテーションとコンテンツが混在しているため、インラインスタイルはスタイルシートの多くの利点を失います。この方法は注意して使用してください。たとえば、スタイルを要素に1回だけ適用する必要がある場合などです。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>インライン要素とブロック要素
-
一般的なインライン要素は<a> <span> <input type =“ XXX”>です。
-
一般的なブロック要素は<div> <p>です
-
インライン要素は、行全体ではなく、独自のコンテンツの幅のみを占めます。
-
その内容に関係なく、ブロック要素は行全体を占め、新しい行に表示されます。