Un foglio di stile a cascata (CSS) è un sistema per la codifica di siti Web che consente ai progettisti di manipolare più funzionalità contemporaneamente assegnando determinati elementi a gruppi. Ad esempio, utilizzando un codice per lo sfondo del sito Web, i designer possono modificare il colore o l'immagine di sfondo su tutte le pagine del sito Web con una modifica al file CSS. Ecco come creare CSS per un sito Web di base.
Passi
Parte 1 di 4: scrittura di CSS in linea
Passaggio 1. Assicurati di avere una conoscenza di base dei tag HTML
Dovresti sapere come funzionano i tag e del
src
e
href
attributi.
Passaggio 2. Impara alcune delle proprietà CSS di base
Scoprirai che ci sono moltissime proprietà. Tuttavia, non è necessario impararli tutti.
-
Alcune buone proprietà CSS di base da conoscere sono
colore
e
famiglia di font
- .
Passaggio 3. Ulteriori informazioni sui valori per ciascuna rispettiva proprietà
Tutte le proprietà hanno bisogno di un valore. Per il
colore
proprietà, ad esempio, potresti mettere il
rosso
valore.
Passaggio 4. Ulteriori informazioni su
stile
Attributo HTML.
È usato all'interno di un elemento come
href
o
src
. Per utilizzarlo, tra le virgolette dopo il segno di uguale, inserisci l'attributo CSS, i due punti e quindi il valore della proprietà. Questa è nota come regola CSS.
Passaggio 5. Comprendere che il CSS inline non viene solitamente utilizzato per i siti Web da sviluppatori Web professionisti
CSS in linea può aggiungere confusione inutile a un documento HTML. Tuttavia, è un ottimo modo per conoscere il funzionamento dei CSS.
Parte 2 di 4: scrittura di CSS di base
Passaggio 1. Avvia il programma che desideri utilizzare
Dovrebbe consentirti di creare file HTML e CSS.
Se non hai un programma speciale installato, puoi utilizzare Blocco note o un altro editor di testo. Salva semplicemente il tuo file sia come file di testo che come file CSS
Passaggio 2. Apri il file HTML per il tuo sito web
Dovresti aprirlo anche con un editor HTML, se ne hai uno installato.
Gli editor HTML ti consentono di modificare HTML e CSS contemporaneamente
Passaggio 3. Crea un tag all'interno della tua testa HTML
Questo ti permetterà di scrivere CSS senza la necessità di un file separato.
Passaggio 4. Scegli un elemento a cui vuoi aggiungere uno stile e digita il nome dell'elemento seguito da una serie di parentesi graffe ({ })
Per rendere il tuo codice più leggibile, metti sempre la seconda parentesi graffa sulla sua riga.
Passaggio 5. Tra le parentesi graffe, digita le regole CSS come faresti con il
stile
attributo.
Ogni riga deve terminare con un punto e virgola (;). Per rendere leggibile il tuo codice, ogni regola dovrebbe iniziare su una propria riga e ogni riga dovrebbe essere rientrata.
È molto importante notare che questo stile influirà su tutti gli elementi del tipo selezionato sulla pagina. Lo stile più specifico sarà trattato nella prossima sezione
Parte 3 di 4: CSS più avanzati
Passaggio 1. Crea un file CSS, non un file HTML e salvalo utilizzando il
.css
estensione.
Apri anche il tuo file HTML.
Passaggio 2. Crea un tag nella tua testa HTML
Ciò ti consentirà di collegare un file CSS separato al tuo documento HTML. Il tag del tuo link ha bisogno di tre attributi:
rel
genere
e
href
-
rel
significa "relazione" e dice al browser qual è la relazione con il documento HTML. Qui dovrebbe avere un valore di
"foglio di stile"
- .
-
genere
indica a quale tipo di media è collegato. Qui dovrebbe avere un valore di
"testo/css"
-
href
- qui viene utilizzato in modo simile a come viene utilizzato in un elemento, ma qui deve essere collegato a un file CSS. Se il file CSS si trova nella stessa cartella del file HTML, è necessario scrivere solo il nome del file tra virgolette.
Passaggio 3. Seleziona elementi di tipo diverso a cui desideri aggiungere lo stesso stile
Aggiungere un
classe
attribuisci a questi elementi e impostali come un nome di classe a tua scelta. Questo darà ai tuoi elementi lo stesso stile.
Passaggio 4. Assegna lo stile che riceverà una classe
Digita il nome della classe nel tuo file CSS preceduto da un punto (.) (es.
.classe
).
Passaggio 5. Seleziona i singoli elementi a cui vuoi aggiungere uno stile speciale e aggiungi un
ID
attributo.
Gli ID vengono creati in CSS utilizzando un simbolo di cancelletto (#) anziché un punto.
Gli ID sono più specifici delle classi, quindi un ID sovrascriverà qualsiasi stile di classe se ha un attributo con un valore diverso dalla classe
Parte 4 di 4: Ulteriori informazioni
Passaggio 1. Visita le scuole w3
Si tratta di un sito ufficiale finalizzato all'insegnamento delle abilità di sviluppo web. Il w3 ha molti riferimenti elencati per HTML e CSS, così come altri linguaggi web.
Passaggio 2. Trova altri siti specificamente mirati all'apprendimento e all'insegnamento di HTML e CSS
Siti come CSS tricks.com hanno lo scopo specifico di insegnare CSS e abilità di web design. Trovare fonti affidabili ti aiuterà nel tuo percorso di apprendimento.
Passaggio 3. Entra in contatto con web designer e sviluppatori
La loro esperienza e il loro know-how possono insegnarti preziose conoscenze e abilità.
Passaggio 4. Visualizza il codice sorgente dei siti Web che incontri
La visualizzazione del CSS di siti Web ben sviluppati può mostrarti modi per progettare parti di siti Web. Copiarlo come pratica e giocherellare con il codice può aiutarti a imparare a usare diversi attributi CSS.
