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.