Deviation Actions
Description
[link]
[link]
[link]
E comunque tenete presente che se fate una ricerca sul menu principale di deviant-art troverete parecchie risorse riguardo i css; questo va da sè che vale anche per il web intero.
Tale tutorial vuole solo essere un ulteriore passaparola dei css; io fino a un mese fa non sapevo nemmeno cosa fossero; per cui mi sento in dovere di trasmettere quello che è stato trasmesso a me con pazienza. Il mio è un ulteriore tam-tam; più persone sanno e mettono a dispozione la loro
conoscenza meglio è. questo secondo me è lo spirito della community.
Requisito fondamentale di tale tutorial: un po' di pazienza.... E chiaramente, ricordate che dovete essere subscriber per poter usare i CSS! Sono chiaramente disposto a risolvere qualsiasi tipo di dubbio, sempre che sia in grado, qualora abbiate delle domande. E chiaramente, da tutti sono gradite critiche e correzioni a quanto affermo.
A seguito di questo tutorial, seguirà un template in codice css a vostro uso e consumo.
[link]
Iniziamo...
che cosa sono i css?
[ da wikipedia ] Una pagina web è formata fondamentalmente da due elementi: i contenuti veri e propri e la formattazione ovvero l'aspetto con cui i contenuti sono mostrati all'utente.
Il linguaggio HTML (e la sua evoluzione XHTML) ha come scopo quello di gestire i contenuti, specificandone la struttura attraverso tag diversi. Ogni tag (ad esempio <h1> o
) specifica un diverso ruolo dei contenuti che contrassegna.
I fogli di stile a cascata (dall'inglese CSS Cascading Style Sheets) sono una tecnica che permette di fissare gli stili (per es. tipo di carattere, colori e spaziature) da applicare ai documenti HTML e XHTML.
L'introduzione dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.
Su dA dove va inserito il codice CSS; è sufficiente il codice CSS per ottenere il layout definitivo che desidero?
Il codice CSS va inserito nello spazio sottostante alla finestra dove normalmente invece inserite il conenuto del journal. Notate bene che per alcune caratteristiche che volete dare al vostro layout del journal il solo codice CSS non basta; ovvero in quei casi sarà l'integrazione del codice css nella finestra in basso più qualche elemento di codice HTML, da inserire dove normalmente scrivete il journal, che vi darà il risultato finale
desiderato. Chiaramente ciò che scriverete nel codice CSS in linea di logica non deve essere contraddetto da certi tag HTML che esprimerete nella finestra dove scrivete il journal.
[ vd. figura 1 ]
Come viene organizzato il codice CSS?
Parlando a livello molto informale e poco scientifico, il codice CSS ha una struttura molto semplice: ci sono tanti blocchi "selettori" simili a questo:
.nome del blocco selettore {
proprietà1: valore;
proprietà2: valore;
}
Quello racchiuso tra parentesi graffe è la dichiarazione di quanto si riferisce al selettore. Ci sono tantissime proprietà che vedremo e ogni proprietà ha dei valori precisi. Bene il CSS, in buona sostanza, si riassume , a livello molto sintetico, nel definire bene i selettori e nell'adoperare
correttamente i valori delle proprietà a disposizione.
Le parti del journal di DA ovvero i selettori del journal di DA!
Se avete già visto un mostriciattolo di codice CSS, forse avrete notato che ci sono delle paroline tipo journalbox, journaltop, journalbottom etc.. queste paroline in realtà sono le parti in cui viene diviso lo spazio fisico del box che contiene il vostro journal. Tali paroline in realtà sono anche i famosi selettori di cui ho appena parlato; selettori che dovrete usare nel vostro codice.
Per esempio: journalbox è proprio il selettore che si riferisce all'intero box che contiene il journal. Quindi per esempio il codice css per specificare che tutto il vostro journal abbia un font di dimensione 15 pixel sarà così:
.journalbox {
font-size: 15px !important;
}
N.B: Notate il selettore (.journalbox), la proprietà (font-size) e il valore ( 15 px ). La stringa !important va messa ad ogni dichiarazione di proprietà. Il punto e virgola è fondamentale per chiudere la dichiarazione.
Le parti del journal, e i relativi selettori, sono queste ( notate bene che alcune parti sono figlie di altre ):
.journalbox: l'intero box che contiene il vostro journal;
.journalbox .journaltop: la parte alta del journal che contiene sia il titolo che la data e l'ora di upload del journal;
.journalbox .journaltop h2: è solo il titolo del vostro journal;
.journalbox .liste.journalbox. list .a: sono i famosi "watching, reading".. il list a rappresenta le righe alterne;
.journalbox .journaltext: è lo spazio dove visualizzate il vostro contenuto del journal;
.journalbox .journaltext a: sono i link presenti nel testo del vostro journal; esiste un selettore simile ma col finale " a:hover "; questo selettore rappresenta come si comporta il link del vostro testo qualora vi passiate sopra col mouse;
.journalbox .journalbottom: la parte bassa del journal escludendo il testo e quant'altro;
.journalbox .commentslink: il link per i commenti al vostro journal che si trova in fondo al journal;
.journalbox .prevlink: il link affianco a quest'ultimo che vi manda ai journal precedenti;
N-B: esistono per quest'ultimi due i rispettivi selettori hover ovvero per es.:
.journalbox .prevlink:hover
.journalbox .commentslink:hover
Le proprietà e i valori please??
Ora che abbiamo i selettori, dentro ci possiamo buttar dentro tutto quello che ci pare...oddio sempre avendo cura di non produrre mostri e di rispettare il codice.
Ora che abbiamo i selettori passiamo in rassegna tutte le proprietà più importanti con i rispettivi valori, invitandovi cmq sempre a rifarvi al primo link di [link] che vi ho dato in cima per ulteriori spiegazioni:
Ricordate sempre la sintassi: proprietà: valore !important; Tra parentesi sono indicati i valori che le proprietà possono assumere:
Proprietà di font e di testo
font-size (tutti i valori in pixel oppure xx-small, x-small, small, medium, large, x-large, xx-large )
font-family ( tutti i tipi di font che volete )
font-weight ( bold, light, bolder, lighter; bold è il grassetto )
font-style ( normal, italic; italic è il corsivo )
line-height: è l'altezza di riga di testo che alla fin fine diventa l'interlinea ( valore numerico tipo 1.3 o 1.5 )
text-align (left, right, center, justify )
text-decoration ( none, underline, overline, line-through, blink )
text-transform: trasforma il testo tutto in maiuscolo per esempio ( none, capitalize, uppercase, lowercase; capitalize trasforma in maiusc la prima lettera di ogni parola )
letter-spacing: spazio tra le lettere ( valore in pixel )
word-spacing: spazio tra le parole ( valore in pixel )
Bordi, padding e margini
[ Guardate bene prima la figura n.2 ]
height: Questa proprietà definisce la distanza tra il bordo superiore e quello inferiore di un elemento-blocco ( valore in pixel oppure auto )
weight: larghezza di un elemento-blocco ( valore in pixel oppure auto )
margin-top,margin-bottom,margin-left,margin-right: distanze tra i vari blocchi ovvero tra le varie parti del journal ovvero tra i vari selettori(valori in pixel );
padding (left right top bottom ): (valori in pixel ) distanze tra gli elementi interni ad un blocco=selettore= parte del journal;
border (left right top bottom ) larghezza del bordo( valore in pixel );
border-style (none, dotted, dashed, solid, double etc.. );
border-color ( codice di 6 cifre che rappresenta il colore );
Gestione del colore e dello sfondo
Per definire il colore si usa un codice di 6 cifre preceduto dal simbolo #.
Per vedere la tabella dei colori vi segnalo un link:
[link]
color: colore di testo ( codice di 6 cifre );
background-color: colore di sfondo ( codice );
Per mettere come sfondo un immagine, dovete primare uploadare l'immagine in un indirizzo (url) internet, per esempio photo-bucket o i vari posti dove potete mettere un sacco di foto od immagini.
background-image: url( http:// );
background-repeat: vi ripete l'immagine ( repeat, no-repeat, repeat-x, repeat-y ). repeat-x per es. ripete solo in orizzontale;
background-position (top, left, bottom, right, top-center, top-left, center etc.. );
varie
cursor: definisce la forma del cursore (help, wait );
display: none !important; non visualizza un blocco-selettore;
La sintassi abbreviata
Per buona parte delle proprietà è possibile definire una sintassi abbrevviata esempio:
border: 1px solid #000000 !important;
definisce un bordo di larghezza 1px solido di colore nero.
margin: 2px 3px 0 5px !important;
definisce i margini di un blocco dove l'ordine è sempre top-right-bottom-right. con lo zero non ci va px.
Come mi comporto per verificare il mio layout e per fare modifiche
Per verificare il vostro layout,io consiglio sempre la preview del journal man mano che lo fate; stesso dicasi per quando lo modificate una volta fatto. Avendo cura poi, a vostro discernimento, di evitare di segnalare il nuovo journal ai vostri watcher, il cosidetto minor edit.
Commenti, critiche e correzioni are very welcome!