Index

Les bases du CSS

Le langage CSS (Cascading Style Sheet) permet de définir les propriétés d'affichage de chaque élément d'une page web.

Dans Yeswiki vous avez la possibilité de définir des propriétés additionnelles en les ajoutant à PageCSS.

Voici la structure d'une syntaxe css :

selecteur { 
	propriété : valeur ;
	propriété2 : valeur2 ;
}

Et comme dans tout langage informatique les caractères de ponctuation ne sont pas là pour faire joli :
- les accolades { } doivent être soigneusement ouvertes et fermées,
- et le point virgule doit être présent après chaque déclaration d'une propriété et de sa valeur.

Les commentaires

Il est recommandé de commenter vos modifications pour y revenir plus facilement par la suite

/* mon commentaire */

Les sélecteurs

Un élément HTML

Pour définir le style d'un élément HTML, on utilisera le nom de l'élément comme sélecteur.
Exemple pour les titres de niveau 1, l'élément HTML est H1

/* Titre 1 de couleur bleu avec un cadre autour */ 
h1{
	color:#4F86C6; 
	border : 1px solid #4F86C6
	}

Un élément spécifique qui possède un identifiant id = x

L'identifiant d'un élément est unique dans une page, de sorte que le sélecteur id est utilisé pour sélectionner un élément unique !
Pour sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#), suivi de l'identifiant de l'élément.

Exemple pour un paragraphe avec l'attribut id="contact"

/* Paragraphe contact sur un fond bleu ciel */
#contact{
	background-color:#E0E9F5;
	padding:1em;
	}

Les éléments qui possèdent une classe

Le sélecteur de classe sélectionne les éléments HTML avec une classe spécifique.
Pour sélectionner des éléments avec une classe spécifique, écrivez un point (.), suivi du nom de la classe.
Exemple pour un élément avec la classe BAZ_label

/* Libellés des champs bazar plus petits et plus gras */
.BAZ_label {
	font-size: 1rem;
	font-weight: 800;
	}

Appliquer le même style à plusieurs éléments

Si plusieurs sélecteurs sont séparés par des virgules, le style s'applique à chacun.

/* Même couleur pour tous les niveaux de titre */
h1, h2, h3, h4 {	color:#4F86C6; }

Sélecteur avec un attribut

Dans bazar chaque champ possède un attribut data-id="identifiant", ces attributs peuvent être utilisé comme sélecteur, en les placant entre crochets []

/* Supprimer le label pour les champ bf_description */
[data-id="bf_description"] .BAZ_label {display:none;}

Notez que dans cet exemple on a combiné 2 sélecteurs : les éléments de avec un attribut de classe BAZ_label qui sont placés à l'intérieur d'un élément avec l'attribut data-id="bf_description"

Pour plus d'info sur les combinaisons de sélecteurs : https://www.w3schools.com/cssref/css_ref_combinators.php

Les pseudo-classes

Une pseudo-classe est utilisée pour définir un état particulier d'un élément.

Par exemple, elle peut être utilisée pour

styliser un élément lorsque l'utilisateur le survole avec la souris
donner un style différent aux liens visités et non visités
donner un style à un élément lorsqu'il est mis en évidence
styliser les éléments de formulaire valides/invalides/requis/optionnels

/* Rotation au survol de l'image */
img:hover{   
	-webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -ms-transform: rotate(10deg);
   -o-transform: rotate(10deg);
   transform: rotate(10deg); }

Les pseudo-éléments

Un pseudo-élément CSS est utilisé pour donner du style à des parties spécifiques d'un élément.

Par exemple, il peut être utilisé pour

styliser la première lettre ou ligne d'un élément
Insérer du contenu avant ou après un élément

/* la barre placée à coté du titre des fiches bazar */
.BAZ_fiche_titre::after {
  background-color: var(--primary-color);
  content: "";
  flex: 1;
  height: 12px;
  border-radius: 12px;
  margin-left: 2rem;
}

PDF

Notions de base HTML / CSS

Template de fiche

Template de liste