Odin プロジェクト - CSS の紹介

こんにちは?、

私は 3 年の経験を持つフロントエンド開発者です。私は常に自分の知識のギャップを埋めてフルスタック開発者になりたいと考えていました。オーディン プロジェクトを開始しようと何度か試みましたが、一貫して実行することができませんでした。今度はこれを継続してスキルを向上させたいと決意しています。

私の進捗状況を追跡するために、Odin プロジェクトの各章から学んだことを詳しく説明する一連のブログ投稿を公開する予定です。これらは私の開発日記として考えてください。

私が学んだトピックを追加し、これまで知らなかったことを共有します。

HTML としての CSS と、これまでに経験した、または少なくとも私が知っているすべての入門的な内容から始めます。

学んだトピック

• セレクター

1. ユニバーサルセレクター
2. タイプセレクター
3. クラスセレクター
4. IDセレクター
5. グループ化セレクター
6. チェインセレクター

• コンビネータ コンビネーターの使い方については知っていましたが、その具体的な用語については知りませんでした。また、セレクターのグループ化やチェーン化以外のセレクター間の関係に関する定義も含まれます。
• 子孫コンビネーター

基本的な CSS プロパティ

• 色、背景色
• タイポグラフィ

1. フォントファミリーと汎用フォントファミリー

• 画像の高さと幅
  ここで私が学んだもう 1 つのことは、HTML 内の画像には常に幅と高さの両方の属性を指定することをお勧めするということです。これにより、ブラウザーはページのレンダリング中に画像用に適切なスペースを確保し、画像の読み込み時にコンテンツ レイアウトが予期せず変更されるのを防ぎます。画像の元の縦横比を維持するには、幅属性のみを変更し、高さを「自動」に設定します。これにより、画像の比率に基づいて高さが自動的に調整されます。

• 外部 CSS

• 内部およびインライン CSS

私は、技術責任者がインライン CSS を HTML に追加したときのことを思い出します。彼はベテランのプロであり、私はまだこの分野に比較的新人だったので、彼の決定に疑問を抱くことを躊躇しました。

しかし、今では、より効果的なアプローチは、インライン CSS の使用を最小限に抑えることを提案することであったと理解しています。インライン スタイルを、ルールが機能するために絶対に必要なもののみに制限することで、過度の具体性の適用を回避し、よりクリーンで保守しやすいコードベースを維持できます。

学んだことを要約した毎週のポッドキャストも公開する予定です。

以上がOdin プロジェクト - CSS の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。