CSS スキルコレクション - 古典の中の古典

リンク上の点線のボックスを削除します

コードをコピー

コードは次のとおりです。

a:アクティブ、a:フォーカス{
アウトライン:なし;
}

デフォルトでは、Firefox はリンクにフォーカスが当てられたとき (またはクリックされたとき) に点線の境界線を追加しますが、上記のプロパティを使用してこれを削除できます。

最もシンプルなCSSリセット

コードをコピー

コードは次のとおりです。

* {
マージン: 0; パディング: 0
}

リンクを折り返さない

コードをコピー

コードは次のとおりです。

{
空白:折り返しなし;
}

上記の設定によりリンクの折り返しを回避できますが、個人的には長いリンクには対応する行を設けることをお勧めします (行の折り返しに関する議論については、円の中心の記録を参照してください)。

Firefoxでスクロールバーを常に表示する

コードをコピー

コードは次のとおりです。

html{
オーバーフロー:-moz-スクロールバー-垂直;
}

その他の Mozilla/Firefox のプライベート CSS プロパティについては、こちらをご覧ください。クロスブラウザのサポートが必要な場合は、

コードをコピー

コードは次のとおりです。

本文、html {
最小高さ:101%;
}

行の高さを使用して垂直方向に中央揃えする

行の高さ:24px;

固定幅のコンテナを使用していて、行を垂直方向に中央揃えする必要がある場合は、line-height を使用します (高さは親コンテナと同じになります)。垂直方向の中央揃えの概要については、ここを参照してください。

透明容器フロート

コードをコピー

コードは次のとおりです。

＃主要 {
オーバーフロー:非表示;
}

ブロック要素を水平方向に中央揃えする
マージン:0 自動;
実際には、

コードをコピー

コードは次のとおりです。

左マージン: 自動;
右マージン: 自動;

このテクニックは、ほとんどすべての CSS の教科書で説明されています。幅を追加することを忘れないでください。 Exploerでも使えます

コードをコピー

コードは次のとおりです。

体{
テキスト配置: 中央;
}

次に内部コンテナを定義します

テキスト配置: 左;

回復する。

Exploer テキストエリアのスクロールバーを非表示にする