Language css

    css  
style="border:xxx;" dans la page html
<link rel="stylesheet" href="style.css" /> vers une page css





  les selecteurs simples 
   selecteur   
   definition  
   exemple   
.class{} selectionne une class .menue {}
#id{} Selectionne une id #menue1
*{} selectionne tout les éléments *{}
element{} selectionne l'élément p{}
element1,element{} selectionne un élément1 et un autre élément div, p
element1 element2 selectionne tout les élément2 à l'intérieur d'un élément 1 div p
element1>element2 selectionne tout les élément2 dont le parent est un élément1 div > p
element1+element2 selectionne tout les élément2 placé immédiatement après un élément1 div+p
element1~element2 electionne tout les élément2 précédé par un élément1 p ~ ul
  les selecteurs d'attibuts 
[attribute] selectionne tout les éléments qui ont l'attribut target [target]
[attribute=value] selectionne tout les éléments dont l'attribut target="_blank" [target=_blank]
[attribute~=value] selectionne tout les éléments dont l'attribut contient le mot flower [title~=flower]
[attribute|=value] selectionne tout les éléments dont l'attribut commence par en [lang|=en]
[attribute^=value] selectionne tout les éléments a dont l'attribut href commence par http a[href^="https"]
[attribute$=value] selectionne tout les éléments a dont l'attribut href fini par .pdf a[href$=".pdf"]
[attribute*=value] electionne tout les éléments a dont l'attribut href contient le sous mot:"je suis ici" a[href*="je suis ici"]
  les selecteurs d'action 
:active selectionne le lien actif a:active
::after insert quelque chose après chaque contenue de l'éléments

p::after
::before insert quelque chose avant chaque contenue de l'élément

p::before
:checked selectionne chaque élément input activé input:checked
:disabled selectionne chaque élément input désactivé input:disabled
:empty selectionne chaque éléments

qui n'a pas d'enfants (le texte compris)

p:empty
:enabled selectionne chaque elements input activé input:enabled
:first-child selectionne chaque elements

qui est l'enfant

p:first-child
::first-letter selectionne la premiere lettre de chaque elements

p::first-letter
::first-line selectionne la première ligne de chaque elements

p::first-line
:first-of-type selectionne tout les éléments

qui sont les premiers éléments

de leurs parents

p:first-of-type
:focus selectionne l'elements input qui est en visée de la sourie input:focus
:hover selectionne l'elements quand la sourie est au dessu a:hover
:in-range selectionne les élements input qui ont une valeur sans le rang spécifique input:in-range
:invalid selectionne les élements input qui ont une valeur invalide input:invalid
:lang(language) selectionne les élements

qui on un attribut égale à "it" (Italian)

p:lang(it)
:last-child selectionne chaques élements

qui sont les derniers fils de leurs parents

p:last-child
:last-of-type selectionne chaque éléments

qui sont les derniers éléments

de leurs parents

p:last-of-type
:link selectionne tout les liens non visités a:link
:not(selector) selectionne tout les éléments qui ne sont pas des éléments

:not(p)
:nth-child(n) selectionne tout les éléments

qui sont le second enfants de leurs parents

p:nth-child(2)
:nth-last-child(n) p:nth-last-child(2)
:nth-last-of-type(n) p:nth-last-of-type(2)
:nth-of-type(n) p:nth-of-type(2)
:only-of-type selectionne tout les éléments

qui sont les seuls éléments

de leurs parents

p:only-of-type
:only-child selectionne tout les éléments

qui sont les seuls fils de leurs parents

p:only-child
:optional selectionne tout les éléments input qui n'ont pas d'attribut "required" input:optional
:out-of-range Sélectionne les éléments input avec une valeur en dehors d'une plage spécifiée input:out-of-range
:read-only selectionne les éléments input qui ont l'attribut "readonly" input:read-only
:read-write selectionne les éléments input qui n'ont pas l'attribut "readonly" spécifié input:read-write
:required selectionne les éléments input avec l'attribut "required" spécifié input:required
:root Selects the document's root element :root
::selection sélectionne la partie d'un élément sélectionné par un utilisateur ::selection
:target Sélectionne l'élément actuel #news actif (cliqué sur une URL contenant ce nom d'ancrage) #news:target
:valid Sélectionne tous les éléments input avec une valeur valide input:valid
:visited selectionne tout les liens visités a:visited





   positionnement des éléments 
   propriété   
   Attributs   
   Valeurs     
   definition    
   exemples/description    
position:
la position par rapport aux autres éléments
static
absolute
fixed
relative
initial
inherit
Valeur par défaut. Les éléments sont en ordre
L'élément est positionné par rapport à son parent
l'élément est positionné par rapport à la fenetre
L'élément est positionné par rapport à sa position actuelle
Définit cette propriété à sa valeur par défaut
Hérite de cette propriété de son élément parent
position: absolute;
left: 100px;
top: 150px;
margin-
la marge extérieur (haut/droite/bas/gauche)
top/right/bottom/left length
auto
initial
inherit
spécifie la longueur de la marge
automatique
valeur par défaut
Hérite de son élément parent
margin: 0 0 30px 0;
margin-bottom:10px;
border-
la bordure
width medium
thin
thick
length
initial
inherit
bordure moyenne par défaut
Spécifie une bordure mince
Spécifie une bordure épaisse
Permet de définir l'épaisseur de la bordure
Définit cette propriété à sa valeur par défaut
Hérite de cette propriété de son élément parent
border-width:thin medium thick 10px;
style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
initial
inherit
par default
Le même que "aucun" et résolution de conflit avec les table
traits
pointillés
pleinne
double
bordure 3d (dépend de la couleur de la bordure)
en crête (dépend de la couleur de la bordure)
enfoncement
qui ressort
Définit cette propriété à sa valeur par défaut
Hérite de cette propriété de son élément parent
border-style:dotted;
color color
transparent
initial
inherit
sécifie une couleur de fond
indique que le fond peut être transparent
Définit cette propriété à sa valeur par défaut
Hérite de cette propriété de son élément parent
initial attribue la valeur initiale
inherit attribue la valeur hérité
padding-
la marge intérieur (haut/droite/bas/gauche)
top/right/bottom/left length
auto
initial
inherit
spécifie la longueur de la marge
automatique
valeur par défaut
Hérite de son élément parent
margin: 0 0 30px 0;
margin-bottom:10px;






   la mise en forme des éléments 
   propriété   
   Attributs   
   Valeurs     
   definition    
   exemples/description    
display inline
none
inline-block
dispose en ligne
l'élément est caché
dispose tout d'in block
display: none;
background-
le fond :défini si une image est lié au scrolling de la page ou non
attachment scroll
fixed
local
initial
inherit
le fond est lié à l'élément
Le fond est fixé par rapport à la fenêtre
Le fond scroll avec le contenu de l'élément
Définit cette propriété à sa valeur par défaut
Hérite de cette propriété de son élément parent
color color
transparent
initial
inherit
sécifie une couleur de fond
indique que le fond peut être transparent
Définit cette propriété à sa valeur par défaut
Hérite de cette propriété de son élément parent
image none
url('URL')
initial
inherit
pas d'image
indique l'adresse de l'image
Définit cette propriété à sa valeur par défaut
Hérite de cette propriété de son élément parent
position "left top/ left center/ left bottom/ right top/ right center/ right bottom/ center top/ center center/ center bottom/
x% y%
xpos ypos
initial
inherit"
si une valeur est spécifiée les autres seront centrée
horizontales/verticale
horizontales/verticale
Hérite de cette propriété de son élément parent
repeat repeat
repeat-x
repeat-y
no-repeat
initial
inherit
l'image est répété verticalement et horizontalement
repete horizontalement
repete verticalement
pas de répétition
Définit cette propriété à sa valeur par défaut
Hérite de cette propriété de son élément parent
font-
la mise en forme du texte
style normal
italic
oblique
Valeur par défaut.
incliné vers la droite
incliné vers la gauche
font-style: oblique;
variant normal
small-caps
Valeur par défaut.
en minuscule
font-variant: small-caps;
weight normal
bold
bolder
lighter
100/200 etc…
Valeur par défaut.
gras
très gras
fin
400 normal/700=gras
font-weight: 900;
size normal
medium
xx-small
x-small
small
large
x-large
xx-large
smaller
larger
length
%
Valeur par défaut.









px,cm, etc…
en fonction de l'élément parent
font-weight: 900;
family family-name Une liste prioritaire de noms de famille de polices et / ou de noms de famille génériques font-family: "Times New Roman", Georgia, Serif;
font: caption Utilise la police utilisée par les contrôles sous-titrés (comme les boutons, les menus déroulants, etc.) font:caption;
font: icon Utilise la police utilisée par les étiquettes d'icône font:icon;
font: menu Utilise les polices utilisées par les menus déroulants font:menu;
font: message-box Utilise les polices utilisées par les boîtes de dialogue font:message-box;
font: small-caption Une version plus petite de la police de légende font:small-caption;
font: status-bar Utilise les polices utilisées par la barre d'état font:status-bar;
text-decoration none
underline
overline
line-through
aucune mise en forme
Définit une ligne en dessous du texte
Définit une ligne au-dessus du texte
Définit une ligne dans le texte
text-decoration: none






   l'animation 
transform: none|transform-functions|initial|inherit;
syntaxe selon le navigateur -webkit-transform
-ms-transform
-moz-transform
-webkit-transform
-o-transform
google
internet-explorer
firefox
safarie
opéra
transform: rotate(7deg);
transforme :
none Définit qu'il ne devrait pas y avoir de transformation
matrix(n,n,n,n,n,n) Définit une transformation 2D, en utilisant une matrice de six valeurs
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Définit une transformation 3D, utilisant une matrice 4x4 de 16 valeurs
translate(x,y) Définit une transformation 2D
translate3d(x,y,z) Définit une transformation 3D,
translateX(x) Définit une traduction, en utilisant uniquement la valeur pour l'axe des X
translateY(y) Définit une traduction, en utilisant uniquement la valeur pour l'axe des Y
translateZ(z) Définit une traduction 3D, en utilisant uniquement la valeur pour l'axe Z
scale(x,y) Définit une transformation de l'échelle 2D
scale3d(x,y,z) Définit une transformation de l'échelle 3D
scaleX(x) Définit une transformation d'échelle en donnant une valeur pour l'axe des X
scaleY(y) Définit une transformation d'échelle en donnant une valeur pour l'axe des Y
scaleZ(z) Définit une transformation d'échelle en donnant une valeur pour l'axe des Z
rotate(angle) Définit une rotation en 2D, l'angle est spécifié dans le paramètre
rotate3d(x,y,z,angle) Défini une rotation 3D
rotateX(angle) Définit une rotation 3D le long de l'axe des X
rotateY(angle) Définit une rotation 3D le long de l'axe des Y
rotateZ(angle) Définit une rotation 3D le long de l'axe des Z
skew(x-angle,y-angle) Définit une transformation en inclinaison 2D le long de l'axe X et Y
skewX(angle) Définit une transformation en inclinaison 2D le long de l'axe des X
skewY(angle) Définit une transformation en inclinaison 2D le long de l'axe des Y
perspective(n) Définit une vue en perspective d'un élément 3D transformé
transition :
transition: property duration timing-function delay|initial|inherit; -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
transition-property Spécifie le nom de la propriété CSS pour lequel l'effet de transition est destiné
transition-duration Spécifie le nombre de secondes ou de millisecondes que l'effet de transition prend pour compléter
transition-timing-function Spécifie la courbe de vitesse de l'effet de transition
transition-delay Définit quand l'effet de transition commencera
rajouter display et texte decoration