TeX412

(Xe)LaTeX & HTML

Cours 8

adresse web de cette présentation:

http://git.io/hmsJ

et du cours: ktzanev.github.io/tex412lille1

CSS3

              
h1 {
  color:red;
}
div.message {
  background-color: #fee;
  text-align: center;
  padding: 1em;
  font-weight: bold;
}

Où mettre le code CSS ?

Par ordre de préférence (et inversement à la priorité)
  • Dans un fichier externe avec extension css qu'on inclut dans le html avec la balise <link>:
    <link rel="stylesheet" href="monstyle.css">
  • Dans une balise <style> dans le fichier html: 
    
<style>
  p > em {
    color:green;
  }
</style>

  • Directement dans un élément:
    <span style="font-family:monospace;">...</span>
[exemple]

Sélecteurs

Une règle CSS s'écrit de la forme : 

    sélecteur {
      propriété1: valeurs1;
      propriété2: valeurs2;
      ...
      propriétéN: valeursN;
    }

Sélecteurs de base

  • * : sélecteur universel. Correspond à tout élément. [example]
  • E : sélecteur de balise. Correspond à tout élément E (c.à.d., un élément de type E). [example]
  • E F : sélecteur de descendant. Correspond à tout élément F qui est un descendant de l'élément E.
  • E > F : sélecteur d'enfant. Correspond à tout élément F qui est un enfant de l'élément E. [example]
  • E + F : sélecteur d'adjacence. Correspond à tout élément F immédiatement précédé par un élément E. [example]
  • E[foo] : sélecteur d'attribut. Correspond à tout élément E avec l'attribut "foo" (quelle qu'en soit sa valeur).
  • E[foo="boo"] : sélecteur valeur d'attribut. Correspond à tout élément E dont l'attribut "foo" a exactement la valeur "boo". [example]
  • .foo : sélecteur de classe. Correspond à tout élément qui est de classe "foo". C'est identique à [class~="boo"]. [example]
  • #foo : sélecteur d'ID. Correspond à tout élément dont l'id est "foo". [example]

Pseudo-classes

commencent par :
  • :not(selector) les éléments ne correspondants pas au "selector"
  • :hover quand le curseur survole l'élément
  • :visited après que le liens soit visité (ne s'applique qu'aux <a>).
  • :first-child, :last-child premier ou dernier enfants
  • :nth-child(n) n-ème enfant (n=1,2,..., even, odd).
  • :empty les balises vides
[example]

Pseudo-éléments

commencent par ::
  • ::first-line la première ligne
  • ::first-letter la première lettre
  • ::bafore, ::after permet de rajouter du texte au début et à la fin de l'élément.
  • ::selection la partie sélectionnée par l'utilisateur
[example]

Combinaison de sélecteurs

On peut combiner plusieurs sélecteurs, comme par exemple
div.main > p:first-child:not(:empty)
On peut appliquer un style à plusieurs sélecteurs en les séparant de virgules 
                
div#one, span.test, img:hover {
  cursor: pointer;
}

Propriétés

Nous avons déjà vu plusieurs exemples de propriétés.
Il y a deux types:
  • simple : color:red;
  • multiple: border: 1px solid red;, qui est raccourcie de trois propriétés border-width, border-style et border-color.
    Attention : ces trois propriétés sont aussi des raccourcis ! Par exemple border-width peut être décomposé en border-top-width, border-right-width, border-bottom-width et border-left-width.
Vous pouvez voir les propriétés disponibles ici Mémento CSS ou ici CSS sur w3schools.

Priorités

L'ordre des priorité (de plus important vers le moins important) :
  • Les propriétés avec !important
  • Les propriétés dans l'attribut style de l'élément
  • Les sélecteurs avec le plus d'id
  • Les sélecteurs avec le plus d'attributs et classes
  • Les sélecteurs avec le plus d'éléments
  • Les sélecteurs qui sont dans la balise <style>
  • La dernière propriété dans l'ordre
[exemple]

Hérédité

Il y a des priorité qui sont héritées par défaut et d'autre qui ne le sont pas.
Par exemple color et font-size sont héritées.
Mais border, margin et padding ne le sont pas.
On peut changer ce comportement avec les valeurs inherit (pour forcer l'héritage) ou initial (pour arrêter l'héritage et forcer la valeur initiale). [exemple]

Box model

Type de boites

  • display:block : comme un div
  • display:inline : comme un span
  • display:inline-block : comme un img
  • display:none : n'est pas afficher
  • Il y a d'autres, mais plus complexes, comme par exemple le récent display:flex ...

Unités

  • px : en pixel (pas vraiment pour les téléphones ~ 96 ppi)
  • cm, mm, in, pt, pc : fonctionne aussi, mais ...
  • em : égale à la taille de la police (par défaut 16px). Il y a aussi rem qui est relatif à la police du <html>.
  • vw, vh : 1/100 de la largeur et de la hauteur de l'écran. Il y a aussi vmin et vmax.
  • % : relativement à la valeur du parent.
  • calc : on peut utiliser cette fonction pour faire des calculs, par exemple width: calc(50% - 1em);.

Pour plus d'information voir W3C : unités.

Positionnement

  • position:static : est le positionnement par défaut.
  • position:relative : relativement à la position par défaut (sa place reste réservée). A utiliser avec top, right, bottom ou left.
  • position:absolute : placé de façon absolu par rapport au premier parent qui n'est pas "static" (il ne prend pas de place).
  • position:fixed : fixé par rapport à l'écran.
  • position:float : à voir par exemple ici.
[exemple]