Sélecteurs Poids de spécificité du sélecteur : navigateur: <normal user < normal author < important author < important
user specificité elevée, si égale : dernier code code [Link]
1000 100 .class 10 Element 1 (* 0)
Attribut #id selecteur d’attribut [title] [id='id1' i] [href^='#']commence[lang|='fr']commence fr- [href$='.ma'] termine [title*='css']contient chaine[class~='c' I]contient mot ::Pseudo-element
style : pseudo-class structurelles :root / :empty / :first-child / :last-child :first-of-type / :last-of-type :only-child / :only-of-type ::after (:after) ::before (:before)
:nth-child(an+b)/:nth-of-type(an+b) numérote à partir des premiers / :nth-last-child(an+b)/ :nth-last-of-type(an+b) numérote à partir des derniers ::first-line (:first-line)
!important an+b commence par b puis s’incrémente de a /2n ou even paires / 2n+1 ou odd impaires / n+b tous à partir de b / -n+b b premiers/derniers ::first-letter (:first-letter)
:pseudo-classes de formulaires :required/:optional :enabled/:disabled :read-only/:read-write Très petit sm md lg xl XXL ::selection
:default/:checked :in-range/:out-of-range :valid/:invalid :indeterminate :placeholder-shown <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px ::marker
: pseudo-class dynamiques a:link / a:visited :focus /:focus-visible/E:focus-within :hover / :active / E:target ::placeholder
combinateurs : div p (p) descendant (à l'intérieur) de (div) div>p (p) directement Enfant(fils) de (div) h1 ~ p (p) frère suivant général de (qui suit) (h1) h1 + p (p) frère suivant adjacent de (qui suit immédiatement) (h1)
pseudo-classes fonctionnels ::lang(fr) :not(S1,S2)->max :where()->0 :is(S1,S2)-> max :has(S1,S2)-> max =ou :has(S1) has(S2)= et
CSS inline : <E style=" CSS-Declaration "> (CSS-Declaration=property:value; property:value !important;)
Propriétés CSS CSS externe : <link rel="stylesheet" href="[Link]" media="mediaquery" />
CSS interne: <style media="mediaquery" > CSS-Code (=CSSRules= Selector{CSS-Declaration})
tous les propriétés all: Initial(specification CSS) inherit(parent)
@media mediaquery{ CSS-Code } /*commentaire sur 1 ou plusieurs lignes*/
et valeurs universelles pour restaurer valeur css unset(hérité?inherit:initial)revert(browser:initial)
@import url (' [Link]') mediaQuery </style>
definition de propriété personnelle et lecture de sa valeur --custom-prop: 2px; width:var(--custom- prop);
mediaquery [not|only]? mediatype and (mediafeature : value)* , mediQuery
Règle de definition de taille (inclut contenu ou aussi padding et border) box-sizing:content-box |border-box mediatype All screen print speech mediafeature min|max-width orientation:landscape|portrait
Largeur/ Hauteur minimales et maximales (#inline) width:200px; height:200px; max- width/min-
Calcul sur propriétés numériques(espace entre opérateur et opérandes) width: calc(50% - 20px)/*50% delargeur parent*/ width: min(50%, 300px); max(..)clamp(12px, 2vw, 24px)/property: attr(attribute-name);
unites de distance absolus (impression)1in(pouce)=2.54cm=25.4mm=101.6Q(Quart mm) (texte)=6pc(pica)=72pt(point) (dimension, bordures, marges)=96px(pixel=point d’écran)
unites de distance relatifs à la police em (police parent),rem (police <html>),ex (hauteur 'x'),cap (hauteur majuscule), ch (largeur '0'), lh (line-height), rlh (line-height <html>), ic
unites de distance relatifs au viewport(fenêtre d'affichage) vw, vh, vi, vb,( 1% fixe de largeur/hauteur/min(hauteur,largeur)/ max(hauteur,largeur) de viewport)vmin, vmax (comme vi vb mais 1% dynamique )
Marges internes=padding/ Marges externes=margin (si inline:aucun effet pour padding ou margin:10px; 1 valeur(4cotés), 2valeurs: top-bottom left-right, 3valeurs : top left-right bottom,4 valeurs: top right bottom left
margin-top, margin-bottom, padding-top, padding-bottom ) padding-top padding-right padding-bottom padding-left ou margin-top margin-right margin-bottom margin-left
Couleur de fond /Couleur de texte(color :hérité)/ opacité color:blue|#0000FF|rgba(0,0,255,0.5) hsla |rgb(0,0,255) hsl et opacity:0.5;Background-color:linear-gradient(to right,red,blue);radial-gradient(circle,red,blue)
Gras et Italique (hérités) font-weight:bold ; <b> font-style:italic; <i>
Taille de texte et police (hérités) font-size:10px; font-family: font1, font2, ....,fontgeneric(serif ou sans-serif ou cursive ou fantasy ou monospace)
Casse (hérités) font-variant:small-caps (petite majuscule) text-transform:uppercase/lowercase/capitalize(1èr lettre de chaque mot majuscule)
ère
Indentation 1 ligne et Espaces entre lettres/mots et hauteur br (hérités) text-indent:-50px; letter-spacing:-2px; word-spacing:-2px; line-height:1.5; (si=height et seule ligne centre verticalement)
Gestion nouvelles lignes(Regroupés/Préservés),espaces et tab(Réduits à 1 ou Préservés), white-space: Normal RROR|Nowrap RRNR|Pre PPNC|pre-wrap PPOS|pre-line PROR|break-spaces PROP
wrapping(Oui/Non), Espaces fin ligne (Retirés/Conservés/Suspendus/Passent à la ligne) (hérité word-break, overflow-wrap: normal |break-word;
Direction du flux du texte et du contenu dans un conteneur. (hérités) direction:ltr|rtl writing-mode:horizontal-tb|vertical-lr(left90°)vertical-rl|sideways-rl(right90°)+(ltr>top,bottom) sideways-lr(right-90°)+ltr>bottom,top
Alignement horizontal contenu (texte et inline) de bloc ou cellule table (hérité) text-align :left center right justify
alignement vertical de (inline) ou cellule table par rapport à sa ligne de base vertical-align :baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>)
ou à autres éléments dans même ligne de texte. sub (indice) super (exposant) text-top (sommet des lettres majuscules ex:accents)
centrage HV si container flex, sinon alignement H pour bloc qui a width margin:auto ;/*centrer, top et bottom=0*/ margin-left:auto; /*à droite*//*=0 pour flottants, en ligne ou inline-block ou positionné absolue ou fixe*/
meilleur façon pour aligner les fils horizontal et vertical display:flex justify-content:center align-items:center
Souligné text-decoration: text-decoration-line none/underline<u>/overline/line-through<s>text-decoration-color text-decoration-style solid, wavy, dotted,dashed,double
Ombre de texte(hérité) text-shadow: none/décalageHorizontal(x-offset) décalagVertical(y-offset) rayondeflou(blur-radius) couleur, ombre2,.. text-shadow:5px 7px 2px red
Le rayon de flou si= 0,bord de l'ombre est nette,sinon plus valeur est grande,plus l'ombre est [Link] négative non autorisé
Ombre de box Box-shadow: none/décalageHorizontal(x-offset) décalagVertical(y-offset) rayondeflou(blur-radius) rayond'étalement(spread-radius) color, ombre2
Rayon de diffusion(d’étalement): valeurs positives font croître l'ombre dans toutes les directions du rayon. Les valeurs négatives réduisent l'ombre.
Box-shadow: 5px 10px 2px 2px red;
Bordure (outline) : (au moins border-style) Border : border-width(thin,medium,thick,px|em|rem|cm) border-style(none,dotted,dashed,solid,double,groove,ridge,inset,outset) border-color
Contour (outline) : contour au-dessus de bordure qui prend sa forme (border- outline : outline-width(thin,medium,thick,px|em|rem|cm) outline-style(none,dotted,dashed,solid,double,groove,ridge,inset,outset) outline-color
radius), n'occupe pas d'espace, généralement on l’applique si l’élément est Border/outline: 10px solid black; 1 valeur(4cotés), 2valeurs: top-bottom left-right, 3valeurs : top left-right bottom,4 valeurs: top right bottom left
activé : button:focus { outline: 3px solid blue;} outline-offset : 3px; /*distance par rapport à border*/
Coins arrondis (visible si on définit un background-color ou background-image border-radius : border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius; border-radius: 10px 5%;
ou un border) 1 valeur(4cotés), 2valeurs: top-left-and-bottom-right top-right-and-bottom-left, 3valeurs : top-left top-right-and-bottom-left bottom-right
Arriere plan background: background-color background-image(url('')) background-position(x y) background-repeat (repeat,no-repeat,repeat-x,repeat-y)
Si une image d'arrière-plan est définie, elle apparaît au-dessus de la couleur background-attachment (scroll, fixed,local) si vous spécifiez une seule valeur dans background-position:50% l'autre sera toujours center.
d'arrière-plan et la masque. background-size: auto | cover| contain| width height cover et contain (redimensionne image avec proportions conservés) cover:couvrir viewport
sans laisse vide mais peut rogner image, contain: image totalement visible = peut laisser vide)
marques (puces ou numéro) pour list-item (hérité) list-style: list-style-type none,disc,circle,square,decimal,lower-alpha,upper-alpha,lower-latin,upper-latin list-style-position outside,inside list-style-image none,url()
::marker { color: red; font-size: 1.5em;}
tableaux(hérité sauf table-layout) border-collapse: separate|collapse caption-side:top|bottom empty-cells :show|hide border-spacing:10px 20px;(si separate)
table-layout: auto|fixed auto(largeur du cellule le + grand dans limite min-width et max-width )fixed(affichage [Link] table n’a pas de
width(auto) comme auto, si les td de 1ère ligne n’ont pas de width largeurs égales sinon largeurs de 1ère ligne)
Position position:static/relative(position normale)/absolute(quitte flux normal au 1erancetre positionné ou document)/fixed(quitte flux normal au
élément positionné = position # static viewport)/stiky(lorsqu’il atteigne position défini,quitte flux normal au viewport dans limite des bords de conteneur)
Top/bottom left/right définissent la distance entre les bords de l'élément et les bords de son conteneur/position de référence.
si (left/right)définis : si width defini left si dir=ltr. Sinon on prend les 2 pour former un width de l'élément
si (top/bottom)définis: si height défini top. Sinon on prend les 2 pour former un height de l'élément
z-index :auto l'élément suit l'ordre d'empilement naturel (1. arrière-plans et bordures .2. éléments statiques ou relatifs sans z-index 3. éléments positionnés sans z-index).
Élément positionné avec z-index(crée un nouveau contexte d'empilement) :plus grand passe au-dessus du plus petit de son conteneur, si même z-index, utiliser l'ordre dans le DOM)
Masquer et garder son espace(visibility :hérité) visibility:hidden ou opacity:0 ou visibility:collapse
Retirer display:none ou visibility:collapse pour les éléments table (<thead>, <tbody>, <tfoot>, <tr>, <col>, <colgroup>)
Aligner image et Entourer par texte(#inline) float: left ou right.
Ne pas entourer texte(#inline) clear:left ou right (meme que float)
Gestion dépassement overflow: overflow-x overflow-y =visible, hidden, scroll(affiche toujours scroll horizontal et vertical), auto(les affiche au besoin)
text-overflow: clip, ellipsis(...) si overflow#visible, on peut ajouter un texte de remplacement
changer forme curseur souris (hérité) cursor:pointer;[auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-
allowed|grab|grabbing|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-
resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out]
changer la couleur de curseur de saisie (hérité) caret-color:red;
affichage display <display-outside> (block; inline;inline-block; list-item) <display-inside> (table; flex; grid;)
<display-internal> (table-row-group;table-header-group;table-footer-group;table-row;table-cell;table-column-group;table-column;table-caption)
flexible (disposition enfants dans [Link] changer sens texte) display : flex | inline-flex ;
axe principale et sa direction flex-flow : <flex-direction> <flex-wrap>;
possibilité de retour à la ligne si espace insuffisant flex-direction: row(ligne attr direction)|column(colonne topToBottom)|row-reverse(ligne inverse direction)|column-reverse(colonne BottomToTop)
container
flex-wrap : no-wrap | wrap | wrap-reverse (inverse direction axe secondaire);
Alignement et espacement horizontal justify-content : flex-start|flex-end|center|space-around|space-between|space-evenly ;
Alignement et espacement vertical des lignes(si flex-wrap# no-wrap ) align-content : flex-start|flex-end|center|space-around|space-between|stretch ;
Alignement vertical des éléments sur les lignes align-items : flex-start|flex-end|center| baseline|stretch ;
Espacement entre lignes et colonnes gap : 10 px; /*espacement entre items row-gap column-gap */
Ordre order : 0 ; /* par défaut 0, diposition dans l’ordre croissant -1 0 3*/
Alignement vertical align-self : flex-start|flex-end|center| baseline|stretch ;
Taille et flexibilité flex: <flex-grow> <flex-shrink> <flex-basis>; par défaut flex : auto (0 1 auto) flex: none ( 0 0 auto)
fils
flex-basis :auto largeur de base =attribut width si défini, sinon =largeur de son contenu.
flex-basis : 0px ; taille base nulle = auront tous la même taille dans l’agrandissement ou rétrécissement
si on ne définit pas les 3 valeurs dans flex, Les autres propriétés auront par défaut flex-grow : 1 ; flex-shrink : 1 ; flex-basis : 0 ;
Transformations séparés par espace: transform: rotate(90deg) translate(50px, translate(50px,10px);translateX(50px);/*déplacer vers droite et bas*/
100px) scale(1.5, 2) skew(30deg, 15deg) matrix(1.5, 0.5, 0.5, 1.5, 50, 100) rotate(20deg);rotateX(60deg);/*rotation par rapport à l'axe X ( rotateY et rotateZ)*/ unités d’angle: turn=360deg=400grad=6.2832rad
matrice des transformations matrix(scaleX, tan(skewX), tan(skewY), scaleY, scale(2,2); scaleX(1.2) /*augmenter la taille 2 fois sur sa largeur et hauteur ou de 20%*/
translateX, translateY); skew(20deg,10deg); /* incliner de 20 ° le long de l'axe X et de 10° le long de l'axe Y*/
transition transition : transition-property transition-duration transition-timing-function transition-delay transition-behavior
transition : width 2s, height 2s, transform 2s ease;
Animation définie par la règle : animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
@keyframes example { animation: example 5s linear 2s infinite alternate;
0% { background-color: red; left: 10px; top: 10px;} *animation-direction; le sens de lecture de l'animation: normal (en avant) , reverse (en arrière), alternate (itération en avant puis itération en arrière),
25% {background-color: yellow; right: 10px; top: 10px;} alternate-reverse (itération en arrière puis itération en avant)
50% {background-color: blue; right: 10px;bottom: 10px;} *(animation-timing-function): linear (même vitesse du début à la fin) =cubic-bezier(0, 0, 1, 1) (temps1,vitesse1,t2,v2)
75% {background-color: orange; left: 10px; bottom: 10px;} ease (fluide, en douceur )(démarrage lent 25%, puis rapide, puis se termine lentement 25%)=cubic-bezier(0.25, 0.1, 0.25, 1)
100%{ background-color: green; left: 10px; top: 10px;}} ease-in-out (démarrage très lent 42%, puis moyen, puis se termine lentement 58%)= cubic-bezier (0.42, 0, 0.58, 1), ease-in (début très lent 42% puis
qui définit 5 étapes (0%, à 25 %, à 50 %, à 75 % et à 100 %) composants la Accélération progressive)=cubic-bezier(0.42, 0, 1, 1), ease-out (début rapide puis fin lent en décélération progressive 58%)=cubic-bezier(0, 0, 0.58, 1)
séquence de l'animation CSS. A la fin de chaque étape, L'animation change à *(animation-fill-mode): none , forwards (conserve la dernière image clé après fin animation), backwards ( conserve la première image clé pendant
la fois la couleur d'arrière-plan et la position de l'élément. animation-delay), both (conserve la première image clé pendant animation-delay et conserve la dernière image clé après fin animation)
