Que signifie l’acronyme CSS ?
Cascading Style Sheets
Le CSS permet d’appliquer du style à du HTML.
Quelle est la syntaxe d’un bloc de déclaration en CSS ?
sélecteur {
propriété : valeur;
}
sélecteur : pour identifier les éléments sur lesquels s’applique la règle (élément, id “#”, classe “.” ,…)
Quelles sont les 3 possibilités pour déclarer du style CSS ?
Le style CSS peut-être déclaré :
- dans une feuille de style externe (<link></link>)
- en interne dans la balise <style> dans le head
- en incise comme attribut dans les balises (<p style="color:blue;">)</style>
A quoi sert la meta viewport dans la balise <head> du code HTML ?
Elle indique au navigateur de faire correspondre la largeur de la page à celle de l’écran et initialise le zoom.
<meta></meta>
Comment déclare-t-on un commentaire en CSS ?
/* commentaire */
En quoi consiste le rest CSS ?
Le reset CSS permet d’harmoniser les styles pour éviter les variations de styles par défaut d’un navigateur à l’autre.
:root {
…
}
Quelles sont les propriétés relatives à la couleur en CSS ?
- color : couleur de texte
- border-color : couleur de bordure
- background-color : couleur d’arrière-plan
Les couleurs peuvent être :
- nommées (red, green, …)
- en hexadécimal (#113344)
- en rgb (rgb(0 255 0 / 50%))
Quelle propriété CSS permet de styliser le texte ?
Les propriété commençant par font-.
ex : font-family, font-size, font-weigth, …
Quelles sont les différentes unité de mesures en CSS (relatives et absolues) ?
Absolues : px / cm
ATTENTION : elles ne s’adaptent pas à la taille d’affichage, taille d’écran, paramètres utilisateurs (zoom), à éviter au maximum !
Relatives : rem (relative à la taille par défaut du texte à la racine) / em - % (relative à la taille courante du texte de l’élément parent)
Qu’est-ce qu’une propriété raccourcie en CSS ?
Certaines propriété peuvent regrouper plusieurs valeurs.
ex :
body {
margin-top : 0;
margin-bottom : 0;
margin-right : 0;
margin-left : 0; } est équivalent à body {
margin : 0; }En quoi consiste le modèle de boite en CSS ?
Chaque élément est représenté par le navigateur sous forme de boite rectangulaire.
margin - border - padding - content
Quelles propriétés permettent d’ajuster les zone de remplissage (padding) et de marge (margin) ?
La propriété raccourcie “padding” (padding-top/padding-right/padding-bottom/padding-left).
La propriété raccourcie “margin” (margin-top/margin-right/margin-bottom/margin-left).
Quelles propriété permettent d’agir sur la bordure des éléments ?
- border-*-width : largeur de la bordure
- border-*-style : style de bordure (none/dotted/dashed/solid/double)
- border-*-color : couleur de bordure
Les trois peuvent être combinées dans la propriété raccourcie “border”.
- border-radius : arrondi les angles
Comment aligner un élément avec “margin” ?
- margin-left : auto permet d’aligner le block à droite
- margin-right : auto permet d’aligner le block à gauche
- margin-left : auto et margin-right : auto permettent d’aligner le block au centre
Quelles sont les valeurs de la propriété “box-sizing” ?
Par défaut, la valeur de box-sizing est “content-box”. Dans ce cas la largeur et hauteur de l’élément s’applique au contenu seulement.
On peut utiliser la valeur “border-box” pour que le navigateur prenne en compte la bordure, le padding et le contenu pour la largeur et hauteur.
A quoi sert la propriété “display” ?
LA propriété “display” définit le type d’affichage de l’élément :
- none : le contenu n’apparait pas
- block
- inline
- inline-block : donne les propriété inline tout en permettant de définir une largeur/hauteur
- flex : conteneur de boite flexible
- grid : conteneur de grille
Que fait la propriété “float” ?
La propriété “float” sert à faire flotter un élément sur un côté de son conteneur.
Quelles sont les différentes valeurs de la propriété “overflow” ?
- visible (défaut)
- scroll : affiche barre de défilement
- auto
- hidden
Quelle propriété détermine l’arrière-plan d’un élément ?
Il s’agit de la propriété “background”.
- background-color : couleur de l’arrière-plan
- background-image : image d’arriere plan (url())
- background-origin (border-box/padding-box,…)
- background-attachement (scroll/fixed/local)
- background-clip (border-box/padding-box,…)
- background-position
- background-repeat
-background-size
Quels sont les différents sélecteurs d’élément en CSS ?
- élément : div {}
- classe : .class{}
- identifiant : #id {}
- universel : * {}
- attribut : [nom_attribut = “valeur”] {}
Quels sont les combinateurs de sélécteurs ?
” “ descendants
> enfants directs
~voisins globaux
+ voisin direct
Citer quelques pseudo-classes CSS.
Une pseudo-classe est un mot clé ajouté à un sélecteur qui permet de styliser un état spécifique des éléments sélectionnés ou leur position dans le DOM:
- :not() qui ne contient pas
- :hover élément en survol
- :active au moment du clic
- :visited lien déjà cliqué
- :focus élément sélectionné avec tab
- :has() élement (parent ou voisin) si un sélecteur passé en paramètre correspond
- :nth-child(n)
- :nth-of-type(n)
Citer quelques pseudo-éléments CSS.
Les pseudo-éléments permettent d’accéder à certaines parties de l’élément pour le styliser.
- ::first-letter
- ::first-line
- ::before + content:” “
- ::after + content:” “
Quelles sont les principales propriétés de flexbox ?
Propriétés du conteneur :
- display : flex
- flex-direction (row/row-reverse/column/column-reverse)
- flex-wrap (nowrap/wrap/wrap-reverse)
- justify-content (flex-strat/flex-end/center/space-between/space-around/space-evenly)
- align-items (flex-strat/flex-end/center/stretch)
- gap
Propriétés des items:
- order
- flex-grow (défaut 0)
- flex-shrink (défaut 1)
- align-self / justify-self (auto/flex-strat/flex-end/center/stretch)
-
Git38
-
Algorithmie40
-
Langage C38
-
Anglais 162
-
Fonctionnement des entreprises38
-
HTML32
-
CSS30
-
Architecture Web8
-
Langage SQL26
-
Anglais 242
-
PHP36
-
URLs7
-
Protocole HTTP6
-
Symfony17
-
Etique et responsabilités d'un développeur15
-
JavaScript46
-
Autre1
-
Anglais 36
-
Anglais 462
-
Gestion de projet14
-
UI/UX17
-
Numérique responsable16
-
Java51
-
WordPress11
