×
TET007-2 CSS

TET007-2 CSS

Tags

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