Lamiae
Extrait du cours feuilles de style (CSS)
Unités de longueur
UNITES DE LONGUEUR ABSOLUES – (A EVITER)
– cm (centimètre = 1cm = 10 mm) Risque d’affichage différent sur plusieurs écrans.
– mm (millimètre) Même remarque.
– pc (pica = 1pc = 12pt) Un autre terme de typographie, donc même remarque.
– pt (point = 1pt = 1/72 in) Le point est une mesure typographique utilisée par les imprimeurs (d’où les « points par pouce » de certaines résolutions) et les traitements de texte.
NOTE : Il ne peut y avoir d’espace à l’intérieur de cette valeur et pour les nombres décimaux, la virgule est impérativement remplacée par un point.
En accessibilité, ces valeurs ne sont pas recommandées, car elles empêchent l’internaute de redimensionner la taille d’affichage des caractères.
Ces valeurs sont donc à éviter côté web ! (Mais restent éventuellement utilisables pour une CSS dédiée à l’impression).
UNITES DE LONGUEUR RELATIVES – (RECOMMANDEES)
– px (pixel)
– em (largeur de la letttre m, 1 em correspond à 100% de la taille en cours de la police, 1.2 em à 120 %, 0.8 em à 80%… Son usage est donc limité aux polices.)
– ex(hauteur de la lettre x. Assez pauvrement implémentée, donc à éviter.).
– % L’élément défini prendra un pourcentage donné de la taille de son élément parent.
– small
– x-small
– xx-small
– large
– x-large
– xx-large
– medium
– larger
– smaller
NOTE : Là encore, il ne peut y avoir d’espace à l’intérieur de cette valeur et pour les nombres décimaux, la virgule est impérativement remplacée par un point.
En accessibilité, ces valeurs sont recommandées, car elles permettent à l’internaute de redimensionner la taille d’affichage des caractères.
Il est conseillé de se cantonner aux unités % et em pour un affichage fluide ou pour du texte, et à px quand on a besoin de placer les éléments au pixel près… Les autres valeurs seront le plus souvent évitées.
NOTE : Il existe 2 écoles sur l’utilisation de ces valeurs. Certains intégrateurs préfèreront le « em » et en mettront partout, d’autres préfèrent les « px » et n’utilisent que ça.
……
Sommaire: Feuilles de style (CSS)
QU’EST-CE QUE LES CSS ?
VERSIONS DE CSS
QU’EST CE QU’UN STYLE ?
PROPRIETES DES CSS
DEFINITION DES REGLES CSS
IL Y A 4 TYPES DE REGLES
OU PLACER LES REGLES CSS?
CREATION DE LA FEUILLE EXTERNE
SYNTAXE DES REGLES CSS
CASSE
CREER UNE CLASSE PERSONNALISEE
COMMENTAIRES
CLASS ET ID
DIFFERENCE ENTRE CLASS ET ID
CASCADE, CONFLITS ET HERITAGES
CONFLITS
HERITAGE
UNITES DE LONGUEUR
UNITES DE LONGUEUR ABSOLUES – (A EVITER)
UNITES DE LONGUEUR RELATIVES – (RECOMMANDEES)
PROPRIETES
PROPRIETES DU TEXTE
PROPRIETES DES LISTES
LES RACCOURCIS
POUR LE TEXTE
POUR LES LARGEURS DE MARGES ET REMPLISSAGE
LES BORDURES
LES COULEURS
LES BOITES : REMPLISSAGE ET MARGES
LES MARGES
LE REMPLISSAGE (PADDING)
LES BOITES
DEFINITION
LE POSITIONNEMENT DES BOITES : STATIQUE, RELATIF, ABSOLU
Notion de flux
Statique (par défaut)
Relatif (dans le flux) = position : relative
Absolu (hors du flux) = position : absolute
LE POSITIONNEMENT DES BOITES : LE FLOTTEMENT
Comprendre le flottement
Faire des colonnes
Sortir du flottement = clear : left, right ou both
LA NOTION DE DEBORDEMENT : OVERFLOW
ARRIERE-PLAN : IMAGES
REPETITION
REPETITION HORIZONTALE
REPETITION VERTICALE
PAS DE REPETITION
REMPLACEMENT DE LA PUCE DE LISTE
PSEUDO CLASSES DE LIENS
« DECORATION » DU TEXTE
ELEMENTS DE TYPE : BLOCK
ELEMENTS DE TYPE : INLINE
ELEMENTS NON AFFICHES
AFFICHAGE DE TYPE TABLEAU
AUTRES TYPES D’AFFICHAGE
DISPLAY: INLINE-BLOCK
DISPLAY: LIST-ITEM
STYLES DIVERS
CURSEUR
UNE FEUILLE PAR MEDIA
LIENS
LIVRES
……..
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Feuilles de style (CSS) (1,18 MO) (Cours PDF)
