Come configurare smartphone e PC. Portale informativo
  • casa
  • Windows 10
  • Creazione di stile css. Stili CSS di base pronti per l'uso

Creazione di stile css. Stili CSS di base pronti per l'uso

29.06.2020 Windows 10

Sappiamo già che per rendere il sito web bello ed elegante, dobbiamo lavorare con un file CSS. E per applicare i nostri stili, è necessario collegare il file HTML e il file CSS.

Ci sono diverse opzioni per eseguire questa operazione: usare fogli di stile annidati, fogli di stile esterni e stile in linea.

Oggi parleremo di quest'ultimo metodo.

Disegnare il tag HTML

L'essenza di questo metodo è che incorporiamo il design necessario all'interno del tag. Per questo, un separato attributo - stile... Questo attributo può essere applicato a qualsiasi tag, ma solo all'interno del corpo del sito, cioè all'interno del corpo... Il valore di questo attributo sono le istruzioni di stile che devono essere applicate all'elemento specificato.

Ad esempio, impostiamo diverse dimensioni dei caratteri per due diversi paragrafi di testo:

< p style= "font-size:25px;" >Assegna a questo pezzo di testo un'altezza della lettera di 25 pixel. < p style= "dimensione carattere: 15px; colore: # 2400ff;"> E questo testo sarà con lettere, altezza 15 pixel, e lo tingerà anche di blu per dimostrare l'applicazione di più stili contemporaneamente.

svantaggi

L'esempio dimostra perfettamente come questo tipo di stile intasa il codice della pagina.

Puoi anche notare un altro paio di svantaggi nell'usare questa tecnica di styling. Il primo di questi può essere chiamato la diffusione dello stile in tutto il documento, che nella prospettiva della modifica a volte complicherà il processo.

Sarà anche difficile formattare grandi volumi di testo. Penso che nessuno sia contento della prospettiva di prescrivere una dimensione del carattere per ogni paragrafo, specialmente se ci sono 40 di questi paragrafi.

Anche quando si utilizzano stili in linea, diventa impossibile utilizzare pseudo-classi, che in gran parte legano le mani di un web designer.

Vale anche la pena notare la confusione che sicuramente emergerà nell'uso dell'attributo style. Questa confusione nascerà dall'uso di virgolette diverse durante la scrittura degli stili.

Per chiarezza, diamo un'occhiata all'esempio seguente:

< div style= "font-family:" Roboto Condensed ", sans-serif"> L'inserimento è corretto. < div style= "font-family:" Roboto Condensed ", sans-serif"> Anche questo è corretto. < div style= "font-family: " Roboto Condensed ", sans-serif" >Questa non è una voce valida. < div style= "font-family: " Roboto Condensed ", sans-serif" >E neanche questo è vero

Guardando i calcoli presentati sopra, la conclusione logica suggerisce di per sé che l'uso di stili in linea è associato a una serie di complicazioni e inconvenienti significativi.

Quando usare lo stile in linea

Nonostante tutti i difetti, lo stile in linea non è stato inventato per niente. I webmaster spesso si riferiscono a loro per lo stile programmatico. Ad esempio, diamo un'occhiata a questo codice.

< div id= "productRate" > < div style= "width: 40%" >

Scrivere la larghezza richiesta per questo blocco sarà l'operazione più semplice.

Una situazione simile può verificarsi quando è necessario sostituire l'immagine di sfondo (ad esempio) di un utente con il ruolo di amministratore. In questo caso, il tag img potrebbe non funzionare. Pertanto, vale la pena fare riferimento all'attributo style:

< div style= "background:url(fon.jpg)" >

Inoltre, i programmatori spesso ricorrono agli stili in linea durante la progettazione di finestre popup. Spesso questo processo è il seguente: al blocco, sul cui design si sta lavorando, viene assegnato display: block, e il resto delle finestre sono nascoste da display: nessuno, in modo che non interferiscano visivamente con il lavoro del programmatore . Ecco un esempio:

< div class = "element" style= "display:block" >Il popup attualmente in fase di rendering

Risultato

L'utilizzo degli stili in linea è associato a una serie di difficoltà e inconvenienti, tuttavia, nel processo di styling di alcuni elementi, i webmaster spesso si rivolgono a questo metodo per ottimizzare il proprio lavoro.

Ogni tag può avere un individuo, un colore, uno sfondo, un bordo e altre proprietà. Il formato visivo è chiamato css (Cascading Style Sheets), che significa "fogli di stile a cascata".

In questo articolo, prenderemo in considerazione 3 modi per collegare gli stili CSS al codice html di una pagina del sito per modificarne l'aspetto.

Metodo 1. Includere un file CSS separato nel codice html della pagina

Questo file contiene proprietà per i tag. Questo è il modo più comodo e pratico per impostare stili CSS per html, soprattutto se il sito ha più di 1 pagina. Modificando solo 1 file, puoi cambiare i design di tutte le pagine a cui è collegato. Prova a scrivere le proprietà in un file separato.

Come impostare il file di stili CSS su html

Puoi impostare stili CSS sul codice html della pagina del sito da un file usando il tag che dovrebbe essere posizionato tra i tag e... Estensione file comune: .css .

Esempio di collegamento di un file (pagina code.html)








Contenuto del testo




Codice di esempio del file di stili stesso (pagina code.css)

P (colore: verde;)

Nell'esempio sopra, il file si chiama mio_stile.css e si trova nella cartella /mio_css.

Questo file contiene una proprietà per il tag

Il codice p (colore: verde;) significa: colora il testo all'interno del tag

Verde. In questo esempio è connesso un solo file, ma se necessario è possibile collegarne un numero illimitato.

Metodo 2. Scrivi all'inizio della pagina stessa

Questo metodo è quasi identico alla connessione di un file, ma presenta uno svantaggio significativo: se si dispone di più pagine, per modificare il loro design visivo, è necessario modificarle ciascuna. Ha senso utilizzare questo metodo solo se:

Hai un sito web di una pagina;

Questo design visivo è inteso solo per la pagina corrente. Ad esempio, per il design visivo di elementi che non si trovano su altre pagine.

In altri casi, è meglio aggiungere stili css alla pagina utilizzando un file separato secondo il metodo sopra descritto. Ma anche un aspetto individuale è in molti casi più conveniente da impostare in un file separato, quindi questo metodo potrebbe non essere utilizzato affatto.

Come aggiungere stili CSS al codice html di una pagina del sito web

Puoi aggiungere stili ccs alla pagina html del sito allo stesso modo del file, ovvero tra e... Vengono scritti solo i tag invece di un collegamento al file, all'interno della quale sono scritti gli stili stessi.

Esempio di aggiunta prima delle proprietà del tag (page code.html)








Contenuto del testo





Metodo 3. Scrivi lo stile nell'attributo style per ogni tag separatamente

Questo metodo è ampiamente utilizzato quando all'interno di una pagina sono presenti elementi che non differiscono molto tra loro, ad esempio solo nel colore (rientro, dimensione, ecc.). In questo caso, è più veloce e conveniente includere uno stile CSS generale in html utilizzando un file separato e aggiungere piccole modifiche per elementi specifici. L'attributo style ha la precedenza più alta, quindi il tag riceverà tutte le proprietà specificate in style, anche se sono state specificate in precedenza in modo diverso.

Infatti la logica è la seguente: scriviamo gli stili generali e più usati nel file (1 via), e le regolazioni dettagliate negli elementi stessi. Ad esempio, se nella pagina sono presenti 5 intestazioni che differiscono per colore, è meglio scrivere proprietà generali nel file che determinano le dimensioni e i rientri di queste intestazioni e il colore negli elementi stessi, secondo questo metodo. al tag

Il metodo 3 ha la priorità più alta, quindi il tag riceverà le proprietà specificate nell'attributo style = "", anche se sono state specificate in precedenza utilizzando un altro metodo.

I fogli di stile a cascata sono uno standard di stile annunciato dal W3C. Termine cascata indica la possibilità di unire diversi tipi di stili e l'ereditarietà degli stili da tag interni da quelli esterni.

CSS è un linguaggio che contiene un insieme di proprietà per definire l'aspetto di un documento. La specifica CSS definisce le proprietà e un linguaggio descrittivo per l'associazione con gli elementi HTML.

CSS è un'astrazione in cui l'aspetto di un documento Web è definito separatamente dal suo contenuto.


Alcuni stili non sono supportati da tutti i browser. Tuttavia, puoi assegnare qualsiasi stile, perché gli stili non supportati verranno semplicemente ignorati.


Potresti anche aver bisogno di:


Esistono tre tipi di stili che si distinguono per i metodi di aggiunta di stili a un documento.

Stili interni

Gli stili interni sono definiti dall'attributo stile tag specifici. Lo stile interno ha effetto solo sugli elementi definiti da tali tag. Questo metodo differisce poco dall'HTML tradizionale.

Esempio

Un paragrafo con testo in blu

RISULTATO:

Un paragrafo con testo in blu

Paragrafo con testo rosso

Non dovresti usare gli stili interni troppo spesso, poiché questo può essere sovraccaricato di codice e il suo aspetto è difficile da cambiare.

Stili globali

Gli stili CSS globali si trovano in un contenitore , che si trova a sua volta nel contenitore ... .


Attributo tipo = "testo/css", precedentemente richiesto per il tag .........

Testo grigio in tutti i paragrafi di una pagina Web

RISULTATO:

Testo grigio in tutti i paragrafi di una pagina Web

Testo grigio in tutti i paragrafi di una pagina Web

Stili esterni (collegati)

Gli stili esterni (collegati) sono definiti in un file separato con l'estensione css... Gli stili esterni consentono a tutte le pagine del tuo sito di apparire coerenti.

Per collegarsi al file in cui sono descritti gli stili, viene utilizzato il tag situato nel contenitore ... .

Questo tag deve avere due attributi: rel = "foglio di stile" e href specificando l'indirizzo del foglio di stile.

Esempio
......... ......... .........

Stili di connessione

La regola per connettere stili globali ed esterni consiste in selettore e dichiarazioni di stile.

Il selettore sul lato sinistro della regola identifica l'elemento o gli elementi per cui è impostata la regola. Successivamente, le dichiarazioni di stile sono elencate tra parentesi graffe, separate da punto e virgola. Per esempio:

P (rientro del testo: 30 px; dimensione del carattere: 14 px; colore: # 666;)

Una dichiarazione di stile è una coppia Proprietà CSS: valore CSS.

Per esempio: colore rosso

Quando si collega lo stile internamente, la regola CSS che è il valore dell'attributo stile, consiste in dichiarazioni di stile separate da punto e virgola. Per esempio:

Selettori CSS

SelettoreDescrizionePiù dettagli
* Qualsiasi elemento
EElemento identificato dal tag E
E # myidElemento E con identificatore "myid"
E.myclassElemento E di classe "myclass"
ESelettore di esistenza degli attributi
ESelettore di uguaglianza degli attributi
ESelettore di attributi con un elenco di valoriSelettori di attributi
ESelettore prefisso attributo
ESelettore suffisso attributo
ESelettore di sottostringhe di attributi
E: linkL'elemento E è un collegamento non ancora visitato dall'utentePseudo-classi dinamiche
E: visitatoL'elemento E è un collegamento già visitato dall'utentePseudo-classi dinamiche
E: hoverElemento E quando ci passi sopra con il puntatore del mousePseudo-classi dinamiche
E: attivoElemento attivato dall'utente EPseudo-classi dinamiche
E: focusElemento E in primo pianoPseudo-classi dinamiche
E: obiettivoL'elemento E che è l'obiettivo del collegamentoPseudo-classe di destinazione
E: langElemento E scritto nella lingua specificataPseudo-classe linguistica
E: abilitatoL'elemento E è un elemento del modulo accessibilePseudo-classi statali
E: disabilitatoElemento E - Elemento modulo inaccessibilePseudo-classi statali
E: spuntatoElemento E - Casella di controllo o pulsante di opzione abilitatoPseudo-classi statali
E: indeterminatoElemento E - casella di controllo o pulsante di opzione non definitoPseudo-classi statali
E: radiceElemento E, radice del documentoPseudo-classi strutturali
E: ennesimo figlio (n)Elemento E, ennesimo figlio del genitorePseudo-classi strutturali
E: n-ultimo-figlio (n)Elemento E, l'ennesimo figlio del genitore, contando dalla finePseudo-classi strutturali
E: n-esimo di tipo (n)ennesimo elemento di tipo EPseudo-classi strutturali
E: ennesimo-ultimo di tipo (n)ennesimo elemento di tipo E, contando dalla finePseudo-classi strutturali
E: primo figlioElemento E, il primo figlio del genitorePseudo-classi strutturali
E: ultimo figlioElemento E, l'ultimo figlio del genitorePseudo-classi strutturali
E: primo del tipoPrimo elemento di tipo EPseudo-classi strutturali
E: ultimo del tipoL'ultimo elemento di tipo EPseudo-classi strutturali
E: figlio unicoFiglio unico di un genitorePseudo-classi strutturali
E: solo di tipoElemento singolo genitore di tipo EPseudo-classi strutturali
E: vuotoElemento E senza figliPseudo-classi strutturali
E: non (X)Elemento E che non corrisponde al semplice selettore XPseudo-classe di negazione
E :: prima lineaPrima riga dell'elemento EPseudo-elementi
E :: prima letteraPrima lettera dell'elemento EPseudo-elementi
E :: primaContenuto prima dell'elemento EPseudo-elementi
E :: dopoContenuto dopo l'elemento EPseudo-elementi
E :: selezioneSelezione nell'elemento EPseudo-elementi
MI FAL'elemento F che è all'interno dell'elemento E
MI> FAUn elemento F che si trova direttamente all'interno di un elemento E
MI + FAL'elemento F che segue immediatamente l'elemento E
MI ~ FAElemento F che segue l'elemento E

Selettore universale

Il selettore universale corrisponde a qualsiasi elemento nel documento html.

Il simbolo asterisco (*) viene utilizzato per indicare un selettore universale.

Viene utilizzato quando è necessario impostare lo stesso stile per tutti gli elementi di una pagina Web. Per esempio:

* (margine: 0; riempimento: 0;)

In alcuni casi, l'asterisco (*) può essere omesso:
* .la mia classe e .la mia classe equivalenti,
* # mioid e #myid sono equivalenti

Selettori di tag

Il selettore può essere qualsiasi tag html per il quale sono definite regole di stile. Per esempio:

H1 (colore: rosso; allineamento del testo: centro;)

Se più elementi hanno uno stile comune, i selettori corrispondenti possono essere elencati nel foglio di stile separati da virgole. Per esempio:

H1, h2, h3, h4 (colore: rosso; allineamento del testo: centro;)

Selettori ID

L'HTML offre la possibilità di assegnare un identificatore univoco a qualsiasi tag. L'identificatore è specificato dall'attributo ID... Per esempio:

...

Il valore dell'identificatore deve iniziare con una lettera latina e può contenere lettere (,), numeri (), "trattini" (-) e "underscore" (_).

I valori di tutti gli attributi ID nel documento html deve essere univoco. Se si incontrano ID con gli stessi valori, questi identificatori vengono ignorati e il codice della pagina Web diventa non valido.

Nel codice CSS, il selettore dell'identificatore è indicato con un cancelletto (#). Poiché l'identificatore ID si applica solo agli elementi univoci, il nome del tag prima del cancelletto (#) viene solitamente omesso:

Div # a1 (colore: verde;)

allo stesso modo

# a1 (colore: verde;)

Si consiglia di utilizzare ID non per lo stile di un elemento, ma per accedervi tramite script o seguendo un collegamento.

Selettori di classe

I selettori di classe sono più comunemente usati per lo styling. La classe per il tag è specificata dall'attributo classe... Per esempio:

...

Il nome della classe deve iniziare con una lettera latina e può contenere lettere (,), numeri (), trattini (-) e trattini bassi (_).

Se l'attributo ID viene utilizzato per l'identificazione univoca, quindi utilizzando l'attributo classe un tag appartiene a un particolare gruppo.

Nel codice CSS, un selettore di identificatori è indicato con un punto (.). Tag diversi possono essere assegnati alla stessa classe. In questo caso, il nome del tag viene omesso prima del punto (.) Segno:

I.verde (colore: # 008000;) b.rosso (colore: # f00;) .blu (colore: # 00f;)

Per un tag, puoi specificare più classi contemporaneamente, elencandole nell'attributo classe separati da uno spazio. In questo caso, all'elemento vengono applicati gli stili di ciascuna delle classi specificate.

...

Se alcune di queste classi contengono le stesse proprietà di stile, ma con valori diversi, verranno applicati i valori dello stile di classe, che si trova di seguito nel codice CSS.

Selettori di attributi

Ci sono molti selettori di attributi che puoi usare per modellare un tag in base ai suoi attributi.


h1 (color: # 800000;) / * un elemento h1 che ha un attributo title * /
input (bordo: 1px solido # ccc; padding: 4px 6px; larghezza: 300px;)
a (decorazione del testo: nessuna; bordo inferiore: 1px solido # 06c; colore: # 06c;)
span (display: inline-block; background-image: url ("/ img / icon_sprite.png");)
a, a (sfondo: url ("pic.gif") in basso a sinistra senza ripetizione; display: inline-block; larghezza: 32px;)
(visualizzazione: blocco; float: sinistra; larghezza: 280 px;)

Non devono esserci spazi tra il nome del tag e la parentesi quadra ([)!


Selettori generici, selettori per tag, identificatori, classi e attributi e pseudo-classi sono tutti semplici selettori.

I selettori semplici possono essere concatenati in sequenze specifiche basate sulle relazioni degli elementi nell'albero del documento Web. Tali costruzioni sono chiamate combinatori.

Selettori contestuali

Uno dei combinatori più comunemente usati è il selettore di contesto.

I selettori contestuali o discendenti definiscono più elementi, uno dei quali è all'interno dell'altro. In un selettore contestuale, i selettori semplici sono separati da uno spazio.

Esempio
  1. Puskin A.S.
    • "Sparo"
    • "Bufera di neve"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Ispettore"
    • "Taras Bulba"
    • "Anime morte"
  3. Tolstoj L.N.
    • "Guerra e Pace"
    • Anna Karenina
    • "Domenica"

RISULTATO:

  1. Puskin A.S.
    • "Sparo"
    • "Bufera di neve"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Ispettore"
    • "Taras Bulba"
    • "Anime morte"
  3. Tolstoj L.N.
    • "Guerra e Pace"
    • Anna Karenina
    • "Domenica"

Selettori figlio

Un selettore figlio definisce un elemento che si trova direttamente all'interno di un altro. In un selettore figlio, i selettori semplici sono separati da un segno di maggiore di (>).

Esempio
  1. Puskin A.S.
    • "Sparo"
    • "Bufera di neve"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Ispettore"
    • "Taras Bulba"
    • "Anime morte"
  3. Tolstoj L.N.
    • "Guerra e Pace"
    • Anna Karenina
    • "Domenica"

RISULTATO:

  1. Puskin A.S.
    • "Sparo"
    • "Bufera di neve"
    • "Dubrovsky"
  2. Gogol N.V.
    • "Ispettore"
    • "Taras Bulba"
    • "Anime morte"
  3. Tolstoj L.N.
    • "Guerra e Pace"
    • Anna Karenina
    • "Domenica"

Selettori adiacenti

Il selettore adiacente definisce un segno più (+) che separa due sequenze di selettori semplici. Gli elementi rappresentati da queste sequenze sono contenuti all'interno di un contenitore e seguono immediatamente il primo, non separati da altri tag.

Esempio

RIFLESSOLOGIA

RISULTATO:

RIFLESSOLOGIA

Selettori adiacenti

Un selettore adiacente definisce un carattere tilde (~) che separa due sequenze di selettori semplici. Gli elementi rappresentati da queste sequenze sono all'interno di un contenitore e seguono il primo (non necessariamente direttamente) dal secondo.

Esempio

RIFLESSOLOGIA

"Tutti gli atti della vita conscia e inconscia per modalità di origine sono riflessi." LORO. Sechenov

Riflessologia - trattamento delle malattie attraverso il controllo dei riflessi. Viene utilizzato con successo in programmi di trattamento complessi o come tecnica individuale.

RISULTATO:

RIFLESSOLOGIA

"Tutti gli atti della vita conscia e inconscia per modalità di origine sono riflessi." LORO. Sechenov

Riflessologia - trattamento delle malattie attraverso il controllo dei riflessi. Viene utilizzato con successo in programmi di trattamento complessi o come tecnica individuale.



In questo tutorial, utilizzeremo l'editor Notepad ++ per creare file HTML e CSS, destinato agli utenti Microsoft Windows e tutti gli esempi verranno eseguiti in esso.

Se hai un Mac, puoi eseguire gli esempi nell'editor di parentesi, come Blocco note ++ assolutamente gratuito. Per quanto riguarda l'editore Parentesi, quindi è adatto anche agli utenti Microsoft Windows, puoi successivamente scegliere ciò che ti è più vicino.

Creare un foglio di stile interno

Diamo un'occhiata a un esempio in cui creerai il tuo primo foglio di stile interno.

Passaggio 1: apri un editor di testo

Premi contemporaneamente i pulsanti WIN + R (Avvio analogico - Esegui) si aprirà una finestra di dialogo "Correre" digita e premi Invio (il programma si aprirà ), o eseguire il programma attraverso la sua etichetta.

La finestra principale del programma si aprirà davanti a te:

Passaggio 2: creare la struttura del documento

Copia o inserisci il seguente codice HTML nell'editor:

</span> Foglio di stile interno

Nel codice per gli esempi in questo tutorial, fornirò commenti aggiuntivi evidenziati in verde chiaro. L'HTML utilizza un tag speciale per creare commenti nel codice, il testo all'interno di tale elemento non viene visualizzato dal browser. Nel codice CSS, per aggiungere un commento, è necessario inserire il testo del commento nella seguente costruzione: / * testo del commento * /... Puoi inserire commenti nel codice CSS sia all'interno degli stili in linea che in quelli esterni (in un file separato).

Passaggio 3: aggiungi stili in linea

Il passaggio successivo consiste nell'aggiungere stili in linea alla tua pagina: per l'intestazione di primo livello, il colore del testo è rosso (colore: rosso) e per i paragrafi è blu (colore: blu). Inoltre, per l'intestazione di primo livello, effettueremo l'allineamento al centro del testo (text-align: center). Assicurati che ogni proprietà CSS e il suo valore siano separati da due punti e che ci sia un punto e virgola alla fine di ogni dichiarazione.

</span> Foglio di stile interno

È un bene che io sia impegnato nello sviluppo personale.

Imparerò CSS in un mese o anche più velocemente

Passaggio 4: visualizzare la pagina HTML in un browser

Apri l'esempio in un browser e verifica che l'output del nostro esempio corrisponda all'immagine:

Collegamento di un foglio di stile esterno

Ora creeremo con te un file separato che conterrà il foglio di stile e lo collegheremo al nostro documento HTML.

  1. In Notepad ++, crea un nuovo file vuoto e salvalo come page.css (quando salvi il file, devi selezionare Fogli di stile a cascata * .css) nella stessa cartella in cui hai creato il documento HTML.
  2. Riporta il codice CSS dell'esempio precedente (il contenuto del tag