Tutoriel Tutoriel - Utiliser et apprendre le langage CSS.

  • Auteur de la discussion BIBI' L'indiscipliné
  • Date de début
B

BIBI' L'indiscipliné

    Réponse de BIBI' L'indiscipliné Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #1
Bonsoir à tous aujourd'hui je vais vous présenter un petit tutoriel qui porte sur le CSS, en effet, je vais vous apprendre à utiliser ce langage web. Je vous souhaites une bonne lecture.
Vous devez être inscrit pour voir les images

LES RECHERCHES :

Que signifie CSS ?
Cascading Style Sheets

A quoi sert le langage CSS ?
A ajouter du style aux documents web

Pourquoi utilise-t-on généralement du CSS ?
Pour séparer le contenu et la présentation des documents web

Où est-il conseillé de placer le code CSS ?
Dans un fichier externe utilisable pour plusieurs pages

Dans quoi définit-on les déclarations CSS ?
Entre deux accolades séparés par des points-virgules { ... ; ... }

Dans la règle suivante, quel élément deviendra rouge ? strong#intro {background-color: red;}
L'élément <strong> dont l'id est "intro"

Quel élément sépare la propriété de sa valeur ?
Le signe deux points ( : )

Pourquoi est-il d'usage de sauter une ligne entre chaque déclaration ?
Pour rendre le code plus lisible et la maintenance plus facile

A quoi sert le sélecteur de classe : h2.nomDeClasse ?
A définir différentes propriétés pour l'élément <h2> dont la classe est "nomDeClasse".

Combien de règles peut contenir un fichier CSS ?
Il n'y a pas de limite, on peut en créer autant que l'on veut

Voilà, on peut dire que ceci sont les choses les plus importantes à savoir.
C'est le fonctionnement du CCS.

------------------------------------------------------------------------------------------------------------------------
Vous devez être inscrit pour voir les images

Les cours :

1) Comment creer des colonnes de hauteurs égales ?

Le problème. [SIZE=4 Résolution du problème.


  • Comment créer des colonnes de hauteurs égales ?
    Prenons par exemple le design ci-dessous :
    Vous devez être inscrit pour voir les images

    Imaginons que je veuille que le menu et le corps soient toujours de même hauteur. C'est facile à faire avec des tableaux, mais avec des balises <div>, c'est autre chose.C'est pourquoi je vous propose ce tutoriel.
    Dans un premier temps, nous mettrons en évidence le problème, puis nous verrons comment le résoudre.
    Bon, motivés ? Alors en route !
  • Mise en évidence.][/SIZE]
    Tout d'abord, il faut savoir que les balises <div> ne se comportent pas comme les cellules d'un tableau. Tandis que deux colonnes d'un tableau évoluent ensemble, les balises <div>, elles, évoluent séparément.
    Voici un petit exemple :

    Vous devez être inscrit pour voir les images

    Exemple avec les tableaux
    Dans cet exemple, les colonnes ont la même hauteur. Elles resteront ainsi même si l'on agrandit ou l'on réduit l'une d'elles : on dit qu'elles sont indissociables.

    Maintenant, voyons le cas des balises <div> (c'est là où ça va se gâter) :
    Vous devez être inscrit pour voir les images

    Exemple avec les balises <div>
    Comme vous le voyez, les balises <div> ont des hauteurs différentes. Contrairement aux cellules d'un tableau, leurs hauteurs évoluent séparément.
    Nous allons maintenant essayer de résoudre ce problème.


  • Et comment puis-je régler ce problème, moi ?
    En fait, il n'existe aucune propriété qui permet de résoudre ce problème (quoi ? Et comment fait-on, nous ? ). Attention, je n'ai jamais dit qu'il n'y avait aucun moyen : j'ai juste dit qu'il n'y avait aucune propriété.
    Pour arriver à résoudre ce problème, nous allons donc devoir tricher (ne vous inquiétez pas, ce n'est pas méchant ).

    Pour cela, nous allons utiliser quatre balises <div> : une qui contiendra nos balises <div> et trois autres (1 + 3 = 4 ).

    Commençons par créer nos deux colonnes.

    Nous allons créer deux colonnes, chacune possédant la propriété CSS float:. Ça ne devrait pas être trop compliqué.
    Voici le code que vous devriez utiliser :



    <div id="colonne1">
    </div>
    <div id="colonne2">
    </div>


    --------------------------------------------------------------------------

    #colonne1
    {
    width:140px;
    height:100px;
    background-color:#0033CC;
    float:left;
    }
    #colonne2
    {
    width:140px;
    height:60px;
    background-color:#0033CC;
    float:right;
    }


    Maintenant, nous allons englober nos deux colonnes par une balise <div> que l'on appellera conteneur. Voici le code associé :

    <div id="conteneur">
    <div id="colonne1">
    </div>
    <div id="colonne2">
    </div>
    </div>

    #conteneur
    {
    width:300px;
    margin-top:20px;
    padding-bottom:25px;
    padding-top:5px;
    }
    #colonne1
    {
    width:140px;
    height:100px;
    background-color:#0033CC;
    float:left;
    }
    #colonne2
    {
    width:140px;
    height:60px;
    background-color:#0033CC;
    float:right;
    }

    Maintenant, nous allons voir comment tricher.

    À notre balise <div>conteneur, nous mettrons une image de fond (grâce à la propriété CSS background-image : ) qui permettra de donner l'impression que les colonnes « continuent ». Pour cela, il suffit de prendre une capture d'écran (touche Imp Ecr), puis l'ouvrir avec un logiciel de retouche d'images (Paint par exemple). Il faut ensuite prendre une partie de l'image où l'on aperçoit les deux colonnes. Voici un exemple :

    Vous devez être inscrit pour voir les images


    Il ne reste plus qu'à enregistrer cette image dans le dossier image de notre site, puis à l'appliquer comme fond à notre balise <div>conteneur. Et voici le code que l'on obtient :

    <div id="conteneur">
    <div id="colonne1">
    </div>
    <div id="colonne2">
    </div>
    </div>

    #conteneur
    {
    width:300px;
    margin-top:20px;
    padding-bottom:25px;
    background-image:url(images/fond.jpg);
    padding-top:5px;
    }
    #colonne1
    {
    width:140px;
    height:100px;
    background-color:#0033CC;
    float:left;
    }
    #colonne2
    {
    width:140px;
    height:60px;
    background-color:#0033CC;
    float:right;
    }

    La manipulation suivante est très importante.

    Pour l'instant, nous avons trois balises <div> : notre conteneur puis nos deux colonnes.

    Avec ce code, le fond ne fonctionnera pas. En effet, les colonnes ayant la propriété float: n'agrandissent pas le conteneur. Pour cela, nous allons devoir utiliser une autre balise <div> à laquelle nous devrons appliquer la propriété CSS clear:both. Cette propriété a pour effet de placer la balise <div> à laquelle la propriété s'applique en dessous des autres balises <div> ayant la propriété float:. De ce fait, notre balise <div>conteneur s'agrandira.
    Voici le code :


    <div id="conteneur">
    <div id="colonne1">
    </div>
    <div id="colonne2">
    </div>
    <div id="bas">
    </div>
    </div>

    #conteneur
    {
    width:300px;
    margin-top:20px;
    padding-bottom:25px;
    background-image:url(images/fond.jpg);
    padding-top:5px;
    }
    #colonne1
    {
    width:140px;
    height:100px;
    background-color:#0033CC;
    float:left;
    }
    #colonne2
    {
    width:140px;
    height:60px;
    background-color:#0033CC;
    float:right;
    }
    #bas
    {
    clear:both;
    }

    Et comme par magie, les colonnes ont la même taille.
    Voici le résultat que vous devriez obtenir :


    Vous devez être inscrit pour voir les images



J'espère que vous avez bien compris ce petit tutoriel et que celui-ci vous sera d'une grande aide.
À bientôt j'ai décidé de faire 1 leçon par jour.
J'espère que ça vous aura plus.

BiBi-17,
 
Dernière édition par un modérateur:
D

deleted23650

    Réponse de deleted23650 Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #2
Beau tuto merci à toi :)
 

Aleқs'

Contributeur
Inscription
20 Avril 2013
Messages
1 253
Réactions
333
Points
7 696
    Réponse de Aleқs' Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #4
Merci à toi pour ce tutoriel :)
 

Appach

Contributeur
Inscription
12 Novembre 2012
Messages
582
Réactions
103
Points
7 484
    Réponse de Appach Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #5
Très beau tuto
GG mec ! :)
 
B

BIBI' L'indiscipliné

    Réponse de BIBI' L'indiscipliné Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #6

Florian.

Contributeur
Inscription
8 Août 2012
Messages
4 161
Réactions
1 122
Points
10 103
    Réponse de Florian. Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #7
Ta oublier de fermer ta balise :D
 
B

BIBI' L'indiscipliné

    Réponse de BIBI' L'indiscipliné Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #8
Ta oublier de fermer ta balise :D
Oups, merci ! :D
Je rectifie cela. J'étais tellement pressé de finir que je ne l'avait même pas vu. D:
 

Florian.

Contributeur
Inscription
8 Août 2012
Messages
4 161
Réactions
1 122
Points
10 103
    Réponse de Florian. Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #9
Oups, merci ! :D
Je rectifie cela. J'étais tellement pressé de finir que je ne l'avait même pas vu. D:
J'ai vu ça bon tuto meme si je connaisais mais c'est bien présenter ect ;)
 

Escroc

Je donne des leçon de vie
Contributeur
Inscription
29 Décembre 2013
Messages
3 346
Réactions
1 819
Points
2 633
    Réponse de Escroc Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #11
Très bon tuto bravo !
 

Stephen Hawking

Contributeur
Inscription
16 Décembre 2012
Messages
7 048
Réactions
2 659
Points
7 093
    Réponse de Stephen Hawking Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #12
Merci pour le Tuto :ok:
 

Mister Pixel

Fondateur PlayerStation.fr
Ancien staff RG
Inscription
17 Février 2013
Messages
8 843
Réactions
10 995
Points
15 908
    Réponse de Mister Pixel Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #13
Juste pour info , on ne voit pas l'icône que tu voulais mettre mais ça :
Tu l'a fait exprès ou erreur ?
Je te conseille d'enregistrer ton icône sur ton bureau puis le convertir en URL via "ImageShack"
 
Dernière édition:
B

BIBI' L'indiscipliné

    Réponse de BIBI' L'indiscipliné Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #14
Juste pour info , on ne voit pas l'icône que tu voulais mettre mais ça :
Tu l'a fait exprès ou erreur ?
Je te conseille d'enregistrer ton icône sur ton bureau puis le convertir en URL via "ImageShack"
C'est une erreur, merci de ma l'avoir signalée afin que je puisse modifier cette erreur.
 

Emeric'

Membre depuis Juin 2013
Contributeur
Inscription
23 Juin 2013
Messages
3 313
Réactions
832
Points
7 211
    Réponse de Emeric' Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #15
Très bon tutoriel. :)
 
B

BIBI' L'indiscipliné

    Réponse de BIBI' L'indiscipliné Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #16
Merci à tous. Vos messages me font plaisirs et m'incitent à continuer ainsi.
 

Emeric'

Membre depuis Juin 2013
Contributeur
Inscription
23 Juin 2013
Messages
3 313
Réactions
832
Points
7 211
    Réponse de Emeric' Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #17

Steganozorus

If You Can't Convince Them, Confuse Them
Contributeur
Inscription
20 Septembre 2012
Messages
4 272
Réactions
1 667
Points
4 675
    Réponse de Steganozorus Informatique ⌨️ Systèmes d'exploitation Windows : Tutoriel - Utiliser et apprendre le langage CSS.
  • #18
Sympa l'explication :D
 

Haut Bas