CREARE SITI WEB in HTML e CSS > Inserimento facilitato del codice in Visual Studio Code
Visual Studio Code oltre a facilitare l'inserimento dei tag del linguaggio html, facilita anche la creazione dei Fogli Stile (CSS); vediamo come.
INSERIMENTO DEI TAG HTML
Come visto nella lezione precedente, le impostazione dei fogli stile, vanno preferibilmente dichiarati all'interno del tag head.Quindi sfruttando il completamento automatico di Visual Studio Code, è possibile digitare solo le iniziali del tag e premere il tasto invio per confermare il suggerimento apparso.
Ad esempio se vuoi inserire i due tag <style> </style>
- digita solamente le prime tre letter (sty)
- e premi invio da tastiera.
E così per ogni tag html; anzi per alcuni è sufficiente digitare solo una o due lettera e premere invio.
INSERIMENTO DI PROPRIETÀ E VALORI DEI FOGLI STILE
Anche l'inserimento del codice CSS è facilitato.Se provi infatti a digitare all'interno dei tag
<style> </style>
le iniziali delle proprietà e dei valori,
apparirà un elenco di suggerimenti che potrai accettare con un semplice clic sulla voce desiderata.
ESEMPIO PRATICO SUI CSS
Quindi facendo un esempio pratico,- posiziona il cursore all'interno dei tag "style"
- digita h1
- digita { (aperta parentesi grafa)
- premi il tasto invio
Nota
Per digitare la parentesi grafa aperta:
- tieni premuto il tasto MAIUSC e il tasto AltGr
- e premi il tasto contenente il simbolo della parentesi quadra e/o grafa
Oppure puoi,
- tenere premuto il tasto ALT
- e senza mai rilasciare il tasto ALT
- premi in successione i tasti 1, 2, 3
- poi rilascia il tasto ALT.
Per digitare la parentesi grafa aperta:
- tieni premuto il tasto MAIUSC e il tasto AltGr
- e premi il tasto contenente il simbolo della parentesi quadra e/o grafa
Oppure puoi,
- tenere premuto il tasto ALT
- e senza mai rilasciare il tasto ALT
- premi in successione i tasti 1, 2, 3
- poi rilascia il tasto ALT.
- digita f
- e fai un clic sulla voce "font-size" suggerita
- digita 24pt
- posiziona il cursore a destra del punto e virgola, e premi invio
- digita c
- e fai un clic sulla voce "color" suggerita
- digita r
- e fai un clic sulla voce "red" suggerita
- posiziona il cursore a destra del punto e virgola, e premi invio
- digita t
- fai un clic sulla voce "text-align" suggerita
- fai un clic sulla voce "center" suggerita
Al termine otterrai il seguente codice.
Salva le modifiche del file "citta-nel-mondo.html" e aprilo con il browser, per verificarne i risultati.
Ti potrebbe interessare anche...
Fare calcoli e creare elenchi con
- Come creare un blog gratis
- Come creare siti web gratis
- Gestisci le tue foto con Picasa
- Naviga veloce con Google Chrome
- Scarica video e musica con Free Studio
Frasi celebri
“Se non lo sai spiegare in modo semplice, non l'hai capito abbastanza bene” (Albert Einstein).