Vidéo: Comment créer votre premier site responsive - HTML5 & CSS3 - Tutoriel français 2018 2025
Avec un framework HTML en place, vous pouvez commencer à travailler sur le CSS pour créer des styles de page sur votre site. La meilleure façon d'incorporer CSS3 est de suivre ces étapes:
-
Commencez avec le diagramme de modèle de page.
Il devrait avoir toutes les informations dont vous avez besoin.
-
Testez votre CSS dans un navigateur.
Commencez par une implémentation CSS simple qui garantit que vous avez les bons noms pour tous les éléments de la page. Ensuite, modifiez chaque élément en fonction de votre document de conception, en testant au fur et à mesure.
-
Implémentez le CSS à partir de votre diagramme.
Vous devez implémenter le dessin que vous avez déjà créé, et non concevoir la page. (Cela est déjà arrivé dans le processus de création de diagrammes.)
-
Enregistrez le motif.
Pour les projets de plusieurs pages, le CSS externe dans un fichier séparé est définitivement la solution. Pendant que vous travaillez, sauvegardez le CSS normalement afin que le navigateur puisse le lire.
-
Testez et modifiez.
Les choses ne sont jamais tout à fait ce qu'elles semblent avec les CSS parce que les navigateurs ne sont pas conformes aux normes de manière égale. Vous devez tester et modifier sur d'autres navigateurs. Si les utilisateurs ayant des technologies plus anciennes sont préoccupants, vous devrez peut-être utiliser une feuille de style secondaire pour les anciennes versions d'IE. Vous pouvez également créer une version mobile.
-
Répétez l'opération pour les autres modèles.
Répétez ce processus pour chacun des autres modèles que vous avez identifiés dans votre diagramme de site.
Le résultat de ce processus devrait être un certain nombre de fichiers CSS que vous pouvez facilement réutiliser sur votre site.
Voici le code CSS de la page primaire:
body {background-color: # 000000;} h1 {text-align: center; font-family: sans-serif; Couleur blanche; texte-ombre: 0 0 10px noir;} #all {background-color: blanc; bordure: 1px noir uni; largeur: 800px; marge supérieure: 2em; marge-gauche: auto; marge-droite: auto; min-height: 600px;} #heading {background-color: # A11204; background-image: url ("cbBackground.png"); couleur: #FFFFFF; hauteur: 100px; taille de police: 2em; rembourrage-gauche: 1em; bord inférieur: 3px noir uni; marge supérieure: -1. 5em;} #menu {background-image: url ("cbBackground.png"); couleur de fond: # A11204; couleur: #FFFFFF; float: à gauche; largeur: 100px; min-height: 500px;} #menu li {list-style-type: aucun; marge-gauche: -2em; marge-droite:. 5em; text-align: center;} #menu a {color: #FFFFFF; bloc de visualisation; frontière: # A11204 début 3px; text-decoration: none;} #menu a: hover {border: # A11204 Encart 3px;}. contenu {border: 3px double # A11204; marge: 1em; marge gauche: 110px; rembourrage-gauche: 1em; rembourrage-fond: 1em; rembourrage-droit: 1em; border-radius: 5px; boîte-ombre: 5px 5px 5px gris;}.contenu h2 {background-color: # A11204; background-image: url ("cbBackground.png"); couleur: #FFFFFF; text-align: right;} #footer {couleur: #FFFFFF; couleur de fond: # 000000; bordure: 1px solide # A11204; float: à gauche; clarifier les deux; largeur: 100%; text-align: center;}
