Fonts
Ajouter une font
En css, nous allons toujours du général au particulier. Nous commençons donc par déclarer toutes nos fonts, pour ensuite pouvoir les utiliser dans le style.
@font-face{
font-family: "hk-grotesk";
src: url("../fonts/hk-grotesk/HKGrotesk-Regular.ttf");
}Ce bloc de code permet d’appeler un fichier font avec l'architecture de fihciers suivantes, en supposant que nous travaiillons dans le fichier main.css
/css
main.css
/fonts
/hk-grotesk
HKGrotesk-Regular.ttf
@font-face sert à charger une nouvelle font, que nous pourrons utiliser dans le style. En premier, nous donnons un nom à la font, avec l'attribut font-family. Ensuite, nous indiquons à l'ordinateur où se trouve la font, le chemin vers la font, ou l'url (l'adresse) de la font depuis le fichier style.css. Entre chaque slash, se trouve le nom des dossiers à parcourir pour attendre le fichier HKGrotesk-Regular.ttf. ../ signifie 'aller dans le dossier parent'. En langage humain, nous disons donc à l'ordinateur:
- ../ > va dans le dossier parent (L'ordinateur se déplace du dossier css/ dans lequel se trouve ce fichier, style.css, pour aller dans le dossier parent).
- fonts/ > ensuite va dans le dossier 'fonts/'.
- hk-grotesk/ > ensuite va dans le dossier 'hk-grotesk/'.
- HKGrotesk-Regular.ttf > ensuite charge le fichier 'HKGrotesk-Regular.ttf' (notre fichier de font!)
L'attribut qui sert à lui indiquer le chemin s'appelle src (pour source) et il est suivit de la valeur url(""), qui permet d'indiquer l'adresse correcte du fichier depuis le fichier css, décomposée ci-dessus.
Mettre en place des callbacks
Lorsque l'on appelle des fichiers de fonts en CSS, il est important de mettre en place des callbacks, c'est-à-dire des formats de subsitutions si le format de font le plus léger (woff2) ne peut être lu par le navigateur client. Il est donc courant d'avoir au moins 4 formats du même fichier de font, et de les appeller dans l'ordre d'optimisation (du plus léger au moins léger).
/css
main.css
/fonts
/hk-grotesk
HKGrotesk-Regular.ttf
HKGrotesk-Regular.woff
HKGrotesk-Regular.woff2
@font-face{
font-family: "hk-grotesk";
src: url("../fonts/hk-grotesk/HKGrotesk-Regular.woff2") format("woff2"),
url("../fonts/hk-grotesk/HKGrotesk-Regular.woff") format("woff"),
url("../fonts/hk-grotesk/HKGrotesk-Regular.ttf") format("truetype");
}Ici, un exemple complet de font-face, important différents formats (woff2, woff, ttf) comme fallbacks, et mettant en place différents style ou graisse de la même font téléchargeable au format .zip.
Commandes CSS de base
color:
La commande color change la couleur du texte à l'intérieur d'une balise. Celle-ci accepte une couleur comme argument, dont les trois formes d'expression principales sont les suivantes:
- Mot-clés standard : un mot-clé, tiré d'une liste de 140 mots pré-définis par la W3C, disponible ici: https://www.w3.org/wiki/CSS/Properties/color/keywords
- Couleur RGB : une couleur, décrite par le mélange de trois couleurs, Rouge, Vert et Bleu, ou RVB (en RGB, Red, Green, Blue). Chacune des 3 couleurs est décrite par une valeur de 0 à 255, sous la forme suivante: rgb(0, 0, 0). La profondeur definissant les couleurs en CSS est de 24 bits, 8 bits par couleur, 8 bit pouvant contenir une valeur de 0 à 255 en base 10. Le nombre de couleurs disponibles est de donc de 16 777 216. Ici, une image reprenant toutes les couleurs disponibles: https://upload.wikimedia.org/wikipedia/commons/e/e9/16777216colors.png.
- Couleur hexadécimale : une couleur définie par une nombre hexadécimal, sous la forme #RRGGBB. Cette couleur contiens exactement la même information que la couleur RGB, excepté qu'elle est décrite par un chiffre hexadécimal (base 16), de 0 à ff (le nombre 255 s'écrvant FF en base 16).
<div>Hello!</div> div{
color: red;
}
div{
color: rgb(255, 0, 0);
}
div{
color: #FF0000;
}Ces trois commandes ont un résultat identique, à savoir donner la couleur rouge au texte présent à l'intérieur de tous les éléments html div et de ses decsendants.
font-size:
La commande font-size définit la taille de font à l'intérieur d'un élément. Celle-ci peut s'exprimer dans différentes unités, dans la liste complète est accessible ici : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
<div>Hello!</div> div{
font-size: 100px;
}line-height:
La commande line-height définit la distance entre deux lignes de texte, ou ligne de base. Par défaut (si rien n'est spécifié), la ligne de base équivaut à 1.2 fois le corps de texte définit par font-size.
<div>Hello!</div>
<div>Hi!</div>
<div>What is up?</div> div{
font-size: 24px;
line-height: 48px;
}background-color:
La commande background-color définit l'esthétique du fond d'un élément HTML. Celle-ci accepte une couleur pour valeur, sous le même forme que la commande color ci-dessus.
<div>Hello!</div> div{
background-color: yellow;
}
div{
color: rgb(255, 255, 0);
}
div{
color: #FFFF00;
}background-image:
La commande background-image définit une image de fond pour un élément HTML. Celle-ci accepte une url pour valeur, soit relative, soit absolue. Une url relative définit le chemin relatif depuis la feuille de style CSS, jusqu'à l'image de fond d'écran. Une url absolue définit le chemin absolue de l'image de fond d'écran sur le réseau.
<body>Hello!</body> body{
background-image: url("https://wallpapercave.com/wp/wp3873604.jpg");
}background-size:
La commande background-size définit la taille d'une image de fond pour un élément HTML. Celle-ci accepte une taille pour valeur :
- Sous forme de mot-clés : contain où l'image est toujours contenue dans l'élément en largeur et hauteur, cover où l'image prend le plus de place possible en largeur ou en hauteur, quitte à être coupée.
- en pixel ou pourcentage, ou une seule valeur définit la largeur, avec une hauteur proportionelle, et deux valeurs définissent la lergeur et la hauteur.
<body>Hello!</body> body{
background-image: url("https://wallpapercave.com/wp/wp3873604.jpg");
background-size: cover;
} <body>Hello!</body> body{
background-image: url("https://wallpapercave.com/wp/wp3873604.jpg");
background-size: contain;
}background-repeat:
La commande background-repeat définit la répétition d'une image de fond pour un élément HTML. Celle-ci accepte un mot-clé pour valeur :
- repeat, la valeur par défaut, le background est répété.
- no-repeat, le background n'est pas répété.
- repeat-x, le background est répété est largeur.
- repeat-y, le background est répété est hauteur.
...
<body>Hello!</body> body{
background-image: url("https://wallpapercave.com/wp/wp3873604.jpg");
background-size: contain;
background-repeat: no-repeat;
}background-position:
La commande background-position définit la répétition d'une image de fond pour un élément HTML. Celle-ci accepte différents type de valeurs, listées ici: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position.
<body>Hello!</body> body{
background-image: url("https://wallpapercave.com/wp/wp3873604.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}margin:
La commande margin définit la distance entre un élément et ses voisins (parents, siblings).
<h1>Hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p> body{
background: lime;
}
h1{
font-size: 24px;
line-height: 48px;
background: yellow;
/* Notation des marges en quatre propriétés. */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
/* Notation des marges sur une ligne, 4 marges spécifiées. */
/* margin: top right bottom left */
margin: 10px 10px 10px 10px;
/* Notation des marges sur une ligne, 2 marges spécifiées. */
/* margin: top+bottom left+right */
margin: 10px 10px;
/* Notation des marges sur une ligne, 1 marge spécifiée. */
/* margin: top+bottom+left+right */
margin: 10px;
}
p{
background: white;
}padding:
La commande padding définit la distance entre un élément et ses limites.
<h1>Hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p> body{
background: lime;
}
h1{
font-size: 24px;
line-height: 48px;
background: yellow;
/* Notation des paddings en quatre propriétés. */
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
/* Notation des paddings sur une ligne, 4 paddings spécifiés. */
/* padding: top right bottom left */
padding: 10px 10px 10px 10px;
/* Notation des paddings sur une ligne, 2 paddings spécifiés. */
/* padding: top+bottom left+right */
padding: 10px 10px;
/* Notation des paddings sur une ligne, 1 padding spécifié. */
/* padding: top+bottom+left+right */
padding: 10px;
}
p{
background: white;
}display:
La commande display définit le comportement d'un élément lorsqu'il est intégéré à un flux d'élements. Trois valeurs principales à cette commande :
- block : la valeur par défaut. L'élément se comporte comme un block, et prends la largeur de l'élément parent.
- inline : l'élément se comporte comme du texte, et s'intgère dans le flux à la suite des autres éléments avec la largeur des éléments enfants.
- inline-block : l'élément se comporte à la fois comme un élément block et inline, ce qui signifie qu'il prend la largeur des éléments enfants par défaut, tout en acceptant la définition d'une largeur (avec la commande width), ainsi que des margin et padding.
<body>
<div>Hello!</div>
<div>Salut!</div>
<div>Hallo!</div>
</body> div{
display: block;
margin: 10px;
padding: 20px;
background: yellow;
} <body>
<div>Hello!</div>
<div>Salut!</div>
<div>Hallo!</div>
</body> div{
display: inline;
margin: 10px;
padding: 20px;
background: yellow;
} <body>
<div>Hello!</div>
<div>Salut!</div>
<div>Hallo!</div>
</body> div{
display: inline-block;
margin: 10px;
padding: 20px;
background: yellow;
}width:
La commande width définit la taille de font à l'intérieur d'un élément. Celle-ci peut s'exprimer dans différentes unités, dans la liste complète est accessible ici : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
<body>
<div>Hello!</div>
<div>Salut!</div>
<div>Hallo!</div>
</body> div{
display: block;
margin: 10px;
padding: 20px;
width: 20%;
background: yellow;
} <body>
<div>Hello!</div>
<div>Salut!</div>
<div>Hallo!</div>
</body> div{
display: inline-block;
margin: 10px;
padding: 20px;
width: 20%;
background: yellow;
} <body>
<div>Hello!</div>
<div>Salut!</div>
<div>Hallo!</div>
</body> div{
display: block;
margin: 10px;
padding: 20px;
width: 200px;
background: yellow;
}position:
La commande position définit la position d'un élément. Les quatre valeurs principales qu'elle peut prendre sont :
- static : Valeur par défaut. L'élément est intégré au flux. Les propriétés top, bottom, left, right sont sans effets.
- relative : L'élément est intégré au flux. Les propriétés top, bottom, left, right sont appliquées relativement à l'élément lui-même.
- absolute : L'élément sort du flux, pour se positionner de manière absolue dans les limites de la page. Les propriétés top, bottom, left, right sont relatives aux limites de la page.
- fixed : L'élément sort du flux, pour se positionner de manière absolue dans les limites de la fenêtre. Les propriétés top, bottom, left, right sont relatives aux limites de la fenêtre.
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<span>Hello!</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</body> span{
position: static;
top: 20px;
left: 20px;
background: yellow;
display: inline-block;
} <body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<span>Hello!</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</body> span{
position: relative;
top: 20px;
left: 20px;
background: yellow;
display: inline-block;
} <body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<span>Hello!</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</body> span{
position: absolute;
top: 20px;
left: 20px;
background: yellow;
display: inline-block;
} <body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<span>Hello!</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</body> body{
height: 500px;
}
span{
position: fixed;
top: 20px;
left: 20px;
background: yellow;
display: inline-block;
}