Dekor tekstualne informacije na webu ima svoje specifične karakteristike. Ako objavljujete neki sadržaj na web mjestu, on bi u pravilu trebao biti dobro strukturiran - za to se koriste naslovi. Uz njihovu pomoć tekstovi su maksimalno laki za čitanje i razumijevanje.

Nekoliko točaka prije nego što počnemo:

• Svi primjeri fontova besplatni su i dostupni na Google WebFonts.
• U primjerima postoje samo zaglavlja H1-H4 jer se ona najčešće koriste.
• Autor CSS stilova koristio je model u kojem je [širina] = [stvarna širina elementa] + [padding] + [borders]. U kodu postoji isječak za ovo:

*, *:poslije, *:prije ( veličina okvira: granični okvir; )

Na kraju, u uvodu se spominje pojam “vertikalnog ritma”. On zapravo postavlja sve razmake između blokova na stranici - bilo da su to naslovi, tekstualni odlomci, slike ili čak samo elementi predloška web stranice. To je osobito istinito kada se koriste neobični. Dakle, u svemu CSS primjeri stilovi koriste isti "ritam":

h1 (veličina fonta: 36px; visina retka: 40px;) h2 (veličina fonta: 30px; visina retka: 40px;) h3 (veličina fonta: 24px; visina retka: 40px;) h4 (veličina fonta : 18px; visina linije: 20px; )

Sada možete prijeći izravno na praksu.

Primjer 1

Počnimo s manje-više jednostavnom opcijom. Tipografija je izvrsna za medijsku web stranicu, možda čak i za novine. Ovo rješenje ne nudi nikakve posebnosti, osim što koristi 2 fonta - Ultra (sans-serif), Orienta (sans-serif). Konačni CSS kod:

Demo-1 .main h1 ( margina: 1em 0 0,5em 0; boja: #343434; težina fonta: normalna; obitelj fonta: "Ultra", sans-serif; veličina fonta: 36px; visina linije: 42px; text-transform: velika slova; text-shadow: 0 2px bijela, 0 3px #777; ) .demo-1 .main h2 ( margina: 1em 0 0.5em 0; boja: #343434; težina fonta: normalna; veličina fonta : 30px; line-height: 40px; font-family: "Orienta", sans-serif; ) .demo-1 .main h3 ( margina: 1em 0 0.5em 0; boja: #343434; veličina fonta: 22px; linija -visina: 40px; težina fonta: normalno; transformacija teksta: velika slova; obitelj fonta: "Orienta", sans-serif; razmak između slova: 1px; stil fonta: kurziv; ) .demo-1 .main h4 ( margina: 1em 0 0,5em 0; boja: #343434; veličina fonta: 18px; visina linije: 20px; težina fonta: normalna; obitelj fonta: "Orienta", sans-serif; )

Primjer 2

Ovdje je malo zanimljivija implementacija - dodaje se pozadina za naslov u obliku pune ispune i slike. CSS kod je napisan sasvim ispravno, uvlake su naznačene u postocima tako da se pri smanjenju slike tekst naslova ne spaja s pozadinskom slikom. Korišteni fontovi: Titillium Web (sans-serif), Muli (sans-serif).

Demo-2 .main h1 ( margina: 1em 0 0.5em 0; težina-fonta: 600; obitelj-fonta: "Titillium Web", sans-serif; pozicija: relativna; veličina fonta: 36px; visina retka: 40px; padding: 15px 15px 15px 15%; boja: #355681; box-shadow: umetnuto 0 0 0 1px rgba(53,86,129, 0.4), umetnuto 0 0 5px rgba(53,86,129, 0.5), umetnuto -285px 0 35px bijelo ; border-radius: 0 10px 0 10px; pozadina: #fff url(../images/bartoszkosowski.jpg) bez ponavljanja sredina lijevo; ) .demo-2 .main h2 ( margina: 1em 0 0.5em 0; font- težina: normalno; pozicija: relativna; sjena teksta: 0 -1px rgba(0,0,0,0.6); veličina fonta: 28px; visina retka: 40px; pozadina: #355681; pozadina: rgba(53,86,129 , 0,8); obrub: 1px puni #fff; ispuna: 5px 15px; boja: bijela; border-radius: 0 10px 0 10px; box-shadow: umetnuti 0 0 5px rgba(53,86,129, 0.5); font-family: "Muli", sans-serif; ) .demo-2 .main h3 ( margina: 1em 0 0,5em 0; težina fonta: 600; obitelj fonta: "Titillium Web", sans-serif; pozicija: relativna; tekst- sjena: 0 -1px 1px rgba(0,0,0,0.4);veličina fonta: 22px; line-height: 40px; boja: #355681; transformacija teksta: velika slova; rub-bottom: 1px puni rgba(53,86,129, 0.3); ) .demo-2 .main h4 ( margina: 1em 0 0,5em 0; težina-fonta: 600; obitelj-fonta: "Titillium Web", sans-serif; pozicija: relativna; veličina-font-a: 18px; visina-line: 20px; boja: #788699; obitelj fonta: "Muli", sans-serif; )

Primjer 3

Sada primjer implementacije zaglavlja za web mjesto s tamnim dizajnom. U tu svrhu odabrana je prilično svijetla, kontrastna plava boja za razliku od tamne siva pozadina. Korišteni fontovi su Hammersmith One (sans-serif), Questrial (sans-serif).

Demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after ( položaj: apsolutno; sadržaj: ""; lijevo: 0; vrh: 0; dno: 0; širina: 5px; rubni radijus: 2px; sjena okvira: umetnuti 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3); ) .demo-3 .main h2:after ( pozadina: #0AF; ) .demo-3 .main h3:after ( pozadina: #3BF; ) .demo-3 .main h4:after ( pozadina: #6Cf; ) .demo-3 .main h1 (veličina fonta: 36px; line-height: 40px; margin: 1em 0 .6em 0; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0 ,0,0,0.4); pozicija: relativna; boja: #6Cf; ) .demo-3 .main h2 ( margina: 1em 0 .6em 0; ispuna: 0 0 0 20px; težina fonta: normalna; boja: bijela ; obitelj-fontova: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); pozicija: relativna; veličina fonta: 30px; visina linije: 40px; ) .demo-3 .main h3 ( margina: 1em 0 .6em 0; ispuna: 0 0 0 20px; težina fonta: normalna; boja: bijela; obitelj fonta: "Hammersmith One", sans-serif; tekst-sjena: 0 -1px 0 rgba(0,0,0,0.4); položaj: relativan; veličina fonta: 24px; line-height: 40px; obitelj-fontova: "Questrial", sans-serif; ) .demo-3 .main h4 ( margina: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow : 0 -1px 0 rgba(0,0,0,0.4); pozicija: relativna; veličina fonta: 18px; visina linije: 20px; obitelj fonta: "Questrial", sans-serif; )

Primjer 4

Eksperimentirajmo s pozadinom - što kažete na dodavanje drvene teksture. Fontovi Scada (sans-serif), Carrois Gothic (sans-serif), a letak za H2 također je implementiran kroz font, a ne kroz sliku.

Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i ( padding-desno: 10px; boja: #A8D13B; veličina fonta: 0.8em; ) .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after ( pozicija: apsolutna; sadržaj: ""; visina: 1px; radijus granice : 2px; lijevo: 0; dolje: 0; box-shadow: 0 -1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.6); ) .demo-4 .main h2:after ( širina: 100%; ) .demo-4 .main h3:after ( širina: 75%; ) .demo-4 .main h4:after ( širina: 50%; ) .demo-4 .main h1 ( margina: 1em 0 0.75em; ispuna: 0 0 5px 0; boja: #6B5344; težina fonta: normalna; pozicija: relativna; sjena teksta: 0 2px 0 rgba(255,255,255,0.5); veličina fonta: 36px; visina linije: 40px; obitelj-fontova: "Carrois Gothic", sans-serif; ) .demo-4 .main h2 ( margina: 1em 0 0,75em; ispuna: 0 0 5px 0; boja: #6B5344; težina fonta: normalna; font -obitelj: "Scada", sans-serif; pozicija: relativna; sjena teksta: 0 2px 0 rgba(255,255,255,0.5); veličina fonta: 30px; visina retka: 40px; ) .demo-4 .main h3 ( margina: 1em 0 0,75em; ispuna: 0 0 5px 0; boja: #6B5344; težina fonta: normalna; obitelj-fontova: "Scada", sans-serif; položaj: relativan; tekst-sjena: 0 2px 0 rgba(255,255,255,0.5); veličina fonta: 24px; line-height: 40px; ) .demo-4 .main h4 ( margina: 1em 0 0.75em; padding: 0 0 5px 0; boja: #6B5344; težina fonta: normalna; obitelj fonta: "Scada", sans-serif; pozicija: relativna; sjena teksta: 0 2px 0 rgba(255,255,255,0.5); veličina fonta: 18px; visina linije: 20px; )

Primjer 5

Još jedna zanimljiva i ne sasvim obična Shema boja- možda će vas potaknuti na neke njegove ideje i implementacije. Naslovi, u načelu, ne mogu uvijek imati podebljani, veliki font - postoje takve opcije.

Demo-6 .main h1 ( margina: 1em 0 0,5em 0; težina fonta: 100; transformacija teksta: velika slova; boja: #00caa6; stil fonta: kurziv; obitelj fonta: "Josefin Sans", sans-serif ; veličina fonta: 58px; visina linije: 54px; sjena teksta: 2px 5px 0 rgba(0,0,0,0.2); ) .demo-6 .main h2 ( margina: 1em 0 0,5em 0; boja: #148773; veličina fonta: 26px; visina linije: 40px; težina fonta: podebljano; obitelj fonta: "Josefin Sans", sans-serif; ) .demo-6 .main h3 ( margina: 1em 0 0,5em 0 ; boja: #343434; veličina fonta: 22px; visina linije: 40px; težina fonta: 100; transformacija teksta: velika slova; obitelj fonta: "Josefin Sans", sans-serif; razmak između slova: 1px; font -style: kurziv; ) .demo-6 .main h4 ( margina: 1em 0 0.5em 0; boja: #343434; veličina fonta: 18px; visina linije: 20px; težina fonta: podebljano; obitelj-fonta: " Josefin Sans", sans-serif; )

Ako poznajete CSS gotovo temeljito, onda vam izvorni članak govori kako koristiti određene pretprocesore u stilovima kako biste smanjili količinu koda i učinili ga jednostavnijim. Iskreno, koristeći funkcije i zamjenu parametara u datoteci CSS stilovi Vidio sam ga prvi put, ali kod je vrlo jasan. Također, naravno, u originalnom članku pronaći ćete poveznice na izvore i demo verzije svih opcija.

p.s. T Za one koji rade na internetu ili tek počinju, članak o tome što je TIC pomoći će vam da se snađete u jednom od najrelevantnijih i najraspravljanijih koncepata na internetu.

Uvijek želite privući pozornost na naslove na web stranici ili blogu, želite ih učiniti lijepima i po mogućnosti s efektima (na primjer, sjena, sjaj ili 3D). Mogu se napraviti prilično lijepi naslovi Adobe program Photoshop, međutim, na izlazu su slike, što znači da njihov tekst ne mogu pročitati roboti za pretraživanje... Što učiniti? Postoji izlaz!

Doista, kada utvrđujete relevantnost vaše web stranice za određene upite za pretraživanje i dodijeliti mu mjesto u Rezultati pretraživanja naslovi igraju DALEKO od posljednjeg mjesta. Rekao bih čak jedan od najznačajnijih. Bilo bi prilično nepromišljeno ostaviti ih u obliku slike (iako sam svojedobno redizajnirao jednu web stranicu čiji je cijeli tekst na nekoliko stranica bio slika... da, da, događa se i to...).

Možete, naravno, zaboraviti na ljepotu i učiniti naslove običnim, kao i svugdje drugdje. Ali zašto, ako postoji prilično jednostavan način koji će vaše naslove ostaviti u tekstualnom formatu i može im dati vrlo lijepe i zanimljive efekte? I danas ću vam pokazati ove tehnike. Mislim da kada jednom savladate ove tehnike, da ćete ih stalno koristiti. Jednom riječju, ubit ćete dvije muve jednim udarcem: učinite svoj web dizajn impresivnijim, a relevantnost stranice neće učiniti nikakvu štetu.

Počnimo!

Izrada 3D zaglavlja

Dakle, stvarat ćemo efekte izravno prilikom postavljanja web stranice.

1. Najprije morate izraditi novu html datoteku, kao i datoteku stilske tablice (css).

Da vam pokažem kako se sve to radi, stvorio sam html datoteku i nazvao je “title.html” (all izvorne datoteke Ako je potrebno, možete preuzeti ovu lekciju i pogledati je u “izvorima”). Ovdje izvor naša html datoteka:

3D tekst ovdje

Naslov sjene ovdje

Sjajni tekst ovdje

Anaglifski tekst

Ovo je HTML5 dokument, na koji je povezan style sheet (css.css datoteka), a unutar body taga nalaze se samo četiri naslova različitog kalibra.

Radit ćemo s ovim naslovima. Ne trebamo ništa drugo u html datoteci.

2. Kao što sam već rekao, potrebna nam je datoteka stilskih tablica. Već smo ga povezali, ali ako ga niste izradili, stvorite ga.

Napravio sam datoteku pod nazivom css.css i smjestio je u isti direktorij kao i html datoteku.

Prije nego počnemo stvarati 3D zaglavlje, dodajmo neki osnovni stil stranici kako bi izgledala malo privlačnije.

Odredimo visinu, širinu, boju stranice, centriramo je i postavimo točkasti okvir za oznaku tijela.

Također odmah poravnajmo sve naše naslove u sredini.

Evo koda koji treba napisati u datoteku stilske tablice:

Body(height:700px; width:90%; background-color:#069; margin:0 auto; border:1px dashed #000066; ) h1, h2, h3, h4(text-align:center;)

Pokrenite html datoteku u svom pregledniku. Stranica će izgledati ovako:

3. Sada započnimo transformaciju. Naslov h1 pretvorit ćemo u 3D tekst.

Sve će se to dogoditi u istoj datoteci lista stilova.

Postavite sljedeći kod ispod svega što ste dosad napisali u datoteci css.css:

H1(veličina fonta:72px; boja:#fff; sjena teksta:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px 0, #B6B6B6 5px -5px 0;)

Sada pogledajmo ovaj dio koda. U prva dva retka postavljamo veličinu fonta i glavnu boju. Ali tada počinje zabava. Koristeći svojstvo text-shadow, na neki način stvaramo sjenu za font, ali ne sasvim.

Činjenica je da nakon dvotočke ovo svojstvo navodi sljedeće parametre: boju, vodoravni pomak, okomiti pomak i zamućenje.

Što radimo?

Prvo: odabiremo boju blisku glavnoj, ali tamniju. U našem primjeru, boja prednjeg plana je bijela, a boja sjene teksta je siva (ali ne jako tamna). Ovdje morate eksperimentirati dok ne postignete željeni rezultat.

Drugo: postupno pomičemo (svaki put za 1 piksel) ovu sjenu udesno i gore. Na to ukazuju sljedeća 2 parametra (1px -1px, 2px -2px, itd.).

Treće: zamućenje posvuda ostavljamo na nuli, jer nam jednostavno nije potrebno za stvaranje 3D teksta.

Kao rezultat toga, dobivamo ovu sliku:

U ovom sam se primjeru odlučio za pomak od 5 px, ali možete više ili manje. Sve ovisi o tome kakav rezultat želite postići.

Također svakako eksperimentirajte s bojama, pokušavajući stvoriti prirodniji izgled.

Napravite zaglavlje sa sjenom

Stvaranje zaglavlja sa sjenom vrlo je jednostavno. A to ćemo postići sa samo nekoliko redaka koda.

Sada ćemo raditi na naslovu h2.

Najprije morate postaviti njegovu veličinu i glavnu boju (ja sam postavio veličinu potpuno isto kao i h1 zaglavlje, ali vi, naravno, dizajnirajte svako zaglavlje kako vam je potrebno).

Nakon što smo postavili boju i veličinu, ponovno ćemo koristiti svojstvo text-shadow. Prvi parametar je odrediti boju, ona mora biti tamnija (uostalom, to je sjena). Drugi i treći parametar su horizontalni i vertikalni pomaci. Moj tekst je velik, pa ću ih napraviti od 5 piksela. I posljednji parametar je radijus zamućenja. Sjeni je to potrebno, pa joj dodijelimo vrijednost od 4 piksela. Kao rezultat toga, kod će izgledati ovako:

H2(veličina fonta:72px; boja:#F90; sjena teksta:#191919 5px 5px 4px; )

A izgledat će ovako:

Možete eksperimentirati s parametrima i svejedno dobiti različite rezultate. Uzmite u obzir veličinu fonta teksta, njegovu boju i ono što želite postići.

Napravite zaglavlje sa sjajem

Ovo je također jednostavno. Ovdje ćemo raditi s naslovom h3.

Princip je isti: prvo postavljamo veličinu fonta i njegovu glavnu boju, a zatim koristimo sjenku teksta.

Odaberite boju sjaja. Kao što razumijete, bit će svjetlija od glavne boje naslova. Drugi i treći parametar bit će jednaki nuli (ovdje nećemo ništa pomicati nigdje). Ali radijus zamućenja mora biti veći (njegova veličina također ovisi o tome kakav sjaj želite dobiti).

Kao rezultat, kôd će biti sljedeći:

H3(veličina-fonta:72px; boja:#333; sjena teksta:#fff 0 0 20px; )

A naš naslov sa sjajem će izgledati ovako:

Zaglavlje sa stereo efektom

Može se nazvati i anaglifnim tekstom. Može se usporediti s naočalama za gledanje 3D filma.

Neću vas mučiti... Kako kažu: bolje je jednom vidjeti nego slušati dug opis.

Efekt je vrlo zanimljiv i u principu ga nije teško stvoriti.

Počnimo. Ovdje ćemo raditi s h4 zaglavljem.

1. Prvo, postavimo veličinu zaglavlja. Napravit ću ga istim kao i ostala zaglavlja u našem primjeru.

Sada moramo postaviti element zaglavlja. Postavimo svojstvo position na relativno. To znači da će položaj elementa biti postavljen u odnosu na njegovu izvornu lokaciju.

Sada mu dajmo boju. To ćemo učiniti u rgba formatu. Ako još niste naišli na ovu definiciju boje, nemojte se uznemiriti. Jednostavno je: prva tri parametra u zagradama će odrediti boju ( rgb formatu), a zadnji parametar će odrediti stupanj njegove neprozirnosti. U našem primjeru ta će vrijednost biti 0,5 (odnosno 50%).

Evo koda za sve gore navedeno:

H4(veličina-fonta:72px; pozicija:relativna; boja:rgba(0,0,102,0.5); )

2. Sada dolazi zabavni dio. Napravit ćemo pseudo element za naš h4 element. Da biste to učinili, morat ćete ga registrirati u listu stilova kao h4: poslije.

Ovaj pseudo element će imati nekoliko zanimljivih svojstava. Na primjer, vlasništvo sadržaj, u kojem trebate napisati točno isti tekst kao i naslov h4.

Pseudo element mora biti pozicioniran apsolutno (position:absolute).

Njegova boja mora biti postavljena na suprotnu boju elementa h4. To jest, ako h4 ima plavu boju, tada će pseudo element imati crvenu boju. A neprozirnost je i dalje 50%.

Također ćemo prilagoditi položaj pseudoelementa koristeći svojstva lijevo i vrh. Moramo paziti da pseudo element, koji svojim sadržajem duplicira element h4, bude pozicioniran malo udesno i ispod (sada ćete sve vidjeti sami). Ovdje će postavke biti individualne i ovisit će o veličini fonta, vrsti fonta i željenom učinku.

Evo koda za sve gore navedeno:

H4:after( content:"Anaglyphic Text"; position:absolute; left:361px; top:2px; color:rgba(255,0,0,0.5); )

I evo učinka onoga što dobivamo:

To je sve što sam vas želio naučiti u ovoj lekciji.

Obavezno upotrijebite ovu tehniku! Prvo: Lijep, Drugo: svi naslovi su savršeno čitljivi robotima za pretraživanje, Treće: Nakon što napišete kod, možete koristiti naslov na bilo kojoj web stranici svoje web stranice ili bloga, jednostavnim deklariranjem u html kodu.

Ako vam se svidjela ova lekcija, Napišite svoj komentar(ako se i vama nije svidjelo :)). To će se smatrati zahvalnošću.

Također možete podijeliti lekciju sa svojim prijateljima koristeći gumbe društvenih mreža.

I naravno, pretplatite se na ažuriranja bloga (ako već niste). Obećavam puno korisnih i zanimljivih stvari!

Dobro raspoloženje i vidimo se opet!

Kažu da se o knjizi ne može suditi po koricama, a ipak ljudi to čine svaki dan. Uzmu knjigu, pogledaju korice, a zatim uzmu novu, ili je vrate, ili je okrenu i pogledaju što je na poleđini, ILI je otvore samo gledajući korice. Web stranice se također ocjenjuju prema njihovoj naslovnici i prvom dojmu, koji često proizlazi iz naslova.

Naslov vaše stranice obično je prva stvar koju ljudi vide. Iz ovog teksta ili crteža na vrhu stranice ljudi donose opsežne sudove o tome što će vidjeti i pročitati. Isti ljudi koji kažu da knjigu ne možete suditi po koricama također kažu da imate samo 30 sekundi da ostavite dobar dojam. U svijetu interneta, gdje je sljedeća stranica udaljena samo jednim klikom, imate puno manje vremena za to.

Provest ćemo vas kroz arhitekturu zaglavlja u WordPressu i ponuditi savjete o tome kako je prilagoditi tako da postane vaša vlastita "naslovnica" koja mami ljude na vašu stranicu, a pritom ostavlja dobar dojam. Zatim ćemo vam ponuditi nekoliko stručnih savjeta o tome što točno čini dobar naslov web stranice.

Sadržaj

WordPress zaglavlje

Prema zadanim postavkama, zaglavlje u WordPressu jednostavan je dio koda. Ne morate razumjeti kod da biste promijenili zaglavlje, koje dolazi s bilo kojim WordPress tema. Morate postaviti naslov i opis web-mjesta svog bloga ili web-mjesta na > >, a WordPress će učiniti ostalo.

U njegovom najjednostavniji oblik- Klasična tema - WordPress Zaglavlje je kod u datoteci predloška wp-content/themes/classic/header.php:

">

Naslov se nalazi u oznaci h1 i ima funkciju korištenja u dvije različite opcije ili parametra. Više o ovim opcijama možete saznati u . U osnovi, prvi prikazuje web mjesto u vezi, a drugi prikazuje naziv bloga ili web mjesta kako je postavljeno na > > ploči. Kada korisnik pomakne kursor preko naslova naslova, naslov se može kliknuti za povratak na glavnu ili početnu stranicu web-mjesta, kao što je navedeno na >> ploči.

Zadana WordPress tema otkriva značajke slika u pozadini i predstavlja zaglavlje ovako u wp-content/themes/default/header.php:

Zaglavlje zadane/Kubrickove teme

Oznaka predloška prikazuje naziv bloga ili web-mjesta u vezi, ali to pokazuje drugu upotrebu sličnog upita URL-u iznad. On prima iste informacije, samo na drugačiji način. Dodaje iz opisi stranica u >>.

Jednostavno rečeno, ova dva primjera zaglavlja rade istu stvar na različite načine. Oni pružaju informacije zaglavlja s potencijalom uključivanja slike, a izrada može pomoći u navigaciji web-mjestom. Samo je pitanje koliko informacija želite vidjeti u svom zaglavlju i kako će te informacije biti prikazane.

Koristeći prvi primjer iz klasične teme, slika se i dalje može koristiti kao pozadinska slika postavljena u listu stilova u selektoru h1, druga tema daje veću kontrolu nad upotrebom slike u zaglavlju dajući joj vlastitu podjelu područje. Način na koji će izgledati potpuno je kontroliran listom stilova.

Stil naslova

Kao što je navedeno u dva gornja primjera, stilovi za zaglavlje sadržani su unutar selektora: h1, zaglavlje, slika zaglavlja i opis. Ovo je sve u style.css, iako može biti i u datotekama stila header.php iz teme koju koristite. Morat ćete provjeriti na oba mjesta. U klasičnoj temi, CSS za zaglavlje sadržan je u jednom biraču #header.

#zaglavlje ( pozadina: #90a090; rub-bottom: dvostruko 3px #aba; border-left: solid 1px #9a9; border-desno: solid 1px #565; border-top: solid 1px #9a9; font: italic normal 230% "Times New Roman", Times, serif; prored između slova: 0,2 em; margina: 0; ispuna: 15px 10px 15px 60px; )

Zelena nijansa odabrana je kao boja pozadine i obrub oko zaglavlja, ali obrub je druge nijanse i stvara udubljeni, efekt sjene. Font Times New Roman postavljen je na veličinu od 230% s proredom širim od uobičajenog. Uvlačenje u stranu stvara uvlačenje za tekst unutar naslova.

Svi se oni mogu jednostavno promijeniti jednostavnim uređivanjem svakog atributa stila: debljina obruba se može povećati i svi s istom bojom, boja pozadine, veličina i stil fonta, razmak između slova itd. mogu se promijeniti.

Isto se odnosi i na zaglavlje u zadanoj WordPress temi, osim što postoji još nekoliko stilova o kojima treba voditi računa. Nalaze se unutar header.php u oznaci "head". I u stilu.css. Kada postoji veliki broj stilova, bolje je premjestiti sve informacije u tablicu stilova.

Stilovi koji kontroliraju izgled zaglavlja nalaze se unutar h1, zaglavlje, slika zaglavlja i CSS selektori opisa. Baš kao i s klasičnom temom, možete pronaći ove poveznice i tamo unijeti izmjene kako biste promijenili izgled.

Promjena zadanog naslova slike WordPress tema je pojednostavljena uvođenjem uslužnog programa pod nazivom Kubrickr. Jednostavno od vas traži da stavite novi naziv slikovne datoteke za naslov, a zatim ga prevodi umjesto vas tako da ne morate kopati po kodu. Ako sve što želite promijeniti je slika u zaglavlju, ovo je iznimno koristan i jednostavan alat.

Ako želite, programirajte ili istražite svoje stilove zaglavlja i napravite potrebne promjene. U nastavku je jednostavan vodič o tome kako ručno promijeniti samo naslov slike.