CSS 仕様では、短縮 CSS と呼ばれる短縮構文を使用してスタイルを作成できます。短縮 CSS を使用すると、単一のプロパティ タグで複数のプロパティの値を指定できます。たとえば、font プロパティを使用して、1 行の構文で font-style、font-variant、font-weight、font-size、line-height、および font-family プロパティを設定できます。
短縮 CSS を使用する場合に注意すべき重要な問題は、短縮 CSS プロパティから省略された値にはプロパティのデフォルト値が割り当てられることです。 2 つ以上の CSS ルールが同じタグに割り当てられている場合、ページが正しく表示されない可能性があります。
たとえば、以下に示す H1 タグは通常の CSS 構文を使用します。 font-variant、font-stretch、font-size-adjust、および font-style プロパティの値にはデフォルト値が割り当てられることに注意してください。
H1 {
フォントの太さ: 太字;
フォントサイズ: 16pt;
行の高さ: 18pt;
フォントファミリー: Arial;
フォント バリアント: 通常;
フォントスタイル: 通常;
フォントストレッチ: 通常;
フォントサイズ調整: なし
}
このタグを短縮属性を使用して書き換えてみましょう:
H1 { font: 太字 16pt/18pt Arial }
省略表記を使用して記述した場合、省略された値には自動的にデフォルト値が割り当てられます。したがって、上記の簡略化された例では、font-variant、font-style、font-stretch、および font-size-adjust タグが省略されています。
CSS 構文の短縮形式および通常形式を使用して、複数の場所でスタイルを定義する場合 (HTML ページにスタイルを埋め込んだり、外部スタイル シートからスタイルをインポートしたりする場合など)、省略された属性がその構文をオーバーライド (またはカスケード) する可能性があることに注意してください。他の場所で明示的に設定されているプロパティ内のスタイル。
したがって、Dreamweaver はデフォルトで構文の記述に通常形式の CSS シンボルを使用します。これにより、通常のルールをオーバーライドする短縮ルールによって引き起こされる潜在的な問題が防止されます。短縮 CSS 表記法を使用してコーディングされた Web ページを Dreamweaver で開くときは、Dreamweaver が通常の形式を使用して新しい CSS ルールを作成することに注意してください。 CSS 編集の環境設定は、[環境設定] ダイアログ ボックスの [CSS スタイル] カテゴリで変更できます (Windows では [編集] >> [環境設定]、Macintosh では [Dreamweaver] >> [環境設定])、Dreamweaver が CSS ルールを作成および編集する方法を指定します。
知らせ
[CSS スタイル] パネルでは、通常のシンボルのみを使用してルールを作成します。 [CSS スタイル] パネルを使用してページまたは CSS スタイル シートを作成する場合は、短縮 CSS ルールを手動でコーディングすると、短縮プロパティが通常の形式で作成されたプロパティをオーバーライドする可能性があることに注意してください。したがって、スタイルを作成するには通常の CSS シンボルを使用してください。