-
Revo;.
User deleted
Eccomi qui a spiegarvi in breve cosa sia il CSS e a cosa serve.
CSS è un acronimo che corrisponde a "Cascade Style Sheets" ovvero fogli di stile a cascata e, come espresso dal nome, serve, in termini generici, a definire lo stile di una pagina, colori, sfondi, immagini, testi ecc.
Esso può essere posizionato:- Nell'head della pagina, tra <head> e </head>;
- Al di fuori della pagina, creando un foglio a parte;
- Nel Tag HTML stesso.
Come l'HTML, il CSS ha una propria sintassi che è molto facile da memorizzare:
il CSS utilizza principalmente il punto (.), il punto e virgola (
, i due punti (
, l'hash o cancelletto (#), le parentesi graffe aperte e chiuse {} (si riescono ad ottenere premendo AltGr+Shift+è per quella aperta, AltGr+Shift+(+) per quella chiusa, in genere per ottenerla dovete aggiungere ai comuni tasti per le parentesi quadre, il tasto Shift, sia per le aperte che per quelle chiuse), apici (' ') e punto esclamativo (!).
La sintassi, utilizzando i simboli proposti prima, è la seguente (per il foglio di stile a parte o integrato nel'head della pagina):
.classe {parametro: attributi; parametro: attributi; parametro: attributi}
Di seguito le definizioni delle parole succitate.
La Dichiarazione
La dichiarazione è l'insieme di classe, parametro e attributo, in pratica un codice, una stringa del CSS come questa:CODICE.grassetto {font-size: 18px; color: orange; text-align: center}
La Classe
La classe è un nome che viene attribuito ad un insieme di stili. E' come se io creassi un insieme matematico e gli dessi un nome A, B, C, D, aula, scuola, casa e via dicendo e all'interno di quell'insieme vi mettessi gli stili necessari. Vediamo un'immagine:
Come vedete, alla classe posso attribuire qualsiasi nome io voglia che però deve essere preceduto sempre dal punto (.) .
Essa poi potrà essere richiamata in un codice HTML tramite il Tag:CODICEclass="nome della classe"
L'alternativa del foglio esterno, è un'ottima soluzione poiché il lavoro risulta molto semplificato, in quanto se bisogna modificare lo stile della pagina, non si agirà sul codice HTML, ma su una pagina esterna, il che è molto comodo.
Il Parametro
Il parametro è un altro elemento fondamentale per fare una dichiarazione. Nell'immagine su postata, lo potremo distinguere dal colore in verde ed è, in pratica, il cuore della dichiarazione. Infatti, il parametro indica su quale aspetto del codice bisogna agire.
Prendiamone uno nell'immagine sopra: "font-size"
Font-size sono due parole inglesi che significano scrittura, tipo di carattere e dimensione. Da qui possiamo intuire che il parametro font-size si riferisca alla dimensione del carattere, infatti va ad agire proprio sulla dimensione del carattere utilizzato. Di parametri ve ne sono moltissimi e si imparano con l'esperienza sul campo.
L'Attributo
L'attributo è una parte importante di una dichiarazione e si riferisce sempre e solo al parametro, nell'immagine lo potremo distinguere dal colore azzurro. L'attributo lo troviamo subito dopo dei due punti ( e ne riconosciamo la fine dal punto e virgola (. L'attributo definisce il parametro, lo completa, indica come deve essere.
Come sempre, riferiamoci all'immagine sopra: prendiamo "18px" di "font-size":
Abbiamo visto nel parametro, che font-size definisce la dimensione del carattere, ma, se non vi fosse l'attributo, il parametro come farebbe a definirla? Noi vediamo scritto nell'immagineCODICEfont-size: 18px
e da ciò si può capire che la dimensione del carattere è di 18 pixel, ecco, 18 pixel è l'attributo. Niente di più facile da capire
Adesso conosciamo bene o male come si scrive una dichiarazione di CSS e che cos'è. In questa parte della guida scopriremo come richiamare un foglio di stile esterno, integrare il foglio nella pagina HTML stessa oppure immettere una dichiarazione in un Tag HTML.
Foglio CSS esterno
Un foglio CSS esterno è molto conveniente e fa risparmiare tempo e fatica nell'eventuale modifica degli stili di una pagina, in quanto non bisognerà agire sul codice HTML, ma su un foglio a parte che riguarda solo e soltanto gli stili. Nella parte della guida precedente abbiamo imparato come fare una dichiarazione, in questa parte impareremo come salvare il foglio, in quale formato e come richiamarlo nella pagina HTML.
Per creare un foglio esterno possiamo usare il Blocco Note.
Stilate i codici e compilate le dichiarazioni e poi selezionate: File -> Salva -> Salva come: tutti i file -> nome_che_vogliamo.css
Carichiamo la pagina su un sito di Web Hosting e richiamiamola così, inserendo il codice tra <head> e </head>:CODICE<link rel=stylesheet href="percorso_del_foglio_caricato.css" type="text/css" media="screen">
Foglio CSS interno
Per incorporare il codice all'interno della pagina, senza fare ricorso a fogli esterni, dovremo inserire il seguente codice tra <head> e </head>:CODICE<style type="text/css">Dichiarazioni</script>
Al posto di "Dichiarazioni" inseriamo, appunto, le dichiarazioni compilate che dobbiamo usare senza variazioni dal foglio esterno.
Dichiarazione all'interno di uno stesso Tag HTML
Se le dichiarazioni riguardano casi isolati e quindi non vale la pena creare una dichiarazione in un foglio esterno, possiamo inserire gli stili di CSS direttamente all'interno del codice HTML. Facciamo un esempio:
prendiamo il TagCODICE<b></b>
se al testo che vogliamo inserire non vogliamo dare soltanto il grassetto ma anche altre stili dovremo inserire una dichiarazione all'interno di < e > direttamente dopo "b" tramite questo Tag HTML che introduce la dichiarazione:CODICEstyle="dichiarazione"
Risultato:
<b style="dichiarazione">Testo</b>
E' abbastanza semplice ma, vi sono delle variazioni dai fogli interni ed esterni: scrivendo la dichiarazione, non avremo bisogno della classe, per fare una dichiarazione "in linea" dovremo scrivere soltanto il parametro e l'attributo, senza le parentesi graffe:CODICE<b style="font-size: 18px; text-align: center; color: orange">Testo</b>[code]
Il risultato è questo:
[spoiler]<b style="font-size: 18px; text-align: center; color: orange">Testo</b>[/spoiler]
Perciò niente di che ;)
<hr>
Questa parte della guida si riferirà soltanto ai fogli di stile interni ed esterni.
<b style="font-size: 18px; color: orange">Richiamare le classi nella pagina HTML</b>
Il più è già stato fatto, adesso impareremo a richiamare una dichiarazione per attribuire gli stili creati ad un particolare elemento della pagina.
Adesso sappiamo come fare una dichiarazione ma un dubbio vi serpeggerà sicuramente in testa: "Come si fa a far funzionare i codici di un foglio esterno e quindi attribuire ad un elemento di una pagina HTML la dichiarazione di un foglio?" La risposta è semplice.
Vi sarà sicuramente capitato di vedere tra < e > di un elemento HTML il Tag
[code]class=""
Class è una parola inglese che si traduce Classe (ma va?
)... Vi pare di aver già sentito questo nome in precedenza vero? Infatti la classe, l'elemento preceduto dal punto e seguito dalla parentesi graffa, serve per richiamare la dichiarazione nel codice HTML tramite appunto il TagCODICEclass=""
In mezzo alle apici inseriremo il nome della classe senza il punto e, come per magia, il codice HTML assumerà le sembianze che abbiamo ordinato nella dichiarazione nel foglio esterno.
Al posto di class, può essere usato il TagCODICEid=""
che però nel foglio di CSS vorrà apportate alcune modifiche:
la classe, non avrà più il punto a precedere il nome, ma un hash, o meglio un cancelletto (#), niente di che
Oppure possiamo attribuire tramite una sola dichiarazione, degli stili a tutti i codici. Vediamo come:
nel foglio di stile, andremo a scrivere la classe senza il punto a precederla, così facendo la dichiarazione di quella classe, si riferirà a tutti codici HTML specificati nella classe stessa. Sembra un indovinello vero? Con un esempio vi do la soluzione:CODICEb {font-size: 18px; color: orange; font-align: center}
In questo caso, la dichiarazione si riferirà, senza bisogno di fare usa del Tag class="", al codice HTMLCODICE<b></b>[code] per tutte le volte che è scritto sulla pagina, senza che il codice abbia incorporato class="". E' un gran privilegio se si vuole agire su ampia scala, prendiamo ad esempio tutto il testo della pagina, andremo ad agire sicuramente sul tag body della pagina e quindi scriveremo:
[code] body {font-family: Arial, Verdana; color: black; font-size: 10px}
Il codice su dice che tutto il testo tra <body> e </body> sarà come specificato nella dichiarazione.
Queste sono le basi per capire il CSS e cominciare a studiarlo per poi riuscire a creare e modificare Skin autonomamente.
Avrete sicuramente difficoltà nel capire alcune della guida se prima non avete acquisito una conoscenza buona in quanto HTML. Vi rimando a questa discussione che ne fa un quadro generale: Basi HTML.
La guida è in continuo aggiornamento...
Spero di esservi stato utile
Questa guida è stata stilata da Phil Hellmuth ragion per cui ne è assolutamente vietata la copia parziale o totale dei contenuti. Nel caso in cui ciò debba avvenire, si può ricorrere al Ban dal circuito sotto previo avviso allo Staff di ForumCommunity.. -
BlackTahir97.
User deleted
ciao so che il topic è vecchiotto ma ho un problema io non so cm mettere una skin cioè so come metterla base ma io ho sl il css ti prego aiutami . -
Phoenìx.
User deleted
Non ho capito la richiesta. Vuoi modificare una Skin? Leggendo al guida su dovresti capire come, dò infatti una breve introduzione al CSS. . -
INTARTDAVIOVE.
User deleted
海水浴 ビキニ水着 激安 ビキニビキニ 青水着ガール<a href="http://swimteam.swimeighteenjp.biz" title="激安水着">激安水着</a>ビキニ 海水浴js ビキニ水着専門<a href="http://swimtailor.swimefficientjp.biz" title="ショーツ">ショーツ</a>水着 大きいサイズ水着 大きい大島 水着<a href="http://swimtap.swimeggjp.biz" title="水着写真">水着写真</a>水着 大人水着 男性用スピード 水着 競泳<a href="http://swimtax.swimeffectivejp.biz" title="パンツ 通販">パンツ 通販</a>ビキニ セクシー2013 水着ビキニ 水着 通販<a href="http://swimfashion.swimefficientjp.biz" title="通信販売">通信販売</a> .