×
TET007-M1 | 22-23 | 2.CSS

TET007-M1 | 22-23 | 2.CSS

Recap sur la session précédente

  1. L'utilisation du HTML, CSS, PHP, et Mysql pour les sites wordpress sur l'Internet
  2. Les bases du HTML

CSS

CSS3

Le CSS (cascade style sheet) est un language transformant l'apparence d'une page écrite dans un language de balisage. La version actuelle est le CSS3.

Dans le cadre de ce cours, il va permettre de styliser nos pages HTML. Le code CSS peut se mettre soit entre les balises <style>...</style> elles-mêmes placées entre les balises <head>...</head>, soit dans un autre fichier (e.g., style.css) dont le fichier html doit appeler. C'est cette deuxième approche que nous utilisons.

Appel du fichier CSS media peut prendre les valeurs: all, media, print, speech 

<link rel="stylesheet" href="styel.css" media="all">
💡
EXERCICE: Créeez un fichier CSS à côté de vos fichiers HTML et liez un des fichiers HTML à ce fichier CSS. Collez ensuite le code situé à droite dans le fichier CSS pour voir l'effet sur la page HTML.
html, body {
	backgroud-color: rgb(28, 28, 28);
	color: lightcoral;
	font-size: 15px;
	line-height: 1.5rem;
  font-family: Avenir, sans-serif;
}

Correspondances

HTML / CSS

<body>...</body>
<div ID="Name">...</div>
<div class="Name">...</div>
body {...}
#Name {...}
.Name {...}
  • un ID s'applique à un objet unique : il ne peut pas y avoir deux ID identitques dans une page
  • une class peut caractériser plusieurs objets (identiques ou non)

Styliser

un sélecteur peut être une balise, in #ID, ou une .class

selecteur { 
	propriété1: valeurs;
	propriété2: valeurs;
}

body {
	background-color: black;
}
#pagename {
	font-size: 15px;
}
.textInRed {
	color: red;
}

Conteneurs génériques 

<div>...</div> // div pour créer une division dans la page
<span>...</span>  //span pour une section en ligne

<flex>...</flex>  //flex pour créer un layout de divs
<grid>...</grid>  //grid pour créer une grille de divs
//(flex et grid ne s'applique pas qu'aux divs, mais c'est conseillé)

Style: page

selecteur { 
	propriété1: valeurs;
	propriété2: valeurs;
}

body {
	background-color: black;
}

#pagename {
	font-size: 15px;
}

.textInRed {
	color: red;
}

p.textInBlue {
	color: blue;
}

div p {
  text-decoration: underline;
}

div.type1, div.type2 {
	text-transform: uppercase;
}

Commentaires en CSS

selecteur { 
	propriété1: valeurs;
	propriété2: valeurs;
}

/* ceci est 
un commentaire */

body {
	background-color: black;
}

Pseudo-classes

<a href="#">...</a>
<a href="#">...</a>
<a href="#" class="firsta">...</a>
/*  pseudo-classe lien visté (:visited)
    pseudo-classe lien souris par-dessus (:hover)
		pseudo-classe lien actif (:active)
		pseudo-classe premier du type (:first-child)
*/
a {
	color: red;
}
a:visited {
	color: yellow;
}
a:hover {
	color: green;
}
a:active {
	color: orange;
}
a:first-child {
	font-size: 26px;
}

Dernier exemple vu en cours

<!DOCTYPE html> 
<head>
    <title>...</title>  <!-- titre -->
    <meta charset="UTF-8">  <!-- format du texte -->
      <meta name="keywords" content="mes, mots, clés">  <!-- mots clés -->
      <meta name="description" content="description du site"> <!-- description courte du contenu -->
      <meta name="author" content="Mon Nom">  <!-- nom de l'auteur de la page -->
      <meta http-equiv="refresh" content="30">  <!-- période avant reload -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- viewpoint pour une apparence correcte sur de multiple écrans -->
      <link rel=stylesheet href="style.css" media="all">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet"> 
  </head>
  


  <body class="page1">
    <div class="section1">
      <h1>titre 1</h1>
      <p>texte 1a</p>
      <p>texte 1b</p>
    </div>
    <div class="section2">
      <h1>titre 2</h1>
      <p>texte 2</p>
    </div>

  <div>
    <a href="https://google.com">vers google</a>
  </div>
  </body>
html, body{
	font-family: 'Dancing Script', cursive;
}

div.section1 {
	background-color: yellow;
}

div.section1 p {
	color: red;
}

div.section2 {
	background-color: aqua;
}
div.section2 p{
	text-decoration: underline;
}
div.section2 p:hover{
	color: tomato;
}

a {
	color:red;
	text-decoration: none;
	font-family: 'Courier New', Courier, monospace
}
a:hover {
	color: green;
	text-decoration: underline red;
	font-size: 50px;
	background-color: yellow;;
}

Pour aller plus loin

Liste des balises

Forums

Exercice final!

1 site dans un dossier, soumis comme un fichier zip

  • au moins 3 pages HTML, au moins 1 page CSS, et au moins une image (max 100kb)
  • le thème de votre choix
  • toutes les pages html sont liés à la même page CSS
  • chaque page HTML possède un lien vers une autre page HTML locale. De cette façon, toutes les pages HTML sont connectées à au moins une autre page HTML
  • une page HTML possède un lien vers un site internet externe
  • une page HTML possède un lien vers un email
  • deux pages HTML montrent une image locale
  • une page HTML montre une image distante
  • une image possède une taille absolue
  • une image possède une taille relative à celle du navigateur
  • certains liens html, mais pas tous, changent de style quand la souris passe dessus
  • le lien email est de couleur différente que les liens HTML
  • sur toutes les pages HTML, les méta-données sont complètes par rapport au modèle
  • les polices de caractères utilisent le site Google Font
  • bonus: une image reste fixe sur l’écran avec les spécificités suivantes:
    • elle est verticalement centrée
    • elle est horizontalement placée à droite
    • elle possède une bordure de 5px d’épaisseur uniqueement sur la partie gauche
    • super bonus: elle est noir et blanc, et en couleur lorsque la souris passe dessus

Date limite: le 18 janvier à 13h