CSS3 Memo Flashcards
inclure une feuille de style
inclure une feuille de style
commentaire
/comm/
style sur plusieurs balises
h1, h2
commentaire
/comm/
style sur plusieurs balises
h1, h2
une balise qui suit une autre balise
h1 + p
une balise dans une autre balise
h1 em
balise qui possèdent un autre attribut
a[title]
les 2 balises universelles et leur spécificités
<div> est de type block
| <span> est de type in-line</span></div>
taille de police et unité
font-size:1em;
nom de police
font-family:{arial, sans-serif;};
nom police type time
serif
nom police type arial
sans-serif
police en 2 mots
“arial black”
police à télécharger
@font-face{
font-family:’nomde ma police’;
scr: url(dossier/’mapolice.ext’);
}
italique, oblique, normal
font-style:italic;
gras
font-weight:bold; /normal/
souligné, non souligné, barré, ligne au dessus, clignotz
text-decoration : none; underline, line-through, overline, blink
maj/min
text-transform: lowercase
uppercase
alignement de texte
+warning
text-align: justify left right center ne fonctionne que sur les balises de type block
comment faire flotter une image
<p><img></img></p>
couleur de texte
color:#000000;
couleur de fond
background-color:#000000;
couleur avec opacité
color: rgba(200,100,50,0.5);
image de fond au body par exemple
+warning
body{
background-image:url(“img.jpg”);
}
attention l’adresse de l’image est l’adresse par rapport au fichier css
propriétés d’image d’arrière plan :
emplacement
comportement
répétition
background-position : top right;
background-attachment : fixed;
background-repeat : no-repeat; (repeat=mosaique, repeat-x, repeat-y)
superprop image de fond
body{
background : url(“img.jpg”) fixed no-repeat top right;
bordure super propriété
border: 3px blue dashed
type de bordure 8
solid, dotted, dashed, double, groover, ridge, inset, outset
arrondir une bordure
border-radius:10px
arrondir un bloque sur les 4 côté
border-radius: 10px 5px 0px 5px;
courbe elliptique
border-radius:10px/20px
ombre à un bloque
box-shadow{6px 6px 0px black}
H V dégradé couleur
ombre à un texte
p{
text-shadow :2px 1px 3px black}
liens 4 pseudo format
a: hover survol
a: active au moment du clic
a: focus quand élement sélectionné (formulaire)
a: visited lien consulté
