Helpsheet css

Syntaxe

Syntaxe: selecteur {propriété: valeur;}

CSS externe: <link rel=”stylesheet” href=”style.css”>

CSS interne: <style> selecteur {propriété: valeur} </style>

CSS dans un élément: <h1 style="color:green"></h1>

Sélecteurs

par tag: body {} sélectionne <body></body>

par id: #truc {} sélectionne
<element id="truc"></element>

par classe: .machin {} sélectionne
<element class="truc"></element>

Sélection avancée: div.machin {} sélectionne
<div class="machin"></div>; article#news {} sélectionne
<article id="news"></article>; div .machin {}
sélectionne <div><element class="machin"></element></div>; h1, div {} sélectionne
<h1></h1> et <div></div>; input[type="submit"] {} selectionne
<input type=submit value="Go">

Valeurs des unités


                        % pourcentage

                        em taille du caractere courant

                        rem taille du caractere racine ()"root")

                        pt points

                        px pixels

                        vh viewport height

                        vw viewport width

Valeurs des couleurs

hexadecimal : #ffcc00
rvb : rvb(255,0,10)
rvba : rvba(255,0,10,0.6)
code : silver, orange, red, etc.

Pseudo-éléments


                        :hover
 :active
 :focus
 :link
 :visited
 :first-line
 :first-letter
:first-child
:last-child

Texte et police

font-family: détermine la police par ordre de préférence. La première police disponible sur l'ordinateur visualisant la page est utilisée. Terminer la liste par une des trois polices génériques : serif, sans-serif ou monospace.
font-family: arial, geneva, sans-serif

font-size: Taille de la police. En px, rem, em, pt, %, etc.
font-size: 2.3em

line-height: Interlignage en valeur, px, rem, em, pt, %, etc.
line-height: 1.5

text-align: Alignement du texte (left, right, justify)

font-weight: bold, normal, lighter, bolder, chiffre [100-900]

font-style: italic, normal

color: hexadécimal (#ffcc00), rgb, rgba, nom (blue, green, silver)

text-decoration: line-through, none, overline, underline

text-transform: capitalise, lowercase, uppercase

letter-spacing, word-spacing: en unités

Background color et image

background-color: Valeur de couleur

background-image: Lien vers l'image
background-image:url(image.png)

background-repeat: repeat, no-repeat, repeat-x, repeat-y

background-position: top, center, bottom, left, right, (x y)

background-size: auto,cover,contain,initial,inherit, valeur

background-attachment: scroll, fixed

background en dégradé: background: linear-gradient(to right, red , yellow)
background: linear-gradient(-90deg, red, yellow)
background: linear-gradient(red, yellow, green)

Margin, padding, border

Valeurs sur margin et padding: - tous les côtés : une valeur
- sur l'axe vertical et horizontal : deux valeurs
- chaque côté indépendamment: dans le sens des aiguilles d'une montre à partir du haut
ex: margin:0 10px 30px 20px
- Attributs individuels
margin-top, margin-left, margin-bottom, margin-right et padding-top, padding-right, padding-bottom, padding-left

border: 3 valeurs: épaisseur, type et couleur
border: 2px solid #000

overflow: Que faire des éléments qui dépassent la taille de leur parent dont la taille a été forcée par les attributs width et height.
visible,hidden,scroll,auto

Elements block et inline

Tous les éléments à l'intérieur du body sont soit de type bloc ou de type inline.

Element de type block: Ex: article, section, ul, li, div, h1
Occupe 100% de la largeur de son parent, se place sous les éléments précédents, les éléménts suivant se placent de dessous de lui, peut recevoir margin et padding, peut recevoir une taille en largeur (width) et hauteur (height), peut être positionné.

Element de type inline: Se comporte visuellement comme un caractère dans une phrase.
Ex: a, img, em, i, b, strong
Occupent la largeur nécessaire à leur affichage, va à la ligne s'ils ne dispose pas de la place pour s'afficher, les éléménts suivant se placent à côté de lui, ne peut pas recevoir de margin, ne peut pas recevoir une taille en largeur (width) ou hauteur (height), ne peut pas être positionné

Changer le type d'un élément: Tous les éléments peuvent changer de type grâce à l'attribut display
display: block;
display: inline;
display possède d'autres valeurs possibles : none, flex, inline-block, table, table-cell, etc.

Box-sizing: Changement du calcul de boite pour width et height
content-box, border-box, initial

Positionnement

Un élément se positionne par rapport à son ancètre ayant reçu une position, sinon par rapport à l'élément body (sauf la position fixe, relative à la fenêtre). Seul les éléments de type bloc son positionnables.

Position: static (defaut), relative, absolute, fixed
Ex: position:relative

top, right, bottom, left: valeur en unité, positives ou négatives
Ex: right:200px

z-index: Ex: z-index:1000;

Float

Un élément en float est reconnu par les éléments inline mais ignoré par les éléments de type bloc. Il devient un élément de type bloc, mais se comporte comme un élément inline.

float: left, right, none
Ex: float:left;

clear: left, right, both, none
force l'élément courant à se placer en dessous des éléments float
Ex: clear:left

Autres

Commentaire en CSS: Commenter son code css
/* un commentaire */

list-style-type: Type de boulette ou de chiffre pour les éléments d'une liste
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none

Curseur: Type de curseur en sorvol d'un élément
pointer, crosshair, progress, not-allowed, etc.

border-radius: bord arrondi d'un élément de type block. Valeurs similaires à padding et margin.
border-radius:10px 20px 20px 0

box-shadow: Ombre portée sur un bloc. 4 valeurs : déplacement vertical, déplacement horizontal, flouté, couleur
box-shadow: 0 4px 10px #666

Media queries

exemple: @media screen and (max-width:800px){}
@media screen and (max-width: 699px) and (min-width: 520px){}

@media: screen, print, handheld, aural, braille, tv, all

Conditions: max-height, max-width, min-height, min-width, orientation, resolution