Share
Bienvenue à la cinquième leçon de notre série Web Design for Kids, consacrée au CSS.
Nous avons travaillé très fort sur notre contenu HTML, il est donc temps de le rendre joli! Nous allons ajouter des éléments à notre page HTML ici, ainsi que créer un nouveau fichier: un CSS document.
Jetez un coup d'œil au site Web complet que nous construisons. Les fichiers de cette leçon peuvent être téléchargés ici et n'oubliez pas de poser des questions dans la section commentaires au bas de cette page..
Avant de commencer à coder, assurons-nous de bien comprendre ce qu'est CSS. CSS représente Feuilles de style en cascade et c'est un langage qui nous aide à changer l'apparence de notre page HTML.
Dans l'image ci-dessus, le navigateur de gauche montre un site Web sans CSS, sans coiffant, tandis que le site Web sur la droite a un style. Le style a été écrit dans un fichier CSS-beaucoup meilleur!
CSS est écrit dans un fichier séparé en utilisant notre éditeur de texte. Notre document HTML a été enregistré avec un .html extension, mais notre document CSS sera enregistré avec un .css extension.
Nous devrons créer un nouveau document dans notre éditeur de texte et l'enregistrer sous le nom «tutstown.css» dans «tutsfolder»; à côté de “index.html” et du dossier “images”.
Pour que notre document CSS puisse appliquer des styles à notre document HTML, nous devons les relier. Cela se fait par un élément dans l'élément head tout en haut de notre document HTML.
Nous ajouterons ce lien directement sous notre titre:
Tuts Town
Il y a quelques importants les attributs inclure dans cet élément de fermeture automatique, dont le premier est type. L'attribut type indique au navigateur ce que le type du contenu que nous lions. Dans ce cas c'est un text / css fichier.
Le deuxième attribut que nous voyons ici est rel, qui dit au navigateur ce que le la relation est entre le HTML et le document lié (notre CSS). Le document CSS est un feuille de style pour notre HTML, donc ce sera ce que nous incluons ici.
Enfin, nous avons le href dont vous vous souviendrez peut-être de notre éléments. Cela pointe ailleurs. Dans ce cas, il indique au navigateur où trouver le fichier CSS que nous avons lié à.
Si tout est lié correctement, la page sera différente lorsque vous l'actualiserez dans le navigateur:
Dans notre fichier CSS, nous pouvons lister les éléments HTML que nous avons utilisés et dire à quoi nous voulons qu'ils ressemblent. Il y a beaucoup de façons de désigner les éléments que nous voulons et Classes HTML sont l'un de ces moyens.
Classes HTML sont des attributs que nous pouvons ajouter aux éléments. Une fois qu'un élément a un nom de classe, nous pouvons l'utiliser dans notre CSS.
Le nom de classe choisi doit être un mot ou des mots décrivant le contenu de cet élément..
Ajouter une classe à notre pourrait ressembler à ceci:
Les classes n'étant pas uniques, plusieurs éléments différents peuvent avoir le même nom de classe. Cela rend l’ajout des mêmes styles à beaucoup d’éléments beaucoup plus simple; nous verrons cela en action quand nous arriverons à notre magasin d'images!
La façon dont vous écrivez le code s’appelle sa syntaxe. Comme pour le HTML, CSS doit être écrit correctement pour fonctionner.
Passons à notre fichier CSS et, juste pour vous exercer, changeons le Couleur de fond de l'en-tête à bleu.
.en-tête primaire couleur d'arrière-plan: bleu;
Il y a beaucoup de choses à faire!Donc, notre CSS comprend que ce que nous ciblons est un nom de classe, nous devons faire quelques choses:
Accentsconagua
. avant le nom.Couleur de fond) est immédiatement suivi d'un colon : bleu dans ce cas). ; Il peut être très facile d'oublier ces!
Enregistrez ce fichier CSS et actualisez le navigateur. si vous ne l'avez pas encore ouvert, vous pouvez le faire en double-cliquant sur le fichier «index.html» dans le «dossier tuts». Comme c'est so?!
Important! Supprimons maintenant ce style car notre site n'aura pas d'en-tête bleu.!
CSS nous permet également d'inclure dans notre fichier des commentaires que le navigateur ignorera, mais ils seront légèrement différents de nos commentaires HTML..
Un commentaire CSS est contenu dans ces symboles: / * * /
/ * Ceci est un commentaire en CSS * /
Le document CSS dans les fichiers d’exercices contiendra quelques commentaires utiles pour expliquer davantage les choses..
Le tout premier style que nous pouvons faire sur notre site Web est de changer la Couleur de fond à cette belle jaune clair. Certaines valeurs de couleur pouvant être écrites en CSS, telles que bleu dans l'exemple de code ci-dessus, et le navigateur comprend. Pour les autres couleurs moins courantes, nous devrons inclure la couleur hexadécimal, ou hexagone, numéro à la place.
Toutes les couleurs ont un numéro hexagonal correspondant. Les navigateurs ne comprennent pas beaucoup de couleurs lorsqu'ils sont écrits, mais ils comprennent très bien les nombres hexadécimaux. Le nombre hexadécimal de notre couleur jaune clair est # FAF8DA, et nous voulons l'appliquer à la , pour remplir la page entière.
body background-color: # FAF8DA;
Important! Il n'y a pas besoin d'un point devant corps ici parce que ce n'est pas un nom de classe. Au lieu de cela, nous avons immédiatement indiqué l'élément du corps.
Si vous êtes curieux de connaître la valeur hexadécimale d'autres couleurs, ce site hexadécimal peut être très utile..
Nous pouvons également définir le Police de caractère (le style des lettres) pour notre site Web en utilisant corps dans notre CSS.
Tout ce que nous avons besoin de savoir à ce stade est que nous devons lien une police de Google à notre document HTML. Une fois que cela est lié, le navigateur comprendra et nous pourrons l'utiliser.
Voici un lien vers le lien que nous devons ajouter dans le de notre HTML (le même endroit nous avons lié notre document CSS!)
Ensuite, nous pouvons enregistrer ceci et accéder à notre document CSS:
body font-family: 'Open Sans';
Ceci définira la police pour tout le texte sur la page comme Open Sans.
Dans l'en-tête, nous allons modifier la couleur et la taille du texte, ainsi que la taille de l'image de la ville..
Tout d'abord, nous devons ajouter les bonnes classes HTML aux éléments de l'en-tête, afin de pouvoir les utiliser dans notre CSS.
Dans l'ouverture tag ajoutons une classe de Titre principal et dans le aperçu de la ville:
Bienvenue à Tuts + Ville
Dans notre document CSS, nous pouvons maintenant pointer sur ces éléments à travers les noms de classe que nous avons définis et commencer à styliser.
Nous définissons ici une taille de police assez grande 70px. px, ou pixels, est comme un point sur l'écran. Ce point est rempli de couleur et est utilisé comme unité de mesure. L’image de notre ville est également assez grande, nous allons donc la fixer à 650px large.
le Couleur propriété définit la couleur du texte, qui ici (# 205D76) Est un bleu foncé.
.en-tête principal taille de la police: 70px; couleur: # 205D76; .town-preview width: 650px;
Rappelez-vous que nous avons dans la section principale de plus petites sections contenant une image et du texte. Nous devrons définir une taille pour ces images et styliser les en-têtes et les listes avec CSS.
La première chose à faire est de définir la taille des images du bâtiment. Pour définir toutes les tailles d'image ensemble, nous pouvons utiliser le même nom de classe pour plusieurs éléments..
Nous voudrons ajouter le même nom de classe, bâtiment, aux trois images de magasin dans notre code HTML, puis redimensionnez-les toutes en même temps dans notre code CSS, comme ceci:
.bâtiment largeur: 200px;
Nos trois en-têtes plus petites peuvent également avoir le même nom de classe et nous les utiliserons pour changer le Couleur et taille de police du texte.
.en-tête de catégorie color: # 205D76; taille de police: 30px;
Après le titre de chaque section, nous avons nos listes de magasins non ordonnées - vous vous en souvenez? En plus de changer la taille et la couleur des liens ici, nous devrons également changer la couleur de la liste. points de balle.
Ajoutons une classe de liste de magasins au lien de magasin au dans notre document HTML puis enregistrez-le.
.liste de magasins color: # FFC122; / * Change la couleur de la puce de la liste * / .store-link color: # EA6E2F; taille de police: 20px;
Vous remarquerez peut-être, en consultant notre site Web dans le navigateur, qu'il n'y a pas beaucoup d'espacement entre les éléments de la liste, ce qui le rend un peu encombré. Nous allons parler de l'espacement et en ajouter quelques-unes dans le didacticiel de mise en page plus loin dans la série..
Après avoir ajouté une classe de pied de page primaire à et créé par au élément dans ce pied de page, nous pouvons déclarer la Couleur de fond ainsi que le texte Couleur et taille de police:
.primary-footer background-color: # FFC122; .created-by color: #FFFFFF; taille de police: 20px;
Dans cette leçon, nous avons appris comment lier un document HTML et un document CSS, puis ajouter de beaux styles à nos éléments via Des classes. À ce stade, ce que nous voyons dans notre navigateur ne correspondra toujours pas à l'aperçu entièrement conçu du site Web que nous avons référencé, mais voyez quelle différence une couleur et une taille peuvent faire! Ça va seulement aller mieux.
Nous allons ensuite déplacer notre contenu sur l'écran à l'aide de CSS très astucieux. disposition techniques.
On se voit en ville!
