Lo stile e il layout visivo di un sito Web sono dettati da CSS o Cascading Style Sheets. Si tratta di documenti che modellano il markup HTML di una pagina Web, fornendo ai browser Web le istruzioni su come visualizzare le pagine risultanti da tale markup. I CSS gestiscono il layout di una pagina, così come il colore, le immagini di sfondo, la tipografia e molto altro ancora.
Se guardi un file CSS, vedrai che, come qualsiasi markup o linguaggio di programmazione, questi file hanno una sintassi specifica per loro. Ogni foglio di stile è composto da un certo numero di regole CSS. Queste regole, quando prese in pieno, sono ciò che gli stili del sito.
Le parti di una regola CSS
Una regola CSS è composta da due parti distinte: il selettore e la dichiarazione. Il selettore determina cosa viene disegnato su una pagina e la dichiarazione è come dovrebbe essere stilizzata. Per esempio:
p { colore: # 000;} Questa è una regola CSS. La parte del selettore è la "p", che è un selettore di elementi per "paragrafi". Pertanto, selezionare TUTTI i paragrafi in un sito e fornire loro questo stile (a meno che non ci siano paragrafi che sono presi di mira da stili più specifici altrove nel documento CSS). La parte della regola che dice "color: # 000;" è ciò che è noto come la dichiarazione. Quella dichiarazione è composta da due pezzi: la proprietà e il valore. La proprietà è il pezzo "a colori" di questa dichiarazione. Stabilisce quale aspetto del selettore verrà modificato visivamente. Il valore è ciò a cui verrà modificata la proprietà CSS scelta. Nel nostro esempio, stiamo usando il valore esadecimale di # 000, che è CSS stenografia per "nero". Quindi, usando questa regola CSS, la nostra pagina avrebbe i paragrafi visualizzati in un font-colore di nero. Quando scrivi proprietà CSS, non puoi semplicemente inventarle come meglio credi. Per esempio, "color" è una proprietà CSS reale, quindi puoi usarla. Questa proprietà è ciò che determina il colore del testo di un elemento. Se si è tentato di utilizzare "text-color" o "font-color" come proprietà CSS, queste non funzionerebbero perché non sono parti effettive del linguaggio CSS. Un altro esempio è la proprietà "background-image". Questa proprietà imposta un'immagine che può essere utilizzata per uno sfondo, come questo: .logo { background-image: url (/images/company-logo.png);} Se si provasse ad usare "background-picture" o "background-graphic" come proprietà, fallirebbero perché, ancora una volta, queste non sono proprietà CSS reali. Esistono numerose proprietà CSS che è possibile utilizzare per lo stile di un sito. Alcuni esempi sono: Queste proprietà CSS sono ottime da usare come esempi, perché sono tutte molto semplici e, anche se non conosci il CSS, puoi probabilmente indovinare cosa fanno in base ai loro nomi. Ci sono altre proprietà CSS che incontrerai e che potrebbero non essere così ovvie come funzionano in base ai loro nomi: Man mano che ti avvicini al web design, incontrerai (e userai) tutte queste proprietà e molto altro! Ogni volta che si utilizza una proprietà, è necessario assegnargli un valore e alcune proprietà possono solo accettare determinati valori. Nel nostro primo esempio della proprietà "color", dobbiamo usare un valore di colore. Questo potrebbe essere un valore esadecimale, un valore RGBA o anche parole chiave a colori. Ognuno di questi valori funzionerebbe, tuttavia, se si usasse la parola "cupo" con questa proprietà, non avrebbe fatto nulla perché, per quanto descrittiva come potrebbe essere quella parola, non è un valore riconosciuto in CSS. Il nostro secondo esempio di "background-image" richiede che venga utilizzato un percorso immagine per recuperare un'immagine reale dai file del tuo sito. Questo è il valore / sintassi richiesto. Tutte le proprietà CSS hanno valori che si aspettano. Per esempio: Se si passa attraverso l'elenco delle proprietà CSS, si scoprirà che ognuna di esse ha valori specifici che useranno per creare gli stili a cui sono destinate. A cura di Jeremy Girard Nozioni di base sulle proprietà CSS
Alcune proprietà CSS
Proprietà ha bisogno di valori
