Creare un sito web è un ottimo modo per esprimere te stesso. Sebbene esistano molti strumenti per la creazione di siti Web, scriverlo da soli è un modo divertente per saperne di più su come funzionano i siti Web dietro le quinte. Un buon progetto per principianti consiste nel creare un sito Web e aggiungere un'immagine di sfondo con CSS. Questo progetto ti renderà operativo con HTML e CSS.
Cos'è il CSS?
CSS è l'acronimo di Cascading Style Sheet. È un linguaggio di programmazione che ti consente di applicare stili ai linguaggi di markup. Uno di questi linguaggi di markup è HTML o Hyper-Text Markup Language. L'HTML viene utilizzato per creare siti Web. Sebbene tu possa controllare parte dello stile del sito web utilizzando HTML, CSS offre molte più opzioni di controllo e design.
Creazione di un sito Web di base con HTML
Dal momento che CSS è solo un linguaggio di stile, per usarlo, abbiamo prima bisogno di qualcosa per lo stile. Un sito web molto semplice sarà sufficiente per iniziare a giocare con i CSS. La nostra pagina mostrerà "Hello World".
Ciao mondo
Nel caso in cui non hai familiarità con l'HTML, esaminiamo rapidamente cosa fanno tutti gli elementi. Come accennato, l'HTML è un linguaggio di markup, il che significa che utilizza i tag per contrassegnare il testo. Ogni volta che vedi una parola circondata da <> è un tag. Esistono due tipi di tag, un tag che contrassegna l'inizio di una sezione utilizzando <> e uno che contrassegna la fine di una sezione utilizzando
Nel nostro esempio, abbiamo quattro tag. Il html tag indica quali elementi fanno parte del sito web. Il capo Il tag contiene le informazioni di intestazione che non vengono visualizzate sulla pagina ma sono necessarie per creare la pagina. Tutti gli elementi visualizzati si trovano tra i file corpo tag. Abbiamo solo un elemento visualizzato, il p etichetta. Indica al browser web che il testo è un paragrafo.
Relazionato: 10 semplici esempi di codice CSS che puoi imparare in 10 minuti
Vuoi saperne di più sull'utilizzo dei CSS? Prova questi esempi di codice CSS di base per iniziare, quindi applicali alle tue pagine web.
Aggiunta di CSS a HTML
Ora che abbiamo una pagina semplice, possiamo personalizzare lo stile con CSS. La nostra pagina è piuttosto semplice in questo momento e non c'è molto che possiamo fare, ma iniziamo mettendo in risalto il nostro paragrafo in modo da poterlo distinguere dallo sfondo aggiungendo un bordo.
Ciao mondo
Ora, il nostro paragrafo sarà circondato da un bordo nero. L'aggiunta di una descrizione di stile in CSS al nostro tag di paragrafo ha detto al sito Web come applicare uno stile al paragrafo. Possiamo aggiungere altre descrizioni. Aumentiamo lo spazio bianco, o riempimento, attorno al nostro paragrafo e centriamo il nostro testo.
Ciao mondo
Il nostro sito web ha un aspetto migliore, ma il nostro HTML inizia a sembrare disordinato con tutte quelle descrizioni nel tag del paragrafo. Possiamo spostare queste informazioni nella nostra intestazione. La nostra intestazione è per le informazioni di cui abbiamo bisogno per visualizzare correttamente il sito web.
Ciao mondo
Ora il nostro HTML è più facile da leggere. Noterai che abbiamo dovuto cambiare alcune cose. Il tag style dice le informazioni sullo stile del browser web, ma anche cosa stile. Nel nostro esempio, abbiamo usato due modi diversi per dirgli cosa modellare. Il p nel tag di stile indica al browser web di applicare quello stile a tutti i tag di paragrafo. Il #ourparagrafo la sezione dice di applicare lo stile solo agli elementi con l'id il nostro paragrafo. Notare che id informazioni sono state aggiunte al tag p nel nostro corpo.
Importazione di un file CSS sul tuo sito web
L'aggiunta delle informazioni sullo stile all'intestazione rende il nostro codice molto più facile da leggere. Tuttavia, se vogliamo applicare lo stile a molte pagine diverse allo stesso modo, dobbiamo aggiungere quel testo all'inizio di ogni pagina. Potrebbe non sembrare molto lavoro, dopotutto puoi copiarlo e incollarlo, ma crea molto lavoro se desideri modificare un elemento in un secondo momento.
Invece, manterremo le informazioni CSS in un file separato e importeremo il file per dare uno stile alla pagina. Copia e incolla le informazioni tra i tag di stile in un nuovo file CSS ourCSSfile.css.
p {
text-align: center
}
#ourParagraph {
stile bordo: solido;
imbottitura: 30px;
}Quindi, importa il file nel file HTML.
Ciao mondo
Aggiunta di un'immagine di sfondo con CSS
Ora che hai una solida base in HTML e CSS, aggiungere un'immagine di sfondo sarà un gioco da ragazzi. Innanzitutto, identifica l'elemento a cui vuoi dare un'immagine di sfondo. Nel nostro esempio, aggiungeremo uno sfondo all'intera pagina. Ciò significa che vogliamo cambiare lo stile del file corpo. Ricorda, i tag body contengono tutti gli elementi visibili.
corpo{
immagine di sfondo: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
stile bordo: solido;
imbottitura: 30px;
}Per cambiare lo stile del corpo in CSS, usa prima il corpo parola chiave. Quindi aggiungi parentesi graffe come abbiamo fatto prima {}. Tutte le informazioni sullo stile per il corpo devono essere comprese tra le parentesi graffe. L'attributo di stile che vogliamo cambiare è immagine di sfondo. Ci sono molti attributi di stile. Non aspettarti di memorizzarli tutti. Segnalibro a Cheat-sheet sulle proprietà CSS con attributi che vuoi ricordare.
Relazionato: 8 fantastici effetti HTML che chiunque può aggiungere al proprio sito web
Dopo l'attributo, usa i due punti per indicare come cambierai l'attributo. Per importare un'immagine, usa url (). indica che stai utilizzando un collegamento per puntare all'immagine. Posiziona il percorso del file tra parentesi tra virgolette. Infine, termina la riga con un punto e virgola. Sebbene lo spazio bianco non abbia significato in CSS, usa il rientro per rendere il CSS più facile da leggere.
Il nostro esempio è simile a questo:
Se la tua immagine non viene visualizzata correttamente a causa delle sue dimensioni, puoi modificarla direttamente. Tuttavia, ci sono attributi di stile di sfondo nei CSS che puoi usare per alterare lo sfondo. Le immagini più piccole dello sfondo verranno automaticamente ripetute sullo sfondo. Per disattivarlo, aggiungi ripetizione in background: nessuna ripetizione; al tuo elemento.
Esistono anche due modi per fare in modo che un'immagine copra l'intero sfondo. Innanzitutto, puoi impostare la dimensione dello sfondo in base alle dimensioni dello schermo con dimensione dello sfondo: 100% 100%;, ma questo allungherà l'immagine e potrebbe distorcere eccessivamente l'immagine. Se non desideri modificare le proporzioni dell'immagine, puoi anche impostare la dimensione dello sfondo su copertina. Cover farà in modo che l'immagine di sfondo copra lo sfondo, ma non distorce l'immagine.
Modifica del colore di sfondo
Cambiamo un'ultima cosa. Ora che abbiamo un background, il nostro paragrafo è difficile da leggere. Rendiamo bianco il suo sfondo. Il processo è simile. L'elemento che vogliamo modificare è #ourParagraph. Il # indica che "ourParagraph" è un nome di identificazione. Successivamente, vogliamo impostare il file colore di sfondo attribuire al bianco.
corpo{
immagine di sfondo: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
colore di sfondo: bianco;
stile bordo: solido;
imbottitura: 30px;
}Molto meglio.
Continuare a progettare il tuo sito web con CSS
Ora che sai come cambiare lo stile di diversi elementi HTML, non ci sono limiti! Il metodo di base per modificare gli attributi di stile è lo stesso. Identifica l'elemento che desideri modificare e descrivi come modificare l'attributo. Il modo migliore per saperne di più è giocare con attributi diversi. Sfida te stesso a cambiare il colore del tuo testo in seguito.
Vuoi imparare l'HTML per codificare i tuoi siti web e le tue app? Usa questi esempi di pagine web e il codice sorgente per apprendere HTML e CSS.
- Programmazione
- HTML
- Web design
- CSS
J. Seaton è uno scrittore di scienze specializzato nella scomposizione di argomenti complessi. Ha un dottorato di ricerca presso l'Università del Saskatchewan; la sua ricerca si è concentrata sull'utilizzo dell'apprendimento basato sul gioco per aumentare il coinvolgimento degli studenti online. Quando non lavora, la troverai con lei che legge, gioca ai videogiochi o fa giardinaggio.
Iscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Ancora un passo…!
Conferma il tuo indirizzo e-mail nell'e-mail che ti abbiamo appena inviato.