Ceci est une ancienne révision du document !
Cette page est antichronologique, elle commence par rescencer qques astuces, puis finit par un cours sur les bases du css. Il va de soi que les astuces nécessitent de connaître les bases du css :)
On va utiliser la propriété vertical-align: middle;
, qui ne s'applique qu'à des blocs inline (ou table-cell).
L'astuce consiste à utiliser un bloc vide faisant toute la hauteur du bloc parent, puis de déclarer ce bloc et le bloc à centrer comme inline-block et les aligner grâce à la propriété vertical-align
<div class="conteneurPrincipal"> <div class="blocVide"></div> <div class="ElementAcentrer"> ... </div> </div>
.blocVide { display: inline-block; height: 100%; vertical-align: middle; } .ElementAcentrer { display: inline-block; vertical-align: middle; }
Le CSS (Cascade Style Sheet) est un langage qui permet la mise en page d'un code HTML. Le côté HTML se focalise sur le contenu, le CSS sur la forme.
Inclure une feuille de style dans le <head> d'un fichier HTML :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> ... </html>
La syntaxe du CSS est grossièrement la suivante :
/* Ceci est un commentaire (multi-lignes) */ sélecteur { propriété; valeur; } /* * On notera les accolades pour délimiter la description lié à un sélecteur * le ; pour terminer la description d'une propriété * le : pour séparer à gauche le nom de la propriété, à droite la valeur qu'elle va prendre */
/* permet d'appliquer les 'propriétés' ayant les 'valeurs' décrites à toutes les 'balises' */ balise1 { propriete: valeur; propriete: valeur; propriete: valeur; } /*les 2 balises auront les propriétés décrites */ balise1, balise2 { propriete: valeur; } /* selectionne les balises 2 incluses dans les balises 1 */ balise1 balise2 { propriete: valeur; } /* Sélectionne tous les éléments ayant la même classe HTML : */ /* code html : <a Href="..." class="Exemple"> */ .ExempleStyle { paramètre: valeur; } /* Sélectionne l'élément -unique- ayant l'id défini */ /* code html : <a Href="lien" id="identifiant"> */ #identifiant { paramètre: valeur; } /* Sélectionne les 'balise' ayant un 'attribut' */ balise[attribut] { } /* l'attribut doit avoir exactement la valeur "exemple" */ balise[attribut="exemple"] { } /* la valeur de l'attribut doit contenir la valeur "exemple" */ balise[attribut*="exemple"] { } /* au survol, la propriété est appliqué au survol avec la souris */ balise:hover { } /* au moment du clic */ balise:active /* lorsque l'élément est selectionné */ balise:focus /* lorsque la page/lien a été visitée/cliqué */ balise:visited /* permet d'appliquer une mise en format à un champ d'un formulaire possédant cet attribut */ balise:requiered elem1 > elem2 : ira chercher tous les elem2 parmi les enfants directs de elem1, sans aller plus loin dans les sous-enfants ; elem1 + elem2 : sélectionnera tous les elem2 situés tout de suite après un elem1 ; elem1 ~ elem2 : pour chaque elem1, on va chercher tous les éléments elem2 suivant elem1 dans le même parent.
font-size: spécifie la taille du texte 14px spécifie la taille absolue du texte en pixel 14mm spécifie la taille absolue du texte en mm, 1.5cm ... 0.8em spécifie la taille relative, 0,8 fois la taille normale (em) xx-small valeur indiquant une taille relative très très petite x-small small medium large x-large xx-large font-family: spécifie la police utilisée, Tahoma,Arial,"Times New Roman"; si pas dispo utiliser la 2e, sinon la 3e etc.. font-style: mettre du texte en italique ou pas normal italic font-weight: mettre du texte en gras normal bold text-decoration: underline souligné line-through barré overline ligne au dessus blink clignotant none normal text-align: left center right justify color: red #FFFFFF rgb(240,200,143)
background-color:
red #FFFFFF rgb(240,200,143) rgba(255,210,200,0.5) rgba permet de définir l'opacité de la couleur de fond
background-image:
url("lien") le lien relatif l'est par rapport au fichier CSS et non au fichier HTML
background-attachment: permet de fixer le fond, on peut voir le texte “glisser” sur l'image, ou pas…
fixed scroll (par défaut)
background-repeat: permet de répéter le fond
no-repeat repeat-x repeat-y repeat (par défaut)
background-position: précise la position du fond…
30px 50px à 30 pixels de la gauche et 50 pixels du haut top top right par rapport au coin haut gauche de la page
opacity: permet de mettre des éléments en transparence (s'applique à tous les contenus de la balise selectionnée)
0.5; doit etre comprise entre 0 et 1
border: super-propriété, regroupe les propriétés suivantes (doit comprendre 3 valeurs) : border-width: border-color: border-style: qui peut prendre les caractéristiques :
none pas de bordure (par défaut) solid trait simple dotted pointillés dashed tirets double border double groove en relief ridge autre relief inset effet 3D enfoncé outset effet 3D surélevé
EXEMPLE : balise {
border: 3px blue dashed;
}
border-top/bottom/left/right: Ce sont aussi des superpropriétés
border-radius:
10px bordure arrondie 20px / 10px permet de faire des ellipses 10x 20 px 15px 8 px pour que chaque angle possède des arrondis différents (hautgauche hautdroite basdroite basgauche)
box-shadow:
6px 6px 0px black ombre sur tout le bloc (décalage horizontal, décalage vertical, dégradé, couleur)
text-shadow:
6px 6px 6px red; ombre sur le texte, sur chacun des caractères
width: définit la largeur du bloc (par exemple d'un p)
50% 250px
height:
min-width:
max-height:
padding: marge intérieure du bloc
50px
margin: marge extérieure du bloc
10px auto centre horizontalement le bloc dans la page
margin-top:
CONCEPT : il existe la fusion des marges VERTICALES, cela ne concerne que les BLOCK qui sont jointifs ou parents-enfants et sans autre mise en forme (padding, border…)
overflow: Gestion dépassement du texte du bloc
visible (par défaut) le texte est visible, même s'il dépasse les limites du bloc hidden Si le texte dépasse, il sera caché scroll si le texte dépasse, il y aura une barre de défilement auto c'est le navigateur qui décide, et qui mettra si nécessaire la barre de défilement
display transforme un type d'élement en un autre (inline → block)
inline élement d'une ligne, se placent les uns à côté des autres block se placent les uns sous les autres et redimensionnement possible inline-block se placent les uns à cotés des autres (inline), mais peuvent être redimensionnés none n'est pas affiché (ex: <head>)
vertical-align:
baseline top middle bottom 10px 50%
position: permet le positionnement d'un élément sur la page
absolute positionnement absolu dans la page (on doit ensuite le donner, par exemple en px) fixed identique à absolu, mais toujours visible même si on descend ds la page, c'est plutot un positionnement absolu dans l'écran relative par rapport à sa position normale
Exemple_de_positionnement_absolu {
position: absolute; right: 0 px; bottom: 15 px;
}
z_index: permet d'organiser l'affichage d'élément se superposant
1 le plus élevé est sur le dessus, il sera donc affiché par dessus les autres
table {
propriété: valeur; les propriétés propres aux tableaux sont les suivantes
}
border-collapse: gestion des bordures (intérieures et extérieures) du tableau
collapse les bordures sont collées entre elles seperate les bordures sont séparées
caption-side:
top définit l'emplacement du titre par rapport au tableau
list-style-type:
none permet de supprimer les puces des listes
/* GESTION DU MENU DEROULANT */
/*nav .sous_menu ul {
} nav .sous_menu li { display: none; width: 250px; border-radius: 5px; box-shadow: 2px 2px 5px #FFA468;
}
nav li:hover > .sous_menu li { display: block; background-color: #FFE2CC; z-index:2; }
/* Transitions to provide some eye candy */
display : none ; div[id^=image]:target .close { div[id^=image]:target { div[id^=image]:target .expand { div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }
<div class="holder"> <div id="image-1" class="image-lightbox"> <span class="close"><a href="#">X</a></span> <img src="1.jpg" alt="earth!"> <a class="expand" href="#image-1"></a> </div> </div>
#nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}
Par défaut toutes les images sont cachés grâce à notre bon vieux display:none, et nous allons les faire apparaître grâce à :target qui appliquera l’attribut display:block montrant notre bloc sélectionné. Ce qu’il faut savoir sur cette classe, c’est que quand vous cliquez sur un second élément avec une pseudo-class :target, les styles appliqués au précédent élément sont annulés.
opacity: 0.5;