Explication de certains fonction, balises et signes en HTML et CSS :

  • Dans l'en-tête du document, le code html doit ouvrir le document.
  • Puis viennent ensuite la balise "head" et toutes les balises "meta" (meta charset, meta name, meta content etc...
  • Ensuite les balises "link href=" qui permettent de définir les liens vers les différents dossier image, CSS, JavaScript,ou @import pour par exemple appeler une police spécifique sur fonts.googleapis.com.
  • Dans l'HTML :

  • Si j'attribue un ID ou une classe à une balise (div) à un élément, c'est comme si je lui donnait un nom.

  • Puis dans la CSS, si je veux faire référence à l'ID ou la classe, je peux :
    => soit mettre un point "." pour une classe ( .+nom de la classe)
    => soit mettre un # dièze pour 1 ID.

  • Le "Padding" sont des marges intérieur et "Margin" sont les marges extérieures. Si je met les magring 4, 5 , 6 et 7 cela veut dire que dans le sens des aiguilles d'une montre j'aurai : 4 pixels en haut, 5 à droite, 6 en bas et 7 à gauche.
  • Dans la CSS :

  • Si je met un une étoile * devant une classe, elle imposera les propriétés CSS à toute les classes qui ont le même nom. Je peu aussi mettre une étoile devant une balise

  • Si je met un dièze # devant TEST un ID, il attribuera les propriétés définies dans la CSS.

  • Si je met un un point "." devant une classe (dans la CSS), ceci imposera les propriétés CSS à toute les classes qui ont le même nom.

  • Voici par exemple le début du fichier CSS de cette page. Il peut être pris comme rérérence pour mes prochains exercices
    html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address,big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul,li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption,footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, code, video, {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}article, aside, details, figcaption, figure,footer,header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul{list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: "";content: none;}table {border-collapse: collapse;border-spacing: 0;} *{box-sizing: border-box;}
    Il faut donc faire attention car certaines propriétés de cette CSS affecteront mes futur tests et travaux.
    Tout en bas du fichier CSS se trouve un "media Queries", c'est un type de comportement qui permet de définir les aspects notemment du résponsive; il permet d'indiquer que par exemple en dessous de 690 px tous les éléments redéfinis sous et à partir de "@media" seront adaptés au propriétés définies depuis et sous ce point. la ligne à observer dans la CSS est @media screen and (max-width: 690px)
    Pour les images ci-dssous l'effet d'opacité à été réalisé grâce à ce qui suit :
    #image1{ float: left; margin: 2em; opacity: 0.2; } #image1:hover{ opacity: 1; float:left; margin:2em; }

    Les animations de formes


    les animations sont gérées via la CSS grâce à des scripts tels que (pour le carré bleu ) :
    "Crochet ouvrant" -webkit-animation:spin 3s linear infinite; -moz-animation:spin 3s linear infinite; animation:spin 3s linear infinite; "Crochet fermant".
    Et pour le carré orange avec transparence :
    -webkit-animation:spin 3s linear infinite; -moz-animation:spin 3s linear infinite; animation:spin 3s linear infinite;.
    Ces deux animation sont complétées par le script :
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); qui se place juste après les deux scripts ci-dessus les paramètres des différents comportements sont à tester.

    Les animations et zoom d'images


    Le zoom sur les images animées s'effectue pas les scripts suvants; il est possible de régler la distance ou valeur du zoo ainsi que la vitesse; tous ces paramètres sont configurables dans le fichier CSS :


    #chats{ display: flex; flex-wrap: nowrap; justify-content: center; } .outer-div { height: 200px; width: 200px; overflow: hidden; } .inner-div { margin:10px; height: 100%; width: 100%; background-size: cover; background-position: center; transition: all 0.3s linear; background-image: url('http://placekitten.com/300/300'); } .inner-div:hover { transform: scale(5); } .outer-div2 { height: 200px; width: 200px; overflow: hidden; } .inner-div2 { margin:10px; height: 100%; width: 100%; background-size: cover; background-position: left; transition: all 0.6s ease-in-out; background-image: url('http://placekitten.com/400/300'); } .inner-div2:hover { transform: scale(1.7); } .outer-div3 { height: 200px; width: 200px; overflow: hidden; } .inner-div3 { margin:10px; height: 100%; width: 100%; background-size: cover; background-position: top; transition: all 0.1s ease-in-out; background-image: url('http://placekitten.com/400/500'); } .inner-div3:hover { transform: scale(2); }

    Exemple d'images sur un serveur distant

    A noter que dans l'exemple ci-dessus, les délais et la distance du zoom sont à chaque fois différentes. De plus l'image utilisée est une image sur un serveur distant.

    Exemple d'images dans le dossier "local"

    Dans les exemples ci-dessus, les délais et la distance du zoom sont également à chaque fois différentes. Les image utilisée ici sont dans le dossier de ces pages. L'image du singe a une transition: all 0.4s linear; tandis que les images "eyes" et "cat1" ont des transition de type transition: all 0.6s ease-in-out;avec respectivement des temps "ease" de 0,4 et 0,6 secondes.