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