Need help? Chat now!

Hostwinds Blog

Cerca risultati per:


Chat CSS di Hostwinds Immagine in primo piano

Chat CSS di Hostwinds

di: Hostwinds Team  /  dicembre 27, 2018


Hai sentito parlare di tutto il hostwinds html hype?Che cos'è?È attentamente evidente che ho appena chiesto appositamente questa domanda a Segway in una spina spudorata per la serie di blog hostwinds chiamato "hostwinds html hype?"Oops!Ecco un link per parte 1 e 2 di quella serie di blog solo per te:

Hostwinds HTML Hype

Hostwinds HTML Hype Part 2: Tag Talk

Manteniamo il discorso in corso discutendo vari componenti della lingua del computer complementare HTML, CSS.

Parlando di html e spine più vertice, Hostwinds ha anche debuttato di recente la nostra serie di blog per creare un sito web di blogging. Questo è applicabile in termini di hyml hype perché abbiamo utilizzato HTML per iniziare a costruire il nostro sito web. Ecco un link alle parti 1 e 2 di quella serie Blog:

Tutorial di Hostwinds: come creare un sito Web di blog di base senza un'applicazione per la creazione di siti Pt.1

Tutorial di Hostwinds: come creare un sito Web di blog di base senza un'applicazione per la creazione di siti Pt. 2

Questo post sul blog è dedicato all'apprendimento delle cose CSS per continuare a costruire il nostro sito web di blog con CSS nella parte 3 di quella serie di blog.Prima di aggiungere il nostro CSS, assicurassiamo che comprendiamo molte sintassi / termini CSS.Useremo questo come un foglio cheat quando aggiungeremo CSS al nostro sito web di blogging.

Cool CSS

CSS sta per foglio di stile a cascata perché è il codice che stili o progetta il proprio sito web.Puoi cambiare le dimensioni, l'allineamento, il colore, ecc., Di cose diverse che hai sul tuo sito web usando CSS.

Ecco come istituiremo il documento CSS, realizziamo il nostro sito web di blogging:

Body {} NAV {} H4 {} h3 {} IMG {} P {} Pulsante {} Pulsante Pulsante: Hover {} footer {} div {} .readnext {} #thankyou {}

Selettori

Permettimi di elaborare un po '.Gli articoli in questo documento come il corpo "H3," il "corpo", "P," ecc. Sono chiamati selettori.I selezionatori ".ReadNext" e "#Thankyou" si riferiscono alla classe "Readnext" e l'ID "Gylyou" che abbiamo creato nella parte 2 del nostro sito web Blog Blog Series.Il periodo davanti a "Leggi" racconta il browser che questo selettore è una classe.L'hashtag (#) davanti al selettore "Grazie" indica il browser che questo selettore è un ID.Tra le parentesi ricci vai le indicazioni spiegando come si desidera modificare ciascun selettore.Andremo avanti e riempiremo tutti questi e poi farò spiegare cosa significano:

corpo {background-Image: URL ('../ images / your_background_image.jpg'); Sfondo-Dimensioni: copertina;} NAV {Font: 22px 'Cinzel', serif; Trasformazione del testo: maiuscolo;} h4 {font: 33px 'Cinzel', serif; Trasformazione del testo: maiuscolo; Text-Align: Center; Colore: # 5a7e9e;} h3 {font: 27px 'Cinzel', serif; Trasformazione del testo: maiuscolo; Text-Align: Center; Colore: # 0B053F;} img {margin-Sinistro: Auto; Margine-destra: Auto; Larghezza: 50; blocco di visualizzazione; Bordo: 3px nero solido; Border-Radius: 25px;} P {Font: 22px 'Cinzel', serif; Text-Align: Center; Colore: # 074B82;} Pulsante {Font: 27px 'Cinzel', serif; Trasformazione del testo: maiuscolo; Text-Align: Center; Margin-Left: Auto; Margine-destra: Auto; blocco di visualizzazione; sfondo-colore: # bee5eb; Imbottitura: 20px 30px; Bordo: 3px nero solido; Border-Radius: 25px;} Pulsante: Hover {sfondo-colore: # 00a1f5; opacità: .5;} footer {font: 27px 'Cinzel', serif; Allineare il testo: a sinistra; Colore: # 074b82; sfondo-colore: # bee5eb; margin-top: 10px;} div {background-image: gradiente lineare (a destra, # 2e6bd4, # bee5eb, # 2e6bd4);} .readnext {Text-trasformazione: maiuscolo; Lettera-spaziatura: 3 px; Galleggiante: sinistra;} #thankyou {Text-trasformazione: maiuscolo; Colore: # 0b053f;}

Ok, qui va!Bene, prima di tutto, è essenziale notare che gli articoli in questo documento, come "immagine di sfondo", "font", "trasformazione del testo", ecc., Sono conosciute come proprietà. Va bene, ORA eccolo!

Proprietà

Sfondo Immagine: ** Questa è la proprietà che si digitarebbe all'interno delle staffe ondulative del selettore se vuoi che lo sfondo del tuo elemento sia un'immagine.

Nota a margine:

Il formato corretto con cui si dice al browser di acquisire un'immagine è il seguente (vedere la parte della Parte 1 di questa serie di blog per ulteriori informazioni sui percorsi dei file):

URL (./ foldername / filename.png)

In questo esempio, "filename.png" è il nome del file effettivo."./FolderName/" che precede il nome del file Indica al browser di accedere alla stessa cartella in cui il nostro indice.html è in. Quindi, vai in un'altra cartella intitolata "Carryname" per trovare il file quando è lì.Questo è chiamato un percorso del file relativo.

Colore di sfondo: Questa è la proprietà che ti intitoresti all'interno delle staffe ondulative del selettore se vuoi che lo sfondo del tuo elemento sia un colore.Si noti che invece di vedere un nome di colore per il valore di questa proprietà, vedi una serie di numeri e lettere dopo un hashtag.Puoi facilmente Google la moltitudine di codici che rappresentano diversi colori.

Notare la seguente riga di codice tra le staffe ondulazioni "div" del selettore:

1 immagine di sfondo: gradiente lineare (a destra, # 2e6bd4, # bee5eb, # 2e6bd4);

Questo non si riferisce a un'immagine.È così che dici al browser che vorresti che lo sfondo sia un gradiente di colore da sinistra a destra.I colori che vorresti usare per il tuo gradiente andare in ordine tra le parentesi.Puoi usare tutti i colori come vorresti nel tuo gradiente del colore.

Dimensioni di sfondo: Questa è la proprietà che useresti per denotare come si desidera che lo sfondo del selettore venga visualizzato sullo schermo.Ad esempio, se si desidera che l'immagine copre l'intera area, utilizzare il valore della proprietà "Cover".Inoltre, se desideri che l'intera immagine venga mostrata all'interno della regione, utilizzare il valore della proprietà "contiene".

Colore: Questo indica il colore del carattere.Ancora una volta, nota che invece di vedere un nome di colore per il valore di questa proprietà, vedi una serie di numeri e lettere dopo un hashtag.

Trasformazione del testo: Usa questa proprietà se vuoi che tutto il testo all'interno dei tag di apertura e chiusura sia maiuscolo, minuscolo, ecc.

Font: La proprietà del carattere gestisce molto.Ad esempio, tra le nostre staffe ondulative del selettore H4, la proprietà del font ha un valore di:

33px 'Cinzel', Serif;

La prima parte denota la dimensione del testo.La parte 'Cinzel' denota il nome della famiglia dei font.La parte "serif" indica la famiglia generica che la famiglia di font è un membro di.

Allineare il testo: Questo dice al browser se vuoi che il testo si allinei verso sinistra, destra o centro. Nel nostro caso, vogliamo che il nostro testo sia al centro delle pagine web.

Margin-Left: Questa proprietà dice al browser quanto lontano dal lato sinistro della pagina Web o dall'elemento al selettore ti viene lasciato per desiderare di risiedere tale selettore.

Margine-destra: Questa proprietà indica al browser quanto lontano dal lato destro della pagina web o dall'elemento a destra del selettore si desidera che risieda tale selettore.

Margin-Top: questa proprietà dice al browser quanto lontano dalla parte superiore della pagina Web o dall'elemento sulla parte superiore del selettore si desidera risiedere tale selettore.

Margin-Bottom: questa proprietà dice al browser quanto lontano dalla parte inferiore della pagina web o dall'elemento al di sotto del selettore si desidera risiedere tale selettore.

Se desideri che il selettore sia centrato proprio al centro della pagina, utilizza le seguenti proprietà e valori di proprietà:

123 margin-right: auto; margin-left: auto; display: block;

Larghezza: Questa proprietà è piuttosto semplice. Indica la larghezza che vuoi che sia il tuo elemento.

Schermo: Questo è un po 'più complesso, ma denota essenzialmente il modo in cui il tuo elemento viene visualizzato sulla pagina.Nel nostro esempio, abbiamo:

blocco di visualizzazione;

Ciò significa che vogliamo che l'elemento riempia l'intera larghezza dell'area.

Confine: Questa proprietà dice al browser che vogliamo un bordo attorno all'elemento, se vogliamo che sia solido, punteggiato, raddoppiato, ecc., Rispettivamente la dimensione del bordo e il colore del bordo.

Raggio di confine: Questa proprietà denota quanto round vogliamo che gli angoli del confine siano.

Opacità: Questa proprietà dice al browser se vogliamo che l'elemento sia opaco, trasparente o da qualche parte in mezzo. Uno significa completamente opaco, e 0 significa completamente trasparente.

Imbottitura: Questo indica la quantità di spazio che vuoi tra il tuo elemento e l'area intorno ad esso.Ad esempio, sui pulsanti che abbiamo creato sulla nostra homepage, vogliamo un piccolo spazio tra le parole "Leggi il post del blog" e il bordo dei pulsanti.Pertanto, abbiamo dato i pulsanti 20px di imbottitura sulla parte superiore e inferiore delle parole e 30px imbottitura a destra ea sinistra.

Spaziatura del carattere: Questo dice al browser quanto spaziazione vorresti tra ogni lettera delle parole che viene visualizzato sul tuo sito web.

Galleggiante: Questa proprietà dice al browser che vuoi che il tuo elemento andasse a fianco di un altro elemento piuttosto che sotto di esso per impostazione predefinita.

Commenti in CSS

Ecco come aggiungiamo commenti al tuo codice CSS:

La sintassi per i commenti CSS consiste nel digitare i commenti tra / * e * /.

Ad esempio, nel nostro documento CSS, potrei commentare quanto segue per organizzare il mio codice:

/ * Corpo della pagina web * / Body {background-Image: URL ('../ images / your_background_image.jpg'); Sfondo-Dimensione: copertina;} / * Barre di navigazione per tutte le pagine Web tranne Homepage e Blog Post 1 Web Page * / NAV {Font: 22px 'Cinzel', SERIF; Text-Transform: maiuscolo;} / * Installazione del nome del blog * / H4 {Font: 33px 'Cinzel', serif; Trasformazione del testo: maiuscolo; Text-Align: Center; Colore: # 5a7e9e;} / * Intestazioni post blog * / H3 {Font: 27px 'Cinzel', serif; Trasformazione del testo: maiuscolo; Text-Align: Center; Colore: # 0b053f;} / * Immagini * / IMG {Margin-Sinistro: Auto; Margine-destra: Auto; Larghezza: 50; blocco di visualizzazione; Bordo: 3px nero solido; Border-Radius: 25px;} / * paragrafi * / p {font: 22px 'Cinzel', serif; Text-Align: Center; Colore: # 074B82;} / * Pulsanti * / Button {Font: 27px 'Cinzel', Serif; Trasformazione del testo: maiuscolo; Text-Align: Center; Margin-Left: Auto; Margine-destra: Auto; blocco di visualizzazione; sfondo-colore: # bee5eb; Imbottitura: 20px 30px; Bordo: 3px nero solido; Border-Radius: 25px;} / * Pulsanti su Hover * / pulsante: Hover {background-Colour: # 00a1F5; Opacità: .5;} / * footer * / footer {font: 27px 'Cinzel', serif; Allineare il testo: a sinistra; Colore: # 074b82; sfondo-colore: # bee5eb; Margine-Top: 10px;} / *

tag per l'intero blog post 1 sezione in indice.html Pagina * / Div {background-Image: Gradiente lineare (a destra, # 2e6bd4, # bee5eb, # 2e6bd4);} / * Classe "Readnext" per Blog Post 2 & 3 Pagine Web * /. Readnext {Text-Transform: maiuscolo; Lettera-spaziatura: 3 px; Float: Sinistra;} / * ID "Grazie" ID per ringraziamento solo il paragrafo in piè di pagina della homepage * / # Gylyyou {Text-Transform: maiuscolo; Colore: # 0b053F;}

Ci sono molte di più da dove provengono quelle proprietà CSS.Tuttavia, per ora, passeremo già a più codifica!Io sono.Così.Emozionato.

Concludendo CSS

So che l'ho appena menzionato, ma questa è veramente solo la punta dell'iceberg per quanto riguarda il CSS.Consiglio vivamente di controllare alcuni siti Web "Google-abili" rapidamente contenenti tutti i componenti e i pezzi di CSS (e HTML, per quella materia).Il team Hostwinds è entusiasta di iniziare ad aggiungere una bellezza personalizzata al nostro sito web di blogging, e non vediamo l'ora di parlare con te quando debuttiamo parte 3 dei "tutorial di Hostwinds: come costruire un sito web di blog senza una serie di Blog Blog Blog Blog.(Papà scherzo per inviarci :) "C ... ss" Allora !!!

Scritto da Hostwinds Team  /  dicembre 27, 2018