Architecture et langages Web (NFA040)

CSS

Olivier Pons
(pons@cnam.fr)

2022

CSS

\(\Longrightarrow\) Cascading Style Sheets .

\(\Longrightarrow\) Ou feuilles de style en cascade

  1. Feuille de style:
    Ensemble de règles définissant l'affichage des elements du document

  2. En cascade:
    Liée a la façon dont les réglés s'appliquent. Notion d'heritage et de propagation dans l'arbre de balise

C'est un langage de présentation !

On rappelle

Webographie

Structure générale d'une feuille de style

Sélecteur {
   propriété_1 : valeur_1 ;
   ...
   propriété_2 : valeur_2 ;
}

Un exemple

<body>
  <h1>Un titre de niveau 1</h1>
  
  <h2>titre de niveau 2</h2>
  <p> 
    Lorem ipsum dolor sit amet. Eum
    eaque facere non nesciunt commodi
    vel debitis <em>voluptate</em> 
    ut autem aspernatur 
    aut maiores exercitationem 
    eum molestiae suscipit.
  </p>  
  <p>
  Excepteur sint obcaecat 
  cupiditat non proident, sunt 
  in culpa qui officia deserunt mollit 
  anim id est laborum. 
  </p>
  
  <h3>titre de niveau 3</h3>

</body>
body {              /* tout le contenu (body) sera sauf    */
  color:blue ;      /* precision contraire écrit en blue   */
  margin-left: 1cm; /* on laisse une marge à gauche de 1cm */
}

h1 {color:red; font-family:sans-serif} /* h1 ecrit en rouge
                                          dans une fonte 
                                          sans serif */
h2, h3 {
   color: #F2A456;       /* h2 et h3 écrits dans couleur (orangé) */  
   text-align: center;   /* codé en hexadécimal . Et centré */
}

p em {
   background-color: rgb(20,250,183); /* les em à l’intérieur */                                 /* d'un paragraphe sont sur fond
                                      turquoise codé en RGB */ 
}

p+p {color:green}        /* les paragraphes qui suivent *
                         /*  un  paragraphe sont en vert */

Un titre de niveau 1

titre de niveau 2

Lorem ipsum dolor sit amet. Eum eaque facere non nesciunt commodi vel debitis voluptate ut autem aspernatur aut maiores exercitationem eum molestiae suscipit.

Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

titre de niveau 3

ouvrir dans JSbin

Premiere constatation :

Il y a beaucoup de propriétés et encore plus de valeurs.

On ne va pas les étudier toutes !

on va:

Lien HTML / CSS

3 méthodes pour associer du code CSS à du code html:

  1. Des feuilles de style externes dans un fichier CSS
  2. Des styles internes au HTML
  3. Du css en ligne sur les balises HTML

On privilégiera le 1 mais on peut mixer les 3 méthodes.

Les feuilles de style externes

La balise <link> à a-minima 2 attributs: rel et href, le type=text/css est implicite. On peut ajouter d'autre attributs

on peut définir plusieurs feuilles, dont certaines ne sont utilisées qu'avec des afficheurs spécifiques :

```html
<link rel="stylesheet" href="css/presentation.css"/>   <!-- general pour tous-->
<link rel="stylesheet" href="css/presentation-screen.css" media="screen"/> <!-- en plus  pour l'écran -->
<link rel="stylesheet" href="css/presentation-print.css" media="print"/>.  <!-- en plus  pour  l'affichage -->
```

On séparase bien le contenu (fichier html) de la forme (fichier css)

Le style commun a plusieurs page donc les modifications sont plus faciles

C'est celui qui est a privilégier !

Les styles internes

...
<style>
 p {color:red}
 ...
 </style>
 ...

On ne sépare plus bien le contenu (fichier html) de la forme (fichier css)

Le style n'est pas partagé entre plusieurs pages \(\Longrightarrow\) pas d'uniformité des pages et plus coûteux à modifier

A éviter sauf sur un page isolée, pour de petit exemples ou quand une page a un rendu spécifique.

Le CSS inline.

Il n'y a pas de sélecteur et donc pas de règles css.

Le style (suite de couple propriété:valeur;) est associé aux elements directement dans les balises HTML à l'aide d'un attibut style

<div style="background-color:yellow;color:red">
  <h2 style="text-align:center">un titre centré<h2>
  <h2 style="color:blue">un titre bleu</h2>
  <p>le rest est en rouge...sur fond jaune </p>
</div>

On ne sépare plus du tout le contenu (fichier html) de la forme

Le style n'est pas partagé entre plusieurs pages \(\Longrightarrow\) pas d'uniformité des pages et très coûteux à modifier
(il faut parcourir tout le fichier html)

A éviter sauf pour un tres petit bout de code html qui ferait exception à une règle ou pour forcer un rendu graphique (par exemple dans google document ).

Mais aussi, pratique pour monter des propriétés css dans une presentation ! (on l'utilisera donc dans les exemple interne aux slides)

Les sélecteurs

Définissent à quels éléments un style est appliqué.

A noter que certaines propriétés comme les fontes ou la couleur sont héritées par les éléments descendant sans avoir besoin de les sélectionner.

On peut distinguer plusieurs catégories de sélecteur:

Les sélecteurs simples (1)

Par nom de balise

h2 {color:red}      
<h1>titre </h1>
<h2>sous-titre 1</h2>
<p> 
... bla ... bla
</p>
<h2>sous-titre 2</h2>

titre

sous-titre 1

... bla ... bla

sous-titre 2

Les sélecteurs simples (2)

Par classe class

La classe désigne un ensemble d'élément (pas forcement de même type) qui partage une caractéristique (exprimé par le nom de la classe).

Un élément peut avoir plusieurs classes.

Le secteur de classe peut

/* un . devant le nom de la classe */
.anglais {color:green} 
.resume {background-color:pink}
/* un sous titre h2 de classe anglais */
h2.anglais {background-color:blue} 
<h1>titre </h1>
<h2 class="anglais">sub-title 1</h2>
<p> 
... bla ... bla
</p>
<p class="anglais resume"> 
... blah ... blah
</p>

<h2>sous-titre 2</h2>

titre

sub-title 1

... bla ... bla

... blah ... blah

sous-titre 2

Les sélecteurs simples (3)

Par identifiant id

L'identifiant désigne un unique élément dans le document

/* un # devant le nom de l'id */
 #poker {color:orange} 
<h1> jeux de carte cartes</h1>
<div  id="belote">
  <h2>La belote</h2>
  <h3>Règles</h2>
  <p>Les cartes suivent un ordre ... </p>
  ...
</div>
<div  id="poker">
  <h2>Le Poker</h2>
  <h3>Règles</h2>
  <p>Le but du jeu est de gagner  ... </p>
  ...
</div>
<div  id="rami">
  <h2>Le Rami</h2>
  <h3>Règles</h2>
  <p>Le joueur dont c'est le tour ... </p>
  ...

jeux de carte cartes

La belote

Règles

Les cartes suivent un ordre ...

...

Le Poker

Règles

Le but du jeu est de gagner ...

...

Le Rami

Règles

Le joueur dont c'est le tour ...

...

Les sélecteurs combinés

Il faut faut comprendre la structure du document.

La structure peut s'exprimer par un arbre (la racine en l'air !) arbre
html est la racine de l'arbre.
head et body sont des enfants de html
h1, les pet les h2 sont des enfants de body (et des descendants de html) . Le première h2 est un frère droit immédiat (adjacent sibling) ou voisin direct du h1 Les h2et tous les psont des frères du h1
...

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Un titre</h1>
    <h2>Un sous titre</h2>
    <p>un premier paragraphe...</p>
    <p class="important">
      un autre important
    </p>
    <p>Un autre avec des 
      <span class="important">contenus</span> 
      importants et d'autre 
      <em class="indispensable">
        indispensables
      </em>
    </p>
    <h2>Un autre sous titre</h2>
    
</body>
</html>

Les sélecteurs combinés

Comme css ne permet pas de faire reference aux noeuds texte on peut les omet dans l'arbre.

Attention:

Les ChildNodes du Dom en javascript feront reference à tout les noeuds (y compris texte), dans notre exemple le 3\(^{e}\) paragraphe aurait donc 4 fils et le emserait le 4\(^{e}\) Pour CSS on ne considère pas les noeuds texte et em sera donc le second enfant de p.

Certaines propriétés comme les fontes ou la couleur sont héritées par les éléments descendant. Par exemple si on associe la couleur rouge au body, tout ses descendants dont la couleur n'est pas redéfinie héritent de cette propriété et seront donc en rouge.

Les sélecteurs combinés

La forme générale est la suivante:

Selecteur_1 combinateur Selecteur_2 { propeiete: valeur;...}

Selecteur_1 et Selecteur_2 peuvent être eux même combinés.

Il y a 4 combinateurs

Combinateur descendant

C'est un espace entre 2 sélecteurs.

Selecteur_1 Selecteur_2 selection les éléments correspondant au Selecteur_2 à l’intérieur (à n'importe quel profondeur) d'un élément correspondant au Selecteur_1.

En terme d'arbre on sélectionne d'abord les noeuds (éléments) correspondant au selecteur_1 puis sur les branches qui en sont issues on cherche ceux qui correspondent au Selecteur_2

les deux sélecteurs peuvent être de n'importe quel type (selecteurs de type, de classe, d'id, composés....)

<style>
p em {color:red}
</style>
...
<p>
    il <span class="temps">fait <em>beau</em></span>
</p>
<div>
    il  <span class="temps">fait <em>soleil</em></span>
<div>

il fait beau

il fait soleil

arbre

Combinateur enfant

Selecteur_1>Selecteur_2 selection les éléments correspondant au Selecteur_2 au premier niveau, à l’intérieur d'un élément correspondant au Selecteur_1.

En terme d'arbre on sélectionne d'abord les noeuds (éléments) correspondant au selecteur_1 puis sur les branches qui en sont issues on cherche au premier niveau de descendance ceux qui correspondent au Selecteur_2.

<style>
p>em {color:red}
</style>
...
<p>
    il <span class="temps">fait <em>beau</em></span>
</p>
<p>
    il  fait <em>soleil</em>
</p>

il fait beau

il fait soleil

arbre

Combinateur frère adjacents

Selecteur_1+Selecteur_2 sélectionne un élément qui correspond a selecteur2 et partage le même parent qu’un correspondant a Selecteur_1 et qui se situe juste après ce dernier (immédiatement à droite).

En terme d'arbre on sélectionne d'abord les noeuds (éléments) correspondant au selecteur_1 puis pour chacun on remonte sur le noeud parent et on redescend sur l'enfant suivant et on regarde s'il vérifie Selecteur_2.


<style>
.troisieme+li {color:red}
</style>
...
<ol>
<li>un</li>
<li>deux</li>
<li class="troisieme">trois</li>
<li>quatre</li>
<li>cinq</li>
</ol>
  1. un
  2. deux
  3. trois
  4. quatre
  5. cinq

arbre

Combinateur général de frères (droits)

Selecteur_1~Selecteur_2 sélectionne un élément qui correspond a selecteur2 et partage le même parent qu’un correspondant a Selecteur_1 et qui se situe à droite de ce dernier.


<style>
.troisieme~li {color:red}
</style>
...
<ol>
<li>un</li>
<li>deux</li>
<li class="troisieme">trois</li>
<li>quatre</li>
<li>cinq</li>
</ol>
  1. un
  2. deux
  3. trois
  4. quatre
  5. cinq

arbre

Pour résumer, n peut sélectionner :

un type de balise

h2 {text-align: center;}

une classe

.important {color: red;}

un id

#entete {background-color: blue;}

une balise d'une certaine classe

p.important {color: blue;}

un sélecteur descendant d'un autre sélecteur

Séparation par un espace

/* tous les `em` dans un paragraphe seront en gris */
p em {color:gray;}
/* Tous les éléments de classe important à
l'intérieur d'un paragraphe seront verts. */
p .important {color:green;}

On peut sélectionner ...

 /* Tous les em descendants d'un élément de
classe `resume` seront jaunes */
.resume em {color:yellow;}

un sélecteur enfant d'un autre sélecteur

.resume>em {color:yellow;}

un sélecteur frère droit d'un autre sélecteur

h5+p {color:pink;}`

un sélecteur frère (non forcément immédiat) d'un autre

h5 ~ p {color:pink;}

(le signe ~ est un "tilde")

Sélecteur d'attributs général

Pour sélectionner un élément sur la valeur d'un attribut quelconque :

[attribut=valeur]

Exemple:

*[class="important"] {color :red;} /* synonyme de .important */
p[class="remarque"] {color :red;}  /*  synonyme de p.important */
*[lang="fr"] {color :red;} /* tout les éléments dont l'attribut lang vaut `fr` */
*[lang] {background-color:pink} /* tout les éléments qui ont un attribut lang */

Remarque

.toto et *[class="toto"] sont similaires mais...

<p class="titi toto"> un paragraphe;...</p>

est reconnu par :

  .toto {color: red;} /* classe toto */
  .titi {color: red;} /* classe titi */
  .titi.toto {color: red;} /* classe titi et toto */
  .toto.titi {color: red;} /* classe toto et titi */
  *[class="titi toto"] {color: red;}  /* classe titi et toto */

mais pas par :

  *[class="toto"] {color:red;}

Pseudo-classes

Sélecteurs additionnels, ajoutant typiquement des informations d'état ou de position.

S'écrivent ":" suivi de la pseudo-classe

vous pouvez consulter la liste complète

Exemples

<style>
a#testVisited:visited {color:orange;}
</style> 
...
<a id="testVisited" href="http://example.org">cliquez,  puis revenez... </a>
...

cliquez, puis revenez... 

<style>
#testHover:hover {background-color: lightgreen;}
</style> 
...
<p>Passez la souris sur <span id="testHover">moi</span>....</p>

Passer la souris sur moi....

<style>
p:first-child {color: red;}
</style>
...
<div> 
 <p>premier paragraphe</p>
 <p>second paragraphe </p>
</div>

premier paragraphe

second paragraphe

Plus sur la pseudo-classe nth-child : sélectionner un élément sur n

Typiquement, permet d'alterner des présentations différentes dans des éléments successifs (tables, listes ...)

Exemple :

   li:nth-child(even) {background-color: red;}
   li:nth-child(odd) {background-color: white;}
   li:first-child {background-color: blue;}
:::

:::

Remarque : on ne compte que les éléments.

Le texte isolé ne compte pas comme des enfants (contrairement au DOM javascript qui prend en compte les noeuds texte)

Exemple

<style>
#nthC span:nth-child(3n+2){color: red;}
</style>
<div id="nthC">
  <span>un</span>
  <span>deux</span>
  <span>trois</span>
  <span>quatre </span>
  <span>cinq</span>
  <span>six</span>
</div>

un deux trois quatre cinq six

Les pseudo éléments

Utilisés pour donner un style à un contenu n’apparaissant pas dans le code source du document.

La forme générale est:

sélecteur::pseudoElt  { déclaration; ... }

voir la liste complète

Exemple

<style>
  p::first-letter {color:red}
</style>
...
<p>
  Un beau paragraphe
</p>
<p>
  Un autre
</p>
...

Un beau paragraphe

Un autre 

<style>
div::before{
  content:"\1F60B" /* emoji en utf-8 */
}
</style>
...
<div>Exercice</div>
Exercice

div, span et feuilles de style

Les balises génériques div (type block) et span (inline) n'ont pas de sémantique intrinsèque. C'est les attributs class (et éventuellement id) qu'on leur adjoint qui leur donnent une sémantique.

On peut mettre en evidence cette sémantique graphiquement.

Un exemple plus consequent (avec du css un peu plus avancé...)

.exercice  {
  /* a chaque exercice exo augmentera de 1 */
  counter-increment: exo;
}

/* la consigne est en gras */
.consigne{font-weight:bold}

.exercice::before{
  /* avant l’exercice on affiche le numéro (exo), 
  une etoile (utf-8 2605) et Exercice */
  content: counter(exo)"\2605 Exercice" ;
  font-size:200%
}
<div class="exercice"> 
  <div class="consigne">
     Écris pour chaque mots la saison correspondante:
      <em>hiver</em>,<em>automne</em>,<em>printenps</em>,<em>été</em>.
  </div>
  <div class="énoncé">
    <ul>
      <li>congère</li>
      <li>verglas</li>
      <li>estival</li>
      <li>printanier</li>
    </ul>
  </div>
</div>
<div class="exercice">
  ...
</div>

Écris pour chaque mots la saison correspondante: hiver,automne,printenps,été.

  • congère
  • verglas
  • estival
  • printanier
...

Couleurs

Plusieurs façons de les désigner :

Exemple:

les 3 règles ci dessous sont équivalentes et produisent

un paragraphe 

p {color : rgb(100%,80%,60%)}
p {color : rgb(255,204,153)} /* puisque 255 × 0,8 = 204 et 255 × 0,6 = 153*/
p {color : #FFCC99} /* puisqu'en hexadecimal  les valeur décimales `255`,`204`
                    et `153` s'écrivent respectivement `FF`, `CC` et `99` */

On peut ajouter un \(4^{em}\) paramètre (% ou nombre en 0 et 1) à rgb ou hsl qui ajoute un canal alpha pour l'opacité. on alors rgba et hsla .

Exemple


<div style="background-color:rgb(250,0,0)">
<h2 style="background-color:rgb(0,255,0)"> sans a</h2>
<h2 style="background-color:rgb(0,255,0,60)"> avec a (superpose rouge et vert ==> marron </h2>

sans a

avec a (superpose rouge et vert ==> marron

Propriétés de couleur

color : couleur d'écriture

background-color: couleur de fond

p {color: red; background-color: yellow;}

texte rouge sur fond jaune.

On pourra aussi fixer la couleur des bordure s

Polices de caractères

Polices de caractères

Problèmes divers, en particulier de droits.

Le navigateur client n'a pas forcément la police demandée

Font-family

p {font-family: helvetica, verdana,sans-serif;}
p {font-family: Georgia, "Times New Roman", Times, serif;}
  1. serif
  2. sans-serif
  3. monospace

Normalement, la dernière famille est l'une des trois familles de base.

Police personnalisée et téléchargement de polices

@Fontface

Permet de définir ses propres familles, à partir de polices en locale ou qui seront téléchargées.

 
@font-face {
  font-family: CharisSILW-regular;
  src: url(../fonts/CharisSIL/CharisSIL.woff);
}
@font-face {
  font-family: CharisSILW;
  src: url(../fonts/CharisSIL/CharisSIL.woff);
}
/* la même - Italic in .woff format */
@font-face {
  font-family: CharisSILW; /* meme nom */
  font-style: italic;      /* mais condition supplémentaire */
  src: url(../fonts/CharisSIL/CharisSIL-Italic.woff);
}
@font-face {
  font-family: LearningCurve;
  src: url(../fonts/Learning_Curve/LearningCurve.ttf);
}
@font-face {
  font-family: Manuscript;
  src: url(../fonts/Manuscript.ttf);
}
<div >
<p>paragraphe font de base</p>
<p style="font-family: CharisSILW;">
  paragraphe font CharisSILW normale</p>
<p style="font-family: CharisSILW;font-style: italic;">
  paragraphe font CharisSILW en vrai italic</p>
<p style="font-family: CharisSILW-regular;font-style: italic;">
  paragraphe font CharisSILW en faux italic</p>
<p style="font-family: LearningCurve;">
  paragraphe font LearningCurve normale</p>
<p style="font-family: LearningCurve;font-style: italic;">
  paragraphe font LearningCurve en "faux" italic</p>
<p style="font-family: Manuscript;">
  paragraphe font Manuscript normale</p>
<p style="font-family: Manuscript;font-weight: bold;">
  paragraphe font Manuscript en "faux" bold</p>

</div>

paragraphe font de base

paragraphe font CharisSILW normale

paragraphe font CharisSILW en vrai italic

paragraphe font CharisSILW en faux italic

paragraphe font LearningCurve normale

paragraphe font LearningCurve en "faux" italic

paragraphe font Manuscript normale

paragraphe font Manuscript en "faux" bold

Les formats supportés por les fontes sont TrueType TTF OpenType OTF , Web Open Font Format WOFF et WOOF2 ou encore le sous ensemble OpenType-SVG.

Vous devez d’abord définir un nom pour la police (par exemple maPolice),
puis pointez sur le fichier de police.

Pour gérer l'italic, le gras... soit vous avez les font italic, bold... et il faut garder le meme nom mais rajouter les propriété (font-style, font-weight).
Sinon le navigateur génère lui meme l'italic ou le gras en transformant la fonte (faux style).

Les caractéristiques des polices et des textes

font-style
valeur : italic, oblique ou normal
font-weight
valeur : bold, bolder, lighter, normal
font-size
  • valeur numérique absolue: 12pt, 10mm, 1cm, 10px,...
  • taille prédéfinie : xx-small, x-small, small, medium, large, x-large, xx-large
  • taille relative au parent : smaller, larger (agrandit ou rétrécit la police par rapport à celle du parent)
  • valeur relative numérique : 150%, par rapport à la taille dans le parent.
  • taille relative à la police actuelle: 1em, 1ex (largeur d'un "m", hauteur d'un "x")
text-decoration
valeur underline, overline, line-through (barré) none
text-align
alignement horizontal du texte : left, right, center, justify
text-indent
indentation du premier paragraphe (décalage du début du texte)

Il y a plein d'unite possible mais le W3C conseille de privilégier em et px. on pourra lire.

Les boîtes

L'affichage est composé de boîtes contenant le texte. Chaque boîte est composée de plusieurs parties : le contenu (le texte lui-même), l'espace intérieur (padding), la bordure (border) et la marge (margin).

(margin) (padding) (border)

le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu

le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu le contenu

 

propriétés des boîtes : les dimensions

Normalement, une boîte de type « block » (h1..h6, p, div ...) occupe tout l'espace horizontal disponible, et sa hauteur est adaptée au texte à afficher.

démonstration

Inversement, des éléments de type « inline » (em, strong, span ...) n'occupent que l'espace strictement nécessaire, pas forcément rectangulaire. (démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, démonstration, )

Il est possible de fixer les dimensions des boîtes.

Propriétés des boîtes : les dimensions

height, width min-height, max-height, min-width, max-width

: valeur : % ou px, em, cm... Attention: width et height sont les dimensions internes des boîtes (hors padding, bordure, margin).

css
...
#contact {height:2cm; width:50%; background-color:red"}
...
html
...
<div id="contact" >Contact</div>
...
réultat
Contact
margin
espace minimal entre la bordure de l'élément et les autres éléments.
la marge est transparente ; elle ne prend donc pas la couleur de fond de l'élément.
Il faut y penser véritablement comme à un espace.
padding
espace entre le texte et la bordure de l'élément

on à aussi, les propriétés spécifiques à chaque coté margin-top, margin-right, margin-left, margin-bottom, padding-top,...padding-left

Exemple de boites imbriquées

OU l'on vérifie que la dimension en % est par rapport à la boite englobante:

démo démo 
<div style="width: 20em; background-color: red; padding: 1px;">
  <div style="width: 50%; background-color: yellow; margin: 1ex;">
    démo démo
  </div>
</div>

(ouvrir dans jsbin)

démo démo

Propriétés des boîtes : les bordures (border)

Trois informations: largeur, style et couleur.

p {border:4px dotted green;} /* l’épaisseur et la couleur sont optionnelles */

Le style peut être (entre autres):

CSS3 introduit border-radius et border-image pour des bordures plus complexes.

<div style="border:  4px dashed;border-radius: 20px;">
dashed avec rayon 20px
</div>
<div 
style="border: 4px solid;border-image: url(https://www.w3schools.com/css/border.png) 20% round;">
image-boder
</div>

On a aussi border-top, border-bottom, border-left, border-right

Bordures et tableaux

Les bordures s'utilisent assez naturellement avec les tableaux.

En règle générale, on va placer une bordure sur les cases.

th,td: {border: solid 1pt black;}
a b
a b

Pour « coller les cases », on utilise border-collapse (valeurs : separate ou collapse)

Exemple

table {border-collapse: collapse;}
th,td: {border: solid 1pt black;}
a b
a b

Propriétés de listes

list-style-type : apparence des signes d'une liste.

Propriété de la liste (ul ou ol) ou de l'item (li).

Quelque valeur possibles:

decimal
1.,2.,3.,4. etc...
lower-roman
i.,ii.,iii.,iv. etc.
upper-roman
I.,II.,III.,IV. etc...
lower-alpha
a.,b.,c.,d. etc.
upper-alpha
A.,B.,C.,D. etc...
disc
  • rond plein comme puce
circle
  • puce ronde
square
  • puce rectangulaire
none
pas de puce, pas de numérotation

list-style-image permet de choisir une image comme puce

<ul>
  <li style="list-style-image:url(lion.svg)">image</li>
</ul>

Règles de résolutions de conflits

Supposons que nous ayons :

h1 {color: blue; font-size: large;}
.titre {color:red;}

Comment se présente donc

    <h1 class="titre">un titre</h1>

un titre

Règles de résolutions de conflits

Calcul de la spécificité

On construit un triplet d'entiers :

  1. n1= le nombre d'ids d'attributs dans le sélecteur
  2. n2= le nombre d'attributs et de classes dans le sélecteur
  3. n3= le nombre de noms d'éléments et de pseudo-éléments(h1, h2, em, p, :first-line ...) dans le sélecteur.

Règles de résolutions de conflits

On compare les triplets par ordre lexicographique et le plus grand est le plus spécifique.

(a1,b1,c1) > (a2,b2,c2) si :

Exemples :

En cas d'égalité, la dernière règle spécifiée l'emporte.