L'Aide Mémoire Informatisé du petit Luc

Ceci est une ancienne révision du document !

- UTLISER UNE FEUILLE DE STYLE DANS UNE PAGE HTML5 -

Inclure une feuille de style dans le <head> d'un fichier HTML : <link rel=“stylesheet” href=“style.css” />

/* … */ Commentaires au milieu d'une feuille de style CSS

- SELECTIONNER DES BALISES -

balise1 permet d'appliquer les 'propriétés' ayant les 'valeurs' décrites à toutes les 'balises' {

 propriete: valeur;
 propriete: valeur;
 propriete: valeur;

}

balise1, balise2 les 2 balises auront les propriétés décrites {

propriete: valeur;

}

balise1 balise2 selectionne les balises 2 incluses dans les balises 1 {

propriete: valeur;

}

class=“ExempleStyle” attribut HTML qui permet de selectionner un style, peut être mis dans n'importe quelle balise HTML .ExempleStyle selectionne ttes les balises ayant pour class 'ExempleStyle' {

paramètre: valeur;

}

id=“” attribut HTML identique à class, mais ne peut être utilisé qu'une seule fois dqs la page (ancre ?) #id selectionne la balise ayant un 'id' unique {

paramètre: valeur;

}

balise[attribut] selectionne les 'balise' ayant un 'attribut' { }

balise[attribut=“exemple”] l'attribut doit avoir exactement la valeur “exemple” { }

balise[attribut*=“exemple”] la valeur de l'attribut doit contenir la valeur “exemple” { }

body s'applique sur toute la page, utile pour ajuster la couleur du fond { }

balise:hover au survol, la propriété est appliqué au survol avec la souris { }

balise:active au moment du clic balise:focus lorsque l'élément est selectionné balise:visited lorsque la page a été visitée

balise:requiered permet d'appliquer une mise en format à un champ d'un formulaire possédant cet attribut

  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.

- PARAMETRES COURANTS -

— TEXTE — 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)

— ARRIERE PLAN — 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

— BORDURES — 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)

— OMBRES — 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

————————— - MISE EN FORME DES BLOCS -

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

- TABLEAUX -

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

- LISTES -

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;
}

galerie CSS, transition..

/* Transitions to provide some eye candy */

webkit-transition: all ease-in 0.5s;
moz-transition: all ease-in 0.5s;
ms-transition: all ease-in 0.5s;
o-transition: all ease-in 0.5s;

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>

CSS Sprite : une seule image, on déplace le fond visible

#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;

L'Aide Mémoire Informatisé du petit Luc

Panneau latéral

Parcourir la mémoire du petit Luc

Linux World

Web World

Dev World

Another World

Le bout du monde

L'Aide Mémoire Informatisé du petit Luc

Outils pour utilisateurs

Outils du site

Panneau latéral

Parcourir la mémoire du petit Luc

Linux World

Web World

Dev World

Another World

Le bout du monde

Outils de la page