Fork me on GitHub

Formation CSS 3

Introduction aux CSS

CSS: Cascading Style Sheets

Les CSS sont des définitions de styles appliqués en cascade. Ils peuvent être définis dans:

Composition d'un sélecteur

Une déclaration CSS commence par un sélecteur qui peut être composé de un ou plusieurs

Exemples de sélecteurs


div a:first-child {
}

#toto.maClass > span{
}

h1, h2, h3{
	/* plusieurs sélecteurs avec les mêmes règles */
}

Poids d'un sélecteur

Exemple Attribut style #ID .class tagName
#toto 0 1 0 0
#toto > #tata div.titi 0 2 1 1 
					



De quelle couleur je suis ?

Héritage: certaines propriétés s'héritent:

D'autres ne s'héritent pas:

  • position
  • display
  • width, height
  • margin

Le box-model

Tout est mesuré en terme de box en CSS. Afin de mesurer la taille d'un élément, on définit d'abord un box-model qui indique comment la taille sera calculée en fonction des différentes parties composant la box:

Unités

Certaines propriétés comme height, width,... peuvent être définies à l'aide de plusieurs unités:

  • px: pixels
  • % (pourcentage du parent)
  • em (taille calculée / hauteur de ligne)
  • rem (idem mais par rapport au root)
  • etc...

Exemple

Display

Une des propriétés les plus importantes, qui modifie la position ainsi que la taille d'un élément, est le display.

Valeurs courantes pour display

valeur Description
block l'élément prend toute la largeur de son parent, par défaut sur les div, p,...
inline l'élément prend la largeur de son contenu, par défaut sur les span,em,a
inline-block un element block, mais qui reste dans le flow comme les inline

Nouvelles valeurs, depuis CSS 3

valeur Description
table-cell l'élément aura le même comportement qu'un tableau (données cellulaires)
flex (IE10+) applique un positionnnement à tous les enfants, exemple
etc... d'autres modes de display sont en cours de specifications et peuvent être disponibles sur certains browsers
Exemples de display.

Position

La position est la deuxième propriété la plus importante en CSS.

position: static

L’élément est rendu dans le flow normal de la page, de haut en bas, et de gauche à droite. Modifier les propriétés top/left de ces éléments sera sans effet.

C'est la position par défaut de tous les éléments.

position: fixed

L’élément est positionné de manière fixe par rapport à la fenêtre (ce qui fait que le scrolling de la page n’impacte pas sa position). Les autres éléments sont rendus dans le flow normal comme si celui-ci n’existait pas. Il peut se retrouver par dessus d’autres éléments

position: relative

L’élément est positionné par rapport au flow. Le déplacer laissera vide sa place, qui ne sera pas “reprise” par d’autres éléments. Note: un élément positionné de manière relative avec top et left à 0 sera positionné exactement de la même manière qu’un élément static

position: absolute

L’élément est positionné en dehors du flow, par rapport au 1er parent qui a la position non static. Tout comme fixed, pour les autres éléments, c’est comme s’il n’était pas là, et il peut être positionné devant un autre élément.

Note: la hauteur d’un élément dépend de son contenu. Si tout son contenu est positionné en absolu, il sort du flux, et c’est comme s’il n’était pas dans l’élément. => Un élément ne contenant que des éléments positionnés en absolu fera donc une hauteur nulle. Il faut donc lui fixer une hauteur si on souhaite le voir apparaître.

float: un peu d'histoire

Avant l’arrivée des CSS 2, la seule manière de positionner des éléments était de faire des table (en mettant en fond de cellule les éléments que l’on souhaite positionner), ou d’utiliser float.

Float a été créé pour permettre à du texte de “flotter” autour d’une image. Et il a rapidement été détourné pour aussi positionner n’importe quel élément.

Un élément flottant est "poussé" vers la gauche ou droite, permettant à des éléments de “flotter” dessus, et aux autres éléments de s’afficher autour.

Exemples

z-index

La propriété z-index permet d’indiquer la position d’un élément dans la pile de rendu.

z-index peut être négatif. Si deux éléments positionnés en absolu n’ont pas de zIndex et sont positionnés au même endroit, le dernier dans le DOM apparaîtra par dessus le précédent.

overflow: auto

Si un élément n'a pas de taille fixée, ajouter du contenu l'agrandira automatiquement. S'il a une taille fixée, et que le contenu est trop grand pour rentrer dans l'élément, des scrollbar apparaîtront, permettant de se déplacer dans l’élément: c’est la valeur par défaut de la propriété overflow.

overflow: visible

Parfois, on souhaite cependant que le contenu soit visible (cas d’une bulle d’aide qui apparaîtrait au dessus d’un élément par exemple) même s'il dépasse la taille spécifiée pour un élément. Utiliser overflow:visible indique que le contenu sera visible, sans la présense de scrollbar.

overflow: hidden

Parfois, on souhaite à l’inverse cacher le contenu dépassant. overflow:hidden permet de cacher (cropper) le contenu dépassant de la taille du contenant.

Media Queries

CSS 3 a aussi introduit la notion de media queries, qui permet de limiter l'application de certaines règles CSS en fonction de plusieurs paramètres comme:

  • la taille de l'écran
  • l'orientation de l'écran
  • le type d'écran (tv, impression, projecteur,...

Exemple de media query

                        
                            @media screen and (max-width: 640px) {
                              .bloc {
                                display:block;
                                clear:both;
                              }
                            }
Documentation: http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Centrer un élément horizontalement

                        
                            #content{
                                margin:auto;
                            }
Exemple

Centrer un élément verticalement 1

                        
                            

                                
Content here

                            

                        
                    
                        
                            #parent {
                                display: table;
                            }

                            #child {
                                display: table-cell;
                                vertical-align: middle;
                            }

Centrer un élément verticalement 2

                        
                            

                                
Content here

                            

                        
                    
                        
                             #parent {position: relative;}

                            #child {
                                border:1px solid black;
                                position:relative;
                                width:200px;
                                height:200px;
                                top:50%;
                                transform: translateY(-50%);
                            }
Exemple Guide pour centrer

THE END