Scribd
Importer
26 vues3 pages

Cours CSS Chap1 A 5 Jayson

Ce document présente les chapitres 1 à 5 d'un cours sur le CSS, abordant les concepts fondamentaux tels que la syntaxe de base, le box model, le positionnement, Flexbox et CSS Grid. Il décrit les types de sélecteurs, les méthodes d'intégration, ainsi que les propriétés et les techniques de mise en page. Les différences entre Flexbox et Grid sont également soulignées, avec Flexbox étant une approche unidimensionnelle et Grid une approche bidimensionnelle.

Transféré par

Vean Dieson
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
26 vues3 pages

Cours CSS Chap1 A 5 Jayson

Ce document présente les chapitres 1 à 5 d'un cours sur le CSS, abordant les concepts fondamentaux tels que la syntaxe de base, le box model, le positionnement, Flexbox et CSS Grid. Il décrit les types de sélecteurs, les méthodes d'intégration, ainsi que les propriétés et les techniques de mise en page. Les différences entre Flexbox et Grid sont également soulignées, avec Flexbox étant une approche unidimensionnelle et Grid une approche bidimensionnelle.

Transféré par

Vean Dieson
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Cours CSS - Chapitres 1 a 5

Chapitre 1 : Introduction au CSS

Chapitre 1 : Introduction au CSS

CSS signifie Cascading Style Sheets. Il permet de styliser les elements HTML.

Syntaxe de base :

selecteur {

propriete: valeur;

Types de selecteurs :

- Par balise : p, h1

- Par classe : .titre

- Par ID : #entete

- Combines : [Link], div p

Methodes d'integration :

- Interne : <style> dans HTML

- Externe : fichier .css lie avec <link>

- En ligne (à eviter) : style="color: red;"

Chapitre 2 : Le Box Model

Chapitre 2 : Le Box Model

Chaque element HTML est une boîte composee de :

- content : contenu (texte/image)

- padding : espace interieur

- border : bordure

- margin : espace exterieur


Raccourcis :

padding: 10px 20px 30px 40px; (haut, droite, bas, gauche)

box-sizing: border-box; permet de tout inclure dans width/height.

Chapitre 3 : Positionnement et Display

Chapitre 3 : Positionnement et Display

display :

- block : prend toute la ligne (div, p)

- inline : dans la ligne (span)

- inline-block : comme inline avec marges/padding

- none : cache l'element

position :

- static : par defaut

- relative : par rapport à sa position normale

- absolute : par rapport au parent positionne

- fixed : fixe à l'ecran

- sticky : colle au scroll

z-index : ordre d'affichage

Chapitre 4 : Flexbox

Chapitre 4 : Flexbox

display: flex; active Flexbox sur le conteneur.

Axes :

- principal (horizontal par defaut)

- secondaire (vertical)

Proprietes du conteneur :
- flex-direction, justify-content, align-items, gap

Proprietes des enfants :

- flex-grow, flex-shrink, flex-basis, flex, align-self

flex: 2; signifie que l'element prend 2x plus d'espace que flex: 1.

Chapitre 5 : CSS Grid

Chapitre 5 : CSS Grid

display: grid; active la grille.

Definir colonnes/lignes :

grid-template-columns: 1fr 2fr;

grid-template-rows: auto auto;

Placer les elements :

grid-column: 1 / 3;

grid-row: 1;

Autres :

- gap: espace entre cases

- justify-items, align-items : alignement dans les cases

Flexbox = 1D, Grid = 2D (lignes + colonnes).

Vous aimerez peut-être aussi