日2 :コードの100日、擬似要素の前後

CSSの擬似要素

擬似要素を画像に置くようにしないでください.
最初に留意すべき点は、前と後の偽要素は、“コンテナ”の前と後ではなく、定義されているコンテナーの“content”の前後に来ることです.

以下の例では、内容は空ではありません.
これらは主に設計要素に使用され、2つの余分なdivを定義する必要はありません.

擬似要素の前後のコンテンツプロパティに深く潜ります。

デザイン要素として擬似要素の前後にあるCSS。

CSS::::前に、選択した要素の最初の子である擬似要素を作成します.コンテンツプロパティを持つ要素に化粧品コンテンツを追加するのにしばしば使用されます.デフォルトでインラインです.

遷移プロパティ

ソース
css-tricks
MDN
概要transition 4つの遷移プロパティの短い手です.transition-property transition-duration transition-timing-function transition-delay .

transition-property :- これは、どのプロパティの変更に移行するかを定義します.背景色、フォントサイズ、変換などの例もありますall このプロパティの値として、この要素のプロパティのいずれかが変更された場合、遷移を適用します.

transition-timing-function :- 簡単にすることができます、リニア、使いやすさ、簡単にアウト、ステップスタート、ステップエンド.

steps(4,start) :- これは遷移が4つのステップを持つことを意味します、そして、それはあなたが要素の上に浮く瞬間で始まります.steps(4,end) :- 遷移は4つのステップを持ち、それは最初の時間間隔(私たちは定期的にステップの数と遷移の合計期間を分割することによって計算された)の終了後に開始されます.それがほとんど使われないので、これの少しの詳細に入らないでください.
複数のアニメーションプロパティーの例

私が知るようになった短い点

テキストを次の行に移動させないようにするには、white-space:nowrap を返します.

フォーカス擬似クラス:-キーボードによって現在ターゲットされている要素をスタイル付けするために使われます.

div内の画像を中心にしたいなら、

img{
display:block;
margin:auto;

IMG要素の表示のデフォルト値がインラインであるので、センタリングのためにマージンAutoのためにブロックするように設定しなければなりません.

覚えておいてくださいul and ol デフォルトでいくつかのマージン/パディングを持ちます.それで、あなたがナビゲーションバーまたは何かを作っているときはいつでも、そのマージン/パディングを削除するようにしてください.様々なHTML要素のデフォルトスタイルを見るにはlink

[attribute^=value] 例:a[href^="https"] すべてを選択 element whose href attribute value begins with "https".

[attribute$=value] 例:a[href$=".pdf"] すべてを選択 element whose href attribute value ends with ".pdf"