Comment créer des classes CSS pour mises en page Web

Classes de concepteurs de sites Web Cascading Style Sheets (CSS) permettent d'assigner des attributs similaires à des balises HTML multiples sans avoir à créer des entrées pour chacun. Plutôt que de placer des styles, tels que la couleur, la taille, la hauteur et la largeur directement dans les balises HTML, tous les attributs de style sont placés dans un fichier distinct appelé fichier CSS. Le fichier HTML est liée à la CSS, et quand un visiteur du site accède au fichier HTML dans un navigateur Web, le HTML charge les attributs dans le fichier CSS et les applique à les balises HTML appropriées.


Sommaire

  • Configuration du fichier css
  • Attribuer des classes
  • Spécifier les styles pour les classes
  • Conseils & avertissements
  • Choses que vous devez




    • éditeur de texte




    • Navigateur Web

    Configuration du fichier CSS

    1. Créer un fichier HTML normale. Il doit au moins contenir les balises suivantes:

      http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      http://w3.org/1999/xhtml ">


      Nom du site



    2. Créez un répertoire dans le répertoire de documents HTML et appelez "styles".

    3. Créez un nouveau fichier dans le "styles" répertoire appelé "style.css". Ce devrait être un fichier texte vide.

    4. Editez le fichier HTML et ajoutez la ligne suivante directement dessus de la balise:

    Attribuer des classes

    1. Editez le fichier HTML.

    2. Créer une case générique que vous allez utiliser pour appliquer des styles Par exemple:




    3. Remplacer "classname" avec un nom qui décrit le mieux votre classe.

    4. Attribuer le même nom de classe à toute étiquette que vous voulez avoir les mêmes caractéristiques. Par exemple, si vous avez 10 boîtes et cinq d'entre eux auront la même apparence exacte, affecter la classe à ces cinq mots clés.

    5. Pour chacun des éléments du groupe qui a un style unique, assigner une nouvelle classe pour elle.

    Spécifier les styles pour les classes

    1. Modifiez le fichier CSS.

    2. Créez une entrée pour chaque classe que vous avez attribué en utilisant le format suivant:

      .classname {}

    3. Assigner des attributs aux classes. Par exemple:

      .classname {height: 30px; background-color: # ffffff}

    4. Répétez les mêmes étapes pour chaque classe, et veillez à sauvegarder régulièrement vos documents.

    5. Ouvrez le fichier HTML dans un navigateur Web à tout moment pour vérifier votre travail, et aussi vérifier le code avec un validateur CSS.

    Conseils & Avertissements

    • Le sont des centaines de styles CSS que vous pouvez affecter. Utilisez le lien ci dans les ressources pour en apprendre davantage à leur sujet. Pensez à sauvegarder vos documents et vérifiez fréquemment votre travail.
    » » » » Comment créer des classes CSS pour mises en page Web