/* toutes les balises b appartenant à la classe c */
b.c { propriété: valeur; }
/* la balise ayant l'id i et appartenant à la classe c */
#i.c { propriété: valeur; }
/* toutes les balises appartenant aux deux classes c1 et c2 mais pas celles appartenant seulement à l'une des deux */
.c1.c2 { propriété: valeur; }
Ou
/* toutes les balises appartenant à la classe c1 ou c2 */
.c1, .c2 { ... }
Enfant, descendant
/* toutes les balises b2 descendantes (enfants directes ou non) de balises b1 */
b1 b2 { propriété: valeur; }
/* toutes les balises b2 enfants directes (de 1er rang) de balises b1 */
b1>b2 { propriété: valeur; }
/* la balise b2 placée directement après une balise b1 au même niveau */
b1+b2 { propriété: valeur; }
/* toutes les balises b2 placées après une balise b1 au même niveau */
b1~b2 { propriété: valeur; }
/* toutes les balises ayant un attribut a quelque soit sa valeur */
[a] { propriété: valeur; }
/* toutes les balises n'ayant pas un attribut a */
:not([a]) { propriété: valeur; }
/* toutes les balises b ayant un attribut a quelque soit sa valeur */
b[a] { propriété: valeur; }
/* toutes les balises b ayant un attribut a de valeur v */
b[a=v] { propriété: valeur; }
/* toutes les balises b ayant un attribut a dont la valeur contient v1 seule ou séparée par des espaces */
b[a~=v1] { propriété: valeur; }
/* toutes les balises b ayant un attribut a dont la valeur commence par v1 */
b[a^="v1"] { propriété: valeur; }
/* toutes les balises b ayant un attribut a dont la valeur contient v1 */
b[a*="v1"] { propriété: valeur; }
Actions
/* Rédefinit les couleurs du texte sélécionné (Pour Firefox) */
::-moz-selection { background: black; color: white; }
Autres
/* toutes les balises b qui n'appartiennent pas à la classe c */
b:not(.c) { ... }
b:not(.c):not(.d) { ... } /* ni à la classe d */
/* toutes les balises b premiers fils de leur parent */
b:first-child
/* toutes les balises b derniers fils de leur parent */
b:last-child
/* toutes les balises b 2ème fils de leur parent */
b:nth-child(2)
/* même chose en CSS 2 : toutes les balises b 2ème fils de leur parent */
b:first-child + b { ... }
/* toutes les balises b multiple de 2: 0,2,4,... */
b:nth-child(2n) { ... }
/* toutes les balises b avant-derniers fils de leur parent */
b:nth-last-child(2)
/* toutes les 2ème occurrences de balises b (à la différence de nth-child seule les balises de type b sont prise en compte) */
b:nth-of-type(2) { ... }
/* toutes les avant-dernières occurrences de balises b */
b:nth-last-of-type(2)
/* toutes les occurrences de balises b sauf la première */
b:nth-of-type(n+2)
/* toutes les occurrences de balises b sauf la dernière */
b:nth-last-of-type(n+2)
/* Insert le contenu après chaque balise b */
b:after { content:... }
/* content:url(images/tape.gif);
content:"Texte"; */
/* Quand le champs est sélectionné */
input:focus { }
input:not(:focus) { }
Positionné par rapport à la fenêtre, ne bouge pas lors du scroll.
L'élément sort du layout et n'est plus considéré comme prenant de la place par rapport aux autres éléments.
#column {
position: fixed; /* par opposition à static */
top: 0; /* remonte l'élément au besoin */
background-color: #333333; /* force une couleur de fond au cas ou d'autres éléments viendrait à le chevaucher (scroll) */
}
relative
Déplace un élément par rapport à sa position normale.
Laisse un espace vide là ou l'élément aurait du se trouver.
absolute
Positionné par rapport au premier élément parent positionné, à défaut le conteneur initial.
L'élément sort du layout et n'est plus considéré comme prenant de la place par rapport aux autres éléments.
/* forcer une image à se redimensionner en fonction de son conteneur */
img {
max-width: 100%;
max-height: 100%;
}
Background-image
/* définit une couleur du fond, si on veut autre chose que blanc */
background-color: black;
background-image: url("mon-image.jpg");
/* n'afficher l'image qu'une seule fois */
background-repeat: no-repeat;
/* fixe l'image, elle ne se déplace plus lors de scroll */
background-attachment: fixed;
background-position: center;
background-size: 400px;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
/* décalage suivant X / décalage suivant Y / flou (0px par défaut) / couleur (noir par défaut) */
Retrait
/* Décalage à droite de la première ligne */
text-indent:10px;
/* Décalage à droite de toutes les lignes sauf la première */
text-indent:-10px;
padding-left:10px;
Il n'est pas possible à proprement parler de remplacer du texte en CSS, mais voici une astuce qui permet de faire sortir du flux le texte à remplacer et d'ajouter à la suite le nouveau texte.
/* Décalage à gauche du texte à remplacer */
#monlabel { text-indent: -10em; }
/* Ajout du nouveau texte avec un padding à gauche si besoin */
#monlabel:after { content: "Nouveau texte"; padding-left: 1em; }
/* Si la police DejaVu Sans n'est installé chez le client, la police suivante est utilisée
* sans-serif désigne la police sans-serif par défaut du système */
font-family: "DejaVu Sans", sans-serif;
/* taille */
font-size: xx-large x-large large medium small x-small xx-small;
font-size: 12px;
/* gras */
font-weight: bold;
/* italique */
font-style: italic;
@font-face {
font-family:'Nom du font';
font-weight:normal; /* bold */
font-style:normal; /* italic */
src:url('chemin/font.eot'); /* compatibilité IE */
src:local('font'), url('chemin/font.woff') format('woff');
/* chargement du font en local ou depuis l'url qui peut être relative aux dossiers du serveur */
}
relatif à la taille de la police de l'élément courant. Si la police est à 12px alors 1em = 12 px.
rem
relatif à la taille de la police de l'élément root.
vw
relatif en % à la largeur du viewport (taille de la fenêtre)
vh
relatif en % à la hauteur du viewport (taille de la fenêtre)
Débordement
/* définir une taille maximale */
max-width: 100px;
overflow: auto;
overflow
Comportement si le contenu déborde
visible
débordement autorisé (défaut)
hidden
les parties des éléments qui débordent sont coupées et masquées
scroll
les parties des éléments qui débordent sont coupées et une barre de défilement est ajoutée
auto
les parties des éléments qui débordent sont coupées et une barre de défilement est ajoutée si nécessaire
table
table {
width: 100%;
table-layout: fixed;
/* à combiner avec white-space: pre-wrap et word-wrap: break-word */
}
/* la suite ne semble pas nécessaire */
/* définir la taille des lignes */
table td:first-child {
width: 40px;
}
/* définir l'overflow sur la div contenue dans la cellule */
div.class {
overflow: auto;
}
texte
white-space: nowrap;
/* retour à la ligne entre les mots (comportement par défaut), puis coupe les mots qui dépassent */
word-wrap: break-word;
/* pas de retour à la ligne entre les mots, coupe les mots qui dépassent, */
word-break: break-all;
/* ajoute des points de suspension pour indiquer que le texte a été tronqué. À utiliser avec overflow: hidden */
text-overflow: ellipsis;
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap
Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is encountered
pre
Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the pre tag in HTML
pre-line
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
/* bordure simple autour de la table */
table { border: 1px solid black; }
/* bordure autour de la table et bordures autours des cellules */
table, th, td { border: 1px solid black; }
/* bordure unique autour de la table et des cellules */
table, th, td { border: 1px solid black; }
table { border-collapse:collapse; }
Alignement du texte dans sa cellule
/* aligner horizontalement le contenu de la cellule (left, right, center) */
td { text-align: center; }
/* aligner verticalement le contenu de la cellule (top, middle, bottom) */
td { vertical-align: middle; }
/* lorsque la souris se retrouve sur un élément de classe class,
le curseur devient une main, puis redevient une flèche une fois que la souris a quittée l'élément */
.class:hover {
cursor: pointer; /* finger */
cursor: default; /* arrow */
cursor: text;
cursor: wait; /* loader */
}
/* gradient de gauche a droite de white vers black */
background: white; /* pour les browsers qui ne supportent pas CSS3 */
background: linear-gradient(left, white 0%, black 100%); /* W3C */
background: -moz-linear-gradient(left, white 0%, black 100%); /* FF3.6+ */
background: -ms-linear-gradient(left, white 0%, black 100%); /* IE10+ */
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='black', GradientType=1);
background: -webkit-linear-gradient(left, white 0%, black 100%); /* Chrome10+,Safari5.1+ */
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(100%, black));
body {
/* supporté par Chrome, Edge, IE, Safari */
/* mais pas par Firefox ni Opera */
zoom: 2;
/* Pour Firefox transform scale peut être utilisé mais est appliqué après le rendu, alors que zoom est appliqué avant */
-moz-transform: scale(2); /* x2 */
-moz-transform-origin: 0 0; /* centrer le zoom */
}
div {
width: 100px;
transition: width 2s;
/* transition: property duration timing-function (ease par défaut) delay (0s par défaut); */
}
div:hover {
width: 300px;
}
div {
transition-property: top, left;
transition-duration: 2s;
transition-timing-function: linear;
/* linear, ease (ralenti un peu au début et plus à la fin), ease-in (ralenti au début),
ease-out (ralenti à la fin), ease-in-out (ralenti au début et à la fin) */
transition-delay: 2s;
}
margin-left: auto;
margin-right: auto;
/* pour une image */
display: block;
/* Autre solution (à mettre dans la balise contenante) */
text-align: center;
blur → distance de flou (0px par défaut, pas de flou)
spread → taille de l'ombre (0px par défaut, même taille que l'original)
color (noir par défaut)
inset → ombre externe (outset par défaut) ou interne (inset)
Remplacez une image
img {
width: 0; /* on masque l'ancienne image en réduisant sa taille à 0 */
height: 0;
padding: 32px; /* création d'un espace pour afficher la nouvelle image (ici 64x64) */
background: url("nouvelle-image.png");
}
Superposer 2 div
#div1, #div2 {
position: absolute; /* superpose les div */
width: 100%; /* ajuster la taille des div */
height: 100%;
text-align: center; /* centrer horizontalement le texte si les div en contiennent */
}
#div1 {
top: 50%; /* positionner verticalement la div1 */
}
Important
#id { display: none !important; }
Media
Permet d'appliquer un style en fonction du media :
screen → ordinateur
print → imprimante, pdf
@media print {
body { ... }
}
@media screen {
body { ... }
}
@media screen and (max-width : 320px){
body { ... }
}
@media screen and (min-width : 320px){
body { ... }
}
/* masque les pointillés */
a {
outline: none;
}
/* ne pas afficher le texte du lien en bleu */
a {
color: inherit;
}
/* ne pas souligner le texte */
a:hover {
text-decoration: none;
}
a:link {
color: cyan;
}
a:visited {
color: cyan;
}
Lien d'une couleur et souligné d'une autre couleur
<!-- si le lien est composé de span -->
<a href="...">
<span>...</span>
<span>...</span>
</a>
/* souligné bleu */
a, a:visited {
color: blue;
}
/* texte blanc */
a span {
color: white;
}
ul {
list-style-type: square; /* types prédéfinis: disc, circle, square */
list-style-image: url(bullet.gif);
}
/* pour une gestion plus fine des puces utiliser une background-image */
ul {
list-style-type: none;
list-style-image: none;
padding: 0;
margin: 0;
margin-left: .2em;
}
ul > li {
background-image: url(icon.svg);
background-size: 1em;
background-repeat: no-repeat;
background-position: 0 .2em;
padding-left: 1.4em;
}
Importer d'autres feuilles CSS
@import url("monstyle.css");
Debugger
Pour Firefox : add-on Firebug
Pour les autres navigateurs : Firebug Lite. Ajouter la fonction javascript dans un marque-page → aller sur la page à debugger et ouvrir le marque-page.
