Catégories à fermer


Aller en bas
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

CSS - Les propriétés les plus courantes Empty CSS - Les propriétés les plus courantes

le Ven 26 Avr - 16:48

CSS - Les propriétés les plus courantes


Bonjour à toi !

Nous avons déjà poster quelques tutoriels HTML mais encore aucun sur les mises en page en elles-même... Alors voyons ça ensemble !
Tout d'abord, pour pouvoir comprendre ce tutoriel, tu dois avoir lu et compris ces tutoriels :
Les bases du HTML
Les principales balises
Lier CSS et HTML

Maintenant que tu as tout lu, je vais te donner pleins de petites propriétés avec lesquelles tu vas pouvoir mettre en page tes codes Smile

Règles d'écriture

N'oublies pas qu'après chaque propriétés CSS tu dois mettre ";" pour que ça soit pris en compte.

En CSS, tu peux commenter afin de mettre des indications dans ton code. Les commentaires s'écrivent comme ceci :
Code:
/* Mon commentaire */

Mise en page du texte

• Couleur de texte : color : #codecouleur ;
• Taille du texte : font-size: Y px;
• Gérer l'alignement du texte (ici centrer, sinon on utilise left, right ou justify): text-align: center;
• Mettre en gras : font-weight : bold ;
• Mettre en italique : font-style:italic;
• Choisir la police utilisée : font-family : Verdana;
• Définir la hauteur de ligne de texte (pour mieux comprendre, voir les exemples ci-dessous) : line-height: Y px;
• Soulignement : text-decoration:underline
Arrow Pour retirer le soulignement (des liens par exemple) : text-decoration:none;
• Mettre en petite capitale : font-variant:small-caps;

Mise en page de blocs

• Couleur de fond : background-color: #codecouleur ;
• Image de fond : background-image:url('URL image');
• Pour que le fond se répète horizontalement et verticalement : background-repeat:repeat ;
• Pour que le fond se répète horizontalement : background-repeat:repeat-x;
• Pour que le fond se répète verticalement : background-repeat:repeat-y;
• Annuler la répétition du fond : background-repeat:no-repeat;
Idea Les propriétés précédentes peuvent être réunies (par exemple) : background-image:url('URL image') repeat-x;
• Mettre une bordure de couleur : border: #codecouleur;
• Mettre une bordure en trait plein : border: solid;
• Changer la taille d'une bordure : border: Y px;
Idea On peut réunir les propriétés précédentes comme ceci : border: Ypx solid #codecouleur;
Arrow Pour le type de bordure, tu peux faire des essais : dashed (petits tirets), dotted (des petits points, double (un double trait), none (annuler toutes les bordures).
• Pour arrondir les coins d'une boite (p, div, ...) : border-radius: Y px
Arrow Ici on peut choisir de n'arrondir que certains coins : par exemple pour arrondir le coin en bas à droite : border-bottom-right-radius: Y px;
Idea Pour plus de facilité, tu peux te servir d'un générateur comme [celui-ci ] pour générer le border radius Smile

Quelques exemples

C'est bien beau tout ça, mais c'est pas facile de s'imaginer toutes les propriétés ! Alors voilà quelques exemples.

Un paragraphe au fond noir, écrit en blanc et en italique en taille 14px avec une bordure rouge en trait plein de 2px.


Code:
<p style="background:#000000;color:#ffffff;font-style:italic;font-size:14px;border:solid 2px #b30000;">Un paragraphe au fond noir, écrit en blanc et en italique en taille 14px avec une bordure rouge en trait plein de 2px.</p>

Un paragraphe avec un line-height à 30px et une taille de police à 12px ainsi qu'une police "comic sans MS" et des coins arrondis. Pas de panique, je mets du "lorem ipsum" en guise de texte de remplissage pour bien voir le line-height.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula ut purus facilisis commodo. Etiam non erat lobortis, ultricies purus non, commodo lacus. Donec laoreet est sed nisi porttitor euismod. Proin eros nulla, dignissim sed fermentum tincidunt, facilisis sit amet dui. Nullam sed quam sit amet odio consequat aliquam a non magna. Vestibulum placerat justo ut ex volutpat, eu ornare augue accumsan. Quisque et nisl neque. Quisque maximus diam velit, vel fringilla erat pellentesque ac. Donec lobortis id ex ac egestas.


Code:
<p style="background:#fffffff;font-size:12px;line-height:30px;border:double 5px #b30000;border-radius: 50px;font-family:'comic sans ms';">Un paragraphe avec un line-height à 30px et une taille de police à 12px ainsi qu'une police "comic sans MS" et des coins arrondis. Pas de panique, je mets du "lorem ipsum" en guise de texte de remplissage pour bien voir le line-height.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula ut purus facilisis commodo. Etiam non erat lobortis, ultricies purus non, commodo lacus. Donec laoreet est sed nisi porttitor euismod. Proin eros nulla, dignissim sed fermentum tincidunt, facilisis sit amet dui. Nullam sed quam sit amet odio consequat aliquam a non magna. Vestibulum placerat justo ut ex volutpat, eu ornare augue accumsan. Quisque et nisl neque. Quisque maximus diam velit, vel fringilla erat pellentesque ac. Donec lobortis id ex ac egestas. </p>



N'hésites pas à faire pleins de tests, et si tu as des questions, n'hésites pas à les poser Smile Et n'hésites pas non plus à regarder sur le net, cette liste n'est pas exhaustive, il en existe vraiment beaucoup Smile

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses