Les Fondamentaux du CSS

blog / Techno / Web / Les Fondamentaux du CSS

Les Fondamentaux du CSS

28 Juil, 2020 |
Les Fondamentaux du CSS 1 - Webpick

Même si le CSS – Cascaded Style Sheets – paraît trivial et facile à apprendre, sa maîtrise reste indispensable pour toute personne travaillant dans les domaines du web, spécialement pour les développeurs Front-end, mais pas que.
Le CSS, Cascading Style Sheets, sert à mettre en forme des documents web, type page HTML ou XML, ou même des applications mobiles. Par l’intermédiaire de propriétés d’apparence (couleurs, bordures, polices, etc.) et de placement (largeur, hauteur, côte à côte, dessus-dessous, etc.), le rendu d’une page web peut être intégralement modifié sans aucun code supplémentaire dans la page web. Les feuilles de styles ont d’ailleurs pour objectif principal de dissocier le contenu de la page de son apparence visuelle.
A travers cet article, nous allons revisiter les bases fondamentales du CSS que tout développeur doit maîtriser.

No Layout

N’avoir aucun Layout est correct si vous voulez avoir une seule grande colonne de contenu. Cependant, si l’utilisateur élargit la fenêtre du navigateur, cela devient problématique et ennuyeux à lire: vos yeux ont une longue distance à parcourir pour lire chaque ligne de contenu.
Avant de résoudre ce problème, assurons-nous que nous sommes clairs sur la propriété « display ».

Display

« display » est la propriété la plus importante de CSS pour contrôler la mise en page. Chaque élément a une valeur d’affichage par défaut en fonction du type d’élément dont il s’agit. La valeur par défaut pour la plupart des éléments est généralement en « block » ou « inline ». Un élément de bloc est souvent appelé élément de niveau bloc. Un élément inline est toujours simplement appelé un élément inline – en ligne.

Block

div est l’élément standard au niveau du bloc. Un élément de niveau bloc commence sur une nouvelle ligne et s’étire aussi loin que possible vers la gauche et la droite. Les autres éléments courants au niveau des blocs sont « p » et « form », et les nouveautés en HTML5 sont « header »« footer »« section », etc.

Les Fondamentaux du CSS 3 - Webpick

Inline

span est l’élément inline standard. Un élément en ligne peut envelopper du texte dans un paragraphe comme celui-ci sans perturber le flux de ce paragraphe. L’élément a est l’élément en ligne le plus courant, car nous les utilisons pour les liens.

None

Une autre valeur d’affichage courante est « none ». Certains éléments spécialisés tels que le script l’utilisent par défaut. Il est couramment utilisé avec JavaScript pour masquer et afficher des éléments sans vraiment les supprimer et les recréer.  Ceci est différent de la « visibility ».
Définir « visibility » sur « none » rendra la page comme si l’élément n’existait pas. « visibility: hidden » masquera l’élément, mais l’élément occupera toujours l’espace qu’il aurait s’il était entièrement visible.

Margin: auto

Définir le width d’un élément block l’empêchera de s’étirer sur les bords de son conteneur à gauche et à droite. Ensuite, vous pouvez définir les marges gauche et droite sur auto pour centrer horizontalement cet élément dans son conteneur. L’élément prendra la largeur que vous spécifiez, puis l’espace restant sera divisé également entre les deux marges.  Le seul problème se produit lorsque la fenêtre du navigateur est plus étroite que la largeur de votre élément. Le navigateur résout ce problème en créant une barre de défilement horizontale sur la page.

Les Fondamentaux du CSS 5 - Webpick
Les Fondamentaux du CSS 7 - Webpick

Max-width

L’utilisation de max-width au lieu de width dans cette situation améliorera la gestion des petites fenêtres par le navigateur. Ceci est important pour rendre un site utilisable sur mobile tout en gardant un affichage correcte sur des écrans larges.

Les Fondamentaux du CSS 9 - Webpick

Position

Afin de créer des mises en page plus complexes, nous devons discuter de la propriété « position ». Il a plusieurs valeurs possibles que nous verrons par la suite.

Static

static est la valeur par défaut. Un élément avec position: static; n’est pas positionné de manière particulière. On dit qu’un élément static n’est pas positionné et un élément dont la position est réglée sur autre chose est dit positionné.

Relative

relative se comporte de la même manière que static, sauf si vous ajoutez des propriétés supplémentaires. Définir les propriétés top, right, bottom et left d’un élément relativement positionné le fera s’éloigner de sa position normale. Les autres contenus ne seront pas ajustés pour s’adapter à tout espace laissé par l’élément.

Les Fondamentaux du CSS 11 - Webpick

Fixed

Un élément fixed est positionné par rapport à la fenêtre, ce qui signifie qu’il reste toujours au même endroit même si la page défile. Comme pour les propriétés relatives, les propriétés top, right, bottom et left sont utilisées. comme exemple, le menu en haut de la fenêtre.

Absolute

absolute est la valeur de position la plus délicate. absolu se comporte comme fixe sauf par rapport à l’ancêtre positionné le plus proche au lieu de par rapport à la fenêtre. Si un élément positionné comme absolute n’a pas d’ancêtres positionnés, il utilise le corps du document et continue de se déplacer avec le défilement de la page. Rappelez-vous, un élément «positionné» est un élément dont la position est autre chose que statique.

Les Fondamentaux du CSS 13 - Webpick

Media Queries

Le « Responsive Design » est la stratégie consistant à créer un site qui « s’adapte » au navigateur et à l’appareil sur lesquels il est affiché en ayant l’air correcte et bien fait quoi qu’il arrive.
Les requêtes multimédias sont l’outil le plus puissant pour ce faire. Prenons le menu de notre site qui utilise une largeur maximale de 960px comme repère, et change le menu mobile vers un menu desktop quand cette largeur maximale est dépassée. Voici un exemple de code responsable de la transition :

@media only screen and ( max-width: 960px ) {
	#et_mobile_nav_menu { display:block }
	#top-menu-nav { display:none; }
}

Conclusion

Parce que la mise en page CSS est si délicate, il existe des frameworks CSS pour vous faciliter la tâche. En voici quelques-uns si vous souhaitez les découvrir. L’utilisation d’un framework n’est une bonne idée que si le framework fait vraiment ce dont vous avez besoin pour votre site. Ils ne remplacent cependant pas le CSS, apprendre à manipuler le CSS reste indispensable.

Catégories

à propos

Webpick a été fondé en 2015 par Taoufik, AKA Tao. Vétéran du web à Marrakech, Tao a construit une belle équipe de spécialistes des technologies, principalement PHP et WordPress. Accaparé par les multiples projets de l’incubateur EBF (Emerging Business Factory) qu’il a confondé, Tao a laissé les rênes de Webpick à son ami et associé David à partir de 2018.

Partager cette page

À propos de l’auteur

Anas Ghamri

Anas Ghamri

Auteur

Bonjour cher lecteur ! Je suis un ingénieur basé à Marrakech, spécialisé en Front-end et la création de sites Wordpress.