MEMENTO CSS / BOOTSTRAP

MEMENTO CSS / BOOTSTRAP
1
SRUCTURE DE BASE :
3
DECLARATION D’UNE CLASSE :
3
DECLARATION D’UNE CLASSE DEDIEE A UNE BALISE :
3
DECLARATION D’UN ID :
3
LES SELECTEURS CSS :
4
FORMATAGE DU TEXTE :
4
COULEURS ET FONDS :
5
PROPRIETES BLOCK ET INLINE-BLOCK :
6
POSITIONNEMENT ET AFFICHAGE :
7
PROPRIETES DES LISTES :
8
LES MEDIA QUERIES :
8
FEUILLES DE STYLES POUR INTERNET EXPLORER :
9
BOOTSTRAP :
10
Comment ajouter Bootstrap ?
10
La grille Bootstrap mais c’est quoi ?
10
Grille Fluide ?
10
2
Sructure de base :
Balise
{
propriété1 : valeur1 ;
propriété2 : valeur2 ;
propriété3 : valeur3 ;
}
Déclaration d’une classe :
.Nom de ma classe
{
propriété1 : valeur1 ;
propriété2 : valeur2 ;
propriété3 : valeur3 ;
}
Déclaration d’une classe dédiée à une balise :
Balise.Nom de ma classe
{
propriété1 : valeur1 ;
propriété2 : valeur2 ;
propriété3 : valeur3 ;
}
Déclaration d’un id :
#Nom de l’id
{
propriété1 : valeur1 ;
propriété2 : valeur2 ;
propriété3 : valeur3 ;
}
3
Les sélecteurs CSS :
p a{ } => Modifiera toutes les balises <a> contenues dans toutes les balises <p>
h1 + p {} => Modifiera la première balise <p> situées après une balise <h1>
p[title]{} => Modifiera toutes les balises <p> qui ont un attribut title
p[title = "cours"]{} => Modifiera toutes les balises <p> ayant la valeur cours pour leur
attribut title
Formatage du texte :
Propriété
Valeur
Description
Font-family
Police1, police2, police3,
sans-serif
Définitions des polices
Font-size
0.8em / 14pt / 50%
Taille du texte
Font-weight
Bold, normal
Gras ou normal
Font-style
Italic
Italique
Text-decoration
Underline, overline, linethrough, none
Souligné, surligné,
barré, aucun
Font-variant
Small-caps
petites capitals
Text-transform
Capitalize, lowercase,
uppercase
Capitales
Text-align
Left, center, right, justify
Alignment du texte
Line-height
10px, 20%
Espace entre les lignes
4
Vertical-align
Baseline, middle, sub,
super, top, bottom
Alignement vertical sur
des blocs de type inlineblock
Text-indent
40px
Indentation du
paragraphe
Word-wrap
Break-word
Césure du texte
Propriété
Valeur
Description
Color
#FF54C6, rgb(255,0,0),
red
Couleur du texte
Couleurs et Fonds :
Background-color :
Couleur de fond
Background-image
url(‘chemin’)
Image de fond
Backgroundattachement
Fixed,scroll
Fond fixe ou déroulant
Background-repeat
Repeat, no-repeat,
repeat-x, repeat-y
Repetition de l’image de
fond
Background-position
(x,y), top, center,
bottom, left, right
Position du fond
Opacity
0.5
Transparence (imapcte
aussi le texte)
5
Propriétés Block et inline-block :
Propriété
Valeur
Description
Width
50px, 60%
Largeur
Height
50px, 60%
Taille
Min-width
Taille minimale
Max-width
Taille Maximale
Min-height
Hauteur minimale
Max-height
Hauteur maximale
Margin-top
Margin-bottom
Margin-left
Margin-right
Padding-top
Padding-bottom
Padding-left
Pading-right
Border-width
Marges exterieures
Marges intérieures
10px
Border-color
Epaisseur des traits de
la boite
Couleur des bordures
Border-style
Solid, dotted, dashed,
double, groove, ridge,
inset, outset
Style des bordures
Border-radius
30px
Bordures arrondies
Box-shadow
5px 5px 5px black
(horizontal, vertical,
fondu, couleur)
Ombre de la boite
6
Positionnement et affichage :
Propriété
Valeur
Description
Display
Block, inline, inlineblock
Type d’élément
Visibility
Visible, hidden
Visibilité
Overflow
Auto, scroll, visible,
hidden
Comportement en cas
de dépassement du
texte
Float
Left, right, none
Flottant / habillage
Clear
Left, right, both, none
Arrêt d’un flottant
Position
Relative, absolute
Type de positionnement
Top
50px
Positionnement par
rapport au haut
Bottom
50px
Bas
Left
50px
Gauche
Right
50px
Droite
0-999
En cas de
positionnement absolu
et en cas de
superposition. La valeur
le plus haute sera mis en
valeur
Z-index
7
Propriétés des listes :
Propriété
Valeur
Description
List-style-type
Disc, circle, square,
decimal, …
Type de liste
List-style-position
Inside / outside
Positionnement en
retrait
Liste-style-image
url(‘chemin’)
Puce personalisée
Les media queries :
Les médias queries servent à appliquer des styles suivant certaines règles comme
des résolutions d’écrans, des types de matériels etc…
@media only screen and (max-width: 940px){
Mes css persos
}
Cette media query vise les écrans qui ont une résolution comprise entre 1 et 940px.
@media only screen (min-width: 720px) and (max-width: 940px){
Mes css persos
}
Cette media query vise les écrans qui ont une résolution comprise entre 720px et
940px
Les règles disponibles :







Color
Height
Width
Device-height
Device-width
Orientation
Media
o Screen
o Handheld
o Print
o Tv
o projection
8
Feuilles de styles pour Internet Explorer :
Dans votre fichier HTML mettre des commentaires conditionnels que seul internet
explorer sait déchiffrer.
< !- -[if lte IE8]>
Liens vers la feuille de style
< ! [endif] - ->
La feuille de style visera tus les navigateurs inférieur ou égale à IE8
A la place de lte on peut avoir :
Lt : inférieur
Lte : inférieur ou égale
Gt : supérieur
Gte : Supérieur ou égal
9
Bootstrap :
Comment ajouter Bootstrap ?
Il faut relier la feuille de style bootstrap.css se trouvant dans le répertoire css.
La grille Bootstrap mais c’est quoi ?
La grille Bootstrap est un moyen très rapide pour gérer le positionnement de ses
blocs pour la création d’un template html.
La grille Boostrap se compose de 12 cellules par rangée.
La première chose à faire c’est de créer une ligne.
Une ligne se créée comme ci contre :
<div class="row">
</div>
Une fois que cette ligne est déclarée on peut y insérer nos cellules de cette manière :
<div class="span4">
</div>
Là nous créons une cellule d’une valeur de 4 blocs (sur 12 maximum).
Si l’on veut un bloc de 8 il faudrait écrire span8.
Si l’on veut sauter des blocs vers la gauche il faut rajouter la class offset avec la
valeur du nombre de bloc (tout comme span.
Si on veut le contenu de notre ligne soit centré quelque soit lé résolution il faut
envelopper notre ligne d’une div contenant la classe container.
Grille Fluide ?
Pour utiliser une grille fluide il suffit de remplacer les classes row et container par
row-fluid et container-fluid
10

Download Report