Le CSS est un langage informatique pour le web. Le CSS est le HTML sont complémentaires. Le CSS donne au navigateur des instructions pour la présentation de tout le contenu HTML. Les tutoriels ci-dessous vont vous permettre de découvrir et de tester les instructions CSS par thématiques (texte, arrière-plan, mise en page). Elle vous seront utiles pour la création d’un site web.
Découvrez les attributs utilisés pour présenter le contenu texte
color text-aligntext-decoration text-transformtext-indent word-spacingline-height letter-spacingwhite-space vertical-aligndirection content
Découvrez les attributs utilisés pour manipuler la police du texte..
font font-family font-sizefont-style font-variantfont-weight font-face
Attributs utilisés pour définir les effets d’arrière-plan d’un élément.
background background-colorbackground-imagebackground-positionbackground-repeatbackground-sizebackground-originbackground-clipbackground-attachment
Attibuts utilisés pour manipuler les tableaux en HTML
Attributs pour présenter les listes
list-style list-style-positionlist-style-type list-style-image
Attributs pour créer des effets visuels, comme un gradient de couleur ou des transparences (rgba()) et des animations graphiques
animation transformtransform-origin transform-styleperspective perspective-originbackface-visibility transitionopacity border-radiusbox-shadow text-shadowcursor filter
Balises pour gérer la mise en page
display float clear positionz-index flex align-contentalign-items align-self columnsvertical-alignmedia queries
Les différentes manières de sélectionner les éléments html
#id .class #head p>em p p,h1 * p a p>a [] [attribut=valeur] [attribut~=valeur] [attribut|=valeur] [attribut^=valeur] [attribut$=valeur] [attribut*=valeur] h1+p h1~p
Une pseudo-class permet de cible un élément sans le rajout d’une classe supplémentaire
:link :active :hover :visited:root :not(selector) :empty:target :lang(langage) :disabled:enabled :checked :valid:invalid :required :read-only:read-write :optional:out-of-range :in-range :focus:first-child :first-of-type:last-child :last-of-type:nth-child(n) :nth-of-type(n):nth-last-child(n):nth-last-of-type(n) only-child:only-of-type
Un pseudo-élement permet de cibler sans le rajout d’un élément supplémentaire
B
backface-visibility backgroundbackground-attachmentbackground-clip background-colorbackground-imagebackground-originbackground-positionbackground-repeat background-sizeborder border-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapse border-colorborder-image border-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-width border-leftborder-left-color border-left-styleborder-left-width border-radiusborder-right border-right-colorborder-right-styleborder-right-width border-spacingborder-style border-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-style border-top-widthborder-width bottom box-shadowbox-sizing
T
tab-size* table-layouttext-align text-align-last*text-decorationtext-decoration-color*text-decoration-line* text-indenttext-justify text-overflow*text-shadow text-transformtop transform transform-origintransform-style transitiontransition-delaytransition-durationtransition-propertytransition-timing-function