46 258
contributi
Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"
Aiuto:Manuale di stile/Avanzato (visualizza wikitesto)
Versione delle 22:59, 18 dic 2018
, 22:59, 18 dic 2018→Stili CSS comuni
m (→em & co) |
|||
|
Altre proprietà di CSS utilizzate di solito sono elencati di seguito. La sintassi è, come già detto, <code>proprietà: valore;</code> (sempre con il <code>;</code> dopo, anche per l'ultima regola):
* <code>padding</code>: indica lo spazio tra il bordo del <code>div</code> ed il suo contenuto. Il padding può avere valori diversi nelle quattro direzioni, [https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Syntax questa pagina] contiene i dettagli. Generalmente l'unità di misura da utilizzare sono gli ''em'' descritti poco sopra.
* <code>margin</code>: indica lo spazio fra il <code>div</code> e ciò che lo circonda. Anche il margin può avere valori diversi nelle quattro dimensioni, con la stessa sintassi del padding.
* <code>background</code>: permette di ottenere uno sfondo a tinta unita anziché un gradiente: si può specificare un colore esistente
* <code>color</code>: permette di cambiare il colore del testo, vale quanto già detto per <code>background</code>. Se il testo deve essere nero o bianco usare la classe <code>black-text</code> o <code>black-text</code> (descritte nel prossimo paragrafo).
* <code>height</code>: in teoria permette di impostare l'altezza dell'elemento. In pratica viene usata solo con valore "<code>height: 100%;</code>" per forzare un elemento ad avere l'altezza del padre, anche se non funziona nel modo semplice che ci si aspetta. Vedere la sezione su tricks e workarounds per più dettagli.
<div style="background: #{{#invoke: colore | fuoco | dark}}; color: #eaeaea; margin: 4em; padding: 0.5em;">Testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso</div>
Per capire esattamente cos'è successo a questo elemento, consiglio di usare l'inspector del browser.
* Premere il tasto ''F12'' funziona su Firefox, Chrome, Internet Explorer e Edge. In Safari la combinazione è ''alt + cmd + i'', potrebbe essere necessario spuntare ''Sviluppo -> mostra inspector web''.▼
===Inspector===
L'inspector è un utilissimo strumento integrato nel browser che permette non solo di visualizzare il sorgente della pagina, ma anche di modificarlo per poter vedere i cambiamenti in tempo reale senza bisogno di modificare effettivamente la pagina.
Esistono due metodi per aprire l'inspector:
▲* Premere il tasto ''F12'' funziona su Firefox, Chrome, Internet Explorer e Edge, mentre in Opera bisogna premere ''Ctrl + Shift + C''. In Safari la combinazione è ''alt + cmd + i'', potrebbe essere necessario spuntare ''Sviluppo -> mostra inspector web''.
* Fare click destro in un punto della pagina e selezionare la voce ''Analizza elemento'' (o simile).
A questo punto, dovrebbe esserci in alto a sinistra un simbolo tipo rettangolo con sopra una freccina del mouse; premendolo e muovendo il mouse sul codice della pagina dovrebbero iniziare a venire evidenziati gli elementi corrispondenti nella pagina stessa. In questo modo ci si può fare un'idea di quali elementi hanno la forma che volevamo, quali no, quanto sono grossi margin e padding, se un elemento non si comporta come vorremmo, etc.
L'unico modo per imparare ad usare l'inspector per debuggare è con la pratica, il consiglio è di esercitarsi un po' perché è davvero comodo quando si creano template complessi per capire esattamente cosa non va (basta guardare i vari elementi e trovare quello che non ha le dimensioni/la posizione che ci si aspetta per capire almeno che il problema è tra lui e i suoi antenati più vicini).
====sidebar====
Pokémon Central Wiki mostra una barra sul lato sinistro, chiamata ''sidebar''; essa è presente solo nella versione desktop del sito mentre è nascosta in quella mobile. Per questo quando si modifica una pagina da PC e si vuole provare la visualizzazione da mobile non basta restringere lo schermo, bisogna anche rimuovere la sidebar per vedere il comportamento effettivo su schermi stretti: per farlo basta aprire l'inspector e seguire i seguenti passaggi.
# Uno dei primissimi tag visibili è il <code>body</code>, che contiene un figlio chiamato <code><nowiki><div id="mw-navigation">...</div></nowiki></code>: rimuovere quest'ultimo (basta farci click destro e cliccare sulla voce apposita).
# All'elemento <code><div id="content"...</code> aggiungere <code>style="margin-left: 0; position: relative; z-index: 100000;"</code> (dove ''z-index'' è un numero grande a piacimento).
In questo modo si potrà avere un'idea migliore di come si presenta la pagina senza bisogno di aprire l'editor dalla versione mobile del sito.
===Classi "base"===
| |||