CSS 開発スキルを向上させるためのヒント集_html/css_WEB-ITnose

0. 目次

目次

はじめに

テキスト

1 ナビゲーションバーにスペーサー行を追加しないようにします

2 本文に Line-Height 属性を追加しますelement

3 任意の要素を垂直方向に中央揃え

4 カンマ区切りリスト

5 nth-child で負の数値を使用

6 SVG アイコンを使用

7 テキスト表示の最適化

8 Pure CSS スライダーで max-height を使用

9ボックスのサイズを初期化する

10 表のセルの幅は同じです

11 Flexbox を使用してさまざまなマージンハックを削除します

12 空の接続に属性セレクターを使用します

宣言

はじめに 1. : github の便利な CSS プロヒント集

翻訳者: Ai Qianduanle が共有した FedFun 無償翻訳は主に不適切です。修正は大歓迎です。
翻訳: CSS 開発能力を向上させるためのヒント集です。皆様のお役に立てれば幸いです。

2. テキスト 2.1 :not() を使用してナビゲーション バーにスペーサー ラインを追加します

通常、ナビゲーション バーにスペーサー ラインを追加するには次のコードを使用します

そうですね

これで、:not() を使用できるようになります。セレクターを使って操作、コードを簡素化 簡潔で読みやすく、悪くありません。

または、左の境界線を追加します。

2.2 line-height 属性を body 要素に追加します

p 要素と h1 要素ごとに line-height を設定する必要はありません。body 要素にのみ設定する必要があり、他のテキスト要素は自動的に設定されます。体の特徴を引き継ぎます。

2.3 任意の要素を垂直方向に中央揃えにする

これは黒魔術ではありません。確かに、任意の要素を垂直方向に中央揃えにすることができます。

2.4 カンマ区切りリスト

HTMLのリストを実際のカンマ区切りリストのように見せる

2.5 n番目の子に負の数を使う

cssのn番目の子に負の数を使って1~nを選択する記録。

2.6 svg アイコンを使用する

svg アイコンを使用しない理由はありません。ほとんどの解像度とブラウザで拡大縮小でき、IE9 とも互換性があるため、.png、.gif などを使用する必要はありません。 。

2.7 テキスト表示の最適化

一部のフォントはすべてのデバイスで最適に表示できないため、設定する必要があります。

optimizeLegibility 属性値の使用に注意してください。同時に、IE/Edge はテキストレンダリングをサポートしていません。

2.8 Pure CSS スライダーで max-height を使用する

max-height を使用して、アニメーションの非表示と表示を実装します。

こちらのブログ「Auto Value の CSS3 移行ソリューション」を参照してください

2.9 box-sizing を初期化する

この場合、後のメンテナンスが便利です。

2.10 表のセルを同じ幅にする

html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}

ログイン後にコピー

2.11 Flexbox を使用してさまざまなマージン ハックを取り除く

サイドバーを実装するときに、さまざまな nth-child、first-child、last-child マージンを設定する必要がなくなりました。 Flexbox を使用すると、均等な分散を簡単に実現できます。

2.12 空の接続に属性セレクターを使用する

href 属性を持つがコンテンツが空の場合、コンテンツが自動的に追加されます。

りー

とても便利ですよね？

3. ステートメント