Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

[TUTO]Comprendre le CSS

Straqq

Par Straqq
dans Tutoriels

 Partager

Messages recommandés

Straqq

Straqq 0

Posté(e)
Posté(e)

Bonjour,

 

Dans ce petit tutoriel je vais vous apprendre les bases du CSS et éclaircir certains d'entre vous qui ne pourrait pas trop comprendre les mécaniques du CSS.

Tout d'abord la langue CSS permet de définir le "design" de votre site.

Un code CSS peut-être intégré dans les balises  : 

<style></style>

Cette balise peut-être mise dans le head de votre site par exemple. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="mafeuille.css" />
        <title>CSS</title>
    </head>
</html>

Vous pourrez aussi la définir directement à une balise comme ceci : 

<h1 style="paramt1: paramt1;">Hi !</h1>

Pour décrire cette ligne c'est tout simple :

J'ai ma balise <h1> qui est = à un style qui comprend un paramètre par exemple une couleur.

style="color: red;" le style est une couleur rouge.

 

D'après moi et beaucoup de mondes, le CSS doit-être tenue dans une "feuille", c'est-à-dire un fichier .css

Pour exploiter votre feuille.css vous devrez la définir dans votre page comme ceci : 

<link rel="stylesheet" href="mafeuille.css" />

Maintenant nous allons définir des codes couleurs pour des balises.

Rendez-vous dans : mafeuille.css 

.hi
{
    color: red
}

Ce bout de code utilisable par une balise span signifie que : 

<span class="hi">Je code en css :)</span>

span class="hi" récupère les paramètres définis dans mafeuille.css qui donc renvoie à la couleur rouge.

Vous pouvez aussi inclure plusieurs balises pour un paramètre css comme ça : 

hi, p
{
   color: red
}

Cette-fois , j'aurais mon texte rouge entre les balises <p></p>.

Vous pouvez aussi cibler les balises avec un attribut titre par exemple pour un lien donc: 

a[title]
{
    color: blue
}

Donc si j'écris :

<a href="https://inshare.fr" title="S'inscrire !">

"S'inscrire !" est en bleu c'est simple non ?

 

Il vous suffit de regarder la liste des paramètres CSS pour en faire ce que vous voulez !

Avant de terminer ce petit tuto, je vous montre comment modifier la taille d'un texte avec : px(pixels) ou une valeur relative : large(grand).

Nous allons reprendre notre "S'inscrire !".

Je voudrais qu'il soit d'une taille définit en pixels alors: 

a[title]
{
  font-size: 40px; /* Le titre est en 40pixels de hauteur */
}

Pour une valeur relative: (c'est un mauvais exemple car il n'existe que 7 tailles en valeur relative donc autant la définir soit-même en px) 

a[title]
{
    font-size: x-large; */ La taille sera très grand */
}

Avant de terminer ce tutoriel nous allons y voir un dernier point, l'id & class.

Voici un exemple de mafeuille.css : 

#habbodev {
  background:blue;
}

.liens {
  color:yellow;
}

Pour comprendre ce bout de code c'est très simple :

#habbodev -> signifie que le code css ne s'appliquera seulement qu'à l'id "habbodev" par exemple : 

<div id="habbodev"></div>
*/ Le code s'applique seulement à cette ID */

Tandis que .liens vise toutes les classes avec un élément "liens" : 

<a href="src/habbodev.php" class="liens">Liens</a>
*/ Le code s'applique à toutes les classes avec "liens" */

Et voilà, c'est vraiment une langue facile à exploiter il vous suffit de savoir les paramètres que vous voulez apportez à une balise et de les écrire dans mafeuille.css !

Si jamais vous souhaitez vous amusez voici un lien des références CSS : 

Pour avoir accès à ce lien, merci de vous connecter.

Merci d'avoir lu ce petit tutoriel, c'est vraiment parce que j'ai pas grand chose à faire d'autre hein mais j'espère que ça pourra éclaircir ceux qui ne sont pas à l'aise avec le CSS.

Je reste disponible pour répondre aux questions sur le sujet-même.

 

{EDIT 11/06/2017}

->Ajout de la sélection des "id" & "class"

 

Straqq' ?

Lien à poster
Partager sur d’autres sites
UnderFR

UnderFR 31

Posté(e)
Posté(e)

Si vous comprenez l'anglais, je vous conseille ce site, qui est plus complet et mieux expliqué : 

Pour avoir accès à ce lien, merci de vous connecter.

 sinon traduisez :p

 

Bonne après-midi !

Lâches un like :y: ! ou pas

Lien à poster
Partager sur d’autres sites
Straqq

Straqq 0

Posté(e)
  • Auteur
Posté(e)
il y a 7 minutes, UnderFR a dit :

Si vous comprenez l'anglais, je vous conseille ce site, qui est plus complet et mieux expliqué : 

Pour avoir accès à ce lien, merci de vous connecter.

 sinon traduisez :p

 

Bonne après-midi !

 

Ce tutoriel à pour but d'expliquer le CSS , en aucun cas coder en CSS.

Surtout que ce tutoriel est pour les "novices" la plus part de maîtrisant pas l'anglais ton poste est inutile.

 

Straqq'?

Lien à poster
Partager sur d’autres sites
Straqq

Straqq 0

Posté(e)
  • Auteur
Posté(e)

Bonsoir,

 

Le 10/06/2017 à 20:34, Wolpeur a dit :

ça aurait été bien d'intégré la différence entre un id et une class aussi c'est la base

 

Exact merci de l'avoir dit cela vient d'être rajouté au tutoriel.

 

Straqq'?

Lien à poster
Partager sur d’autres sites
  • 2 ans plus tard...
  • Administrateur
Narzo

Narzo 760

Posté(e)
  • Administrateur
Posté(e)
    Salut Straqq ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.

《⠀⠀Founder of Inshare.fr⠀》

《⠀⠀Baylife moderator⠀》

《⠀⠀Twitch channel moderator⠀》

《⠀⠀French translator Trucksbook.eu⠀》

𝐹𝑒𝑒𝑙 𝑓𝑟𝑒𝑒 𝑡𝑜 𝑤𝑟𝑖𝑡𝑒 𝑎 𝑐𝑜𝑚𝑚𝑒𝑛𝑡

—————————————————

╱⠀⠀⠀⠀⠀⠀⠀⠀⠀Règlements⠀⠀ //⠀⠀Abonnements⠀⠀ //⠀⠀ Discord   ⠀⠀⠀⠀⠀⠀⠀⠀⠀╲

 

signature.png

Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...