Alors que nous ne pouvons pas couvrir tout que CSS a à offrir dans ce tutoriel, ce que nous pouvons faire est de passer en revue les informations dont vous avez besoin pour créer une page Web unique et esthétique avec des styles CSS.
Heureusement, même après ce guide, il existe de nombreuses ressources sur le Web pour vous aider à perfectionner vos compétences CSS.
Avant de continuer, voici quelques clés points à retenir sur CSS:
Le rappel de ces points de nos pages précédentes vous aidera à mieux comprendre ce que nous faisons à partir de maintenant.
CSS est un outil puissant, d'autant plus qu'avec CSS, vous pouvez travailler avec moins de balises tout en obtenant le résultat souhaité. Il n'y a que six types de balises HTML sur lesquelles vous devez vous concentrer.
<h> est une balise de titre. Il existe une gamme de balises d'en-tête qui vont de
à
. Comme vous pouvez l'imaginer, le
Les navigateurs Web ont chacun une valeur par défaut
<p> est la balise de paragraphe. Cette balise modifie le texte de la page en le convertissant en forme de paragraphe. Le texte apparaît dans un bloc soigné sur la page. Semblable à la balise ci-dessus, il est assez facile à utiliser.
<ul> et <ol> sont des balises de liste utilisées pour créer des menus.
<div> est ce qui crée des conteneurs pour les sections de la page Web. Comme vous vous en souvenez peut-être, nous avons utilisé le
<un href> est le lien ou la balise «hyperlien». C'est peut-être l'une des balises les plus importantes à retenir. Il transforme le texte en «hyper», ce qui nous permet ensuite de cliquer dessus. En cliquant sur le texte, une commande est envoyée pour activer ou charger une autre page.
<img> est la balise «image». Avec cette balise, vous pouvez ajouter des images à votre page Web. Contrairement au contenu, vous ne pouvez pas simplement copier et coller les images sur la page Web et vous attendre à ce qu'elles apparaissent. Ici, vous devez en fait ajouter la balise pour que l'image apparaisse là où elle devrait sur le navigateur lorsqu'un utilisateur charge la page.
Vous pouvez maintenant dire que vous maîtrisez les balises HTML clés que nous utiliserons tout au long du didacticiel et qui vous seront d'une grande utilité lorsque vous vous aventurez dans l'utilisation de CSS pour vos propres pages. De plus, vous n'avez pas besoin de vous concentrer sur <br> et <Police de caractère> balises.
Pour continuer avec le didacticiel, créez un nouveau fichier texte, collez le code ci-dessous et enregistrez-le sous practice.html:
Après avoir créé la page, pour vous faciliter la tâche, créez un dossier et appelez-le «myCSSwebsite». Ensuite, ajoutez-y la page HTML. Maintenant, retournez dans le dossier et ouvrez un nouveau document texte et nommez-le «style.css».
Enfin, ouvrez le nouveau document texte et collez le code CSS du modèle suivant et cliquez sur Enregistrer:
/ * Sélecteurs génériques * /
corps {
famille de polices: Georgia, "Times New Roman", Times, serif;
taille de la police: 14px;
couleur: # 333333;
couleur de fond: # F9F9F9;
}
p {
largeur: 80%;
}
li {
type de style de liste: aucun;
hauteur de ligne: 150%;
image-style-liste: url (../ images / arrowSmall.gif);
}
h1 {
famille de polices: Georgia, "Times New Roman", Times, serif;
taille de la police: 18px;
poids de la police: gras;
couleur: # 000000;
}
h2 {
famille de polices: Georgia, "Times New Roman", Times, serif;
taille de la police: 16px;
poids de la police: gras;
couleur: # 000000;
bordure inférieure: 1px solide # C6EC8C;
}
/ **************** Pseudo classes **************** /
un lien {
couleur: # 00CC00;
texte-décoration: souligné;
poids de la police: gras;
}
li: lien {
couleur: # 00CC00;
texte-décoration: aucun;
poids de la police: gras;
}
a: visité {
couleur: # 00CC00;
texte-décoration: souligné;
poids de la police: gras;
}
li a: visité {
couleur: # 00CC00;
texte-décoration: aucun;
poids de la police: gras;
}
a: hover {
couleur: rgb (0, 96, 255);
rembourrage en bas: 5px;
poids de la police: gras;
texte-décoration: souligné;
}
li a: hover {
bloc de visualisation;
couleur: rgb (0, 96, 255);
rembourrage en bas: 5px;
poids de la police: gras;
border-bottom-width: 1px;
border-bottom-style: solide;
border-bottom-color: # C6EC8C;
}
a: active {
couleur: rgb (255, 0, 102);
poids de la police: gras;
}
/ ************************* ID *********************** ** /
#la navigation {
position: absolue;
largeur: 210 px;
hauteur: 600px;
marge: 0;
margin-top: 50px;
bordure droite: 1px solide # C6EC8C;
poids de la police: normal;
}
#centerDoc {
position: absolue;
rembourrage: 0 0 20px 0; / * en haut à droite en bas à gauche * /
margin-top: 50px;
marge gauche: 235px;
}
Ne soyez pas intimidé. Ce n'est vraiment pas aussi compliqué qu'il n'y paraît. Les détails seront bientôt expliqués.
Une fois cette étape terminée, la prochaine étape consiste à ajouter du code dans la page HTML.
Où tu vois
balises, insérez le code suivant:La navigation principale
Le titre principal
Voici un paragraphe! Nous allons faire des choses amusantes avec ça aujourd'hui. Il est maintenant temps pour un lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Bien. Maintenant, entre
insérer:Premier tutoriel CSS
C'est parti – maintenant nous pouvons commencer à styliser la page Web. Nous avons beaucoup fait jusqu'à présent – il suffit de regarder votre page HTML.
Nous allons continuer.
Continuer à la partie 2