-
.
CSS : come leggerlo
Di base il CSS si compone di:
- Selettori
- Proprietà
- Valori
nella forma
Selettore {proprietà: valore}CITAZIONEEs. body {font: Verdana}I selettori
Si dividono in:
- di tipo;
- di classe;
- di pseudoclasse;
- d'identificazione;
- di discendenza.
Di tipo:
di solito nei css di ff o fc o bf c'è un solo selettore di tipo e cioè il body.CITAZIONEEs. body {font: 76%/1.6em Verdana, Tahoma, Arial, Sans-serif; color: #333; background-color: #FFF; background-repeat: repeat-x; background-position: bottom}
Di classe:
sono quelli che si trovano in maggioranza e precisamente quelli con codice .nomeclasse {proprietà: valore}.CITAZIONEEs. .menuwrap {font-family: verdana, tahoma, arial, sans-serif; background: #333; background: linear-gradient(#404040,#1A1A1A); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); -moz-box-shadow: -2px 1px 2px rgba(0, 0, 0, .5)}
Di pseudoclasse:
sono quelli che presentano il codice .nomeclasse:pseudoclasse {proprietà:valore}.CITAZIONEEs. .menu li:first-child {padding-top: 0; border-top: 5px solid #484848}
D'identificazione:
sono quelli che applicano un comando ben preciso ad un elemento specifico della pagina e presentano una scrittura del tipo #nomeidentificatore {proprietà:valore}.CITAZIONEEs. #board .stats .mback {background: #ECECEC; border: 0; border-radius: 0}
Di discendenza:
sono quelli che presentano scrittura selettore padre > selettore figlio.CITAZIONEEs. .menu > a:hover, .menu:hover > a {color: #FFF; background: url('https://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom}Le proprietà
Sono molteplici e le più conosciute sono:
- background: definisce lo sfondo;
- border: definisce il bordo;
- color: definisce il colore di un elemento che non sia lo sfondo;
- font: definisce le proprietà della scrittura;
- margin e padding: definiscono lo spazio circostante agli elementi, la prima lo spazio esterno ai bord e la seconda quello interno.
- text-align: definisce l'allineamento del testo.I valori
Se non viene specificato, la proprietà assume il valore predefinito dei vari browser. I valori possono essere:
- numeroCITAZIONEEs. {padding: 3px 4px; border-top: 0}
- percentualeCITAZIONEEs. .header h1 {background-position: 85% 50%}
- colore (esadecimale, rgba e nome del colore in inglese se è uno dei fondamentali)CITAZIONEEs. .header a:hover {color: #FFF; background: rgba(255, 255, 255, .04); border: 0}
- URLCITAZIONEEs. .menu > a:hover, .menu:hover > a {color: #FFF; background: url('https://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom} ovvero .menu > a:hover, .menu:hover > a {color: #FFF; background: url(https://img.forumfree.net/style_images/52/arrow.gif) no-repeat bottom}
- font (px, pt* e em*)CITAZIONEEs. .nav {font: italic 17px calibri, arial; font-weight: bold; letter-spacing: .05em} ovvero body {font: 76%/1.6em Verdana, Tahoma, Arial, Sans-serif; color: #333; background-color: #FFF; background-repeat: repeat-x; background-position: bottom} ovvero .navsub form {font-size: 15pt}
* 1em = di default a 16px mentre un 1pt = 1.33 px
Edited by Hitømi - 17/5/2013, 16:21. -
.
Ben fatto Hitomi bravo 
. -
¢ristal.
User deleted
Semplice e molto utile, good! .
