CSS
13/05/20 danny
Historique
CSS : Cascading Style Sheets (Les feuilles de style)
Le W3C (World Wide Web Consortium) est un organisme de standardisation.
Le W3C définit les standards CSS.
- CSS 1 : publiée en décembre 1996
- CSS 2.1 : publieé en juin 2011
- CSS 3 : publieé en 2018
Class versus ID
Dans le langage CSS
- ID Selector
Un nom précédé du caracère“#”
Identifie un élément unique.
dans notre exemple movie
- Class Selector
Un nom précéde de “.”
Identifie un type d'élément (donc plusieurs itérations possibles).
dans notre exemple actor
/* ID Selector */
#movie {
background-color: #ccc;
}
/* Class Selector */
.actor {
color: red;
}
<!-- ID Selector -->
<div id="movie">
<!-- Class Selector -->
<p class="actor">Tom Cruise</p>
<p class="actor">Brad Pitt</p>
Media queries
Media queries est un module CSS3 permettant d'adapter le contenu d'une page web en fonction du périphérique utilisé.
Media queries pemet de gèrer un afichage responsive.
Exemples de syntaxe utilisées par Bootstrap.
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
font-weight
Propriété CSS
font-weight
- normal : Standard weight. equivalent à 400.
- bold: Bold weight. equivalent à 700.
- bolder
- lighter
- 100 : Lightest.
- 200
- 300
- 400 : normal
- 500
- 600
- 700 : bold
- 800
- 900 : Boldest.