Ultima modifica da un moderatore:
Nella prima lezione abbiamo visto che cos'è effettivamente il CSS, le sue implementazioni e i vari utilizzi.
In questa guida andremo a vedere come creare una pagina HTML con un file .css esterno!
INIZIAMO DALLE BASI
In questa guida andremo a realizzare una pagina HTML basilare con delle semplici scritte, come da titolo, iniziamo dalle basi!
Quella riportata sopra è la nostra pagina HTML, nella quale sono stati inseriti:
<link rel="stylesheet" type="text/css" href="fogliodistile.css" /> : Questo è il "link" attraverso il quale noi possiamo richiamare il nostro foglio di stile, nel caso non ti fosse chiaro cos'è clicca qui.
<h1> / <h2> / <h3> : Questi tag sono utilizzati per creare dei titoli, più piccolo è il numero che affianca la lettera h più grande sarà la dimensione del titolo
<p> : Questo tag viene utilizzato per creare dei paragrafi.
Quasi tutti i tag vanno chiusi, ovvero: <p> </p>, <h1> </h1>
Come possiamo vedere dalla pagina HTML di esempio nella pagina verranno visualizzate 4 frasi:
IL FOGLIO DI STILE
Questa parte verrà suddivisa in quattro parti per comodità, ad ogni parte corrisponde rispettivamente la prima, seconda, terza e quarta frase. Andremo a vedere e analizzare il seguento foglio di stile:
1a parte:
Per ottenere una scritta sottolineata in HTML si racchiude la frase/titolo nel tag <u>.
Per fare ciò in un foglio di stile esterno bisogna scrivere il seguente codice:
Analizziamo la seguente riga di codice:
h1: E' appunto come abbiamo visto prima il tag per il titlo, in un foglio CSS per modificare un tag nell'HTML dobbiamo scrivere il tag desiderato e a seguire le due parentesi graffe, nelle quali andranno racchiuse le caratteristiche.
text-decoration: è, come appena detto una caratteristica, in questo caso esiste text-decoration che permette di impostare diversi paramentri, quali la sottolineatura, sopralineatura e la frase sbarrata.
underline: sta per sottolineato, quindi in questo caso la frase verrà sottolineata.
Otterremo quindi una cosa del genere:
2a parte:
Per ottenere invece una scritta sopralineata in una pagina HTML bisogna usare per forza il CSS in quanto non esiste un tag apposito.
Per fare ciò in un foglio di stile esterno bisogna scrivere il seguente codice:
La sintassi è uguale alla precedente, quindi non c'è bisogno che ve lo ripeta un'altra volta
Otterremo quindi una cosa del genere:
Da notare come la dimensione sia diversa tra h1 e h2.
3a parte:
Per ottenere una scritta sbarrata in HTML si racchiude la frase/titolo nel tag <strike>.
Per fare ciò in un foglio di stile esterno bisogna scrivere il seguente codice:
Stessa cosa di prima, cambia solo il parametro.
Otterremo quindi una cosa del genere:
4a ed ultima parte:
In questa ultima parte vedremo come modificare a nostro piacimento le caratteristiche di un paragrafo.
Analizziamo il codice:
p: come per la situazione precedente ormai avrete capito e imparato che per modificare un paramentro bisogno scrivere il tag HTML seguito dalle graffe.
letter-spacing: significa "spaziatura delle lettere", quindi come potete intuire il paragrafo avrà una spaziatura tra una lettere e l'altra.
color: blue: come facilmente intuibile è il colore che avrà il nostro paragrafo, possiamo esprimere il colore anche in esadecimale preceduto dal cancelletto, esempio #FFFFFF e simili
font-family: Verdana: Sta ad indicare il font che vogliamo utilizzare nel paragrafo, Verdana è solo un esempio, potete mettere il font che più vi piace.
font-size: 12px: Sta ad indicare quanto deve essere grande la scritta del paragrafo. E' possibile indicare qualsiasi grandezza, basta che sia seguita da px, ovvero pixel.
Fatto ciò, il risultato a video nella pagina HTML sarà così:
La seconda "lezione" finisce qui, abbiamo visto come impostare un file esterno .css con dei tag basilari. Nella prossima guida impareremo tag un pò più avanzati e efficaci per la nostra pagina HTML.
Se la guida vi è stata utile vi invito a lasciare un commento e un mi piace!
Guida creata da Mack141 su inforge.net per inforge.net, è vietata la distribuzione di questa guida su altri siti/forum senza il premesso dell'autore.
In questa guida andremo a vedere come creare una pagina HTML con un file .css esterno!
INIZIAMO DALLE BASI
In questa guida andremo a realizzare una pagina HTML basilare con delle semplici scritte, come da titolo, iniziamo dalle basi!
Codice:
[TABLE]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]<html>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <head>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <title>Prima pagina</title>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] </head>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <link rel="stylesheet" type="text/css" href="[URL="file:///C:/Users/iMeck/Desktop/Scuola/CSS/CSS/html1CSS.css"]f[/URL]ogliodistile.css" />[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <body>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <h1>IL MIO FOGLIO CON CSS (SOTTOLINEATO)</h1>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <h2>IL MIO FOGLIO CON CSS (SOPRALINEATO)</h2>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <h3>IL MIO FOGLIO CON CSS (SBARRATO)</h3>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <p> Prova testo paragrafo </p>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] </body>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</html>[/TD]
[/TR]
[/TABLE]Quella riportata sopra è la nostra pagina HTML, nella quale sono stati inseriti:
<link rel="stylesheet" type="text/css" href="fogliodistile.css" /> : Questo è il "link" attraverso il quale noi possiamo richiamare il nostro foglio di stile, nel caso non ti fosse chiaro cos'è clicca qui.
<h1> / <h2> / <h3> : Questi tag sono utilizzati per creare dei titoli, più piccolo è il numero che affianca la lettera h più grande sarà la dimensione del titolo
<p> : Questo tag viene utilizzato per creare dei paragrafi.
Quasi tutti i tag vanno chiusi, ovvero: <p> </p>, <h1> </h1>
Come possiamo vedere dalla pagina HTML di esempio nella pagina verranno visualizzate 4 frasi:
- La prima verrà scritta con il tag <h1> e, nel foglio di stile, verrà applicata la sottolineatura.
- La seconda verrà scritta con il tag <h2> e, nel foglio di stile, verrà applicata la sopralineatura.
- La terza invece, verrà scritta con il tag <h3> e sarà sbarrata.
- La quarta frase verrà scritta con il tag <p>, quindi un paragrafo, e verranno inserite le caratteristiche direttamente nel file CSS.
IL FOGLIO DI STILE
Questa parte verrà suddivisa in quattro parti per comodità, ad ogni parte corrisponde rispettivamente la prima, seconda, terza e quarta frase. Andremo a vedere e analizzare il seguento foglio di stile:
Codice:
p {letter-spacing: 3px;color:blue;
font-family:Verdana;
font-size:12px;
}
h1 {text-decoration: underline;
}
h2 {text-decoration: overline;
}
h3 {text-decoration: line-through;
}1a parte:
Per ottenere una scritta sottolineata in HTML si racchiude la frase/titolo nel tag <u>.
Per fare ciò in un foglio di stile esterno bisogna scrivere il seguente codice:
Codice:
h1 {text-decoration: underline;
}Analizziamo la seguente riga di codice:
h1: E' appunto come abbiamo visto prima il tag per il titlo, in un foglio CSS per modificare un tag nell'HTML dobbiamo scrivere il tag desiderato e a seguire le due parentesi graffe, nelle quali andranno racchiuse le caratteristiche.
text-decoration: è, come appena detto una caratteristica, in questo caso esiste text-decoration che permette di impostare diversi paramentri, quali la sottolineatura, sopralineatura e la frase sbarrata.
underline: sta per sottolineato, quindi in questo caso la frase verrà sottolineata.
Otterremo quindi una cosa del genere:
Per ottenere invece una scritta sopralineata in una pagina HTML bisogna usare per forza il CSS in quanto non esiste un tag apposito.
Per fare ciò in un foglio di stile esterno bisogna scrivere il seguente codice:
Codice:
h2 {text-decoration: overline;
}La sintassi è uguale alla precedente, quindi non c'è bisogno che ve lo ripeta un'altra volta
Otterremo quindi una cosa del genere:
3a parte:
Per ottenere una scritta sbarrata in HTML si racchiude la frase/titolo nel tag <strike>.
Per fare ciò in un foglio di stile esterno bisogna scrivere il seguente codice:
Codice:
h3 {text-decoration: line-through;
}Stessa cosa di prima, cambia solo il parametro.
Otterremo quindi una cosa del genere:
In questa ultima parte vedremo come modificare a nostro piacimento le caratteristiche di un paragrafo.
Codice:
p {letter-spacing: 3px;color:#blue;
font-family:Verdana;
font-size:12px;
}Analizziamo il codice:
p: come per la situazione precedente ormai avrete capito e imparato che per modificare un paramentro bisogno scrivere il tag HTML seguito dalle graffe.
letter-spacing: significa "spaziatura delle lettere", quindi come potete intuire il paragrafo avrà una spaziatura tra una lettere e l'altra.
color: blue: come facilmente intuibile è il colore che avrà il nostro paragrafo, possiamo esprimere il colore anche in esadecimale preceduto dal cancelletto, esempio #FFFFFF e simili
font-family: Verdana: Sta ad indicare il font che vogliamo utilizzare nel paragrafo, Verdana è solo un esempio, potete mettere il font che più vi piace.
font-size: 12px: Sta ad indicare quanto deve essere grande la scritta del paragrafo. E' possibile indicare qualsiasi grandezza, basta che sia seguita da px, ovvero pixel.
Fatto ciò, il risultato a video nella pagina HTML sarà così:
La seconda "lezione" finisce qui, abbiamo visto come impostare un file esterno .css con dei tag basilari. Nella prossima guida impareremo tag un pò più avanzati e efficaci per la nostra pagina HTML.
Se la guida vi è stata utile vi invito a lasciare un commento e un mi piace!
Guida creata da Mack141 su inforge.net per inforge.net, è vietata la distribuzione di questa guida su altri siti/forum senza il premesso dell'autore.
