intro-css.org 19.4 KB
Newer Older
aline's avatar
aline committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673
#+TITLE:     Programmation Web
#+AUTHOR:    Aline Gérard
#+EMAIL:     agerard@unistra.fr
#+DATE:      2018-08-28 Tue
#+DESCRIPTION: Première approche HTML,CSS et Javascript
#+KEYWORDS: html, css, javascript, bonnes pratiques
#+LANGUAGE:  fr
#+OPTIONS: H:2 toc:t num:t
#+OPTIONS:   timestamp:t
#+INFOJS_OPT: view:nil toc:nil ltoc:t mouse:underline buttons:0 path:https://orgmode.org/org-info.js
#+LATEX_CLASS: beamer
#+LATEX_CLASS_OPTIONS: [presentation]
#+BEAMER_THEME: metropolis [block=fill]
#+Columns: %45ITEM %10BEAMER_ENV(Env) %10BEAMER_ACT(Act) %4BEAMER_COL(Col) %8BEAMER_OPT(Opt)
#+LATEX_HEADER: \setbeamertemplate{section in toc}[sections numbered]


* CSS Donner du style
** Principes de bases
   #+LATEX: \setbeamercovered{transparent=30}
   #+ATTR_BEAMER: :overlay <+->
- Le CSS permet d'habiller un site web
- On définit des régles d'affichage dans un fichier spécifique
- Les régles sont associées aux éléments HTML


** Définition
   #+LATEX: \setbeamercovered{transparent=30}
   #+ATTR_BEAMER: :overlay <+->
- Défini dans un fichier séparé avec pour extension *.css*
- Un même fichier pourra être utilisé dans plusieurs fichiers html
- Plusieurs fichiers CSS peuvent être utilisés
- Défini dans le fichier Html dans le conteneur *<head>* via la balise suivante :
   #+begin_src HTML :eval no
   <link rel="stylesheet" type="text/css" href="style.css">
   #+end_src


** Syntaxe
*** la syntaxe est composée de 3 éléments  : 
- le sélecteur :: élément sur lequel on applique les propriétés (balise HTML, id, classe, etc.) 
- la propriété :: est l’effet sur lequel on veut jouer (ex couleur de texte, positionnement, couleur de fond, etc.)
- la valeur :: de la propriété CSS (rouge, 10px, etc.)

*** syntaxe de base :
selecteur {
    propriete: valeur;
    propriete: valeur;
     ...
}

** Les commentaires

   #+begin_src CSS :eval no
/* Commentaires très utiles */

/*
Les fichiers CSS deviennent vites volumineux,                 
mettre des commentaires utiles est souvent nécessaire.               
*/
   #+end_src


** Règles d'écritures (1/2)
*** Appliquer un style à une balise
balise { propriété: valeur; }
p { color: red; }

*** Appliquer à une classe
.class { propriété: valeur; }

** Règles d'écritures (2/2)
*** Appliquer à un id
#id { propriété: valeur; }

*** Appliquer à une classe relative à un élément
balise.class { propriété: valeur; }

** Sélection (1/2)
   #+begin_src HTML :eval no
<p class="exemple">Hello World!</p>
<ul id="firstMenu">
  <li></li>
  <li></li>
</ul>
   #+end_src
   #+begin_src CSS :eval no
/* tout les éléments paragraphe */
p { }                 
/* tout les élemnts avec une classe exemple */
.exemple { }
/* tout les paragraphes ayant une class exemple */
p.exemple { }
#+end_src

** Sélection (1/2)
 #+begin_src HTML :eval no
<p class="exemple">Hello World!</p>
<ul id="firstMenu">
  <li></li>
  <li></li>
</ul>

/* 
l'unique élément avec l'id firstMenu
ul#firstMenu est inutile sur cette page
mais peut être utile si le css implique plusieurs pages
*/
#firstMenu { }
#+end_src


** Hiérarchie

*** Cascade, élément a contenu dans élément nav 
nav a { color: red; }                 

*** Même propriété pour tout les éléments (ici h1 et h2) 
h1, h2 { color: blue; }



** Priorités des prises en compte
*** la dernière déclaration est celle qui est prise en compte
*** id -> class -> balise
L'id est prioritaire sur la classe qui est prioritaire sur la balise

*** Exemple
 #+begin_src HTML :eval no
<p class="message" id="introduction">
Introduction au CSS
</p>

#introduction { color: red; }
.message { color: green; }
p { color: blue; }
   #+end_src

** Résumé

| CSS             | HTML ciblé                                 |
|-----------------+--------------------------------------------|
| p  { }          | <p> ... </p>                               |
| .maClasse  { }  | <div class="maClasse"> ... </div>          |
| #minId { }      | <div id="monId"> ... </div>                |
| p.maClasse { }  | <p class="maClasse"> ... </p>              |
| p .maClasse { } | <p><span class="maClasse"> ... </span></p> |
| p, div { }      | <p> ... </p>  <div> ... </div>             |

** Pseudo-class (1/3)
*** Définition
- liée à l'état ou la position d'un élément
-

** Pseudo-class (2/3)
*** État d'un lien <a>
 #+begin_src CSS :eval no
/* lien non visité */
a:link {
    color: #FF0000;
}

/* lien visité */
a:visited {
    color: #00FF00;
}
   #+end_src

 #+begin_src CSS :eval no
/*  lors du survole avec la souris */
a:hover {
    color: #FF00FF;
}


/* lors du clic sur le lien */
a:active {
    color: #0000FF;
}
#+end_src
** Pseudo-class (4/3)
*** n-iéme élément

 #+begin_src CSS :eval no
/* premier élément */
p:first-child { ... }

/* tout les éléments paires */
p:nth-child(2n) { ... }
#+end_src



* CSS : les couleurs
** Notations
*** Plusieurs notations ( exemple avec le blanc ) :
| *hexadécimale* | #ffffff                                      |
| *hexadécimale* | notation courte doublée pour obtenir         |
|              | la version longue : #fff                     |
| *RGB*        | rgb(255,255,255)                             |
| *RGBA*       | notion de transparence : rgba(255,255,255,1) |
| *mot clé*    | white                                        |
|              |                                              |

** Propriétés utilisant des couleurs
*** Notamment utilisé avec les propriétés 
- color
- backgroud, background-color
- border

* CSS : unité de taille
** Utilisation
Utilisées pour les propriétés telles que :
- font-size :: taille du texte
- margin :: marge entre deux éléments
- padding :: espace entre le contenu et sa bordure


** Les unités courantes
- px ::  pixels, unité fixe
- pt :: point 
- cm, mm :: centimètre, millimètre
- % ::   pourcentage, unité fluide
- em ::  cadratin, unité fluide
- rem :: root em,
- vh, vw :: viewport units

** Le pixel : px
- unité fixe, historique et "rassurante"
- produite par les logiciels graphiques
- taille figée = source de problèmes d'accessibilités
- essentielle pour les éléments tels que les images, les vidéos

** Le cadratin : em
- unité fluide
- taille relative à la taille de police du parent direct
- se répercute aux enfants et enfants des enfants (cascade)
- varie en fonction de la taille de police de l'utilisateur
** Le cadratin : em, exemple
 #+begin_src HTML :eval no
<article>
  <aside>
    <p>Paragraphe dans aside</p>
    <div><p>Paragraphe dans une div</p></div>
    <div>
      <div><p>Paragraphe dans deux div</p></div>
    </div>
  </aside>
</article>

article { font-size: 20px; }
aside { font-size: 1.5em; }
div, p { font-size: 2em; }
#+end_src
** Le pourcentage : %
- unité fluide
- taille relative à la taille de police du parent
- se répercute aux enfants, et enfants des enfants (cascade)
- varie en fonction de la taille de police de l'utilisateur
- varie en fonction de la taille de la fenêtre du navigateur (viewport)


** Le pourcentage : %, exemple
 #+begin_src CSS :eval no
<article>
  <aside>
    <p>Paragraphe dans aside</p>
    <div><p>Paragraphe dans une div</p></div>
    <div>
      <div><p>Paragraphe dans deux div</p></div>
    </div>
  </aside>
</article>
article { border: 2px solid black; width: 80%; }
div { border: 2px solid red; width: 50%; }
p { border: 2px solid green; width: 50%; }
#+end_src

** Le pourcentage : %, donner la largeur de l'élément A
file:./img/largeurBoiteA.png
** Le root em : rem
- unité fluide
- taille relative à la taille de l'élément racine *<html>*
- aucune répercution sur les enfants
- varie en fonction de la taille de police de l'utilisateur
** em, exemple, donne la taille de la police des éléments A
file:./img/policeA.png
** rem, exemple, donne la taille de la police de l'élément A
file:./img/policeArem.png


** Unité viewport : vw, vh
- unité fluide
- viewport = fenêtre du navigateur
- 100vh :: hauteur du viewport
- 100vw :: largeur du viewport
	   
** Viewport: exemple
file:./img/largeurBoiteviewport.png

* CSS : gestion des marges
** Occupation de l'espace
- 2 types d'occupation : *bloc* ou *en ligne*
- par défaut les éléments de type *block* prennent toute la largeur de leur parent, et sont suivis d’un retour à la ligne 
    - ex: body, html, p, div, h1
- les éléments de type *inline* prennent la largeur de leur contenu, et ne sont pas suivis d’un retour à la ligne 
    - ex: span, a, strong, img

** Largeur et hauteur d'un élément : width et height
- *width* (largeur) et *height* (hauteur) sont applicables uniquement sur des éléments de *bloc* 

*** valeurs possibles 
 - auto :: par défaut, toute la taille du parent
 - valeur numérique en px, % , em :: ex : body{ width: 800px;}

** Largeur et hauteur avec max en min
*** on peut utiliser max et min pour déterminer des tailles maximums et minimums
- min-width
- min-height
- max-width 
- max-height 


*** permet notamment  de gérer un débordement d’image :  
   - img { max-width: 100%; } 
   - les images sont limitées à la taille de leur parent


** Gestion des marges
Différentes marges
- margin :: marge extérieure
- padding :: marge intérieure
- border :: cadre entre la mage extérieure et intérieure

** CSS BOX
file:./img/css_box.png   

** Définition des marges
*** définition globale
- margin : 5px; :: applique une marge de 5px aux 4 coins
- margin : 0 5px; :: applique une marge de 0 en haut et bas et 5px sur
     les côtés
- margin : 1px 2px 3px 4px; :: définition des 4 marges dans l'ordre
     suivant : haut, droite, bas, gauche

*** définition individuelle :
- margin-top : 5px;
- margin-bottom : 5px;
- margin-right : 5px;
- margin-left : 5px;

** Utilisation des marges
*** Centrer horizontalement
- center un élément de type *block* 
#+begin_src CSS :eval no
body {
    /* donner une largeur avec width */
    width: 800px;
    /* marge automatique sur les côtés */
    margin 5px auto;
}
#+end_src

** Occupation de l'espace
- le padding se défini sous les mêmes formes que margin
- un élément occupe l'espace de sa largeur + son padding + sa bordure
- on utilisera *box-sizing : border-box;* pour la bordure et le
  padding soient calculés à l'intérieur de l'élément

** CSS Reset
- supprime les spécificités des navigateurs
- à placer avant toute définition de style
- Reset CSS
  



* CSS : Typographie
** Déclaration
*** police(s) à utiliser
*font-family: Helvetica, Arial, sans-serif;*

- indique l'ordre dans lequel les polices sont recherchées
- recherche si la police est présente sur l'ordinateur de
  l'utilisateur
- en dernier on précise une famille "générique"

** Fonts
- défini dans l'élément body pour tout le document
- 6 familles génériques:
  - serif
  - sans-serif
  - monospace
  - cursive
  - fantasy
  - system-ui


** Les polices courantes sur le Web

| Police    | Type       | Desc.                                |
|-----------+------------+--------------------------------------|
| Arial     | sans-serif | équivalente Helevetica               |
| Trebuchet | MS         | serif moins répandue sur les mobiles |
| Courier   | New        | monospace équivalente  Courier       |


** Importer une font

| Formats | Définition            | Desc.                           |
|---------+-----------------------+---------------------------------|
| .ttf    | TrueTypeFont          | le plus répandu,non compressé   |
| .eot    | EmbedOpenType         | spécifique IE                   |
| .woff   | WebOpenFormatFont     | format compressé adapté au  web |
| .svg    | ScalableVectorGraphic | format libre du W3C             |


#+begin_src CSS :eval no
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
      url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
#+end_src

** Jouer sur la taille
*** Taille de police
- font-size :: permet de définir la taille de la police (hauteur)
- unité px, em, %
*** Interlignage
- line-height :: 
- unité px, em % ou sans unité 


** Mise en valeur
- font-weight : bold; :: mise en gras
- font-style : italic; :: italique
- text-align :: left, right, center, justify


* CSS : exemple en 4 minutes
** Démonstration
 - https://jgthms.com/web-design-in-4-minutes/


* CSS : mise en page
** Flexbox
http://jonibologna.com/content/images/flexboxsheet.pdf

file:./flexbox/flextest01.html

** Grid layout 
- positionnement en grille
- découpage en ligne et colonne de la page
- déclaration via la déclaration *display: grid* dans le conteneur principal
 
** les propriétés (1/2)
 - grid, inline-grid :: déclaration d'un contexte de grille (création d'un "grid-container") 
 - grid-template-areas :: déclaration d'un "canevas" de cellules nommées (optionnel)           
 - grid-template-rows, grid-template-columns :: déclaration des dimensions de lignes et colonnes                     


** les propriétés (2/2)
- grid-row, grid-column :: placement d'un élément "grid-item" dans une ligne ou une colonne     
- grid-gap, grid-column-gap, grid-row-gap :: espaces inter-colonnes ou inter-rangées (gouttières)                 
- align-items, justify-items :: alignement horizontal ou vertical                                    
- align-self, justify-self :: alignement horizontal ou vertical d'éléments distincts               



** Affichage de deux blocs sur une ligne

#+begin_src CSS :eval no
<body>
  <nav>nav</nav>
  <section>section</section>
</body>

body {
  display: grid;
  grid-template-columns: 200px 400px;
}
nav {
  grid-column: 1; /* placement en colonne 1 */
}
section {
  grid-column: 2; /* placement en colonne 2 */
}
#+end_src

** Grille de 4 emplacements
#+begin_src CSS :eval no
<body>
  <nav>nav</nav>
  <section>section</section>
  <article>article</article>
  <aside>aside</aside>
</body>
body {
  display: grid;
  grid-template-columns: 250px 400px;
  grid-template-rows: 100px 300px;
}
nav { grid-column: 1; grid-row: 1; }
section { grid-column: 2; grid-row: 1; }
article { grid-column: 1; grid-row: 2; }
aside { grid-column: 2; grid-row: 2; }
#+end_src 

**  [[https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/D%25C3%25A9finir_des_zones_sur_une_grille][Template]] 
#+begin_src CSS :eval no
#inGrid {
  display: grid;
  grid-template-areas: "h h"
                       "n c"
                       "f f";
}
nav {
/* placement de <nav> dans l'emplacement "n" */
  grid-area: n; 
}
#+end_src 

ex: https://jsfiddle.net/api/mdn/


** Les unités de largeur et hauteur
- px, %, em, … :: unités courantes)                                                                                                       
- fr            ::     fraction(s) de l'espace restant                                                                                         
- min-content     ::   se rapporte à la largeur (ou hauteur) de l'élément le plus petit                                                        
- max-content    ::    se rapporte à la largeur (ou hauteur) de l'élément le plus grand                                                        
- minmax(min, max) ::   exemple minmax(min-content, 20%) correspond à largeur 20% (ou hauteur), mais au minimum largeur (ou hauteur) du contenu 
- auto ::              s'adapte à la largeur (ou hauteur) du contenu                                                                           
- fit-content ::       identique à auto et aussi à minmax(min-content, max-content)                                                            


** illustration de l'unité "fr"

#+begin_src CSS :eval no
body {
  display: grid;
  /* 250px + "largeur restante" */
  grid-template-columns: 250px 1fr;
  /* 100px + "hauteur restante" */ 
  grid-template-rows: 100px 1fr; 
}
nav { grid-column: 1; grid-row: 1; }
section { grid-column: 2; grid-row: 1; }
article { grid-column: 1; grid-row: 2; }
aside { grid-column: 2; grid-row: 2; }
#+end_src 



** Centrer les éléments 1/3
- par défaut, les éléments "grid-items" s'étirent pour occuper tout l'espace de leur cellule.
- Grid Layout permet également d'aligner les contenus verticalement ou horizontalement


** Centrer les éléments 2/3
- justify-items  :: alignement au sein d'une cellule (dans l'axe principal). S'applique au conteneur  
- justify-self   :: alignement d'un grid-item au sein de sa cellule. S'applique au grid-item          
- align-items    :: alignement au sein d'une cellule (dans l'axe secondaire). S'applique au conteneur 
- align-self     :: alignement d'un grid-item au sein de sa cellule. S'applique au grid-item          

** Centrer les éléments 3/3
Les valeurs de ces propriétés peuvent être les suivantes :

- start    :: aligne l'élément au début de la cellule (gauche ou droite selon le sens de la lecture) 
- end      :: aligne l'élément à la fin de la cellule (gauche ou droite selon le sens de la lecture) 
- center   :: place l'élément au centre de la cellule                                                
- stretch  :: étire l'élément (ses marges) pour occuper tout l'espace dans la cellule                

** Multiples centrages
#+begin_src CSS :eval no
body {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
  grid-template-areas: "a b" "c d";
}
header { grid-area: a; justify-self: center; }
nav { grid-area: b; align-self: center;
}
article {
  grid-area: c;
  justify-self: center;
  align-self: center;
}
footer { grid-area: d; }
#+end_src 
 

** Occuper plusieurs emplacements
- donner la possibilité à un élément de s'étaler sur plusieurs
  emplacements, à la fois horizontalement et verticalement
- */* indique le début et la fin de l'emplacement
- *span* indique le nombre de ligne ou colonne à occuper
#+begin_src CSS :eval no
.container {
  display: grid;
  grid-template-columns: 10em 1fr;
  grid-template-rows: min-content 1fr min-content;
  height: 300px;
}
header { grid-column: 1/span 2; grid-row: 1; }
nav { grid-column: 1; grid-row: 2; }
article { grid-column: 2; grid-row: 2; }
footer { grid-column: 1/span 2;  grid-row: 3; }
#+end_src 


** Les motifs de répétition (patterns)
- motifs de répétition (patterns) de colonnes ou de lignes à l'aide de la notation *repeat()*
- exemple, répéter le motif de colonnes (50px 1em) dix fois dans la
  grille : *grid-template-columns: repeat(10, 50px 1em)*

** Patterns
#+begin_src CSS :eval no
.container {
  display: grid;
  grid-template-columns: 10px repeat(4, 1fr 10px);
}
header {
  grid-column: 2 ;
}
nav {
  grid-column: 4; 
}
article {
  grid-column: 6; 
}
footer { grid-column: 8; }
#+end_src 
 

** Répartition automatique

- par défaut les éléments grid-items se répartissent automatiquement
  dans le premier emplacement disponible au sein de la grille, dans le
  sens horizontal.
- il est possible de modifier ce comportement à l'aide de la propriété *grid-auto-flow*
  - grid-auto-flow : row :: répartition automatique rangée par rangée (valeur par défaut)
  - grid-auto-flow : column :: répartition automatique colonne par colonne

** grid-auto-flow: column

#+begin_src CSS :eval no
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: column;
}
#+end_src 


** Utilisation conjointe, grid et flex
https://rachelandrew.co.uk/css/cheatsheets/box-alignment


*** CSS Grid :
- est idéal pour construire l’image plus grande. 
- permet de gérer facilement la disposition de la page entière 
- pour les mises en page 2D (lignes *et* colonnes

*** FlexBox :
- est idéal pour aligner le contenu dans des éléments. 
- permet de positionner des petits détails d'une conception
- mise en page une dimension  (lignes *ou* colonnes)


file:./grid-and-flex/index.html