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() を使用できるようになります。セレクターを使って操作、コードを簡素化 簡潔で読みやすく、悪くありません。

/* add border */.nav li { border-right: 1px solid #666;}/* remove border */.nav li:last-child { border-right: none;}

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

.nav li:not(:last-child) { border-right: 1px solid #666;}

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

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

.nav li:first-child ~ li { border-left: 1px solid #666;}

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

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

body { line-height: 1;}

2.4 カンマ区切りリスト

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

html, body { height: 100%; margin: 0;}body { -webkit-align-items: center;  -ms-flex-align: center;  align-items: center; display: -webkit-flex; display: flex;}

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

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

ul > li:not(:last-child)::after { content: ",";}

2.6 svg アイコンを使用する

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

li { display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block;}

2.7 テキスト表示の最適化

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

.logo { background: url("logo.svg");}

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

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

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

html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}

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

2.9 box-sizing を初期化する

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

.slider ul { max-height: 0; overlow: hidden;}.slider:hover ul { max-height: 1000px; transition: .3s ease;}

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

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

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

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

.calendar { table-layout: fixed;}

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

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

りー

とても便利ですよね？

3. ステートメント