ご存知のように、css では省略形のプロパティを使用できます。しかし、プロパティ値の順序が重要であることがわかりました。
'border:1px 赤実線;' 'border: 1px solid red;' と同じです。
ただし、「font:italic bold 12px/20px」は「font:italic 12px/20px bold;」と等しくありません。
マニュアルを注意深く読みましたが、プロパティ値の順序に関する内容が見つかりません。
ご存知のように、css では省略形のプロパティを使用できます。しかし、プロパティ値の順序が重要であることがわかりました。
'border:1px 赤実線;' 'border: 1px solid red;' と同じです。
ただし、「font:italic bold 12px/20px」は「font:italic 12px/20px bold;」と等しくありません。
マニュアルを注意深く読みましたが、プロパティ値の順序に関する内容が見つかりません。
覚えておくのに役立つチート シートを次に示します。
順序の関連性は、プロパティごとに定義されます。たとえば、省略形の説明ではfont
次の構文を使用します。
[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'>
[ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box |
small-caption | status-bar | inherit
これは少し厄介に見えますが、使用されるメタ表記の鍵はセクション1.4.2CSSプロパティ定義にあります。それは、とりわけ、次のように述べています。
したがって、フォントスタイル、フォントバリアント、およびフォントの太さは任意の順序で表示される可能性があり、すべて省略可能ですが、存在する場合は、フォントサイズとフォントファミリの前に配置する必要があります。これらは両方とも必須であり、この順序で表示される必要があります。
幸いなことに、ほとんどのプロパティはより単純です。アイテムの役割をフォーマットから推測できるようにする設計のため、ほとんどの場合、値内のアイテムの順序は重要ではありません。また、省略形は必要ありませんfont
。代わりに、いつでも個々のフォントプロパティを書き留めることができます。
フォントの略記の良いリファレンスは次のとおりです: https://www.sitepoint.com/introduction-css-shorthand/ - sitepoint リファレンス全体は実際にはかなり良いです。
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
になります:
font: bold italic small-caps 1em/1.5em verdana,sans-serif
これが注文です。