Explications des balises CSS




Le forum rouvre ses portes !

C2F recrute en masse ! N'hésitez pas à postuler, on ne mord pas... ou si peu :p !

Partagez | 
  Explications des balises CSSVoir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage


avatar

Messages : 125
Points : 1931
Date d'inscription : 26/08/2015
Age : 19

MessageSujet: Explications des balises CSS   Ven 28 Aoû - 9:31

Bonjour Wink
Je viens vous expliquer plus en détails les balises CSS afin que vous puissiez mieux vous en servir. Smile

Commençons par celles qui déterminent la mise en forme :


Code:
<div style=" :

Elle permet de créer un cadre autour de notre texte et/ou image. Toutes les autres propriétés sont à insérer entre les guillemets de cette balise, et permettront de définir beaucoup de propriétés (cadre, bords, texte...). Pensez bien à refermer cette balise !
Code:
<div style=""></div>

Vous pouvez également créer l'équivalent d'une balise div, qui est
Code:
<span style=".


Code:
border-top:1px solid;
:

par exemple. Elle permet de définir une bordure autour de la div. Il n'existe pas seulement border-top, vous pouvez aussi indiquer border-left, border-right, border-bottom ou simplement border, pour faire dans le général. La valeur ...px permet de définir la taille de la bordure en pixels. Au plus vous augmenterez la valeur, au plus votre bordure sera épaisse.

Penchons-nous maintenant sur "solid". Celle-ci permet de définir le style de la bordure. Solid est une bordure simple. Double est une bordure double, et dotted définit une bordure en pointillés. Il en existe une panoplie d'autres propriétés, renseignez-vous sur Internet.


Code:
#928185 ;


autrement dit, la couleur. Cette propriété peut s'ajouter un peu de partout, avec les balises background-color:#928185 ; (couleur de fond) color:#928185 ; couleur par exemple d'un texte ou d'une div mais vous pouvez également créer un fond sous forme d'image :
Code:
background-image: url(urldevotreimage);.

Pour ces couleurs, il existe aussi une propriété plus simple (vous n'avez pas besoin du code de la couleur). Vous devez simplement mettre le nom de la couleur en anglais. Vous connaissez les couleurs de base (yellow, green, black, blue, white, red, maroon, grey etc.) mais il y en a aussi des plus poussées comme lightgrey.

Spoiler:
 
Code:
 font-family: 'Trajan Pro'; sans-serif; color:#34393E; font-size: 12px;

Autrement dit, les balises qui modifient la police d'écriture de votre div. Font-family : ‘Trajan Pro’ permet de modifier la police de votre écriture à proprement parler. Par exemple, si vous remplacez Trajan Pro par Comic Sans MS, votre police sera

Spoiler:
 

sans-serif; détermine la police suppléante si la première ne fonctionne pas. Vous retrouvez ensuite l’attribut :#34393E que nous avons déjà étudié un peu plus haut, pour la couleur.
font-size: 12px; définit la taille du texte, et, comme expliqué plus haut, au plus vous augmenterez le nombre de pixels, au plus la police sera
grande



Code:
width: 300px; margin-top:10px; margin-left: -10px; padding:10px; height: 250px;

Ce sont les propriétés de taille et de positionnement de la div. width: 300px; définit la largeur du bloc de la div en pixels. Au plus vous augmenterez sa valeur, au plus le bloc div sera large. Attention à ne pas déformer vos forums cependant, ce serait dommage.

A l'opposé de widht, height: 250px; définit la hauteur du bloc de la div. Au plus vous augmenterez sa valeur, au plus le bloc div sera haut. Attention à ne pas déformer vos forums cependant, ce serait dommage.

margin-top:10px; définit l'éloignement de la balise div à la marge du haut (top), et c'est pareil pour left (gauche), right (droite), bottom (bas). La valeur en pixels détermine cette espace. Certaines valeurs sont en négatifs, laissez-les en négatif. Essayez de raisonner logiquement pour comprendre pourquoi c'est en négatif.

Réponse:
 

Décalé !


padding:10px; Il s'agit pour la même valeur que margin de l'espace de la zone de texte du message, tout simplement (est-ce que c'est collé à la zone de texte, centré, etc.)


Code:
overflow: auto;


Rajoute une barre de scroll qui permet de dévoiler tout le texte lorsque vous en écrivez trop et que ceci dépasse de la hauteur maximale de la div.

EXEMPLE. EXEMPLE. EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.EXEMPLE. EXEMPLE.


Il existe d'autres balises en CSS que je rajouterais plus tard. N'hésitez pas à me contacter si vous voulez plus d'explications ou à suivre mes futurs cours de codage. Smile

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 Explications des balises CSSVoir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires-
» Explications sur ACTIVE LOG
» Balises "User name"
» PA - explications des outils couleurs
» Problème avec les balises Metas de mon forum
» Changement de couleur du texte entre les balises code

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Créateur de Forum : Forum d'aide à la conception de forums. :: 
Graphisme&co
 :: Tutoriaux css/html :: css
-