Facciamo un esempio di foglio di stile: crea un file stile.css e scrivi gli stili:

body (font-family: Arial, Verdana, Sans-serif; / * Font family * / font-size: 12pt; / * Font size base in punti * / background-color: # f0f0f0; / * Colore di sfondo della pagina Web * / color: # 000000; / * Colore del corpo del testo * /) h1 (color: # a52a2a; / * Colore dell'intestazione * / dimensione del carattere: 24pt; / * Dimensione del carattere in punti * / famiglia del carattere: Georgia, Times, serif ; / * Famiglia di caratteri * / peso del carattere: normale; / * Stile di testo normale * /)

Qui abbiamo stilizzato il corpo della pagina. e per il titolo

... Puoi anche impostare stili specifici per qualsiasi altro elemento nella pagina del tuo sito web.

Ora colleghiamo il nostro foglio di stile al sito:

Ciao mondo!

Questa è la mia prima pagina con gli stili CSS

Così abbiamo capito cos'è il CSS, perché questa tecnologia viene utilizzata, imparato come collegare gli stili al sito. Questo tutorial è una specie di introduzione ai fogli di stile a cascata. In altri tutorial parleremo della tecnologia CSS in modo più dettagliato.

Collegamento CSS avviene in diversi modi, che vengono utilizzati a seconda della situazione. Ora considereremo questi metodi in modo più dettagliato. Ci saranno molte informazioni, quindi non provare nemmeno a memorizzarle, ma cerca di capire cosa è cosa.

Sì, e un altro punto, già toccato nella lezione precedente, ma lo ripeterò ancora. Spesso molti principianti hanno già paura di una frase "Fogli di stile a cascata" o semplicemente "fogli di stile", quindi quando incontrano tali espressioni nel testo, pensano inconsciamente di non capire cosa è in gioco. Quindi, in effetti, non ci sono tabelle nella forma a cui sei abituato - no. E queste parole descrivono solo una cosa: tutto ciò che è correlato ai CSS, ovvero varie regole, proprietà, valori CSS e così via. In generale, tutto ciò che studieremo in questo tutorial. A proposito, questo include anche solo le parole "CSS" e "stili".

Stili in linea

Gli stili in linea sono collegati applicando l'attributo style a un tag specifico sulla pagina. In questo caso, il valore dell'attributo è uno o più (separati da punto e virgola) con i valori corrispondenti. Di norma, questo metodo viene utilizzato nei casi in cui è necessario modificare le caratteristiche di un elemento specifico su una pagina specifica.

sintassi generale

<тег style="свойство:значение; свойство:значение; ...">...

Un esempio di connessione di stili in linea a CSS

Paragrafo 1

Paragrafo 2

Risultato nel browser

Paragrafo 1

Paragrafo 2

Stili interni

Gli stili interni sono specificati nella "testata" del documento e sono inclusi utilizzando un tag. In questo caso, i CSS non interessano più un elemento, ma tutti gli elementi specificati negli stili presenti in questa pagina. Solitamente questo metodo viene utilizzato quando è necessario modificare gli stili di più elementi identici contemporaneamente all'interno della stessa pagina HTML.

Un esempio di collegamento di stili interni in CSS

Paragrafo 1

Paragrafo 2

Risultato nel browser

Paragrafo 1

Paragrafo 2

Stili esterni

Gli stili esterni sono inclusi in un file separato utilizzando il tag. In questo caso, tutti gli stili si trovano in un file di testo normale con estensione .css e interessano gli elementi di tutte le pagine a cui questo file è collegato. Di solito, la creazione di stili di sito inizia con questo metodo, poiché solo con il suo aiuto si avvertono tutti i vantaggi dei CSS, perché modificando i dati in un solo file, puoi controllare la visualizzazione di un gran numero di pagine contemporaneamente. E già nel processo di lavoro sul sito, vengono aggiunti stili interni o in linea, se necessario.

Gli autori si comportano in modo molto diverso quando utilizzano stili esterni. Alcuni memorizzano tutti gli stili del sito in un file, altri in diversi. Ad esempio, un file contiene stili per l'intero sito ed è presente su tutte le pagine, un altro è inoltre collegato solo a determinate sezioni, il terzo a determinate sottosezioni, ecc. Come agirai dipende da te.

Un esempio di connessione di stili esterni in CSS

Paragrafo 1

Paragrafo 2

Contenuto del file style.css

Corpo (sfondo: #ccccff; / * colore sfondo pagina * /) p (colore: rosso; / * colore testo paragrafo * / font-family: Helvetica, sans-serif; / * tipo font paragrafo * / dimensione font: 150 %; / * dimensione del carattere * / text-align: center; / * testo centrato * / bordo: 5px verde doppio; / * stili del bordo * /)

Risultato nel browser

Paragrafo 1

Paragrafo 2

Come puoi vedere, tutto è molto semplice. In generale, dai nomi di quasi tutte le proprietà CSS, puoi già capire che tipo di modifiche stanno apportando, ovviamente, se conosci almeno un po' di inglese.

Nella maggior parte degli esempi di questo Tutorial CSS Userò gli stili interni in quanto sono i più descrittivi per la dimostrazione. Per ulteriori studi, è meglio creare immediatamente un file di stili esterni e abituarsi ad applicarli. Ad esempio, crea una sottocartella di stile, crea un file style.css al suo interno e collegalo alla tua pagina HTML.

Compreso CSS tramite la regola @import

Un altro modo per includere stili in file separati è usare la regola ... Questa regola viene utilizzata per combinare diversi fogli di stile in uno, il che a volte è abbastanza conveniente. La connessione viene effettuata a fogli di stile esterni o interni, a tal fine la costruzione url() viene scritta dopo il nome della regola, dove l'URL del file con CSS è indicato tra virgolette (""). Oppure url() non viene scritto affatto, ma vengono seguite immediatamente le virgolette e l'indirizzo del file. La sintassi generale è la seguente.

In un foglio di stile esterno

@import url ("URL file"); @import "indirizzo file"; ...

nell'interiore

Diamo un'occhiata all'uso di questa regola nei fogli di stile esterni, per questo ti darò due esempi di confronto.

Esempio 1: collegamento generale di stili esterni

Contenuto della pagina.

Esempio 2: inclusione di stili esterni con la regola CSS @import

Contenuto della pagina.

Contenuto del file style1.css

@import url ("stile / stile2.css"); @import url ("stile / stile3.css"); Di seguito, possono esserci stili aggiuntivi regolari con proprietà, valori, ecc.

Governare ha funzionato correttamente, deve essere specificato all'inizio del foglio di stile. L'unica eccezione a questa regola è , che viene sempre prima, anche se in pratica è generalmente usato molto raramente.

Non ti consiglio di usare immediatamente tutta questa varietà di modi per includere i CSS: concentrati sui normali fogli di stile esterni, poiché questa è l'opzione principale. Se lo desideri, puoi, ovviamente, sperimentare, ma niente di più. In generale, puoi sempre decidere come connettere CSS, la cosa principale sarebbe cosa connettere. :)

Stili personalizzati

In molti browser è possibile collegare un file con CSS dagli utenti stessi, in modo che possano modificare l'aspetto dei siti visualizzati, come si suol dire, "per se stessi". Ad esempio, cambia la dimensione e il carattere del carattere, il colore del testo e lo sfondo di alcuni elementi, ecc. Naturalmente, in questo caso, gli stili sono creati dall'utente stesso. Ad esempio, in Internet Explorer, puoi connettere stili personalizzati andando su: Strumenti → Opzioni Internet → Generale → Aspetto.

In questo tutorial imparerai come connettere css a html. Consideriamo diverse opzioni con esempi. Parleremo anche del caricamento asincrono di stili e hack per diversi browser.

Come collegare css a html in un file separato

Ora ti mostrerò come connettere css a html con un foglio di stile separato. Viene creato un file CSS separato. Quindi, utilizzando comandi speciali, si collega ai documenti necessari. Questo aspetto è chiamato foglio di stile esterno.

Questo metodo è il più preferibile. Ti consente di sviluppare stili di sito separatamente dai documenti HTML. Lo stile può quindi essere utilizzato in un file style.css su più pagine.

Registriamo il percorso solo nel tag head. Contiene tutte le informazioni di sistema necessarie per visualizzare la pagina. Si collega così:

Ci sono anche altri modi per connettersi. Usali solo come opzione aggiuntiva.

Va detto che gli stili in linea hanno la massima priorità. Anche se includi CSS esterni, il browser darà la preferenza agli stili in linea per un tag specifico. Gli stili interiori hanno la priorità. Sono inferiori a quelli incorporati, ma sono superiori a quelli esterni.

In generale, come opzione aggiuntiva, potresti trovare utile utilizzare gli stili in linea o in linea. Questo è molto utile se hai bisogno di dare uno stile a un elemento su una pagina specifica senza influenzare il file css principale.

Nel primo capitolo, hai imparato che il design del sito web è fatto con i CSS. Per una migliore comprensione di cosa e perché utilizzare, diamo un'occhiata a un esempio illustrativo. Immagina che l'HTML sia un wireframe strutturato in bianco e nero di una casa senza decorazioni e che il CSS sia ciò che usiamo per creare un look unico.

Come puoi vedere, la casa a destra ora ha colori, materiali e decorazioni aggiuntive. La stessa cosa accade su una pagina web: usando le regole CSS, i colori e i rientri appaiono su di essa, lo stile del carattere e le dimensioni degli elementi cambiano e viene creato uno stile completo e completo.

Foglio di stile semplice

Diamo un'occhiata a come appare il foglio di stile più elementare e da quali elementi è composto. Questo è un esempio di stile CSS per tutti i tag

Che sono sulla pagina web:

Come apparirà ora il testo

Nel browser e cosa significa ogni riga? È molto semplice: il carattere sarà in grassetto e il colore # 1E824C (codice colore esadecimale) e visualizzato alla dimensione di 1em (un'unità relativa uguale alla dimensione del carattere predefinita nel browser).

Lo stile sopra, come qualsiasi altro, include un insieme di elementi che hanno i loro nomi. Memorizzali in modo che, mentre leggi i capitoli seguenti, capisci qual è la posta in gioco.

Selettore Specificandolo, diciamo al browser esattamente cosa vogliamo applicare allo stile. Nel nostro caso il selettore è p. Blocco dichiarazione Questo è il nome di tutto il contenuto tra parentesi graffe () dopo il selettore. Proprietà stile Questo è un comando che specifica la formattazione desiderata (ad esempio, si desidera modificare lo spessore del carattere, il colore del colore, la dimensione del carattere, ecc.). Il nome della proprietà deve essere seguito da due punti. In seguito, acquisirai familiarità con molte proprietà CSS. Valore della proprietà Dopo i due punti viene scritto il valore della proprietà stessa, che definisci tu stesso, creando così il tuo stile. A seconda della proprietà, è necessario specificare un valore adatto per essa.

Ad esempio, lo stile del carattere è specificato dalle parole chiave grassetto, grassetto, ecc., Il colore è specificato in valore esadecimale, RGB (A), HSL (A) o le parole chiave rosso, arancione, bianco, ecc., La dimensione del carattere è specificata in unità CSS (percentuale % , pixel px, in punti punto, altezza del carattere em) o le costanti small, medium, large, ecc. Dopo aver specificato un valore di proprietà, viene inserito un punto e virgola.

Poiché i CSS sono insensibili alle interruzioni di riga, agli spazi, alle tabulazioni e alle maiuscole, puoi applicare uno stile al tuo codice per renderlo più facile da leggere e modificare in seguito. Ad esempio, potremmo scrivere il codice sopra su una riga:

P (spessore carattere: grassetto; colore: # 1E824C; dimensione carattere: 1em;)

Funziona anche, ma è facile capirlo? Soprattutto quando il CSS è abbastanza lungo. Certo, non sarebbe male separarlo con almeno degli spazi. Ci sono diverse regole di buona educazione e, se le impari subito, dirai "grazie" a te stesso in futuro.

Molto spesso, quando si descrive uno stile, viene utilizzata una forma compatta di notazione, in cui tutte le proprietà per un selettore sono specificate in un blocco:

P (spessore carattere: grassetto; colore: # 1E824C; dimensione carattere: 1em;)

E questa forma di notazione è molto ingombrante, sebbene funzioni:

P (spessore carattere: grassetto;) p (colore: # 1E824C;) p (dimensione carattere: 1em;)

Per facilitare la navigazione nel codice, si consiglia di scrivere ogni proprietà su una nuova riga e utilizzare tab o spazi quando si elencano le proprietà. A volte c'è uno spazio tra i due punti e il valore della proprietà, ma qui puoi decidere quale è più conveniente per te.

Per maggiore comodità, puoi aggiungere commenti direttamente al CSS. In essi puoi scrivere spiegazioni, note per aiutarti a navigare nei fogli di stile.

I commenti CSS sono scritti tra / * e * /. Non compaiono nella pagina web nel browser e sono visibili solo nel codice. Gli sviluppatori usano spesso anche i commenti per nascondere una parte di codice CSS temporaneamente non necessaria. I commenti hanno questo aspetto:

/ * Stile per il corpo del testo * / p (spessore carattere: grassetto; colore: # 1E824C; dimensione carattere: 1em;)

Fogli di stile interni ed esterni

Una volta creato il tuo foglio di stile, puoi scegliere come allegarlo alla tua pagina web. Esistono due tipi di tabelle: interne, che vengono aggiunte direttamente alla pagina, ed esterne, che si trovano in un file separato con estensione .css e sono collegate alla pagina tramite un collegamento.

I fogli di stile interni sono scritti nel documento HTML tra i tag... Devi aggiungere un foglio di stile a ogni pagina web. Se il sito ha un numero elevato di pagine che richiedono lo stesso design, l'aggiunta e la modifica degli stili diventa un lavoro ingrato: il processo richiederà molto tempo. Pertanto, i fogli di stile interni sono considerati scomodi.

I fogli di stile esterni sono molto più comuni. Hai solo bisogno di connettere la tabella a tutte le pagine web necessarie usando il tag con un attributo rel (definisce la relazione tra la pagina e il file incluso) e un valore del foglio di stile, il che significa che il file incluso contiene un foglio di stile. L'attributo href è il percorso (URL) del tuo file .css:

Modificando un solo file, puoi cambiare lo stile per l'intero sito in una volta, indipendentemente dal numero di pagine. Questo è molto conveniente, soprattutto per le grandi risorse.

Lezione: creare un foglio di stile

Poiché i fogli di stile esterni sono i più convenienti e ampiamente utilizzati nello sviluppo del design, impareremo come crearli. Puoi scaricare l'archivio con i file per questa lezione in questa pagina.

Nella cartella troverai un documento HTML con un esempio di una semplice pagina e un'immagine (verrà utilizzata nel tutorial). Apri il tuo documento HTML in un browser. Vedrai che la pagina sembra completamente normale. Per renderla più attraente, scriviamo uno stile per lei.

Per ora, non è necessario approfondire il significato di un pezzo di codice. Ora devi capire come funziona. Iniziamo.

Collegamento di CSS a HTML

Innanzitutto, apri un qualsiasi editor di testo sul tuo computer (il blocco note lo farà) e crea un file vuoto chiamato style, salvandolo con l'estensione .css (dovresti ottenere un file style.css). Salva il file nella stessa cartella del documento HTML scaricato.

Apri il documento HTML in un editor di testo, oltre che in un browser (in modo da poter visualizzare facilmente le modifiche nell'aspetto della pagina). Aggiungi tra i tag il seguente codice:

Brevemente su quello che hai appena fatto. Incollando questo codice nel tuo documento HTML, tu:

• specificato un collegamento a un font chiamato Roboto Condensed, che verrà preso dal server di Google (ti diremo di più sui font di Google in seguito);
• aggiunto il proprio foglio di stile style.css esterno (vuoto per ora).

Scrivere lo stile CSS

Salva le modifiche al documento HTML e vai al file .css vuoto che hai appena creato. Diamo uno stile alla pagina:

Html (padding-top: 5px; background-image: url (background.jpg);)

Salva le modifiche. Congratulazioni, hai scritto la prima regola: riguarda il tag ... La prima proprietà, padding-top, aggiungerà un padding superiore di 5 pixel tra la finestra del browser e il contenuto della pagina web. Con la seconda proprietà, background-image, hai incluso un'immagine per lo sfondo dell'intera pagina, specificando il percorso del file grafico (che si trova nella stessa cartella del documento HTML).

Aggiorna la pagina web aperta nel tuo browser. Se tutto è stato eseguito correttamente, vedrai che è apparso uno sfondo sulla pagina e il rientro è leggermente aumentato tra la parte superiore della finestra e il testo.

Corpo (larghezza: 75%; imbottitura: 40 px; margine: 15 px automatico; colore di sfondo: #EBEBEB; raggio del bordo: 30 px;)

Salva le modifiche al file. Ora tu:

• imposta l'ambito per il contenuto del tag , che è pari al 75% della larghezza della finestra del browser;
• Fornito un margine di 40 pixel da tutti i lati dell'area del contenuto.
• posizionare l'area al centro della pagina e far rientrare anche la parte superiore e inferiore di 15 pixel;
• imposta il colore di sfondo #EBEBEB per l'area del contenuto;
• arrotondato gli angoli dell'area rettangolare, specificando un raggio di 30 pixel.

Aggiorna di nuovo il tuo documento HTML. In questo caso assicurati che la cache sia disabilitata, oppure ricarica la pagina con l'aggiornamento di tutti i file ad essa associati, utilizzando una apposita combinazione di tasti (ad esempio per Chrome questa Ctrl + F5).

Vedrai che al centro della pagina è stata aggiunta un'area rettangolare con angoli arrotondati. Questo è il risultato delle tue azioni nel file CSS. Puoi anche provare a ridurre la finestra del browser e ammirare come la larghezza dell'area rettangolare si adatta alle sue dimensioni. Ciò è dovuto al fatto che la larghezza è data in percentuale.

Cambiare il carattere usando i CSS

È tempo di decorare il nostro testo. Aggiungi questo codice al tuo foglio di stile e salva le modifiche:

H1 (colore: # E87E04; dimensione carattere: 2em; margine sinistro: 20px; famiglia di caratteri: "Roboto Condensed", sans-serif;) h2 (colore: # E87E04; dimensione carattere: 1.7em; margine sinistro : 20px; font-family: "Roboto Condensed", sans-serif;) p (color: # 22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed ", sans-serif;)

Scrivendo questo, imposti i colori dei caratteri per i tag h1, h2, p, ne specifichi le dimensioni, aggiungi un margine di 20 pixel da sinistra e inoltre per

Rientriamo nella parte superiore di 20 pixel e impostiamo l'altezza della linea al 50% in più rispetto allo standard. Inoltre, hai collegato il font Roboto Condensed a tutti e tre i tag (ecco perché all'inizio dovevi specificare un collegamento ad esso nel file HTML).

Aggiorna la pagina nel browser e ammira il risultato del lavoro. In questo tutorial, proveremo un'altra cosa. Aggiungi questo codice in CSS:

Enfasi (spessore carattere: grassetto;)

Salva e aggiorna la pagina nel tuo browser. Vedrai che nell'ultimo paragrafo parte del testo è diventato in grassetto. Per capire cosa è successo, vai alla finestra dell'editor di testo in cui hai aperto il file HTML all'inizio. Dai un'occhiata all'ultimo paragrafo: parte della frase è racchiusa in un tag con enfasi di classe. Ecco come hai scritto lo stile per una singola riga di testo in un paragrafo. Parleremo di più delle classi nel prossimo capitolo.

Dovresti finire con una pagina come questa:

Come pratica, prova a cambiare la dimensione del testo per

(diciamo 1.1em), e aumenta anche il rientro tra

E il bordo sinistro dell'area del contenuto di altri 10 pixel.

conclusioni

Questo capitolo ha trattato la sintassi dei CSS e come creare un foglio di stile rudimentale. Hai imparato a collegare CSS a una pagina HTML e hai anche imparato a creare stili semplici. Evidenziamo le cose principali da ricordare di questo capitolo:

Qualsiasi stile CSS è costituito da diversi elementi: un selettore, una proprietà di stile e il valore di tale proprietà.

Tutte le proprietà e i loro valori vengono scritti nel blocco di dichiarazione tra due parentesi graffe () dopo aver specificato il selettore.

È necessario prestare molta attenzione ai segni: due parentesi graffe (apertura all'inizio del blocco di dichiarazione e chiusura alla fine). Senza queste parentesi, i CSS non funzioneranno correttamente.

È necessario inserire i due punti dopo la proprietà e un punto e virgola dopo il valore.

Per comodità e una migliore leggibilità del codice CSS, scrivi ogni proprietà su una nuova riga, e inoltre non lesinare su spazi e tab.

Buona giornata! In questo articolo, ti mostrerò vari metodi per includere CSS in HTML. E spiegherò anche le diverse sottigliezze e sfumature dei diversi modi di collegare gli stili.

Connessione interna

Un foglio di stile interno è un insieme di stili, un pezzo di codice di una pagina web, che deve sempre trovarsi tra i tag di apertura e di chiusura. Codice HTML nel corpo del tag della pagina web. Esempio:

Testo giallo Verdana