Share
Bienvenue à la sixième leçon de notre série Web Design for Kids, CSS Layout!
C'est là que nous mettons tous nos éléments exactement où nous les voulons à l'écran. Nous allons ajouter à nos fichiers HTML et CSS pour le faire.
Pour vous rappeler, jetez un coup d'œil au site Web que nous sommes en train de construire. Les fichiers de ce cours peuvent être téléchargés ici et n'oubliez pas de poser vos questions dans la section commentaires au bas de cette page..
Il y a quelques choses que nous devons savoir avant de sauter directement dans disposition. Dans cette première partie, nous verrons comment rester organisé. Nous allons couvrir quelques bases de positionnement et parler de quel type de CSS Propriétés sont utilisés pour la mise en page.
Garder un document CSS organisé est très important. Une organisation appropriée nous permettra de trouver plus facilement toutes les pièces de notre fichier, ce qui facilitera les modifications et l'ajout d'éléments ultérieurement. De manière générale, il est préférable de commander notre CSS déclarations dans l'ordre où ils se déroulent sur la page.
Nous ajouterons des styles dans cette leçon à principale, par exemple. Ce style ajouté à un élément aussi important devrait être inclus dans notre document CSS avant tout autre élément imbriqué dans principale.
Les éléments HTML ressemblent un peu aux boîtes rectangulaires. le Modèle de boîte CSS décrit l'espacement de ces boîtes.
Chaque boîte a quatre côtés. Nous pouvons appliquer une valeur aux quatre côtés à la fois dans notre CSS via rembourrage, frontière, et / ou marge. Cependant, si nous voulons attribuer un style à un côté d'un élément, nous pouvons également le faire. Par exemple:
padding-left: 20px; bordure: solide 4px # 205D76;
Disons que cette case rose représente du texte. Nous pouvons voir que le rembourrage a été ajouté seulement à gauche et une épaisse bordure bleue couvre tout quatre côtés du contenu.
CSS nous donne un ensemble de propriétés spécialement conçues pour nous aider avec la mise en page de notre site Web. Ainsi, alors que le modèle de boîte aide à expliquer la espacement autour des éléments HTML, boîte souple va nous permettre de bouge toi ces éléments en place.
Lorsque nous utilisons flexbox sur un élément conteneur, cet élément devient un conteneur souple et tous les éléments qu'il contient deviennent articles flexibles.
Lorsque nous appliquons flexbox à un conteneur, les éléments sont automatiquement disposés le long d'une ligne droite (horizontalement) et nous pouvons ensuite entrer plus dans les détails avec d'autres propriétés de flexbox..
Nous n'aurons pas besoin d'utiliser trop de flexbox pour notre site Web, mais il est important de penser à la flexbox car elle est considérée comme le moyen le plus moderne et approprié pour positionner de petits morceaux de contenu sur un site Web..
le h1 et image de la ville dans le entête sont centrés sur la page. Il y a plusieurs façons de centrer quelque chose avec CSS, mais pour le moment, nous allons utiliser text-align: center; sur le entête.
Nous indiquerons l'en-tête en utilisant son nom de classe que nous avons ajouté précédemment:
.primary-header text-align: center;
N'oublie pas! Enregistrez les documents et actualisez le navigateur pour voir nos modifications au fur et à mesure que nous les apportons.!
La toute première chose que nous voudrons faire à nos sections est de faire en sorte que le contenu, l’image et la liste, dans chaque section, soient placés côte à côte plutôt que superposés..
Pour ce faire, nous utiliserons boîte souple. La Flexbox s’applique aux éléments d’un élément conteneur à l’aide de affichage: flex; sur le conteneur:
.section magasin display: flex; afficher: -webkit-flex; / * Ceci est un préfixe de vendeur! * /
Pour ramener cela à ce dont nous avons parlé plus tôt, l’image et div contenant la liste des magasins sont maintenant articles flexibles, parce qu'ils sont dans cette conteneur souple.
Bien qu'il existe de nombreuses options pour spécifier exactement où un élément doit aller, le comportement par défaut de flexbox ici fonctionne parfaitement pour nous et la liste de notre magasin se trouve maintenant à droite de l'image du magasin..
Puisque Flexbox est relativement nouveau, tous les navigateurs n’ont pas eu la chance de l’inclure correctement. Pour contourner ce problème, nous pouvons inclure un préfixe du vendeur propriétés flexbox, en ajoutant ce support manquant pour le moment. Bien que nous nous concentrions uniquement sur les versions les plus récentes des navigateurs modernes de ce projet, nous devrons néanmoins inclure un -webkit- Préfixe du fournisseur pour Flexbox pour vous assurer qu'il fonctionne dans «Safari».
Nous pourrions utiliser un peu d'espacement entre l'image et l'élément contenant tout le texte. Dans notre code HTML, ajoutons une classe de Détails du magasin au div contenant le texte.
Après avoir sauvegardé cela, nous pouvons passer à notre CSS et ajouter cet espacement, mais seulement au la gauche de la div:
.store-details margin-left: 30px;
Il y a un espacement à gauche des listes non ordonnées de nos magasins. C'est parce qu'il y a des style par défaut cela vient avec l'utilisation d'une liste HTML. Parfois, ce style par défaut est correct et d'autres fois, il se peut qu'il ne produise pas l'effet recherché..
Nous pouvons nous débarrasser de cet espacement par défaut en utilisant rembourrage: 0; sur la liste non ordonnée, mais cela ferait que nos points de balle vont trop loin à gauche par rapport à l'en-tête de notre liste.
Nous voulons un peu de rembourrage ici, mais pas autant que prévu par le style par défaut de la liste. Définir un rembourrage gauche de 15px sur la liste alignera nos points avec le titre assez bien, nous allons donc l'ajouter à ce que nous avons ajouté à la liste dans la leçon précédente:
.store-list padding-left: 15px; / * style ajouté * / color: # FFC122;
Nous avons toujours le problème mentionné dans la leçon précédente, les éléments de la liste étant trop rapprochés. Pour résoudre ce problème, ajoutons une classe de nom du magasin à tous les éléments de la liste, , dans notre HTML. Nous ajouterons ensuite une petite marge au bas de ces articles.
.nom de magasin margin-bottom: 10px;
L'espacement doit être ajouté aux sections et centré sur la page. Nous ferons cela à travers le marge et largeur Propriétés.
Encore une fois, nous ajouterons au style que nous avons déjà écrit:
.section magasin display: flex; afficher: -webkit-flex; marge: auto 50px; largeur: 450px;
le 50px valeur dans marge ici applique cette quantité d'espace au Haut de chaque magasin-section. Suite à cela avec auto indique au navigateur de prendre en compte la largeur de l'élément (que nous avons définie sur 450px) et le centrer automatiquement dans la fenêtre du navigateur.
Pour notre bas de page nous allons centrer le texte et ajouter une petite quantité de rembourrage pour vous assurer que ce texte n'est pas trop proche des bords du pied de page.
.primary-footer padding: 2px; text-align: center; couleur de fond: # FFC122;
Nous avons parlé de style par défaut un peu quand nous obtenions nos listes en place. le corps élément est livré avec ses propres styles par défaut, dont l’un est un marge qui entoure toute la page. Bien que parfois cela ne pose pas de problème, nous pouvons voir que cela empêche la Couleur de fond de nôtre bas de page d'étirer complètement sur les côtés de la fenêtre du navigateur.
La solution ici est de revenir au corps de notre document CSS et d'ajouter ce qui suit:
corps marge: 0;
Dans ce cours, nous avons mis tous nos éléments en place grâce aux techniques de mise en page CSS. Bien qu'il y ait généralement plusieurs façons d'obtenir une mise en page spécifique, se familiariser davantage avec le modèle de boîte CSS et la flexbox offre une compréhension très solide de ces différentes approches..
Puisque notre site est complet (félicitations!), Nous allons tout parler de conception, typographie, et Couleur dans les leçons à suivre. Cela vous aidera à devenir un concepteur de sites Web averti et complet..
On se voit en ville!
Accentsconagua