HTML/CSS

Généralités HTML CSS

2 mai 2022
BenjaminViguier

orange : chaîne de caractères
bleu foncé: balises
bleu ciel : attributs

Raccourcis Utiles sur Visual Studio Code:

  • ! + Tab -> Doctype
  • Alt + select -> permet de sélectionner plusieurs sequences simultanées à corriger/compléter.

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

3 manières d’appeler du CSS dans le HTML:

  • Directement dans le code HTML (avant le « main » avec balise Style):
  • Directement dans la balise ciblée (avec balise style) :
  • Avec feuille de style à part
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dustin Villa</title>
    <!-- appel feuille de style : -->
    <link rel="stylesheet" href="style.css" />
    <!-- -------------- -->
  </head>
  <body>
    <main>

CLASSE et ID :

Appeler :

  • classe: .nom-de-la-classe { }
  • id : #nom-de-l-ID { }

On peut donner plusieurs classes pour une même balise: (séparées par un espace)
par ex:
<h1 class= » classe1 classe2 classe3″>

Dans la feuille de style:

* : cible toutes les balises (sauf <a></a> et les boutons)

* {
  margin: 0;
}

(Ce genre d’indication est à mettre en haut de la feuille de style.)

VOCABULAIRE :


h2 {
color : red ;
}

ici:
color = propriété
red = valeur

CROCHETS et ATTRIBUTS:

[ ] cible les attributs

RÉINITIALISATION DE LA FEUILLE DE STYLE:

Pour ‘effacer’ le CSS pré-embarqué dans les navigateurs, entrer en haut de la feuille de style:

/* reinitialisation du CSS des navigateurs */
*,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}