Impareremo cosa sono i fogli di stile a cascata, cos'è lo stile CSS e come impostarlo per gli elementi HTML.

Con questo articolo, hai già una solida comprensione di quale linguaggio di markup dell'ipertesto viene utilizzato per descrivere il contenuto di una pagina web. Mentre navighiamo sul Web, notiamo che le pagine hanno un aspetto diverso: colori, caratteri, interlinea, immagini di sfondo e persino animazioni. Senza metterlo da parte, voglio spiegarti subito che l'aspetto di queste pagine è influenzato dall'usato Fogli di stile (Fogli di stile - css). Come parte del tutorial HTML, tu ed io esamineremo brevemente l'uso dei fogli di stile a cascata, puoi studiarli in dettaglio dopo questo corso nella sezione tutorial CSS.

Cos'è lo stile? Lo stile imposta l'aspetto di qualsiasi elemento della pagina, ad es. In parole povere, questa è una regola che dice al browser come formattare un determinato elemento (ad esempio, cambiare lo sfondo o il colore del carattere).

Ogni elemento HTML ha stile predefinito. La modifica dello stile predefinito di un elemento HTML può essere eseguita utilizzando l'attributo di stile globale. Insiemi di attributi incorporato (in linea) Stile CSS per l'elemento. Inline CSS viene utilizzato per applicare uno stile unico a un singolo elemento HTML. Come parte dell'apprendimento dell'HTML, esamineremo solo l'utilizzo di CSS inline.

Suggerimento: questo esempio utilizza i seguenti colori: bianca(bianca), cachi(cachi), grigio(grigio). Il carattere Verdana è usato per il testo della poesia.

Se hai difficoltà a completare l'attività, controlla il codice della pagina aprendo l'esempio in una finestra separata facendo clic sull'immagine.

CSS (Fogli di stile a cascata) o fogli di stile a cascata, sono usati per descrivere l'aspetto di un documento Web scritto in un linguaggio di markup. CSS stabilisce regole di stile che cambiano l'aspetto degli elementi inseriti nelle pagine Web, ne perfezionano i dettagli, come colore, carattere, dimensione, bordi, sfondo e posizione nel documento.

Puoi incorporare il codice CSS direttamente in un elemento di markup come valore di attributo stile. Questo attributo è disponibile su tutti gli elementi HTML. Con CSS, puoi specificare un numero di proprietà di stile per un dato elemento HTML. Ogni proprietà ha un nome e un valore separati da due punti (:). Ogni proprietà dichiarata è separata da un punto e virgola (;).

Ecco come appare per un elemento

Modi per aggiungere stili CSS

Lo standard CSS offre tre opzioni per applicare un foglio di stile a una pagina web:

• Foglio di stile esterno: definizione delle regole del foglio di stile in un file .css separato e quindi inclusione di questo file in un documento HTML utilizzando un tag
• Foglio di stile interno: definizione delle regole del foglio di stile utilizzando un tag

  Esempio: foglio di stile interno

  • Provate voi stessi "

  intestazione

  Testo uno

  Testo due

  Testo tre

  intestazione

  Testo uno

  Testo due

  Testo tre

  In questo esempio, impostiamo il colore di sfondo dell'elemento utilizzando i CSS. : colore di sfondo: verde chiaro, colore e tipo di carattere per le intestazioni

  : colore blu; font-family:verdana e la dimensione del carattere, il colore e l'allineamento del testo per i paragrafi

  : dimensione del carattere: 20px; colore rosso; text-align:center.

  Stile in linea

  Quando è necessario formattare un singolo elemento di una pagina HTML, la dichiarazione di stile può essere inserita direttamente all'interno del tag di apertura utilizzando l'attributo style già specializzato. Per esempio:

  Paragrafo

  Tali stili sono chiamati incorporati (inline) o incorporati. Le regole definite direttamente all'interno del tag di apertura di un elemento hanno la precedenza sulle regole definite nel file CSS esterno, nonché sulle regole definite sull'elemento

  intestazione

  Testo uno

  Testo due

  Testo tre

  Compiti

  • Allineamento del testo al centro

    Usa lo stile di paragrafo in linea per centrare il testo.

  Quando un browser legge un foglio di stile, formatta il documento in base ad esso.

  Tre modi per incorporare CSS

  Esistono tre modi per inserire un foglio di stile:

  • Foglio di stile esterno
  • Foglio di stile interno
  • Stile in linea

  Foglio di stile esterno

  Un foglio di stile esterno è l'ideale quando gli stili devono essere applicati a molte pagine. Con un foglio di stile esterno, puoi modificare l'aspetto di un intero sito Web modificando un singolo file. Ogni pagina deve collegarsi al foglio di stile utilizzando il tag . Etichetta è nella sezione testa:

  Non lasciare spazi tra il valore dell'immobile e le sue unità! "margin-left:20 px" (invece di "margin-left:20px") funzionerà in IE (Internet Explorer), ma non in Firefox o Opera.

  Foglio di stile interno

  Un foglio di stile interno viene utilizzato quando un singolo documento ha uno stile unico. Definisci gli stili interni nella sezione head di una pagina HTML usando il tag

  Se scrivi un codice come questo tra i tag ... , quindi tutte le intestazioni del primo livello saranno blu. Con questo metodo, gli stili vengono impostati utilizzando i tag. . Anche tegu ma non il sito nel suo insieme.

• Fogli di stile esterni. Sono impostati in un file separato e collegati al documento html tramite il tag , che viene posizionato tra i tag ... . Consideriamo questo caso in modo più dettagliato. Digitiamo questo codice nel blocco note e lo salviamo come file html.

  
  
  
  
  
  
  

  Intestazione di primo livello

  
  

  Intestazione del terzo livello, situata al centro del documento html

  
  

  Intestazione del sesto livello, pagina web allineata a destra

  
  
  

  Successivamente, crea un nuovo file con il seguente contenuto:

  H1 (colore:blu;)
  h3 (colore:rosso;)
  H6 (colore:verde;)

  E salvalo come stile con estensione *css. Guarda il risultato. Questo è il nostro file HTML di intestazione. Ora vediamo come funziona questo design. In un documento html con titoli, siamo tra i tag ... ha scritto questa riga:

  Qui con l'etichetta includiamo i fogli di stile nel documento html. Attributo href si riferisce alla posizione del foglio di stile, questo è un attributo obbligatorio. Attributo genere sappiamo già che specifica il tipo di foglio di stile. Attributo rel indica la relazione del file incluso con il documento html specificato. Nel nostro caso, il valore dell'attributo rel="foglio di stile" significa che abbiamo aggiunto di base foglio di stile. Il vantaggio di questo metodo di impostazione dei fogli di stile è che se si desidera modificare il design del sito nel suo insieme, è sufficiente modificare un solo file con i fogli di stile.

Un foglio di stile CSS, se prendiamo la definizione stessa, è un linguaggio per descrivere l'aspetto di un documento. Cioè, l'HTML è responsabile della struttura della pagina e il foglio di stile CSS è responsabile di tutto il design. Ho raccolto qui informazioni che ti permetteranno di utilizzare liberamente il foglio di stile. Non scriverò di come sia necessario conoscerlo, perché è chiaro che senza di esso non sarai in grado di riportare il sito in un aspetto più o meno normale. Se qualcuno sta appena iniziando a imparare gli stili CSS, allora questi materiali sono sufficienti per iniziare ad imparare i CSS.

1. Cose di base

Inizierò con le basi. Quando ho aperto questo sito, ho scritto un piccolo tutorial sull'apprendimento dei fogli di stile CSS. Le lezioni sono adatte sia per coloro che sono appena agli inizi, sia per coloro che già sanno qualcosa per rinfrescare le proprie conoscenze. Lì tutto è incorniciato in immagini e su esempi reali.

Piccola digressione: quando ho iniziato a studiare da solo l'argomento della costruzione del sito, ho imparato quasi tutti i tag HTML e non mi hanno ispirato molto. Ma dopo aver iniziato a imparare il foglio di stile CSS e a provare ciascuna delle proprietà, mi è piaciuto così tanto (non l'avrei creato se non mi fosse piaciuto). Ho visto che puoi fare cose incredibili solo con i CSS. Non è un linguaggio di programmazione che richiede mesi per essere appreso. Il foglio di stile può essere padroneggiato in una (massimo due) settimane.

Naturalmente, non imparerai assolutamente tutte le proprietà e i loro valori, e non è necessario! Devi solo conoscere le basi in modo da poter iniziare ad applicarlo e usarlo nei tuoi progetti. Una sfumatura importante è che devi applicare IMMEDIATAMENTE la proprietà che hai appena appreso a un esempio reale. Lascia che sia il tuo sito o un semplice sito HTML: non importa. È importante provare a scrivere con le tue mani e vedere il risultato.

Ho molti esempi sul mio sito che usano i CSS. Solo e insieme contengono più di 100 lezioni! Quando conosci almeno le basi, puoi tranquillamente modificare e applicare tutti gli esempi delle lezioni.

Le mie lezioni sulle basi degli stili CSS a cascata

2. Cheat sheet CSS e CSS3

Bene, hai imparato le basi e dopo un paio di giorni hai dimenticato tutto con “successo” e, probabilmente, pensi che questo non sia tuo e tutto è complicato. Voglio tirarti su un po' subito il morale: io stesso non conosco tutte le proprietà dei CSS. Ma cosa mi impedisce di vederli su Internet?

È vero, mentre vai su Yandex o Google, digiterai la richiesta di cui hai bisogno. E se ancora non fornisce ciò di cui hai bisogno nella ricerca. Così puoi passare molto tempo e ancora non trovare quello che stai veramente cercando.

Fortunatamente, le brave persone hanno compilato cheat sheet molto utili che mi hanno aiutato più di una volta. Basta capire dove si trova tutto e poi trovare le giuste proprietà non è difficile.

Fogli CSS e CSS3

Questi sono semplicemente materiali indispensabili per il layout e il design del sito. Il tempo per distrarsi e cercare in Internet una descrizione delle proprietà si riduce molte volte.

È vero, come capisci, più crei siti o progetti, meno devi guardare questo suggerimento, poiché tutte le proprietà necessarie rimangono sempre nella memoria. Tuttavia, avere questo set di cheat sheet a portata di mano non sarà superfluo.

È come a scuola: anche se non usi un cheat sheet, è comunque in qualche modo più calmo nella tua anima 😆 .