Différences

Ci-dessous, les différences entre deux révisions de la page.

--- css [2016/02/16 09:11]
luc
+++ css [2018/10/13 20:32]
@@ Ligne 1: / Ligne 1: @@
-====== CSS ======
-===== Astuces =====
-==== centrer verticalement ====
-=== cas de blocs de dimensions variables dans un bloc de dimension variable ===
-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''
-<code html>
-<div class="conteneurPrincipal">
-    <div class="blocVide"></div>
-    <div class="ElementAcentrer">
-        ...
-    </div>
-</div>
-</code>
-<code css>
-.blocVide {
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-}
-.ElementAcentrer {
-    display: inline-block;
-    vertical-align: middle;
-}
-</code>
-===== Le CSS à partir de zéro =====
-==== 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 HTML ====
-<code css>
-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.
-</code>
-==== PARAMETRES COURANTS ====
-=== TEXTE ===
-<code css>
-font-size:								spécifie la taille du texte
-px								spécifie la taille absolue du texte en pixel
-mm								spécifie la taille absolue du texte en mm, 1.5cm ...
-.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)
-</code>
-=== 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...
-px 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)
-.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:
-px								bordure arrondie
-px / 10px							permet de faire des ellipses
-x 20 px 15px 8 px					pour que chaque angle possède des arrondis différents (hautgauche hautdroite basdroite basgauche)
-=== OMBRES ===
-box-shadow:
-px 6px 0px black					ombre sur tout le bloc (décalage horizontal, décalage vertical, dégradé, couleur)
-text-shadow:
-px 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)
-%
-px
-height:
-min-width:
-max-height:
-padding:								marge intérieure du bloc
-px
-margin:									marge extérieure du bloc
-px
-	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
-px
-%
-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
-									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 id="images-box">
-    <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

Outils pour utilisateurs

Outils du site

Différences

Outils de la page