Fermeture pour inactivité
 
AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 Le CSS, les bases

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
darkcryeer



Messages : 7
Date d'inscription : 17/06/2010
Age : 24
Localisation : Toulouse, France

MessageSujet: Le CSS, les bases   Jeu 17 Juin - 18:57

Bonjour à tous, je suis nouveau sur le Forum, mais ayant des connaissances relativement avancé sur le sujet (développement web), je me lance donc dans la rédaction de tutoriels de ce genre.

Les Bases du CSS



  1. Qu'est ce que le CSS (Cascading Style Sheets) ?
    Je ne vais pas vous ressortir la définition qui viens de Wikipédia, ni vous coller ce qui est dit sur n'importe quel autre site qui traitera de ce sujet.

    Le CSS, aussi appelé "feuille de style", est l'élément qui permet de donner un style aux éléments d'une page web. Concrètement, il s'agit d'un langage de programmation très simple qui vous permettra la mise en forme des pages de vos sites web.


  2. Exemple de feuille de style.
    En général, les exemples valent mieux que de beau textes théorique, je vous montre donc une partie de la feuille de style de ce forum :

    Code:


    [...]

    a {text-decoration: none;}
    a:link {text-decoration: none;}
    a:hover {text-decoration: none!important;}
    a.forumlink {text-decoration: none;}
    a.forumlink:hover {text-decoration: none!important;}
    a.topiclink {text-decoration: none; }
    a.topiclink:hover {text-decoration: none!important; }

    body{margin-top: 0px;}

    [...]

    .lastpost1 {
    font-align: middle;
    font-size: 8px;
    margin-left: 0px;
    padding-top:0px;
    padding-bottom:0px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright:15px;
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-topleft: 15px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-top-left-radius:0px;
    border-left: 3px #131313 solid;
    border-bottom: 1px #131313 solid;
    border-top: 1px #131313 solid;
    border-right: 3px #131313 solid;
    background: #060606 url('http://www.casimages.com/img.php?i=100519104750687732.png');
    }

  3. Explications.
    Comme vous avez pu le constater plus haut, le codage CSS est très simple, bien plus simple que n'importe quel autre codage.
    Si vous faites du flash, du javascript ou même du HTML, vous comprendrez et utiliserez le CSS en maximum 3 jours.

    Pour expliquer plus en détails, le CSS est exclusivement réservé au domaine du Web, il est donc impossible de l'utiliser en C, C++, Java ou même avec Flash (dans la partie codage en tout cas). Plus haut, vous avez vu un extrait de fichier CSS "externe". Externe pour la simple et bonne raison que le CSS n'est pas partie intégrante de la page Web, il s'agit d'un fichier à part, que l'on appel sur un site web grâce à ce code :


    Code:
    <link href="[lien vers votre feuille de style.css]" rel="stylesheet" type="text/css" media="screen"/>

    Cette méthode, utilisé de façon courante de nos jours, permet d'utiliser un seul fichier CSS pour toutes les pages d'un site. Auparavant et comme toujours (sur quelque site ou dans certaines situations), le CSS est écrit sur le fichier HTML, c'est à dire directement sur le fichier qui contient le site, entre les balises "< head >" du site, sous cette forme :

    Code:
    <style type="text/css">
    Vos lignes de code CSS
    </style>

    De même, une méthode consiste à implanter le CSS directement dans les balises d'un site, ce qui est très souvent mal apprécié de nos jours, un exemple avec un paragraphe :

    Code:
    <p style="text-align:center; font-size:12px; line-height:18px;"><Voici donc un paragraphe dont le style à été appliqué directement sur la balise "p".</p>

  4. Premiers pas.
    En CSS, il y a deux ou trois règles importantes pour que tout fonctionne correctement :

    • Il y a trois manière de styliser une balise :
      Elle est nommé par un identifiant que seul cet balise peut avoir, tel que la balise contient l'attribut "id" :
      Code:
      <p id="paragraphe">Voici un paragraphe avec l'id UNIQUE "paragraphe"</p>

      Elle est nommé par un nom commun à plusieurs balises, tel que la balise contient l'attribut "class" :
      Code:
      <p class="paragraphe">Voici un paragraphe avec la class "paragraphe"</p>
      <p class="paragraphe">En voici un autre</p>

      Elle est nommé par sa balise, de tel manière que toutes les balises qui sont identiques adopterons le style défini :
      Code:

      <style type="text/css">
      p{ font-size:12px; font-family:verdana, 'Myriad pro', sans-sherif; line-height:18px;}
      </style>

      <p>Ce paragraphe est quelconque et n'est pas spécifique, mais il adoptera le style défini plus haut.</p>
      <p>Ce paragraphe, comme celui du dessus, n'est pas spécifique est adoptera tout de même le style défini ci-dessus.</p>

    • le style est défini entre accolade :
      Code:
      <style type="text/css">
      p{ font-size:12px; font-family:verdana, 'Myriad pro', sans-sherif; line-height:18px;}
      </style>

    • Chaque attribut se termine par un "point virgule"
      Code:
      font-size:12px;
      font-family:verdana, 'Myriad pro', sans-sherif;
      line-height:18px;



Voila, pour le moment, je pense que cela suffit. Peut être (pas sur) qu'il y ai une suite car le plus gros de ce qui pouvait être expliqué l'a été ici même. Si vous avez des questions ou que vous trouver une erreur dans ce tutoriel qui est assez long, n'hésitez pas à le dire.
A bientôt pour de nouveaux tutoriels.


Dernière édition par darkcryeer le Sam 19 Juin - 14:30, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Benji72
V.I.P


Messages : 756
Date d'inscription : 28/02/2010
Age : 24
Localisation : Dans ton placard et sa sent le fauve :p

MessageSujet: Re: Le CSS, les bases   Jeu 17 Juin - 19:11

Merci beaucoup du partage Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
KorrorAO
Fondateur du Studio


Messages : 1969
Date d'inscription : 09/01/2010
Age : 21
Localisation : Jonquiere, Québec

MessageSujet: Re: Le CSS, les bases   Ven 18 Juin - 17:51

MErci du partage Very Happy

Ca pourra aider les gens qui veulent savoir ce qu'est ,et peut-etre s'y mettre Wink

_________________
Me contactez
[Vous devez être inscrit et connecté pour voir cette image]
[Vous devez être inscrit et connecté pour voir cette image]
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.as-studios.com
King39
Newbie du Studio


Messages : 92
Date d'inscription : 16/05/2010
Age : 23
Localisation : Perpignaaaaaaaan

MessageSujet: Re: Le CSS, les bases   Ven 18 Juin - 18:30

Bravo et merci pour ce beau tutoriel Wink .
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
K!ra Draw
Master of Crayon


Messages : 131
Date d'inscription : 29/05/2010
Age : 24
Localisation : &amp;quot;Sois disant en cours&amp;quot; =.= (n'allé pas croire que je sèche!)

MessageSujet: Re: Le CSS, les bases   Ven 18 Juin - 20:34

Franchement merci beaucoup ^_^, si on partage tous nos connaissance comme sa nous deviendrions les gens les plus surdoué =D ;D
Encore merci ^_^!
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Myril
AnimMaster


Messages : 221
Date d'inscription : 06/03/2010
Age : 21
Localisation : En Autruchity ....

MessageSujet: Re: Le CSS, les bases   Ven 18 Juin - 21:46

Merci bien pour le partage et bravo.

_________________

Nyaaaaaa

[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir cette image]
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: Le CSS, les bases   Aujourd'hui à 22:42

Revenir en haut Aller en bas
 

Le CSS, les bases

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
ArtStudio :: Art Vidéo/Animation :: Tutoriels Flash/HTML/CSS/... :: Tuto HTML/CSS/...-