Puoi personalizzare completamente il tuo blog o sito web molto facilmente. Questo articolo mostra quanto sia facile cambiare il carattere nell'intestazione e l'immagine di sfondo di una pagina.

Blogger e proprietari di siti di solito cambiano lo sfondo per rendere il loro sito visivamente più attraente per i visitatori. Tuttavia, un'immagine di sfondo aggiunta in modo errato può confondere il visitatore e persino causare sfiducia nei confronti del tuo sito o blog e riluttanza a visitarlo di nuovo. Per aggiungere correttamente lo sfondo, è importante utilizzare i codici HTML corretti.

Ce ne sono solo alcuni semplici con cui puoi cambiare aspetto esteriore il tuo sito esistente. Molti utenti non si rendono nemmeno conto di quanto sia facile.

Come personalizzare il carattere

Prima di tutto, dovrai aggiungere quattro meta tag ovunque dopo< head >. Puoi semplicemente copiare i simboli qui sotto e incollarli nella tua risorsa, dopo aver rimosso gli spazi.

Come personalizzare il colore di sfondo

Apri la pagina nell'HTML del tuo blog o sito web. Quando modifichi una pagina in Dreamweaver, puoi aprirla per semplificare il tuo lavoro. Se il tuo sito è stato creato utilizzando un costruttore di siti Web, alcuni servizi ti consentono di modificare le impostazioni HTML online accedendo alla pagina Design e selezionando la scheda Modifica HTML. In ogni caso, dovresti essere in grado di accedere ai codici HTML per il tuo blog o sito web. Il processo di configurazione può variare notevolmente a seconda dei servizi disponibili e del motore utilizzato.

Non vale la pena provare a cercare un'immagine separata con un colore diverso se tutto ciò che devi fare è cambiare il colore di sfondo. Invece, puoi semplicemente modificare l'HTML e cambiare il colore esistente in quello che vuoi mantenere.

Puoi facilmente trovare il diagramma Colori HTML nelle pubblicazioni specializzate. Ogni colore viene visualizzato nel markup come un codice a sei cifre. Ad esempio, uno sfondo bianco è designato come #FFFFFF.

Quindi, trova il codice colore che vuoi vedere sul tuo sito come colore di sfondo. Nel markup sarebbe simile a questo:

colore di sfondo:#XXXXXX; (

Dopo aver salvato il colore di sfondo in HTML, vedrai che l'aspetto della tua pagina è cambiato.

Aggiunta di un'immagine di sfondo

Seleziona l'immagine che desideri aggiungere come sfondo. Esistono molti siti che consentono di scaricare tali sfondi. Inoltre, puoi utilizzare un'immagine già salvata sul tuo computer.

Carica l'immagine su Internet. Molti ti consentono di scaricare immagini gratuitamente. Ottieni un URL per la tua immagine di sfondo. Per fare ciò, devi aprire l'immagine nel tuo browser e copiare l'URL.

Incolla il codice per aggiungere un'immagine come sfondo. In HTML ha questo aspetto:

immagine di sfondo: url(URL dell'immagine);

Devi aggiungere il codice in cui inizia il corpo della pagina nell'HTML. Salva le modifiche dopo la modifica e carica il tuo sito. Sarai in grado di vedere che l'immagine ha completamente sostituito il colore di sfondo.

Tuttavia, ricorda che le immagini troppo grandi possono richiedere molto tempo per essere caricate, il che sarà spiacevole per molti visitatori. Per questo motivo, prova a scegliere immagini piccole per questo scopo.

Per modificare il colore di sfondo di un'intera pagina Web o di singoli elementi, utilizzare la proprietà generica background o background-color. Il colore può essere specificato in qualsiasi formato accessibile ai CSS. I più comuni sono i seguenti metodi.

Per nome del colore

I browser supportano alcuni colori per nome. Eccotene alcune parole chiave- nero (nero), bianco (bianco), rosso (rosso), verde (verde), blu (blu), ecc.

Per valore esadecimale

I numeri esadecimali vengono utilizzati per specificare i colori. Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16. I numeri saranno i seguenti: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. I numeri da 10 a 15 sono sostituiti da lettere latine. I numeri maggiori di 15 nel sistema esadecimale sono formati combinando due numeri in uno. Ad esempio, il numero 255 in sistema decimale corrisponde al numero FF in esadecimale. Per evitare confusione nella definizione del sistema numerico, il numero esadecimale è preceduto dal cancelletto #, ad esempio #666999. Ciascuno dei tre colori - rosso, verde e blu - può assumere valori da 00 a FF. Pertanto, la designazione del colore è divisa in tre componenti #rrggbb, dove i primi due caratteri segnano la componente rossa del colore, i due centrali segnano la componente verde e gli ultimi due segnano la componente blu. È consentito utilizzare una forma abbreviata come #rgb, dove ogni carattere deve essere raddoppiato. Pertanto, la voce #fc0 dovrebbe essere considerata come #ffcc00. Il caso in questo caso non ha importanza, quindi il testo può essere digitato sia in caratteri maiuscoli che minuscoli.

Con RGB

Puoi definire un colore utilizzando i valori rosso, verde e blu in termini decimali. Ciascuno dei tre componenti può assumere un numero da 0 a 255. È anche accettabile impostare il colore come percentuale, ad esempio rgb(90%, 30%, 60%).

RGBA

Il formato RGBA è simile nella sintassi a RGB, ma include un canale alfa che determina la trasparenza dell'elemento. Un valore di 0 è completamente trasparente, 1 è opaco e un valore intermedio come 0,5 è traslucido.

L'esempio 1 mostra la modifica dello sfondo e dei colori del testo.

Esempio 1: colore di sfondo

Sostenibilità

La stabilità secondo Lyapunov fa oscillare il dispositivo stabile.

Risultato questo esempio mostrato in fig. uno.

Riso. 1. Sfondo colorato

Il formato RGBA ti consente di impostare il colore di sfondo di un elemento su traslucido in modo che lo sfondo della pagina web sia visibile. Sembra più evidente e impressionante quando abbiamo un'immagine o un motivo di sfondo, piuttosto che un colore solido. Quindi l'immagine apparirà attraverso lo sfondo, ma la leggibilità del testo rimarrà (Fig. 2).

Riso. 2. Sfondo semitrasparente

L'esempio 2 mostra l'uso del formato RGBA per creare tale sfondo.

Esempio 2: formato RGBA

Con aiuto colore CSS e sfondo puoi impostare quasi tutti gli elementi della pagina web, controllare liberamente l'immagine di sfondo, la sua ripetizione in orizzontale e in verticale. Inoltre, utilizzando i CSS, puoi posizionare l'immagine di sfondo in qualsiasi punto dello schermo utilizzando il posizionamento. Non corriamo ancora lontano, andiamo con ordine.

Proprietà COLORE

Questa proprietà imposta il colore dell'elemento, più specificamente, il colore del testo all'interno dell'elemento. Il valore è dato in una delle possibili forme:

• nome del colore (VERDE, NERO, ROSSO...);
• codice colore esadecimale (008000, 000000, FF0000...);
• codice colore decimale in RGB (color:rgb (40, 175, 250));

La proprietà COLOR viene ereditata e se non viene impostato un valore per alcun elemento, il valore verrà ereditato dal suo antenato. Ma può succedere che non sia impostato neanche per l'antenato, quindi il foglio di stile del browser verrà applicato utilizzando i valori predefiniti. È probabile che il colore dell'elemento in questo caso sia nero.

Come ho già detto, puoi impostare un colore per quasi tutti gli elementi, può essere (H1... H6), (forte, em) e persino interi (p) e persino i bordi della tabella, ma ne parleremo più avanti.

Ecco un esempio di impostazione del colore del testo utilizzando i CSS:

h1 (colore : Blu )

In questo esempio, tutte le intestazioni di primo livello della pagina Web saranno blu:

forte (colore: rosso)

In questo caso, tutto ciò che è nel testo della pagina verrà evidenziato con il tag forte, diventerà rosso.

Si può scrivere così:

h1, p, forte (colore : verde )

Quindi le intestazioni del primo livello, tutti i paragrafi e tutto ciò che è evidenziato con un tag saranno verdi.

Quando diventa necessario evidenziare intestazioni con colori diversi, vengono utilizzati i selettori di classe. Un attributo viene utilizzato per definire una classe in HTML classe A che può essere applicato a qualsiasi elemento. Nel codice HTML, dovrai scrivere:

class="blu"> Il colore dei titoli di questa classe sarà blu

Nel foglio di stile CSS, in questo caso, scriviamo una regola dove l'elemento H1 sarà il selettore, e attraverso il punto ( . ) nome della classe:

h1.Blu (colore: blu)

Nei documenti HTML vengono utilizzati anche selettori per identificatore, sono definiti dall'attributo id. Un identificatore è un attributo più significativo o prioritario di una classe. E se sia la classe che l'identificatore sono specificati nel codice HTML per l'elemento, verrà applicato lo stile dell'identificatore. L'identificatore è indicato da un cancelletto ( # ). Per utilizzare l'identificatore nel codice HTML, dovrai scrivere:

id="blu"> Il colore dei titoli di questo identificatore sarà blu

Nel foglio di stile a sua volta:

h1#Blu (colore : blu )

Proprietà BACKGROUND-COLOR

Questa proprietà ti consente di impostare il colore di sfondo per l'intera pagina, paragrafo, collegamento, in generale per qualsiasi Elemento HTML. Per fare ciò, il colore o il valore viene specificato nel valore della proprietà. trasparente(trasparente). Il codice per lo sfondo della pagina è scritto:

corpo (colore di sfondo: acqua)

In questo caso lo sfondo della pagina sarà turchese, e per dare lo sfondo al titolo scriviamo:

h1 (colore di sfondo: giallo)

Otteniamo lo sfondo giallo delle intestazioni del primo livello.

Colore e sfondo in CSS

Proprietà BACKGROUND-REPEAT

Questa proprietà viene utilizzata quando impostata per determinare se verrà ripetuta orizzontalmente e verticalmente. Valori validi:

• ripetere- l'immagine viene ripetuta verticalmente e orizzontalmente;
• ripetere x- l'immagine è ripetuta solo orizzontalmente;
• ripetere-y- l'immagine viene ripetuta solo verticalmente;
• senza ripetizione- l'immagine non si ripete.

Il codice è scritto così:

p(
immagine di sfondo : url( indirizzo del file immagine) ;
sfondo-ripetizione : ripetizione-x
}

Il testo di questo paragrafo sarà sopra l'immagine di sfondo, che sarà posizionata orizzontalmente.

Proprietà BACKGROUND-ATTACHMENT

Questa proprietà viene utilizzata per indicare al browser se l'immagine di sfondo della pagina deve scorrere con il testo ( scorrere) o stai fermo ( fisso).

corpo (
immagine di sfondo : url( indirizzo del file immagine) ;
background-repeat : repeat-x ;
background-attachment: fisso
}

In questo caso, l'immagine di sfondo rimarrà fissa.

Proprietà BACKGROUND-POSITION

Questa proprietà viene utilizzata per posizionare l'immagine rispetto a . I valori sono impostati in percentuale (%), in unità di lunghezza (cm, px), con parole chiave:

• Verticalmente:
• superiore- la parte superiore dell'immagine è allineata con il bordo superiore della pagina o del blocco;
• centro
• parte inferiore- la parte inferiore dell'immagine è allineata con il bordo inferiore della pagina o del blocco.
• Orizzontalmente:
• sinistra- il bordo sinistro dell'immagine è allineato con il bordo sinistro della pagina o del blocco;
• centro- il centro dell'immagine è allineato al centro della pagina o del blocco;
• Giusto- il bordo destro dell'immagine è allineato con il bordo destro della pagina o del blocco.

Scriviamo un esempio di codice in percentuali, unità di lunghezza e parole chiave:

corpo (
immagine di sfondo : url( indirizzo del file immagine) ;
posizione di sfondo: 0% 0%
}

Corpo(
immagine di sfondo : url( indirizzo del file immagine) ;
posizione di sfondo: 10px 25cm
}

Corpo(
immagine di sfondo : url( indirizzo del file immagine) ;
background-position: in alto al centro
}

Nei capitoli precedenti, abbiamo compilato il modello principale dei documenti HTML, deciso cosa sono i tag HTML, imparato come salvare e modificare i file html, e in questo capitolo abbiamo Conosciamo gli attributi dei tag e cambiare il colore del testo e dello sfondo della pagina.

Apriamo il nostro indice.html, per la modifica: Sono riuscito!!! E cambiamo un po ', aggiungiamo attributi: text="#000000" bgcolor="#ffffff"> ce l'ho fatta!!! Attributoè un parametro della variabile che viene inserito nella variabile come "coppia" (nome del parametro + valore del parametro).
Vengono inseriti i valori degli attributi dei tag:
1) testo=#000000 senza virgolette;
2) text="#000000" tra virgolette singole;
3) text="#000000" tra virgolette.
Ognuna di queste opzioni è corretta, ma se ti interessa l'etica del codice, è meglio usare le virgolette, come nel mio esempio sopra.

Attributo "testo" controlla il colore del testo sull'intera pagina e "bgcolore" controlla il colore di sfondo della pagina.

Ora propongo di parlare dei colori per i documenti HTML. Il colore è impostato:
1) testo="oro"- parole in inglese, ad esempio: oro (oro), rosso (rosso), verde (verde) e così via ...
Ma il colore può consistere solo di una parola, ad esempio "rosso", ma se scrivi "verde-rosso", il browser non lo capirà e semplicemente lo ignorerà.
2) testo="#000000"- Combinazione di colori RBG (rosso verde blu). "#" questo carattere dice che è un numero di colore, i primi due caratteri (zero nel mio esempio) dicono quanto abbiamo preso il colore "rosso", il secondo verde e gli ultimi due blu.
Ogni colore è impostato da 00 a FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), ad esempio #000000-black, #ffffff-white , #ff0000-red , # 00ff00-verde #0000ff-blu

Come bonus dal sito, ti suggerisco di scaricare la tavolozza dei colori (2kB), che è mostrata nell'immagine sopra. È necessario decomprimere l'archivio per eseguire il file colore.html, quindi su un campo grande, posiziona il puntatore del mouse sul colore che ti serve, che verrà mostrato in una piccola finestra, e se fai clic con il mouse in questo momento, il codice colore apparirà in una piccola finestra a destra.

Ora torniamo al nostro file indice.html e salvalo come tsvet.html, ora vediamo cosa è successo. Com'era e com'è? E hai assolutamente ragione, poiché il bianco è per lo sfondo e il nero per il testo è il colore predefinito. Per notare la differenza, cambiamo i valori degli attributi:

testo=oro" bgcolor="#0900b8"> ce l'ho fatta!!! Salva e guarda (si apre in una nuova scheda)

Esistono altri modi per impostare il testo nei file html, ma questi due sono considerati i principali.

Nel prossimo capitolo impareremo come gestire il testo con i tag BR, come avvolgere il testo su un'altra riga.

17.10.2015

Non ancora

Ciao a tutti!
Continuiamo a imparare le basi dell'HTML.
In questa lezione racconterò e mostrerò con esempi come creare uno sfondo da un colore o un'immagine in una pagina HTML.
Tutto è piuttosto semplice!
Partiamo dal colore!
Penso che non ti sei perso dove ho parlato di come cambiare il colore del testo e alla fine dell'articolo ho dato i codici per vari colori e sfumature. Perché ti ho ricordato questa lezione? Sì, perché c'è una tabella con codici colore già pronti, prendili ed esercitati subito in questa lezione.
Quindi, come creare uno sfondo colorato in HTML...

Colore di sfondo in HTML

Il colore di sfondo in un documento HTML è bianco per impostazione predefinita. Come impostare il colore come desiderato?
L'attributo "bgcolor" ci aiuterà in questo. Per dipingere sullo sfondo, scrivi questo attributo al tag " corpo»:

O in questo modo:

Ecco il codice HTML completo:

Il testo della pagina sarà verde e lo sfondo nero.

Il risultato sarà così:

Se vuoi creare uno sfondo da un'immagine, aggiungi l'attributo "background" al tag "body":

Compila qualsiasi immagine in cui si trova la tua pagina web (ad esempio, la mia pagina ha il nome "fon" con l'estensione ".gif"):

Ecco il codice HTML completo:

Il risultato sarà così:

Se l'immagine di sfondo si trova nella cartella delle immagini o in un'altra cartella, sarà simile a questa:

Ecco il codice HTML completo:

Testo della pagina su uno sfondo bellissimo.

È tutto per oggi! Penso che la lezione non sia stata difficile e tu abbia capito tutto. Se hai domande, scrivi nei commenti.
Vi aspetto alle prossime lezioni.

Messaggio precedente
Post successivo