Pdf Memento Html Css

  • June 2020
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Pdf Memento Html Css as PDF for free.

More details

  • Words: 1,328
  • Pages: 8
XHTML 1.0

Page XHTML 1.0 transitional Ma page <meta http­equiv="content­type" content="text/html; charset=UTF­8" /> <meta name="description" content="Titre" /> <meta name="author" content="P. VINCENT" /> <meta name="keywords" lang="fr" content="mot1, mot2" /> <meta name="robots" content="all" /> <style type= "text/css"> /*Mes styles*/ <script type="text/javascript" src="script.js" /> <script type="text/javascript"> /*Mon script*/


Les balises de type bloc Les balises de type bloc Balise

Signification  Exemple  Balise bloc mère du corps de la  page, c'est le conteneur  ... principal



Conteneur de blocs 



Paragraphe 

 ... 



Titre de niveau 1 à 6



<pre>

    ,
      ,


    1. ,
      ,


      ,,                                                                                    
      ,


      , 


      <map>

      Marque une citation 

      Affiche exactement ce qu'on y  mets (tabulations,sauts)

      ...

      to beor not to be ?

      titre

      Texte texte texte <pre> to be or not to be

         ou 
               
        1. Le XHTML est accessible
          2. Liste énumérative 
             et liste       
          • Le XHTML est bien  numérotée 
              structuré
           ou 


        Liste de définition 

        Tableaux

        Formulaire interactif 

             
        Développeur
             
        Un développeur développe
             
        Web
             
        Réseau maillé de serveurs
             
      Poisson20 euros500 grammes
      Viande15 euros900 grammes
        First name:    

      <map id ="planetmap" name="planetmap">   <area shape="rect"  image réactive (nécessite <area>) coords="0,0,82,126" href="sun.htm"  alt="Sun" />   <area shape="circle" coords="90,58,3"  href="mercur.htm" alt="Mercury" />

      Liste des balises de type en-ligne Liste des balises de type en-ligne Balise

      Signification 

      Exemple

      <span>

      Conteneur en­ligne

      <span>texte



      Liens

      texte



      Images





      Saut de ligne



      <em>, <strong>

      Mise en intonation du  texte

      <em>texte important , <strong>texte  important2

      , ,  Info­bulle, citation  et définition , , 

      texte

      <del>, 

      Suppression / ajout  de texte

      <del>texte

      , ,  <samp>, 

      Instruction et code

      texte

      <sub>, <sup>

      Indices et exposants

      <sup>texte

      Animation multimédia  embarquée

      <param name="movie" value="s.swf" /> <param name="quality" value="high" />"



      CSS 2

      Les sélecteurs ● Identification : bal avec id="nom_id" bal#nom_id bal#nom_id { } ● Collectif : bal1,bal2 et bal3 bal1, bal2, bal3 { } ● Hiérarchie : bal3 dans bal2 dans bal1 bal1 bal2 bal3 { } ● Adjacent : bal2 directement derrière bal1 bal1 + bal2 { } ● Enfants : bal2 directement dans bal1 bal1 > bal2 { } Typographie Action

      Propriété

      Valeur

      Choix de la police

      font­family :

      Taille de la police

      font­size :

      10px; 1.2em; 90%;

      Couleur

      color :

      silver; #0033FF;  transparent;

      Orientation de la  police

      font­style :

      normal; italic; oblique;

      Epaisseur

      font­weight :

      bold; bolder; normal;

      Soulignement

      text­decoration :

      none; underline;  overline; line­through;

      Mise en majuscule

      text­transform :

      none; capitalize;  uppercase; lowercase;

      Alignement du texte

      text­align :

      left; right; center;  justify;

      Hauteur de ligne

      line­height :

      normal; 1.2em; 90%;  10px;

      Espacement entre les  letter­spacing : lettres

      normal; ­2px;

      Espacement entre les  word­spacing : mots

      normal; 3px;

      Raccourci

      font :

      Description

       "Trebuchet MS", arial,  applique les polices par ordre  décroissant ; mettre les noms avec  sans­serif; espace entre ""

      font­style, font­variant, font­ weight, fontsize/line­height,  font­family

      préférer em et % pour hériter des  valeurs des éléments parents

      capitalize: première lettre  uniquement.

      p { font: bold 12px/24px verdana }

      Arrières plans Action

      Propriété

      Valeur

      Notes

      Couleur d'arrière­plan

      background­color :

      "#RRGGBB";

      Image d'arrière­plan

      background­image :

      url(http://url);

      Répétition de l'arrière­ plan

      background­repeat :

      repeat; repeat­x;  repeat­y; no­repeat;

      Spécifie si l'image  reste fixe avec les  background­attachment : déplacements de l'écran

      scroll; fixed;

      Position de l'image par  rapport au coin  background­position : supérieur gauche

      top; middle; bottom;  left; center; right;

      Raccourci global vers  les propriétés des AP

      background :

      possibilité  d'indiquer des  pixels

      #000000 url(test.jpg)  no­repeat scroll center  top;

      Marges Description

      Propriété

      Exemple

      Marge supérieure

      margin­top :

      5px;

      Marge de droite

      margin­right :

      0.5em;

      Marge inférieure

      margin­bottom :

      2pt;

      Marge de gauche

      margin­left :

      0;

      Raccourci pour les marges

      margin :

       ­5px 0.5em 2pt 0; auto;  (alignement centré du  bloc)

      Espace intérieur entre  l'élément et la bordure  supérieure

      padding­top :

      3px;

      Espace intérieur entre  l'élément et la bordure  droite

      padding­right :

      0.25em;

      Espace intérieur entre  l'élément et la bordure  inférieure

      padding­bottom :

      0;

      Espace intérieur entre  l'élément et la bordure  gauche

      padding­left :

      2pt;

      Raccourci vers l'ensemble  des propriétés d'espace  intérieur

      padding :

      3px 0.25em 0 2pt;

      Bordures Description

      Propriété

      Valeur

      Epaisseur de la bordure

      border[­top ­left ­bottom  ­right]­width :

      10px; 2em;

      Epaisseur de la bordure

      border­width :

      10px 15px 15px 10px; (HDBG)

      Couleur de la bordure

      border[­top ­left ­bottom  ­right]­color :

      #RRGGBB;

      Style de la bordure

      border[­top ­left ­bottom  ­right]­style :

      solid; (pleine) dashed; (en  tirets) dotted; (en pointillés)  double; (double) ridge; inset;  outset; (en 3D)

      Effet arrondi (Mozzilla)

       ­moz­border­radius :

      Raccourci global les propriétés  de bordure

      border :

                 10px; 2em;               10px 10px 10px 10px; (HDBG) border: 1px 0 0 2px dotted  green;

      Position Description

      Propriété

      Valeur

      Propriétés

      display :

        none; (n'affiche pas le bloc)           block;  (force la propriété bloc)      inline; (force la  propriété en­ligne)     list­item; (force la  propriété en­ligne) table; (force la propriété  tableau)

      Affichage

      visibility :

      visible; hidden; (cache l'élément mais réserve un  espace pour son affichage)

      Position

      position :

      Distance au parent

      Profondeur d'affichage  (calque)

      top : / right : /  bottom : / left :

      static; (default ­ dans le flux) relative;  (décalage ­ dans le flux) absolute; (fixe ­ hors  du flux)   fixed; (fixe ­ hors du flux – noscroll)

       ­10px; 30%; 2em; (pas pour static)

      z­index :

      auto; 1000;

      Positionnement flottant

      float :

      left; right; none; (default)

      Efface le flottement

      clear :

      left; right; both; none; (default)

      Listes Action

      Propriété

      Valeur

      Type de puces et de  numérotation

      list­style­type :

      decimal, upper­roman,  lower­latin, disc,  circle, square ou none

      Permet de personnaliser  les puces avec une image

      list­style­image :

      url(image.png);

      Spécifie le retrait des  puces

      list­style­position :

      inside; outside;

      Raccourci global vers  les propriétés des  listes

      list­style :

      type position url();

      Curseurs Action Apparence du curseur

      Propriété cursor :

      Valeur default, pointer,  crosshair, help, wait,  text, move

      Blocs ­ Flux de document ­ Marges BORDER MARGIN

      margin top

      HEIGHT

      texte texte texte texte texte texte texte texte texte  PADDING texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  WIDTH texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte 

      margin  left left

      bloc A (marges)  top bloc A (marges + relatif) parent 

      bloc B

      PADDING MARGIN

      bloc A { width :  200px ;  float: left; }

      bloc A { width : 60% ;  float: left; }

      bloc C { width :  200px ;  float: right; }

      bloc B { width : 100% ; }

      bloc B { width : 100% ; clear: both; }

      parent 

      top

      left

      bloc A { position : absolute;  left : 20px; top : 20  px; }

      bloc B { width : 100% ;} bloc C { width : 100% ;}

      bloc C { width :  40% ;  float:  right; }

      top

      left

      bloc A { position : fixed;  left : 20px; top : 20  px; }

      bloc B { width : 100% ;} bloc C { width : 100% ;}

      Related Documents

      Pdf Memento Html Css
      June 2020 5
      Html-xhtml-css
      November 2019 9
      Html And Css
      November 2019 13
      Manual De Html Css
      May 2020 13
      Html Dan Css
      May 2020 9
      Memento
      July 2020 17

      Copyright © 2024 PDFCOKE.