HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

Dimension: px

Commencer à balayer dès la page:

Download "HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom"

Patrice Gobeil
il y a 7 ans
Total affichages :

1 HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom

2 HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise

3 LES BALISES PRINCIPALES HTML <!DOCTYPE html>

4 COMMENTAIRES <--ceci est un commentaire

5 ORGANISATION DU TEXTE <p>paragraphe</p> <br/> <h1>mon plus gros titre</h1> <h2>un titre un peu moins gros</h2> <h6>tout petit minuscule titre</h6> <em>mots importants</em> <strong>mots super importants</strong> <mark>mots à faire ressortir</mark>

6 LES LISTES Puces sans ordre <ul> <li>élément1</li> <li>élément2</li> </ul> Numérotation <ul> <li>élément1</li> <li>élément2</li> </ul>

7 LES LIENS Vers une autre page: <a href=" autrepage.html">le lien</a> Vers une ancre dans la même page <a href="#labelancre">le lien</a> Nom de l ancre définit par attribut id L attribut title pour infobulle L attribut target pour l ouverture de la page

8 LES IMAGES De préférence PNG Balise orpheline: <img src="pathimage.png" alt="txt"/> Attribut title pour info bulle Dans <a></a> pour img cliquable

9 LES FIGURES <figure> <imgsrc= /> <figcaption>texte expliquatif</figcaption> </figure>

10 LES TABLEAUX <table> <caption> <thead> <tr> <th> <tfoot> <tbody> <tr> <td> Fusion avec colspan et rowspan: <td colspan="2">

11 MISEENFORMECSS Pour la mise en forme À mettre dans un fichier cssséparé Faire le lien dans la balise <head></head> <link rel="stylesheet" href="fichier.css">

12 SURCHARGE DE BALISE

13 SURCHARGE DE BALISE SPÉCIFIQUE Avec id (unique) et class Dans HTML: <p class="introduction">bonjour</p> Dans CSS: Si id -> #introduction

14 BALISES UNIVERSELLES <span> </span> balises inline <div> </div> balises block

15 SÉLECTION DE BALISES Sélecteur universel pour toutes les balises:* Balise inclus dans une autre: Balise qui suit une autre:

16 TAILLE DE TEXTE Propriété font-size Taille absolue : en px, en cm ou mm.(déconseillé) Taille relative : en pourcentage, emou ex 1em = taille normal ex comme emmais + petit Ou % Ou small, medium, large

17 POLICE Tous les navigateurs doivent l avoir Propriété font-family Plrsvaleurs pour le cas ou police absente CSS3 -> téléchargement auto possible: Fichier 1Mo fontsquirrel.com et dafont.com

18 POLICE PERSO

19 MISEENFORMEDETEXTE Avec font-style: Italique: italic Oblique : oblique Avec font-weight: Gras : bold Avec text-decoration: Souligné: underline Barré: line-through Ligne au-dessus : overline Clignotant : blink

20 ALIGNEMENT Propriété text-align: Left Center Right Justifty

21 ÇA FLOTTE Propriété float sur un élément Permet de faire flotter l élément: À gauche avec flaot: left À droite avec float: right On stoppe le flottement avec clear Flottement gauche avec clear: left Flottement droite avec clear: right Tout flottement avec clear: both

22 COULEUR ET FOND Couleur du texte avec propriété color: color: lacouleur Ou en hexa :#FF5A28 Ou fonction rgb(123,56,96) Couleur du fond : avec propriété background-color

23 IMAGE DE FOND background-image : url("imagedefond.png") S applique à tout block Comportement du fond avec: background-attachment: fixed: le fond reste fixe scroll : le fond défile avec le texte background-repeat: no-repeat: pas de répétition repeat-x : répète horizontalement repeat-y : répète verticalement Repeat: répète en mosaïque

24 IMAGE DE FOND(SUITE) Background-position: En px Ou avec top,left,right,bottom,center Ou en combinant (ex: top left) Possibilité de spécifier plrs fonds (CSS3): Séparer url par des virgules

25 TRANSPARENCE D UN ÉLÉMENT Propriété opacity(entre 0 et 1) Ou fonction RGBa(vR,vV,vB,vO)

26 LES BORDURES Border-width: 2px Border-color: blue Border-style: Solid Dotted Double Possibilité de spécifier une seule bordure Arrondi avec border-radius en px Ombres avec box-shadow et text-shadow

27 APPARENCE DYNAMIQUE nomelement:hover pour le survol nomelement:active pour le clic nomelement:focus pour le focus

28 BALISES STRUCTURANTES HTML5 <header></header> <nav></nav> <section></section> <aside></aside> <article></article> <footer></footer>

29 SCHÉMA BALISES STRUCTURANTES

30 REMARQUES Héritage Super propriété background et border

31 LES BOÎTES Différence balises inline et balises block Balises génériques autres: Inline-> <span></span> Block -> <div></div>

32 DIMENSIONNEMENT DE BOÎTES Dimensions: Widthet heighten px ou % Marges: Intérieures : padding Extérieures : margin Spécifique avec: Margin-top, margin-bottom Pareil pour padding-left, padding-right Centrer avec margin: auto Si dépassement du texte -> overflow: auto

33 MISE EN PAGE(INCOMPLET) Propriété display : inline-block Permet de positionner Les éléments les uns à côté des autres Ensuite avec vertical-align: Baseline, top, middle Positionnement: Absolute(z-index pour chevauchement) Fixed(suit la page) Relative (décalage)

Documents pareils

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles