===== Changer la police du titre de la page =====
Pour changer la police du titre qui utilise la balise H1 **mais uniquement pour le titre H1** que je veux, j'utilise les attributs **class** ou id :
* un **attribut class** permet de définir un style qui peut être utilisé plusieurs fois dans la page HTML,
* un **attribut id** permet de définir un style qui ne doit s'appliquer qu'à un seul élément de la page HTML.
* je **modifie** la balise **
Big Data : données, données, donnez-moi !
#titreprincipal
{
text-align: center;
background-color: green;
font-size: 16px;
font-family: Verdana;
}
Visualise le résultat obtenu.
** ou **
... les mot important ... un autre mot important ....
* Complète le fichier **style.css** de la manière suivante :
.important
{
font-style: italic;
color: red;
}
Voici des **noms** de couleur que tu peux utiliser :
{{ :icn:2nde:web:weblab_16.png?nolink |}}
==== La notation hexadécimale ====
Il y a **bien plus** de couleurs possibles. Pour cela une solution est d'utiliser la **notation hexadécimale** comme **#FF5A28** :
* on commence par écrire un **dièse (#)**,
* suivi de **six lettres ou chiffres** allant de **0 à 9** et de **A à F**.
* Ces lettres ou chiffres fonctionnent deux par deux :
* Les deux premiers indiquent une quantité de **rouge**,
* les deux suivants une quantité de **vert**,
* et les deux derniers une quantité de **bleu**.
* En **mélangeant** ces quantités (qui sont les composantes Rouge-Vert-Bleu ou Red-Green-Blue - **RGB**- de la couleur) on peut obtenir la couleur voulue.
=== Exemple : ===
* #000000 correspond à la couleur noire
* #FFFFFF à la couleur blanche.
/* On travaille sur la balise body, donc sur TOUTE la page */
body
{
background-color: lime; /* Le fond de la page sera vert clair */
color: gray; /* Le texte de la page sera gris */
}
Pour choisir une image de fond, après avoir téléchargé l'image dans ton projet, utilise cette propriété CSS :
body
{
...
background-image: url("uneimage.png");
}
===== Les bordures =====
Les **bordures** permettent de décorer ta page en précisant de nombreuses propriétés CSS : **border-width**, **border-color**, **border-style**, etc.
Pour simplifier la déclaration des propriétés d'une bordure, j'utilise la **super-propriété border** qui regroupe **l'ensemble** de ces propriétés en combinant plusieurs valeurs.
J'utilise jusqu'à trois valeurs pour modifier l'apparence de la bordure :
* La largeur en pixels : exemple 2px,
* La couleur avec un nom, une valeur hexadécimale (#FF0000) ou une valeur RGB (rgb(198, 212, 37)),
* Le type de bordure, un simple trait ou des pointillés ou encore des tirets, etc. :
* none: pas de bordure (par défaut) ;
* solid: un trait simple ;
* dotted: pointillés ;
* dashed: tirets ;
* double: bordure double ;
* groove: en relief ;
* ridge: autre effet relief ;
* inset: effet 3D global enfoncé ;
* outset: effet 3D global surélevé.
Exemple pour une bordure bleue, en tirets, épaisse de 3 pixels autour du paragraphe en utilisant l'attribut **class** dans la paragraphe ou doit s'appliquer le style que j'appelle **alire** :
.alire
{
border: 3px blue dashed;
}
===== Les balises de base du CSS =====
Voici un lien parmi d'autres pour découvrir les balises de base du CSS :
* https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-proprietes-css
==== Activité Les langages pour créer des sites Web ... ====