đŸ–Œïž CSS#

../../_images/css3.png

Cascading Style Sheets

Littéralement « Feuilles de style en cascade », utilisé pour la présentation des document HTML et XML. Elles furent introduites en 1990 et réellement prises en charge en 2000. HTML ne décrit que la structure logique (le fond) des documents, la structure physique (la forme) est spécifiée par une feuille de style en CSS.

Les avantages de leurs utilisations, en plus de respecter le standard, sont la cohĂ©rence au sein du document, au sein d’un ensemble de documents (charte graphique), la mutualisation de la feuille de style et la sĂ©paration des tĂąches (dĂ©veloppeur web / graphiste).

  • 1989-1993 Feuille de style dĂ©fini par l’utilisateur

  • 1994 -1995 Netscape apporte le support des CSS

  • 2000 Support croissant au sein des navigateurs

Ajouter une feuille de style au document#

Il suffit d’ajouter dans l’élĂ©ment <head> d’une balise <link>.

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

Les valeurs des attributs rel et type sont fixes pour une feulle de style css. L’attribut href contient l’URL de la feuille de style. On peut avoir plusieurs feuilles de style (leurs effets se cumulent) au sein d’un mĂȘme document.

Important

Comme pour le HTML, le W3C fournit un service en ligne de validation de CSS http://jigsaw.w3.org/css-validator/, son utilisation vous est vivement recommandée.

RĂšgle#

En CSS, la mise en forme est spécifiée par un ensemble de rÚgles. Une rÚgle typique est composée de trois parties :

  1. un sélecteur,

  2. une propriété,

  3. une valeur

../../_images/css_rule.png
Signifie que tous les paragraphes du document prennent un taille de police de 14px.#
p {
    font-size: 14px;
}

SĂ©lecteur#

Note

Les sĂ©lecteurs dĂ©finissent les Ă©lĂ©ments sur lesquelles s’applique un ensemble de rĂšgles CSS.

Les sélecteurs de type#

Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.

Syntaxe

élément { style: propriétés; }

SĂ©lecteur

Cibles

 
p {}

<h1>Quotes</h1>
<p>May the Force be with you.</p>
<img src=".." alt=".." />
<p>I'm in it for the money.</p>
<p>I find your lack of faith disturbing.</p>

img {}

<section>
    <h2>I find your lack of faith disturbing.</h2>
    <img src=".." alt=".." />
</section>
<section>
    <h2>May the Force be with you.</h2>
    <img src=".." alt=".." />
</section>

Classe et identifiant#

HTML autorise les attributs suivant dans n’importe quelle balise :

  • id accepte comme valeur un nom unique (interdiction d’utiliser le mĂȘme id dans un mĂȘme document) ;

  • class accepte comme valeur une liste de noms sĂ©parĂ©s par des espaces (le mĂȘme nom de classe peut ĂȘtre prĂ©sent dans plusieurs balises).

<ol id="contents">...</ol>
<article class="post funny">...</article>
<p class="funny">...</p>
Les sélecteurs de classe#

Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.

Syntaxe

.nomclasse { style: propriétés; }

SĂ©lecteur

Cibles

 
.red {}

<section>
    <h2 class="red">I find your lack of faith disturbing.</h2>
    <img src=".." alt=".." />
</section>
<section>
    <h2>May the Force be with you.</h2>
    <img class="red" src=".." alt=".." />
</section>
Les sĂ©lecteurs d’identifiants#

Ce sĂ©lecteur simple permet de cibler un Ă©lĂ©ment d’un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu’un seul Ă©lĂ©ment pour un identifiant donnĂ©

Syntaxe

#identifiant { style: propriétés; }

SĂ©lecteur

Cibles

 
#logo {}

<h1 id="logo">Star Wars</h1>
<p>May the Force be with you!</p>
<img src=".." alt=".." />

Le sélecteur universel#

Ce sĂ©lecteur permet de cibler tous les nƓuds d’un document.

Syntaxe

* { style: propriétés; }

SĂ©lecteur

Cibles

 
* {}

<h1 id="logo">Star Wars</h1>
<p>May the Force be with you!</p>
<img src=".." alt=".." />

Combinaison de rĂšgles#

Plusieurs rĂšgles similaires peuvent coexister :

p   { font-style: italic }
p   { color: blue }
h2  { font-style: italic }
h2  { color: blue }

On peut regrouper les rĂšgles ayant le mĂȘme sĂ©lecteur, en sĂ©parant les couples propriĂ©tĂ©-valeur par un point-virgule (;).

p   { font-style: italic ; color: blue }
h2  { font-style: italic ; color: blue }

On peut regrouper des rĂšgles ayant le mĂȘme contenu, en sĂ©parant les sĂ©lecteurs par une virgule (,).

p, h2 { font-style: italic ; color: blue }

Multi sélecteurs#

SĂ©lecteur

Cibles

 
h1, p {}

<h1 id="logo">Star Wars</h1>
<p>May the Force be with you!</p>
<img src=".." alt=".." />

Longueur en CSS#

Il existe différentes unités pour les tailles (police et boßte) en css, en voici quelques une:

Unité

Description

cm

centimĂštre

mm

millimĂštre

in

pouce (inch)

em

taille de la police courante

px

pixel CSS

vw

1% de la largeur de la fenĂȘtre

vh

1% de la hauteur de la fenĂȘtre

Taille en CSS#

La taille d’un Ă©lĂ©ment peut ĂȘtre fixĂ©e grĂące aux propriĂ©tĂ©s width et height. Ces propriĂ©tĂ©s acceptent des longueurs absolues, ou en pourcentage (par rapport Ă  l’élĂ©ment englobant).

Par exemple, ce paragraphe a la propriété width: 50%, il occupe donc la moitié de la largeur de la page.

p {
    width: 50%;
}

Intervalles de taille#

On peut également contraindre un élément de maniÚre plus souple avec les propriétés min-width, max-width, min-height et max-height.

C’est utile lorsqu’on ne connaĂźt pas Ă  l’avance le contenu des Ă©lĂ©ments concernĂ©s :

  • feuille de style mutualisĂ©e,

  • contenu dynamique,

  • reponsive design.

DĂ©bordement#

Si on contraint la taille d’un Ă©lement il est possible que le contenu dĂ©passe de celui-ci.

La propriĂ©tĂ© overflow permet de paramĂ©trer le comportement de l’élĂ©ment dans cette circonstance:

  • visible le contenu s’affichera entiĂšrement.

  • hidden ne s’affiche qu’à l’intĂ©rieur de l’élĂ©ment, peut ĂȘtre tronquĂ©.

  • scroll ne s’affiche qu’à l’intĂ©rieur de l’élĂ©ment, apparition d’ascenseurs au besoin.

Propriétés des textes#

font-style: normal|italic|oblique
font-weight: normal|bold|bolder|lighter| ou une valeur entre 100 et 900 (400 = normal)
font-variant: normal|small-caps
font-family: <police>
font-size: taille et unités

Police d’écriture#

CSS définit des polices génériques : serif, sans-serif, cursive, fantasy, monospace

  • InconvĂ©nient : leur apparence varie d’un systĂšme Ă  l’autre (et d’un navigateur Ă  l’autre).

  • Avantage : elles garantissent un affichage pas trop diffĂ©rent des intentions de l’auteur.

Il convient de spĂ©cifier une liste de polices, par ordre croissant de probabilitĂ© qu’elle soit disponible, et en terminant toujours pas une police gĂ©nĂ©rique.

font-family: MyNiftyFont, "Times New Roman", serif

Taille de police#

La taille de police est généralement exprimée en points px :

body {  font-size: 12px; }

ou relativement Ă  la taille de la police dans l’élĂ©ment englobant.

h1 {  font-size: 150%; }

Mais toutes les unités de mesures reconnues par CSS sont en théorie utilisables.

Autres propriétés des textes#

text-decoration: none|underline|overline|line-through|blink
text-transform: none|capitalize|uppercase|lowercase
text-align: left|center|right|justify
color: <color>
background-color: <color>

Couleur en CSS#

p { color: #f00 }                 /* #rgb */
p { color: #ff0000 }           /* #rrggbb */
p { color: rgb(255,0,0) }
p { color: rgb(100%, 0%, 0%) }
p { color: rgba(255, 0, 0, 0.5) }
body { background-color: #000;}

Attention

Les couleurs doivent toujours ĂȘtre exprimĂ©es en hexadĂ©cimal, RGB ou RGBA ! N’utilisez pas les noms des couleurs.

Des sélecteurs un peu plus complexe#

Les sélecteurs de voisin direct#

Le combinateur + permet de sélectionner les noeuds qui suivent immédiatement un élément donné.

Syntaxe

A + B { style: propriétés; }

SĂ©lecteur

Cibles

 
h1 + p {}

<h1 id="logo">Star Wars</h1>
<p>May the Force be with you!</p>
<img src=".." alt=".." />

Les sĂ©lecteurs d’élĂ©ments descendants#

Le combinateur :code:` ` (espace) permet de sĂ©lectionner les nƓuds qui sont des descendants (pas nĂ©cessairement des fils directs) d’un Ă©lĂ©ment donnĂ©.

Syntaxe

A B { style: propriétés; }

SĂ©lecteur

Cibles

 
section p {}

<section>
    <p>May the Force be with you!</p>
</section>
<section>
    <p>May the Force be with you!</p>
</section>

Les sĂ©lecteurs d’élĂ©ments fils#

Le combinateur :code`>` permet de sĂ©lectionner les noeuds qui sont des fils directs d’un Ă©lĂ©ment donnĂ©

Syntaxe

A > B { style: propriétés; }

SĂ©lecteur

Cibles

 
ul > li

<ul>
    <li>Sucre</li>
    <li>Miel</li>
    <li>Lait</li>
</ul>
<ol>
    <li>Sucre</li>
    <li>Miel</li>
    <li>Lait</li>
</ol>

Encore et toujours des boĂźtes#

En CSS, tout tourne autour de boĂźtes dĂ©finir leurs tailles, leurs couleurs, leurs positions, 
 Les Ă©lĂ©ments HTML d’une page peuvent, pour la plupart, ĂȘtre vus comme des boĂźtes placĂ©es les unes sur les autres. C’est pour cette raison que l’architecture de CSS est principalement basĂ©e sur un modĂšle de boĂźtes.

ModĂšle de boĂźtes#

Chacun de ces blocs prend un certain espace sur la page, de cette façon :

  • padding l’espace autour, proche du contenu

  • border la ligne qui est juste autour du padding

  • margin l’espace extĂ©rieur, autour de l’élĂ©ment

../../_images/box-model.png

Marge externe#

La propriĂ©tĂ© margin dĂ©finit la taille des marges sur les quatre cĂŽtĂ©s de l’élĂ©ment. C’est une propriĂ©tĂ© raccourcie qui permet de manipuler les autres propriĂ©tĂ©s de marges : margin-top, margin-right, margin-bottom et margin-left.

Syntaxe

/* La propriété s'applique aux quatre cÎtés */
margin: 1em;
/* vertical | horizontal */
margin: 5% auto;
/* haut | horizontal | bas */
margin: 1em auto 2em;
/* haut | droit | bas | gauche */
margin: 2px 1em 0 auto;

Bordure#

La propriĂ©tĂ© CSS border est une propriĂ©tĂ© raccourcie qui permet de dĂ©finir les propriĂ©tĂ©s liĂ©es Ă  la bordure. border peut ĂȘtre utilisĂ©e pour dĂ©finir les valeurs de border-width, border-style et border-color.

Syntaxe

/* style */
border: solid;
/* largeur | style */
border: 2px dotted;
/* style | couleur */
border: outset #f33;
/* largeur | style | couleur */
border: medium dashed green;

Marge interne#

La propriĂ©tĂ© padding est une propriĂ©tĂ© raccourcie qui permet de dĂ©finir les diffĂ©rents Ă©carts de remplissage sur les quatre cĂŽtĂ©s d’un Ă©lĂ©ment (cf. les boĂźtes CSS). Elle synthĂ©tise padding-top, padding-right, padding-bottom, padding-left.

Syntaxe

/* On applique la mĂȘme valeur aux quatre cĂŽtĂ©s */
padding: 1em;
/* vertical | horizontal */
padding: 5% 10%;
/* haut | horizontal | bas */
padding: 1em 2em 2em;
/* haut | droit | bas | gauche */
padding: 5px 1em 0 2em;

Block et Inline#

Pou rappel, il existe deux grands types d’élĂ©ments :

  • Les Ă©lĂ©ments de type inline, ils s’inscrivent dans le flux du texte, leur taille est dĂ©terminĂ©e par leur contenu, les propriĂ©tĂ©s width et height sont sans effet sur eux. Exemples : a, em, strong, 


  • Les Ă©lĂ©ments de type block, ils sont prĂ©cĂ©dĂ©s et suivis d’une sĂ©paration verticale, ils prennent toute la largeur disponible, et uniquement la hauteur nĂ©cessaire mais on peut changer leur taille avec les propriĂ©tĂ©s width et height. Exemples : p, section, h1, 


Changer le mode d’affichage#

display : inline | block | inline-block | none;

Un élément inline-block se comporte comme un élément inline avec ses voisins (pas de séparation verticale), mais comme un élément block pour son contenu (taille ajustable).

Un élément none ne sera pas affiché. Ce mode est utile en conjonction avec la directive @media.

Coins arrondis#

Il est possible d’arrondir les coins du bord grĂące aux propriĂ©tĂ©s suivante :

border-top-left-radius (rayon)
border-top-right-radius (rayon)
border-bottom-right-radius (rayon)
border-bottom-left-radius (rayon)

ou par une propriété synthétique acceptant 1 à 4 valeurs :

border-radius (tl) (tr) (br) (bl)

Images de fond#

PlutĂŽt qu’une couleur de fond (background-color), on peut spĂ©cifier une image de fond pour certains Ă©lĂ©ments.

background-image : (url)
background-image: url("img/starnest.png")

ParamĂ©trage de l’image de fond:

  • background-position: (position gauche) (position haut), en pixel ou en anglais (left, right, center, top, bottom)

  • background-attachment:

    • scroll: l’image dĂ©file avec la page (par dĂ©faut)

    • fixed : l’image reste fixe quand la page dĂ©file

  • background-repeat:

    • repeat : l’image se rĂ©pĂšte en mosaĂŻque (par dĂ©faut)

    • repeat-x : l’image se rĂ©pĂšte horizontalement

Bonne pratique#

Rappel sur les URLs#

https://www.plantuml.com/plantuml/svg/ZP2zRW9138JxVGhhw46AH9CAKIGfq8c25t3spDs9lVN9FpGexnvJ892Wm9tbcM_asQYXc4y5N4fAch4GV2pNIKzZdL5mWb_CfrxOQvUvi809LeqJLNjGTNH4B_R5rLgS27x2bP9GDgnzCFV2nW4WM1nuGcE0IuAOkwGPp6RzNAqQMEpmJBKZsHRN8VqzafgM8yv1ISxaSXMF_M3VGbHVGBr76MtCowEy0zvnL13VGC6WgB9Bfbj6cEWvGNsUMKnVuZUnHht_

Le nom local a une structure hiérarchique (similaire à la structure des fichiers). Comme pour les fichiers, on peut spécifier une URL relativement à une autre.

<!-- url de base -->
src=""
<!-- la ressource kenobi dans le "répertoire" courant -->
src="kenobi"
<!-- le "répertoire" courant -->
src="."
<!-- le "répertoire" parent du "répertoire" courant
src=".."
<!-- le "répertoire" racine du serveur -->
src="/"

On peut ensuite combiner ces éléments en les séparant par un /.

Liens#

La balise <a> transforme son contenu en lien hypertexte. Elle doit contenir un attribut href, qui contient l’URL (absolue ou relative) vers lequel dirige ce lien.

Contenu de la balise a#

Rien n’empĂȘche bien sĂ»r la balise <a> de contenir d’autres balises.

Bienvenue sur
<a href="https://www.ugaritic.fr/">
    <strong>Ugaritic</strong>.info
    <img src="img/logo.png"  alt="Logo de Ugaritic.fr" />
</a>

Lien interne#

Il peut ĂȘtre utile de faire pointer un lien vers un fragment particulier d’un document plutĂŽt que vers son intĂ©gralitĂ©. Toute balise dĂ©limite une partie du document. GrĂące Ă  l’attribut id on peut cibler un Ă©lĂ©ment. L’URL du fragment est constituĂ©e en concatĂ©nant : l’URL du document, le caractĂšre #, et l’identifiant du fragment.

<a href="#sec1">Pointe vers le fragment #sec1 du document courant</a>
<a href="other.html#sec2">Pointe vers le fragment #sec2 d'un autre document</a>
<a href="https://fr.wikipedia.org/wiki/Amiens#Histoire">Pointe vers la section "Histoire" d'un article
Wikipedia</a>

<section id="sec1">
La section vers laquelle pointe le 1er lien ci-dessus.
...
</section>

Organisation des fichiers d’un site web#

Lorsque le nombre de fichiers constituant un site croĂźt, il devient important de penser leur organisation. Quelques conseils :

  • SĂ©parer les pages HTML des fichiers « utilitaires » (feuilles de styles, images) en plaçant ces derniers dans un sous-rĂ©pertoire,

  • Calquer la hiĂ©rarchie des rĂ©pertoires sur la structure logique du site.

.
|-- dark_crystal
|   |-- img
|   |   `-- logo.png
|   |-- index.html
|   |-- page
|   |   |-- about.html
|   |   `-- skesis.html
|   `-- style
|       `-- style.css
`-- jurassic_park
    |-- img
    |   `-- logo.png
    |-- index.html
    |-- page
    |   |-- about.html
    |   `-- dinosaurs.html
    `-- style
        `-- style.css

Formulaires et interactivité#

Les formulaires HTML sont un des vecteurs principaux d’interaction entre un utilisateur et un site web ou une application. Ils permettent Ă  l’utilisateur d’envoyer des donnĂ©es au site web. La plupart du temps, ces donnĂ©es sont envoyĂ©es Ă  des serveurs web.

Un formulaire HTML est composĂ© d’un ou plusieurs widgets. Ceux-ci peuvent ĂȘtre des zones de texte (sur une seule ligne ou plusieurs lignes), des boĂźtes Ă  sĂ©lection, des boutons, des cases Ă  cocher ou des boutons radio. La plupart du temps, ces items sont associĂ©s Ă  un libellĂ© qui dĂ©crit leur rĂŽle.

Champs de saisie#

Certaines pages HTML comportent des champs permettant Ă  l’utilisateur de saisir de l’information. La balise offrant cette possibilitĂ© est la balise <input>.

<input />

Types de champs#

HTML offre un certain nombre de types de champs, les plus utilisés étant:

<input type="text" />
<input type="password" />
<input type="checkbox" />
<input type="radio" />
<input type="file" />
<input type="number" />
<input type="range" />

HTML5 dĂ©finit d’autres types de champs (date, color, 
).

Libellé#

Les champs de saisie sont le plus souvent associés à un libellé. Ceci est représenté en ajoutant un libellé via une balise <label> avant la balise <input>.

<label>Nom : </label>
<input type="text" />

<label>Tarif réduit</label>
<input type=checkbox />

La convention consiste Ă :

  • nommer le <input> avec l’attribut id, et

  • lui lier le <label> avec l’attribut for.

<label for="name">Nom :</label>
<input id="name" type="text" />

<label for="firstname">Prénom</label>
<input id="firstname" type="text" />

Importance de lier le libellé au champ

L’association du libellĂ© au champ explicite la sĂ©mantique du document, ce qui permet notamment d’amĂ©liorer :

  • l’ergonomie: lorsqu’on clique sur un libellĂ©, c’est le champ qui prend le focus ;

  • l’accessibilitĂ©: l’adaptation du formulaire (par exemple pour un lecteur d’écran) peut se faire de maniĂšre plus pertinente.

Alternative au libellé#

Pour les champs de type text ou password, une alternative au libellĂ© consiste Ă  utiliser l’attribut placeholder:

<input placeholder="identifiant" />
<input type="password" placeholder="mot de passe" />

Liste d’options#

Un autre type de champ permet de sélectionner (ou ou plusieurs) éléments dans une liste.

<select>
    <option>Luke</option>
    <option>Leia</option>
    <option>Han</option>
    <option>Ben</option>
</select>

L’attribut multiple autorise la sĂ©lection de plusieurs Ă©lĂ©ments.

Zone de texte#

Le champ input ne permet pas la saisie de texte sur plusieurs lignes. Pour cela, on utilise le champ textarea.

<textarea placeholder="type your message">Hello world</textarea>

Contrairement Ă  input, textarea attend une balise fermante (car le texte contenu dans le champ est le contenu de la balise).

Boutons#

La balise button permet de créer des boutons.

<button>Ok</button>
<button><em>Annuler</em></button>

Formulaire en HTML#

Les champs sont gĂ©nĂ©ralement regroupĂ©s dans une balise form, qu’on appelle un formulaire. Cette balise requiert l’attribut action, qui contient l’URL de la ressource qui traitera les donnĂ©es du formulaire.

<form action="https://ingen.ugaritic.fr/form/process/">

</form>

Champs d’un formulaire#

Pour pouvoir ĂȘtre traitĂ©s, les champs d’un formulaire doivent tous ĂȘtre identifiĂ©s par un nom, portĂ© par l’attribut name:

<form action="https://ingen.ugaritic.fr/form/process/">
    <input name="name" placeholder="identifiant">
    <input name="tel"  placeholder="n de tel">
    <button>Je m'inscris</button>
</form>

Cases Ă  cocher et boutons radio#

Les champs ayant le type checkbox ou radio vont souvent par groupe. Tous les membres d’un groupe ont le mĂȘme nom, et se diffĂ©rencient par une valeur portĂ©e par un attribut value.

Pour les cases Ă  cocher, le nom se voit affecter l’ensemble des valeurs sĂ©lectionnĂ©es. Pour les boutons radio, une seule valeur peut-ĂȘtre affectĂ©e (l’activation d’un bouton du groupe dĂ©sactive automatiquement les autres).

Exemple de boutons radio#
<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label>

<input type="radio" id="contactChoice2"
name="contact" value="telephone">
<label for="contactChoice2">Téléphone</label>

<input type="radio" id="contactChoice3"
name="contact" value="courrier">
<label for="contactChoice3">Courrier</label>
Exemple d’une case à coche#
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Souhaitez-vous vous abonner Ă  la newsletter ?</label>

Boutons et formulaires#

Les boutons ont trois fonctionnalitĂ©s possibles, portĂ©es par l’attribut type :

  • submit envoie les donnĂ©es du formulaire (dĂ©faut)

  • reset remet tous les champs du formulaire Ă  leur valeur initiale

  • button aucun comportement par dĂ©faut

Les boutons du dernier type sont utiles en conjonction avec des scripts (hors-programme pour cette année).

<button type="submit">Valider</button>
<button type="reset">Remise à zéro</button>

MĂ©thode HTTP#

La balise form accepte un attribut method, qui peut prendre deux valeurs :

  • GET les donnĂ©es sont passĂ©e via l’URL (dĂ©faut),

  • POST les donnĂ©es sont passĂ©es dans la requĂȘte HTTP

La mĂ©thode GET doit ĂȘtre employĂ©e lorsque les donnĂ©es ne sont pas trop volumineuses, et surtout; lorsque le traitement des donnĂ©es n’a pas d’effet de bord. Dans tous les autres cas, la mĂ©thode POST doit ĂȘtre utilisĂ©e.

<form action="https://ingen.ugaritic.fr/form/process/" method="POST">
</form>

Envoi de fichier#

L’emploi de <input type="file" /> pour envoyer le contenu d’un fichier nĂ©cessite deux prĂ©cautions au niveau du form englobant :

  • method="post"}

  • enctype="multipart/form-data"}

sans quoi c’est le nom du fichier, et non son contenu, qui sera envoyĂ© au serveur.

Un peu de style#

Note

Nous avons découvert comment créer le fonds de nos documents, il est donc temps de les mettre en forme.

Un petit jeu pour commencer ?

CSS Diner Uniquement jusqu’au niveau 14.

À faire

  • Reprenez l’exemple de rĂšgle du TP2 et attachez le Ă  une nouvelle feuille de style.

    • Sans toucher au code HTML, ajoutez Ă  votre feuille de style les rĂšgles qui permettront d’obtenir le rĂ©sultat ci-dessous.

À faire

  • Reprenez le fichier prĂ©cĂ©dent mettons en forme notre page d’actualitĂ©s.

    • CrĂ©er un fichier style.css

    • IntĂ©grer le fichier style.css dans l’entĂȘte du fichier style.html

Astuce

<link rel="stylesheet" type="text/css" href="style.css" />
nb: un commentaire en CSS#
/* COMMENTAIRE */
  • Ajoutez la rĂšgle suivante:
    p{
    color: red;
}

    • Quel est le type de sĂ©lecteur CSS utilisĂ© ?

    • Quels Ă©lĂ©ments sont ciblĂ©s par ce sĂ©lecteur ?

    • Quelle est la mise en forme appliquĂ©e par ce code CSS ?

    • Pourquoi est-ce une mauvaise idĂ©e d’utiliser les noms des couleurs ?

  • DĂ©couvrons dĂ©sormais les propriĂ©tĂ©s margin/padding et border

    Indication

    Pensez Ă  ajouter les codes au fur et Ă  mesure dans votre fichier css. Si le mĂȘme sĂ©lecteur CSS revient plusieurs fois dans l’énoncĂ© c’est qu’il s’agit d’une maj de notre style pour ledit sĂ©lecteur et non pas d’un ajout dans le fichier.

  • Pour cette exemple pensez Ă  avoir au moins deux paragraphes <p> dans votre fichier html.
    html, body{
    background-color: #95a5a6;
}

    • Quelle est la mise en forme appliquĂ©e par ce code CSS ?

    p{
    background-color: #2980b9;
    border: 1px solid #8e44ad;
}

    • Quelle est la mise en forme appliquĂ©e par ce code CSS ?

    p{
    background-color: #2980b9;
    border: 1px solid #8e44ad;
    padding: 12px;
}

    • Que constatez vous ?

    • Comment se comporte la propriĂ©tĂ© padding ?

    p{
    background-color: #2980b9;
    border: 1px solid #8e44ad;
    padding: 12px;
    margin: 20px;
}

    • Que constatez vous ?

    • Comment se comporte la propriĂ©tĂ© margin ?

    *{
    font-size: 14px;
}

    • Quels sont les Ă©lĂ©ments ciblĂ©s par ce sĂ©lecteur ?

    • Quelle est son utilitĂ© ?

    h1{
    color: red;
    background-color: orange;
    font-size: 3.4em;
}
a{
    color: green;
    text-decoration: none;
}

    • Quels sont les Ă©lĂ©ments ciblĂ©s par ces sĂ©lecteurs ?

    • Que signifie em ? Quelle est son utilitĂ© ?

    a:hover{
    color: red;
    text-decoration: underline;
}

    • Quels Ă©lĂ©ments et Ă  quel moment sont-ils ciblĂ©s ?

    • Quelle est l’utilitĂ© de la propriĂ©tĂ© text-decoration ?

    <h1 id="main-title">HELLO WORLD</h1>

    #main-title{
    color: blue;
}

    • Quelle est l’utilitĂ© des ID HTML ?

    • Quel Ă©lĂ©ment est ciblĂ© par ce sĂ©lecteur ?

    <p class="color-red">HELLO WORLD</p>
<p class="color-red font-weight">HELLO WORLD!</p>

    .font-bold{
    font-weight: bold;
}
.color-red{
    color: red;
}

    • Quelle est l’utilitĂ© des classes CSS ?

    • Quels sont les Ă©lĂ©ments ciblĂ©s par chacun de ces sĂ©lecteurs ?

    ul.menu{
    text-align: center;
    list-style: none outside none;
}
ul.menu li{
    display: inline-block;
}
ul.menu li a{
}

    • Quelle est l’utilitĂ© de ces sĂ©lecteurs ?

    • Quels Ă©lĂ©ments sont ciblĂ©s par celui-ci ?

    • Quelle est l’utilitĂ© de la propriĂ©tĂ© list-style ? De la propriĂ©tĂ© display ? Et text-align ?

    Dans votre fichier HTML complĂ©tez afin d’obtenir ceci#
    <main>
    <div class="container">
        <div class="col-70">
            <div>..</div>
        </div>
        <div class="col-30">
            <div>..</div>
        </div>
    </div>
</main>
    style.css#
    .container{
}
.col{
    float: left;
}
.col-70{
    width: 70%;
}
.col-30{
    width: 30%;
}

    • Quel est l’intĂ©rĂȘt de la propriĂ©tĂ© float ?

    • Ajouter une couleur de fond aux colonnes col-70 et col-30

    • Que constatez-vous ?

    • Quel est le souci liĂ© au footer ?

    .container:after{
    clear: both;
    display: block;
    content: "";
}

    • Quelle est l’utilitĂ© du sĂ©lecteur :after

    • Quelle est l’utilitĂ© de ce code css ?

Mise en forme d’un document#

Note

Cet exercice a pour but de rĂ©capituler l’ensemble des premiers tps vus ensemble. Nous allons ainsi revoir HTML et CSS.

Avant de poursuivre notre dĂ©couverte du monde du web, il convient de s’attarder quelque peu sur la structuration de nos projets.

CrĂ©ons ensemble une structure squelette pour l’ensemble de nos projets web:

  1. index.html , ce fichier contient comme vous le savez dĂ©jĂ  le contenu de la page d’accueil de notre site,

  2. un dossier imgs/ , ce dossier contiendra l’ensemble des images utilisĂ©es sur notre site,

  3. un dossier styles/ , ce dossier contiendra le code CSS utilisé pour la mise en forme du contenu.

À faire

  • Nous allons crĂ©er plusieurs Ă©lĂ©ments HTML au sein de notre document:

  • Est-il utile de rappeler qu’il faut toujours commencer par le squelette HTML5 ?

  • CrĂ©er une section contenant:

    • Un titre de niveau 1 avec le texte suivant: Jurassic World Evolution

    • Une image avec cette ressource

    • Un titre de niveau 2 avec le texte suivant: Imaginez votre propre Jurassic World

    • Un titre de niveau 3 avec le texte suivant: CaractĂ©ristiques

    • Une liste non ordonnĂ©e contenant les Ă©lĂ©ments suivants: Vos dinosaures, Vos choix, Vos rĂȘves.

    • CrĂ©er trois titre de niveau 3 et 3 paragraphes qui les suivent avec les contenus respectifs suivant:

      • Ramenez les dinosaures Ă  la vie CrĂ©ez par bio-ingĂ©nierie des dinosaures qui pensent, ont des Ă©motions et interagissent intelligemment avec le monde que vous construisez.

      • Choisissez votre propre voie Travaillez dans l’intĂ©rĂȘt de la science, des loisirs ou de la sĂ©curitĂ© dans un univers incertain oĂč la vie trouve toujours son chemin.

      • Une nouvelle lĂ©gende Jurassic Plongez dans un tout nouveau scĂ©nario qui place au bout de vos doigts des personnages emblĂ©matiques et des dĂ©cennies de tradition Jurassic.

  • Enfin crĂ©er un lien qui renvoie vers le site officiel du jeu avec en intitulĂ© de lien En savoir plus

  • Mettez en forme votre document HTML via CSS pour obtenir un rĂ©sultat Ă©quivalent:

    jwe example

    Voici les codes couleurs utilisés au sein de la feuille de style:

    #001d37
#0b2849
#a8faff
#00d6ea