Le style permet de modifier les propriétés des éléments de la page, comme la couleur, la police.
Le but du CSS
- réduire au maximum la taille du HTML pour le rendre plus lisible
- fond/forme: modifier l'apparence de la page sans modifier sa structure HTML
Règle de style CSS
Le dernier ; avant l'accolade fermante est facultatif.3 façons d'insérer un style
Style externe<link href="fichier.css" rel="stylesheet"/>Style interne (n'importe où dans la page. Plutôt dans le head)<style> /* commentaire CSS */ span.com{color:green;} </style>Style inline (dans une balise avec l'attribut HTML style)<div style="width:200px;height:64px;background-color:red"/></div>
En cascade
Signifie qu'on peut appliquer un style sur un élément, avec un style externe, puis lui appliquer un style interne, puis en inline. C'est ce dernier qui sera appliqué.On peut même inclure plusieurs styles externes les uns à la suite des autres, c'est le dernier qui parle qui écrase les modifs de la règle d'avant.
Portée
Propriétés les plus courantes
à retenir: Marge et Bordure augmentent les dimensions du div!
Exemple de Menu déroulant
Exemple de Transitions
Responsive
Un site internet responsif s'adapte au matériel: une règle CSS permet de préciser que si l'écran fait moins de 1024 pixels de large, alors certaines règles CSS changent pour adapter le contenu à l'écran.Pendant le développement du CSS on peut connaître la largeur de l'écran en pixels avec
<script> console.log(window.innerWidth); </script>Site 3 colonnes responsif
Aller sur la page, puis
- Réduire la largeur du navigateur pour voir comment le site se réorganise,
- Ou appuyer sur F12 et cliquer sur les petits téléphones en haut à gauche (ou CTRL-SHIFT-M) pour réduire manuellement la largeur.
Faire CTRL-U sur la page, observer la structure HTML et le CSS
Pour afficher une table HTML,
La première solution consiste à ajouter un scrollbar horizontal.
La seconde méthode c'est afficher chaque enregistrement sous forme d'une colonne pour obtenir une Table HTML responsive.