PDF Memento HTML CSS

XHTML 1.
Page XHTML 1.0 transitional
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ma page</title>
<! type de document et de caractères >
<meta httpequiv="contenttype" content="text/html; charset=UTF8" />
<! meta donnees pour les moteurs de recherche >
<meta name="description" content="Titre" />
<meta name="author" content="P. VINCENT" />
<meta name="keywords" lang="fr" content="mot1, mot2" />
<meta name="robots" content="all" />
<! feuilles de style >
<link rel="stylesheet" type="text/css" media="screen" href="feuille.css" />
<style type= "text/css">
/*Mes styles*/
</style>
<! javascript >
<script type="text/javascript" src="script.js" />
<script type="text/javascript">
/*Mon script*/
</script>
<! flux rss >
<link rel="alternate" type="application/rss+xml"
href="spip.php?page=backend" title="mon site" />
<! favicon >
<link rel="shortcut icon" type="image/png" href="/dist/favicon.png" />
</head>
<body>
<div id="conteneur">
<div id="entete"></div>
<div id="col_gauche"> </div>
<div id="col_droite"> </div>
<div id="bas_page"></div>
</div>
</body>
</html>
Les balises de type bloc
Les balises de type bloc
Balise Signification Exemple
Balise bloc mère du corps de la
<body> page, c'est le conteneur <body>...</body>
principal
<div> Conteneur de blocs <div>...</div>
<p> Paragraphe <p>to be<br />or not to be ?</p>
<h1> ... <h6> Titre de niveau 1 à 6 <h1>titre</h1>
<blockquote lang="fr" cite="De l'âme,
Aristote">
<blockquote> Marque une citation
Texte texte texte
</blockquote>
<pre>
Affiche exactement ce qu'on y to be
<pre>
mets (tabulations,sauts) or not to be
</pre>
<ul> ou <ol>
<li>Le XHTML est accessible</li>
Liste énumérative <ul> et liste
<ul>,<ol>,<li> <li>Le XHTML est bien
numérotée <ol>
structuré</li>
</ul> ou </ol>
<dl>
<dt>Développeur</dt>
<dd>Un développeur développe</dd>
<dl>,<dd>,<dt> Liste de définition
<dt>Web</dt>
<dd>Réseau maillé de serveurs</dd>
</dl>
<table border="1" width="90%"
height="300px">
<tr>
<th>Poisson</th>
<td>20 euros</td>
<td>500 grammes</td>
<table>,<th>,<tr>,<td> Tableaux </tr>
<tr>
<th>Viande</th>
<td>15 euros</td>
<td>900 grammes</td>
</tr>
</table>
<form action="form_action.asp"
method="get">
First name: <input type="text"
<fieldset>, <form> Formulaire interactif name="fname" /><br />
<input type="submit" value="Submit" /
>
</form>
<img src ="planets.gif" width="145"
height="126" alt="Planets"
usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape="rect"
<map> 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" />
</map>
Liste des balises de type en-ligne
Liste des balises de type en-ligne
Balise Signification Exemple
<span> Conteneur enligne <span>texte</span>
<a> Liens <a href="url_destination" title="info">texte</a>
<img src="url_source" alt="texte alternatif"
<img /> Images
title="info"/>
<br /> Saut de ligne <br />
Mise en intonation du <em>texte important</em> , <strong>texte
<em>, <strong>
texte important2</strong>
<abbr>, <acronym>, Infobulle, citation
<acronym title="info">texte</acronym>
<cite>, <q>, <dfn> et définition
Suppression / ajout
<del>, <ins> <del>texte</del>
de texte
<kbd>, <code>,
Instruction et code <code>texte</code>
<samp>, <var>
<sub>, <sup> Indices et exposants <sup>texte</sup>
<object type="application/xshockwaveflash"
data="s.swf" width="" height="">
Animation multimédia
<object> <param name="movie" value="s.swf" />
embarquée
<param name="quality" value="high" />"
</object>
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 Description

"Trebuchet MS", arial, applique les polices par ordre
Choix de la police fontfamily : décroissant ; mettre les noms avec
sansserif; espace entre ""
préférer em et % pour hériter des
Taille de la police fontsize : 10px; 1.2em; 90%; valeurs des éléments parents
silver; #0033FF;
Couleur color :
transparent;
Orientation de la
fontstyle : normal; italic; oblique;
police
Epaisseur fontweight : bold; bolder; normal;
none; underline;
Soulignement textdecoration :
overline; linethrough;
none; capitalize; capitalize: première lettre
Mise en majuscule texttransform : uniquement.
uppercase; lowercase;
left; right; center;
Alignement du texte textalign :
justify;
normal; 1.2em; 90%;
Hauteur de ligne lineheight :
10px;
Espacement entre les
letterspacing : normal; 2px;
lettres
Espacement entre les
wordspacing : normal; 3px;
mots
fontstyle, fontvariant, font
Raccourci font : weight, fontsize/lineheight, p { font: bold 12px/24px verdana }
fontfamily
Arrières plans
Action Propriété Valeur Notes
Couleur d'arrièreplan backgroundcolor : "#RRGGBB";
Image d'arrièreplan backgroundimage : url(http://url);
Répétition de l'arrière repeat; repeatx;
backgroundrepeat :
plan repeaty; norepeat;
Spécifie si l'image
reste fixe avec les backgroundattachment : scroll; fixed;
déplacements de l'écran
Position de l'image par possibilité
top; middle; bottom;
rapport au coin backgroundposition : d'indiquer des
left; center; right;
supérieur gauche pixels
#000000 url(test.jpg)
Raccourci global vers
background : norepeat scroll center
les propriétés des AP
top;
Marges
Description Propriété Exemple
Marge supérieure margintop : 5px;
Marge de droite marginright : 0.5em;
Marge inférieure marginbottom : 2pt;
Marge de gauche marginleft : 0;
5px 0.5em 2pt 0; auto;
Raccourci pour les marges margin : (alignement centré du
bloc)
Espace intérieur entre
l'élément et la bordure paddingtop : 3px;
supérieure
l'élément et la bordure paddingright : 0.25em;
droite
l'élément et la bordure paddingbottom : 0;
inférieure
l'élément et la bordure paddingleft : 2pt;
gauche
Raccourci vers l'ensemble
des propriétés d'espace padding : 3px 0.25em 0 2pt;
intérieur
Bordures
Description Propriété Valeur
border[top left bottom
Epaisseur de la bordure 10px; 2em;
right]width :
Epaisseur de la bordure borderwidth : 10px 15px 15px 10px; (HDBG)
border[top left bottom
Couleur de la bordure #RRGGBB;
right]color :
solid; (pleine) dashed; (en
border[top left bottom tirets) dotted; (en pointillés)
Style de la bordure
right]style : double; (double) ridge; inset;
outset; (en 3D)
10px; 2em;
Effet arrondi (Mozzilla) mozborderradius :
10px 10px 10px 10px; (HDBG)
Raccourci global les propriétés border: 1px 0 0 2px dotted
border :
de bordure green;
Position
Description Propriété Valeur
none; (n'affiche pas le bloc) block;
(force la propriété bloc) inline; (force la
Propriétés display : propriété enligne) listitem; (force la
propriété enligne) table; (force la propriété
tableau)
visible; hidden; (cache l'élément mais réserve un
Affichage visibility :
espace pour son affichage)
static; (default dans le flux) relative;
Position position : (décalage dans le flux) absolute; (fixe hors
du flux) fixed; (fixe hors du flux – noscroll)
top : / right : /
Distance au parent 10px; 30%; 2em; (pas pour static)
bottom : / left :
Profondeur d'affichage
zindex : auto; 1000;
(calque)
Positionnement flottant float : left; right; none; (default)
Efface le flottement clear : left; right; both; none; (default)

Listes
Action Propriété Valeur
decimal, upperroman,
Type de puces et de
liststyletype : lowerlatin, disc,
numérotation
circle, square ou none
Permet de personnaliser
liststyleimage : url(image.png);
les puces avec une image
Spécifie le retrait des
liststyleposition : inside; outside;
puces
Raccourci global vers
les propriétés des liststyle : type position url();
listes
Curseurs
Action Propriété Valeur
default, pointer,
Apparence du curseur cursor : crosshair, help, wait,
text, move
Blocs Flux de document Marges
BORDER
MARGIN margin top
texte texte texte texte texte texte texte texte texte
PADDING margin
texte texte texte texte texte texte texte texte texte left
left bloc A (marges)
top
HEIGHT
texte texte texte texte texte texte texte texte texte bloc A (marges + relatif)
WIDTH
texte texte texte texte texte texte texte texte texte parent
texte texte texte texte texte texte texte texte texte bloc B
PADDING
MARGIN
bloc A bloc C bloc A bloc C

{ width : { width : { width : 60% ; { width :
200px ; 200px ; float: left; } 40% ;
float: left; } float: right; } float:
right; }
bloc B
{ width : 100% ; }
bloc B
{ width : 100% ;
clear: both; }
parent
top bloc B bloc B

top
{ width : 100% ;} { width : 100% ;}
bloc A bloc A
{ position : absolute; { position : fixed;
left left : 20px; top : 20 bloc C left left : 20px; top : 20 bloc C
px; } { width : 100% ;} px; } { width : 100% ;}

PDF Memento HTML CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

PDF Memento HTML CSS

Încărcat de

Drepturi de autor:

Formate disponibile

XHTML 1.

<div> Conteneur de blocs <div>...</div>

<p> Paragraphe <p>to be<br />or not to be ?</p>

<h1> ... <h6> Titre de niveau 1 à 6 <h1>titre</h1>

<span> Conteneur en­ligne <span>texte</span>

<a> Liens <a href="url_destination" title="info">texte</a>

<br /> Saut de ligne <br />

<sub>, <sup> Indices et exposants <sup>texte</sup>

bal1, bal2, bal3 { }

bal1 bal2 bal3 { }

bal1 > bal2 { }

Action Propriété Valeur Description

Epaisseur font­weight : bold; bolder; normal;

Couleur d'arrière­plan background­color : "#RRGGBB";

Image d'arrière­plan background­image : url(http://url);

Marge supérieure margin­top : 5px;

Marge de droite margin­right : 0.5em;

Marge inférieure margin­bottom : 2pt;

Epaisseur de la bordure border­width : 10px 15px 15px 10px; (HDBG)

Positionnement flottant float : left; right; none; (default)

Efface le flottement clear : left; right; both; none; (default)

Action Propriété Valeur

bloc A bloc C bloc A bloc C

top bloc B bloc B

S-ar putea să vă placă și

<span> Conteneur enligne <span>texte</span>

Epaisseur fontweight : bold; bolder; normal;

Couleur d'arrièreplan backgroundcolor : "#RRGGBB";

Image d'arrièreplan backgroundimage : url(http://url);

Marge supérieure margintop : 5px;

Marge de droite marginright : 0.5em;

Marge inférieure marginbottom : 2pt;

Epaisseur de la bordure borderwidth : 10px 15px 15px 10px; (HDBG)