Balises XHTML vues jusqu`à présent : CSS

Balises XHTML vues jusqu'à présent :
DOCTYPE (pas fermé)
html
head
title
body
style (type)
link (rel, type, href)
script (type, src)
1
h1 (un seul ds une page)
h2, … (+ ds une page)
p
1
a (href, title)
Listes :
ul
ol
li
attributs généraux :
class
id
title
<a href="#" >…</a>
<a href="#nomId">…</a> exemple : <a href="#conteneur">Haut page </a>
<a href=" http://www.cegep-matane.qc.ca/">Cégep de Matane</a>
<a href="conception.html">Conception</a>
<a href="mailto:[email protected]">Claudine</a>
dl
dt
dd
(puce)
(ordonné)
Texte & Mise en valeur :
strong
em
1
q
2
cite
3
blockquote (lang, cite)
4
commentaires :
<!-- html -->
/* css */
Type de liens :
Lien inactif :
Lien sur la même page (ancre) :
Lien externe (chemin absolu) :
Lien interne (chemin relatif) :
Courriel :
1
(autofermante)
balises vides :
(espace avant /)
meta
link
hr
img (src, alt, title)
br
Se prononce de façon
syllabique :
4
acronym (lang, title)
Se prononce comme des
lettres :
5
abbr (lang, title)
2
courte citation en ligne
source de la citation (référence)
acronym (syllabe comme acronym, exemple : ONU, SIDA)
Tableaux :
Table (cellspacing,
cellpadding,
summary,border)
caption
Conteneur générique :
div
(de type bloc)
span (de type inline)
(liste définition)
(terme. définition)
(desc. définition)
thead
tfoot
tbody
sup
sub
pre
code
dfn
2
5
del
(supprimer)
ins
(insérer)
kbd (entrée clavier)
samp (sortie code info)
var
bdo (sens de lecture/dir)
bloc de citation (citation longue)
abbr (lettre comme abbr, exemple : CIA, XHTML)
tr
th (rowspan, colspan)
td (rowspan, colspan)
Entités :
&nbsp; (espace insécable)
&gt; (>)
&lt: (<)
&amp: (&)
&copy; (©)
Lier le fichier CSS au HTML : <link rel="stylesheet" type="text/css" href="css/style.css" />
CSS : Type de sélecteurs à savoir pour l'examen :
h1 ou div (balise)
ul ul (éléments imbriqués)
#nomId (par id seul)
p#nomId (par balise et id)
h2, p (groupe de
.nomClasse (par classe)
p.nomClasse (par balise
et classe)
Mis à jour : 31 août 2010
sélecteurs)
Pseudo-classes :
(Ordre : L V H A)
a:link
a:visited
a:hover
a:active
non demandé à ex:
* (universel)
div > p
#div1 + div
etc.
peut être aussi :
a#nomId:link
a#nomId:visited
a#nomId:hover
a#nomId:active
XHTML-CSS-deja-vus_mi-session.docx
1/3
Propriétés CSS et certaines valeurs :
background
background-color
background-image
background-position
background-repeat
(no-repeat, repeat,
repeat-x, repeat-y)
Marges externes :
margin: 0, auto;
2
margin: auto;
margin-top
margin-right
margin-bottom
margin-left
1
width
height
color
display: (inline, block)
list-style
list-style-type (voir +bas)
list-style-image
border:
border-top
border-right
border-bottom
border-left
border-width
border-style
border-color
border-collapse:
(collapse, separate)
font:
font-family
font-size
font-variant (small-caps,
outline: none;
position: (static, relative,
absolute, fixed)
normal)
font-weight (graisse de la
text-align: (center, right,
police : bold, normal, etc.)
left, justify, etc.)
text-decoration (none,
letter-spacing
line-height
underline, line-through, etc.)
Cacher un élément comme
une bannière :
text-indent: -9999px;
Marges internes :
padding
padding-top
padding-right
padding-bottom
padding-left
1
margin: 0 auto; sert à centrer le conteneur dans la page
2
margin: auto; sert à centrer un tableau en autres…
Exemple d'une liste à puces avec une image :
-
ul { list-style-image:: url (../images/puce.gif); }
ul.fleche { list-style-image:: url (../images/fleche.gif); }
sélecteur avec la balise (tous les ul ds site)
sélecteur avec balise et classe (spécifique)
Note : à partir du css pour aller dans le dossier images, il faut remonter d'un niveau avec les 2 points
(../)
Les raccourcis (seulement ceux qu'on a déjà vus) :
-
background: background-color, background-image, background-repeat
Valeur possible pour background-repeat : repeat, repeat-x, repeat-y, no-repeat (par défaut : repeat)
- Exemple : background: #000 url(../images/nomImage.jpg) no-repeat;
-
-
border: border-width, border-style, border-color
- Exemple : border: 2px solid #fcc;
(ou #ffcccc)
-
font: font-style, font-weight, font-size, font-family
- Exemple : font: italic bold 12px "Lucida Grande", sans-serif;
-
list-style: list-style-type, list-style-image, list-style-position
- Exemple : list-style: square url(../images/puce.gif) inside;
-
margin: margin-top, margin-right, margin-bottom, margin-left
(en ordre, marges externes)
- Exemple :
margin: 10px 0 10px 5px;
/ margin: 10px; (toutes les marges externes à 10px)
-
padding: padding-top, padding-right, padding-bottom, padding-left (en ordre, marges internes)
- Exemple :
padding: 10px 0 10px 5px; / margin: 5px; (toutes les marges internes à 5px)
Mis à jour : 28 septembre 2015
XHTML-CSS-deja-vus_mi-session.docx
2/3
Types de puces



Les listes à puces non ordonnées : ce sont des listes à puce de base. <ul>
Les liste à puces ordonnées : les puces disposent d'un numéro et sont donc ordonnées. <ol>
Les listes de définitions : elles ne contiennent pas de puces, mais vont permettre de classifier
l'information plus facilement. <dfn> (non à l'examen)
La propriété list-style-type (les valeurs les plus utilisées)
Pour une liste à puce (ul) peut prendre la valeur de :
- disc : gros point plain (par défaut pour ul de premier niveau).
- circle : gros point creux.
- square : petit carré.
- none : aucun.
- inherit, hérite de la propriété de son parent (css 2) (non vu, non à l'examen)
Pour une liste ordonnée décimale (ol) peut prendre la valeur de :
- decimal : Chiffres arabes, 1, 2, 3 (par défaut pour ol de premier niveau).
- decimal-leading-zero: 01, 02, 03.
- none : aucune.
- inherit, hérite de la propriété de son parent (css 2) (non vu, non à l'examen)
Pour une liste ordonnée alphabétique (ol) peut prendre la valeur de :
- lower-roman : Chiffres romain en minuscules, i, ii, ii.
- upper-roman : chiffres romain en capitales, I, II, III.
- lower-alpha : lettres en minuscules, a, aa, aaa.
- upper-alpha : lettres en capitales, A, AA, AAA.
- none : aucune.
- inherit, hérite de la propriété de son parent (css 2) (non vu, non à l'examen)
Mis à jour : 28 septembre 2015
XHTML-CSS-deja-vus_mi-session.docx
3/3