ct

Chapitre 4 - Les bases du CSS

Qu'est ce que c'est ?

Le CSS est un langage qui permet de "programmer" ou plutôt de créer le design de votre site en HTML. Il y a trois façons de l’inclure dans un document html :

  • Dans une feuille de style séparée (avec une extension .css)
  • Dans la balise <style>  que vous mettrez dans l’entête de votre site
  • Dans la balise de votre élément.

Avec ces 3 façons, le résultat est le même.

La balise style

<html>

<head>

     <style>

          .1{

               Background :green;

               Font-size :40px ;

               Color=white

          }

     </style>

</head>

<body>

      <h1 class="1">Voici un texte avec un fond vert de couleur blanche et de taille 40px</h1>

</body>

</html>

 

Attention : Si vous voulez appliquer  un style à une balise, veillez à rajouter un attribut class=" ", sinon le style ne sera pas appliqué.

Rapporter ensuite le nom de l'attribut class précédé d'un point dans la balise <style> et suivi d'accolades :

<style>

     .1{

          Background :green;

          Font-size :40px ;

          Color=white

     }

</style>

Les attributs compris entre les accolades :

  1. Background: green; → couleur de fond de la page
  2. Font-size: 40px; → taille de la police
  3. Color=white → couleur de la police

Il existe d’autres attributs que l’on utilise en CSS :

  • Border : [Entrez ici la largeur de votre cadre]
  •  Width : [Entrez ici la largeur de votre texte]
  • Height : [Entrez ici la hauteur de votre texte]
  • Font-Family : [Entrez ici la police de votre texte]
  • Position:[Entrez ici la position de votre texte]

Le CSS est une façon que l’on utilise beaucoup pour faire le design d’un site, ce chapitre n'est que la base.

Les bordures et le survol

Les bordures sont ce qui est autour d’un texte ou d’une image bref, c’est comme un cadre.
Il existe plusieurs types de bordures :
typesbordures.pngAlors maintenant, regardons le code CSS (en imaginant que la class bordure est la partie que l’on veut donner une bordure):

.bordure

{
border: 5px green dotted;
}

Alors en jaune, on indique qu’il y a une bordure,
En rouge on donne le nombre de pixel que fera notre bordure
En vert, on donne la couleur de la bordure
Et en bleu, on indique le type de bordure que l’on va utiliser.

Mais imaginez que vous voulez faire une bordure seulement à gauche et à droite.
Au lieu d’écrire « border : » dans le CSS on va utiliser ceux ici :
•    border-top : bordure en haut.
•    border-bottom : bordure en bas.
•    border-left : bordure à gauche.
•    border-right : bordure à droite.
Donc on peut se retrouver avec ceci :
.bordure

{
Border-right : 5px green dotted ;
Border-left: 5px green dotted;
}

On pourrait aussi faire des bordures arrondis :
On utilisera : border-radius

Exemple :

.bordure

{
Border-radius : 5px ;
}

Le survol  des liens :
Par défaut, quand on fait des liens en HTML, il son souligné et de couleur bleu, on peut changer ça en CSS, changer le survol, quand c’est déjà visité, à la sélection…
Au survol  :
A :hover{
text-decoration: underline;
color: red;

}
Le « a » signifie que c’est un lien et le « hover » signifie quand on le survol.
Quand on le sélectionne on va faire pareille sauf que l’on change « hover » par « focus »
Voici une liste d’autre action :
Visited    Quand le lien est déjà visité
Active    Au moment du clic

4 votes. Moyenne 5.00 sur 5.