Intégration Web - CSS3 · 2020-02-11 · DUT MMI 1 - Integration Web - L. Capocchi CSS3 Les...

Intégration Web - CSS3

DUT 1 Métiers du Multimédia et de l’InternetD1ME25 - L. Capocchi

DUT MMI 1 - Integration Web - L. Capocchi

Sommaire

1. Le Web2. Règles générales3. HTML4. CSS35. Javascript6. Mise en page HTML et CSS7. Les méthodes de dessin8. Les multimédia9. Les formulaires

10. Les liens et menus en HTML511. Conclusion


CSS3● Il existe trois méthodes de définition des styles:

○ style de balise○ style de classe○ style d’ID

● Ils peuvent être combinés :○ le style doit être lu de droite à gauche○ s’applique à toutes les balises <ul>

qui se trouve à l’intérieur du bloc ayantpour ID legende


CSS3● Chaque item de la liste (<li>) pourrait avoir également

son propre style :○ un <li> dans une <ul> dans un #legende○ une marge extérieur (margin) de 1px,

une marge intérieur (padding) de 2 px,une hauteur (height) de 60 px,le tout aligné en haut,encadré avec un trait pointillé gris,de 1px en dessous de chaque élément.


CSS3● Les polices de caractères

○ font-family définit la famille de polices utilisée : Arial si elle est installée sinon une police sans-serif.

○ Depuis CCS il est possible d’utiliserdes polices de caractères qui ne sontpas stockées sur le poste client.

○ https://www.google.com/fonts permetde choisir une police et l’intégrer :

https://www.google.com/fonts



○ Les propriétés du langage CSS qui permettent de modifier les propriétés de texte commencent par font- :i. font-style : italic; (italic, normal, oblique, inherit)ii. font-variant:small-caps; (normal, inherit, etc.)iii. font-weight:bold; (normal, blod)

○ d’autre balise pour la manipluation de texte à l’écran:i. text-align :left; (normal, inherit, left, right, center, justify)ii. text-justify: inter-word; (kashida, inter-word, distribute,

inter-ideograph)iii. text-decoration : none; (underline, overline, line-through)iv. text-transform: capitalize;



○ exemple



○ http://w3schools.com/cssref/defaut.asp

http://w3schools.com/cssref/defaut.asp


CSS3● Les sélecteurs

○ Ce sont des symboles qui vont pouvoir de glisser dans la création d’un style pour donner des informations plus précises afin de sélectionner une balise et lui appliquer un style.

○ Exemple : trois div dans un bloc d’ID ZonePrincipale

#zonePrincipale div {...}i. les trois div auront le même style.ii. comment faire pour affecter la deuxième div différement ?



○ #zonePrincipale div {border: 1px #800 solid;

}

i. ajoute une bordure rouge de 1px à chaque div contenu dans #zonePrincipale

○ #zonePrincipale div:nth-child(2) {border: 3px #800 solid;

}i. le deuxième div sera uniquement modifié



○ http://www.w3.org/TR/css3-selectors/

http://www.w3.org/TR/css3-selectors/


CSS3● Les pseudoclasses

○ la balise <a> est automatiquement cliquable et prévu pourinteragir avec la souris.

○ la pseudoclasse link permet de modifier l’aspect du lien.○ les liens cliqués seront noir.○ le survol de la souris provoque une

changement de la couleur du texte en jauneet le souligne.



○ pour le texte, mise en gras de la première ligne de tout élément ayant la classe resume

○ la première lettre du texte a le style letterine qui apparaît un peu plus gros avec une couleur rouge



○ pour les selecteurs ::before et ::after permettent de faire apparaître un texte avant ou après un autre texte :

○ les prix sont suivis du symbole Euro sans que cela apparaisse dans le code HTML


CSS3● Les couleurs

○ L’écriture d’une couleur pour une page HTML se fait avec une valeur hexadécimale.

○ https://kuler.adobe.com pour un outils permettant de sélectionner une couleur.

https://kuler.adobe.com


CSS3● Les fonds et fonds multiples

○ la propriété background-image permet d’afficher une image en arrière plan :

○ la propriété background-repeat permet de répéter une image○ la propriété background-position permet de positionner une

image


CSS3

● Le positionnement○ Les balises div peuvent être positionnées n’importe ou dans une

page.○ left: 200px; signifie que le bloc sera à 200px à gauche de quoi ?○ Ll faut combiner les propriétés top, right, bottom et left avec la

propriété position qui doit toujours être précisée avant le coté top, right, …

○ La propriété permet de spécifier par rapport à quoi vont être calculé les distances.


CSS3● Le positionnement

○ Les valeurs possible pour position sont :i. static (défaut),ii. relative (situe par rapport à la position actuelle du bloc),iii. absolute, (situe par rapport à la page)iv. fixed (situe par rapport à un endroit de la page).

○ Le positionnement peut se faire suivant :i. X : l’abscisse. left pour gauche et right pour droiteii. Y : l’ordonné. top pour haut et bottom pour bas.iii. Y : la profondeur. pour passer devant un autre élément

z-index:100; (ne peut être utilisé que si position est relative, absolute ou fixed.)


CSS3● Le débordement

○ overflow permet de définir la façon dont est géré le contenu qui ne rentre pas dans le bloc.i. inherit : pour récupérer les règles d’overflow de son pèreii. hidden : n’affiche pas ce qui débordeiii. scroll : affiche un ascenseur à l’intérieur du blociv. auto : s’adapte en fonction du contenu du bloc. Si dépassement

introduction d’un scroll sinon rien.


CSS3● Padding et margin

○ padding permet de définir la marge intérieur d’un bloc :i. padding : 5px 0 3px 0; (haut droite bas gauche)ii. padding : 5px 0; (haut bas)iii. padding-left : 5px;iv. padding-bottom : 4px;

○ margin permet de définir l’espace entre les blocs :i. margin: 2px 2px 2px 10px;ii. margin: auto; (centre le bloc)iii. margin: 0 auto; (marge extérieur de 0 en haut et bas et les cotés

en auto. Bloc centré sur la page)


CSS3● Le modèle de boîte

○ Le W3C indique que tous les éléments HTML sont affichés sous la forme d’une boîte.


CSS3● La largeur des boites

○ Avec les CSS 2.1



○ Avec les CSS3i. box-sizing permet d’indiquer

que les valeurs de border etpadding sont inclues dans lalargeur width

ii. deux valeurs possibles :● content-box (defaut) comme en CSS 2.1● border-box : la largeur de la boite inclut

la largeur du contenu, la bordure et leremplissage



○ Avec les CSS3i. exemples



○ Les marges des élémentsi. les éléments sont séparés par des marges supérieur et

inférieure.



○ Les marges des élémentsi. Lorsque deux éléments se suivent, la marge inférieur de la

première boîte et la marge supérieur de la deuxième boîte fusionnent.



○ L’affichage des élémentsi. CSS 2.1 définit pour tous les éléments HTML la propriété display:

● block : les éléments s’affiche les uns sous les autres (<p>, <hx>, <ol>, <form>, etc.)

● inline : les éléments s’affiche les uns à coté des autres dnas la ligne de texte (<a>, <em>, <strong>, <span>, etc.)

● list-item : pour les éléments <i> qui ont un affichage de type block, mais qui peuvent utiliser les mises en forme CSS des lsites à puce numérotées.

● inline-block : pour les élément <input> et <select>● table et les valeurs associées : <table>, <thead>, <tr>, <td>, etc...



○ L’affichage des élémentsi. Mise en page en tableau

● display : table● display : inline-table● display : table-row● display : table-row-group● display : table-header-group● display : table-footer-group● display : table-column● display : table-column-group● display : table-cell● display : table-caption



○ L’affichage des élémentsi. Mise en page en tableau


CSS3● L’affichage dans le flux courant

○ L’ordre d’affichage dans le flux courant est déterminé par l’ordre de saisie dans le codei. display : block affiche les éléments les uns sous les autresii. display: inline affiche les éléments les uns à coté des autresiii. display: table affiche les éléments sous forme de tableau


CSS3● L’affichage dans le flux courant

○ exemple

type block

type inline


CSS3● L’affichage des boîtes flottantes

○ Le positionnement flottant : propriété float (left ou right)



○ Placer des boîtes côte à côte



○ Interdire le flottement : clear (left, right, both)



○ exemple



○ exemple

Le footer occupe la place disponible et se trouve dans la boîte <aside>. Il faut lui interdire tout élément flottant adjacent.



○ exemple


CSS3● Ombre, dégradé, arrondi...

○ box-shadow permet de créer une ombrée porté sous le bloc


CSS3● Le responsive design et les media queries

○ responsive design est un design qui va s’adapter en fonction de la taille de l’écran et le position (portrait ou paysage) si l’appareil est une tablette ou un smartphone.

○ les media queries interrogent l’écran pour avoir ces informations et savoir dans quelle résolution afficher la page HTML.i. “si la zone d’affichage de la page a une dimension comprise entre

800px et 1200px, utiliser cette feuille de style. Si c’est une autre fourchette, utiliser d’autres styles.”



○ Les styles peuvent être écrits dans un seul fichier.(si il ne sont pas trop nombreux)


CSS3● Les animations CSS3

○ Chaque animation doit avoir une @keyframe nommée.○ Il faut déterminer les différentes étapes de l’animation en

indiquant les changements à apporter aux différentes propriétés.

○ L’avancement de l’animation est gérée en pourcentage.○ animation-duration permet de spécifier la durée d’une

animation.○ animation-timing-function permet de gérer la cinétique de

l’animation.○ animation-timing-count permet de gérer la répétition.



○ animation-delay indique si l’animation doit commencer avec un délai

○ animation-direction permet d’indiquer si l’animation doit se jouer dans le sens inverse

○ animation-play-state indique si l’animation est jouée ou si elle est interrompue.

○ Attention de bien utiliser les préfixes propriétaires des navigateurs.



○ Simple déplacement



○ Une rotation et une transparence



○ Un formulaire qui clignote


CSS3● TP3 !


Outils et bibliographie● http://caniuse.com● http://getbootstrap.com● http://foundation.zurb.com● http://gumbyframework.com● http://www.99lime.com/elements/● http://www.getskeleton.com● http://cardinalcss.com● http://getuikit.com/index.html● http://imperavi.com/kube● http://purecss.io

http://caniuse.com

http://getbootstrap.com

http://foundation.zurb.com

http://gumbyframework.com

http://www.99lime.com/elements/

http://www.getskeleton.com

http://cardinalcss.com

http://getuikit.com/index.html

http://imperavi.com/kube


Outils et bibliographie

● HTML5 et CCS3 pour des sites Responsive Web Design, Christophe AUBRY, ENI Edition.

● Apprenez les langages HTML5, CCS3 et Javascript pour créer votre premier site web, Denis MATARAZZO, ENI Edition.

● HTML5 et CSS3, Faites évoluer le design de vos sites web (2ieme édition), Christophe AUBRY, ENI Edition.

Intégration Web - CSS3 · 2020-02-11 · DUT MMI 1 - Integration Web - L. Capocchi CSS3 Les...

Documents

Transcript of Intégration Web - CSS3 · 2020-02-11 · DUT MMI 1 - Integration Web - L. Capocchi CSS3 Les...