css - あなたが考えることができるいくつかの良いCSSショートハンドは何ですか?

Question

私が考えることができるいくつかは

font: bold 20px Verdana, sans-serif /* バリアント、サイズ、ファミリーを表す 1 行 */

color: #336 /* ショートカラーコード */

height: 0 /* 0 の場合は単位指定不要 */

border: 0 /* border: none と同じ効果ですが、より短い */

background: #ffc /* 色のみが必要な場合は background-color を使用する必要はありません */

パディング: 0; ボーダー: 0; margin: 0 /* コンテンツのみを表示し、それ以外は何も表示しない */

border: 1px dashed #ff0 /* 太さ、スタイル、色 */

margin: 0 0.5em /* 上下左右の余白を指定 */

score 3 · Accepted Answer

 1. background: #fff url(image.png) no-repeat 20px 100px fixed;
 2. ul { list-style: decimal-leading-zero inside; }

コンマ区切りの宣言

最初の子セレクター

 1. .footer em:first-child { color:#ccc; }

CSS3 の機能

半径のある角丸ボックス

.rounded_corner { -moz-border-radius:10px; -webkit-border-radius:10px; width:400px; height:100px; background-color:#000; }

影の効果

.shadow { 幅:400px; 高さ:200px; 背景色:#000; -webkit-box-shadow: 5px 5px 2px #ccc; }

score 0 · Accepted Answer

font プロパティで行の高さを指定することもできます

font: bold 20px/1em Verdana, sans-serif /* one line for variant, size, and family */

1em は行の高さです

score 0 · Accepted Answer

アウトラインの別のもの:

outline:3px dotted gray;

list-style も画像をサポートしています:

list-style:square inside url(image.gif);

ちょっと冗長ですが、それらすべてを説明する別の記事を次に示します。

3 に答える 3