Le langage CSS/Techniques avancées

Le langage CSS

1. Introduction
   • Premier exemple
   • Structure et syntaxe
   • Les sélecteurs
   • Valeurs et unités utilisées
2. Mise en forme
   • Texte
   • Fonds, bordures, marges et espacements
   • Listes
   • Tableaux
   • Héritage
3. Mise en page
   • Le positionnement des éléments
   • Le modèle de boîte
   • Transformation géométrique
4. Pour aller plus loin
   • Techniques avancées
   • Navigateurs et débogage
   • CSS 3
   • Bootstrap
5. Annexes
   • Glossaire
   • Mots réservés
   • Notions de design et de colorimétrie
   • Interface HTML

Remplacement d'un texte par une image

Le texte doit être balisé et identifié de manière unique, par exemple par

<h1 id="premier_titre">Titre</h1>

dans le fichier XHTML. On masque alors le texte par le paramètre

display:none

dans le CSS et on affiche l'image, (avec tous les attributs ) en fond.

Les personnes non voyantes auront un CSS spécial, affichant le titre, sans l'image.

URL des liens pour version imprimable

À l'impression, l'URL des liens n'est pas visible à moins que le texte affiché contenu dans l'élément <a> soit déjà une copie de l'URL. Il existe un autre moyen en utilisant une règle CSS pour les liens quand le media d'affichage est pour l'impression : ajouter le contenu de l'attribut href après le lien.

@media print {
  a::after {
    content: " (" attr(href) ") ";
  }
}

Variations autour des listes

Liste « plate »

Cette section est vide, pas assez détaillée ou incomplète.

Menu déroulant

Pour créer un menu déroulant, nous allons tout d'abord fixer l'exemple : Un menu qui comporte le lien vers Système Solaire, où se trouve ensuite un sous-menu avec la liste des planètes.

Première partie, HTML :

<ul class="menu">
    <li>Galaxies</li>
    <li class="titre-sous-menu">
        Système solaire
        <ul class="sous-menu">
            <li>Soleil</li>
            <li>Mercure</li>
            <li>...</li>
        </ul>
    </li>
</ul>

Ensuite le CSS :

.menu {
    background-color: red; /* exemple */
    color: white;
    display: inline-block;
}

.titre-sous-menu {
    display: inline-block;
}

.sous-menu {
    display: none;
}

.titre-sous-menu:hover .sous-menu {
    display: block;
}

Notre menu est maintenant créé. On peut aussi améliorer la mise en page, mais cela, c'est à vous de le faire.

Modification du texte de l'élément

Validation

Afin de vérifier qu'il n'y a pas d'erreur de syntaxe dans le code CSS, il existe des outils de validation en ligne comme https://jigsaw.w3.org/css-validator/.

Minification

Réduire le temps de chargement en supprimant tous les caractères non indispensables à l'exécution du code, comme les espaces.

Des outils comme https://github.com/fmarcia/UglifyCSS le font automatiquement.

Concaténation

Moins un site Internet possède de fichiers différents, et plus il sera rapide à charger car le nombre de connexions HTTP sera moindre. Certains outils de minification procèdent donc à la concaténation des feuilles de style CSS.

CSSOO

Cette section est vide, pas assez détaillée ou incomplète.

Préprocesseurs

SASS

Cette section est vide, pas assez détaillée ou incomplète.

LESS

http://lesscss.org/