Maison >interface Web >tutoriel CSS >Le projet Odin - Introduction au CSS

Le projet Odin - Introduction au CSS

WBOY
WBOYoriginal
2024-09-08 13:00:371149parcourir

The Odin Project -Intro to CSS

Bonjour ?,

Je suis un développeur front-end avec 3 ans d'expérience. J'ai toujours voulu combler le fossé de mes connaissances et devenir un développeur full-stack. J'ai fait plusieurs tentatives pour démarrer le projet Odin, mais je n'ai pas réussi à y donner suite de manière cohérente. Cette fois, je suis déterminé à m'y tenir et à améliorer mes compétences.

Pour suivre mes progrès, je publierai une série d'articles de blog détaillant mes apprentissages de chaque chapitre du projet Odin. Considérez-les comme mes journaux de développement.

J'ajouterai les sujets que j'ai appris et partagerai des choses que je ne connaissais pas auparavant.

Je commence avec CSS au format HTML et toutes les choses d'introduction que j'ai parcourues précédemment ou du moins dont je suis au courant.

Sujets appris

  • Sélecteurs
  1. Sélecteur universel
  2. Sélecteur de type
  3. Sélecteur de classe
  4. Sélecteur d'ID
  5. Sélecteur de regroupement
  6. Sélecteur de chaînage
  • Combinateur Je savais comment utiliser le combinateur mais je ne connaissais pas ce terme spécifique. Aussi la définition qu'il s'agit d'une relation entre les sélecteurs autre que leur regroupement ou leur enchaînement.
  • Combinateur descendant

Propriétés CSS de base

  • couleur, couleur de fond
  • Typographie
  1. Famille de polices et famille de polices génériques
  • Hauteur et largeur de l'image
    Donc, une autre chose que j'ai apprise ici est qu'il est conseillé de toujours spécifier les attributs de largeur et de hauteur pour les images en HTML. Cela garantit que le navigateur réserve l'espace approprié pour l'image lors du rendu de la page, évitant ainsi des changements inattendus dans la disposition du contenu lors du chargement des images. Pour conserver le rapport hauteur/largeur d'origine d'une image, vous pouvez modifier uniquement l'attribut de largeur et définir la hauteur sur « auto ». Cela ajustera automatiquement la hauteur en fonction des proportions de l'image.

  • CSS externe

  • CSS interne et en ligne

Je me souviens d'un cas où mon responsable technique a ajouté du CSS en ligne à notre code HTML. J'ai hésité à remettre en question sa décision, car il était un professionnel chevronné et j'étais encore relativement nouveau dans le domaine.

Cependant, je comprends maintenant qu'une approche plus efficace aurait été de suggérer de minimiser l'utilisation du CSS en ligne. En limitant les styles en ligne à ceux absolument nécessaires au fonctionnement de la règle, nous pouvons éviter de trop appliquer de spécificité et maintenir une base de code plus propre et plus maintenable.

Je prévois également de publier un podcast hebdomadaire récapitulant les choses que j'ai apprises.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn