Decor informații text pe Web are propriile sale caracteristici specifice. Dacă postați un anumit conținut pe site, atunci, de regulă, acesta ar trebui să fie bine structurat - titlurile sunt folosite pentru aceasta. Cu ajutorul lor, textele sunt cât mai ușor de citit și de înțeles.

Câteva puncte înainte de a începe:

• Toate exemplele de fonturi sunt gratuite și disponibile pe Google WebFonts.
• În exemple există doar anteturi H1-H4, deoarece acestea sunt cele mai frecvent utilizate.
• Autorul stilurilor CSS a folosit un model în care [lățimea] = [lățimea elementului real] + [padding] + [borduri]. Există un fragment pentru asta în cod:

*, *:după, *:înainte ( dimensiunea cutiei: cutie-chenar; )

În cele din urmă, introducerea menționează conceptul de „ritm vertical”. De fapt, stabilește toată umplutura între blocurile de pe pagină - fie că este vorba de titluri, paragrafe de text, imagini sau chiar doar elemente de șablon de site. Acest lucru este valabil mai ales atunci când folosiți cele neobișnuite. Deci, în toate Exemple CSS stilurile folosesc același „ritm”:

h1 ( dimensiunea fontului: 36px; înălțimea liniei: 40px; ) h2 ( dimensiunea fontului: 30px; înălțimea liniei: 40px; ) h3 (dimensiunea fontului: 24px; înălțimea liniei: 40px; ) h4 ( dimensiunea fontului : 18px; înălțimea liniei: 20px; )

Acum poți trece direct la practică.

Exemplul 1

Să începem cu o opțiune mai mult sau mai puțin simplă. Tipografia este grozavă pentru un site media, poate chiar pentru un ziar. Această soluție nu oferă caracteristici speciale, cu excepția faptului că folosește 2 fonturi - Ultra (sans-serif), Orienta (sans-serif). Cod CSS final:

Demo-1 .main h1 ( marja: 1em 0 0.5em 0; culoare: #343434; greutatea fontului: normal; familia de fonturi: „Ultra”, sans-serif; dimensiunea fontului: 36px; înălțimea liniei: 42px; text-transform: majuscule; text-shadow: 0 2px alb, 0 3px #777; ) .demo-1 .main h2 (marja: 1em 0 0.5em 0; culoare: #343434; font-weight: normal; font-size : 30px; line-height: 40px; font-family: "Orienta", sans-serif; ) .demo-1 .main h3 (marja: 1em 0 0.5em 0; culoare: #343434; font-size: 22px; line -height: 40px; font-weight: normal; text-transform: majuscule; font-family: "Orienta", sans-serif; letter-spacing: 1px; font-style: italic; ) .demo-1 .main h4 ( margine: 1em 0 0.5em 0; culoare: #343434; dimensiunea fontului: 18px; înălțimea liniei: 20px; greutatea fontului: normal; familia de fonturi: „Orienta”, sans-serif; )

Exemplul 2

Iată o implementare puțin mai interesantă - se adaugă un fundal pentru titlu sub forma unei umpleri solide și a unei imagini. Codul CSS este scris destul de corect, indentările sunt indicate în procente pentru ca atunci când imaginea este redusă, textul titlului să nu se îmbine cu imaginea de fundal. Fonturi utilizate: Titillium Web (sans-serif), Muli (sans-serif).

Demo-2 .main h1 ( marja: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; poziție: relativ; font-size: 36px; line-height: 40px; padding: 15px 15px 15px 15%; culoare: #355681; box-shadow: inset 0 0 0 1px rgba(53,86,129, 0,4), inset 0 0 5px rgba(53,86,129, 0,5), alb 0 385px rgba ; chenar-rază: 0 10px 0 10px; fundal: #fff url(../images/bartoszkosowski.jpg) fără repetare centru stânga; ) .demo-2 .main h2 (marja: 1em 0 0.5em 0; font- greutate: normal; poziție: relativă; umbră text: 0 -1px rgba(0,0,0,0,6); dimensiune font: 28px; înălțime linie: 40px; fundal: #355681; fundal: rgba(53,86,129 , 0,8); chenar: 1px solid #fff; umplutură: 5px 15px; culoare: alb; chenar-rază: 0 10px 0 10px; umbră casetă: inserție 0 0 5px rgba(53,86,129, 0,5); font-family: „Muli”, sans-serif; ) .demo-2 .main h3 (marja: 1em 0 0.5em 0; font-weight: 600; font-family: „Titillium Web”, sans-serif; poziție: relativă; text- umbră: 0 -1px 1px rgba(0,0,0,0.4);dimensiune font: 22px; înălțimea liniei: 40px; culoare: #355681; text-transform: majuscule; margine de jos: 1px rgba solid (53,86,129, 0,3); ) .demo-2 .main h4 (marja: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; poziție: relativ; font-size: 18px; line-height: 20px; culoare: #788699; familia de fonturi: „Muli”, sans-serif; )

Exemplul 3

Acum un exemplu de implementare a antetelor pentru un site cu un design întunecat. În acest scop, a fost selectată o culoare albastră destul de strălucitoare, contrastantă, spre deosebire de închisă fundal gri. Fonturile folosite sunt Hammersmith One (sans-serif), Questrial (sans-serif).

Demo-3 .principal h2:după, .demo-3 .principal h3:după, .demo-3 .principal h4:după (poziție: absolut; conținut: ""; stânga: 0; sus: 0; jos: 0; lățime: 5px; chenar-rază: 2px; umbră casetă: inserție 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3); ) .demo-3 .main h2:după ( fundal: #0AF; ) .demo-3 .h3 principal: după ( fundal: #3BF; ) .demo-3 .h4 principal: după ( fundal: #6Cf; ) .demo-3 .h1 principal (dimensiunea fontului: 36 px; înălțime linie: 40 px; marjă: 1 em 0 .6 em 0; greutate font: normal; culoare: alb; familie de fonturi: „Hammersmith One”, sans-serif; text-shadow: 0 -1px 0 rgba(0 ,0,0,0.4); poziție: relativă; culoare: #6Cf; ) .demo-3 .principal h2 (marja: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; culoare: alb ; familia de fonturi: „Hammersmith One”, sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); poziție: relativă; dimensiunea fontului: 30px; înălțimea liniei: 40px; ) .demo-3 .main h3 ( margine: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; culoare: alb; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); poziție: relativă; dimensiunea fontului: 24px; înălțimea liniei: 40px; familia de fonturi: „Questrial”, sans-serif; ) .demo-3 .main h4 ( marja: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; culoare: alb; font-family: "Hammersmith One", sans-serif; text-shadow : 0 -1px 0 rgba(0,0,0,0.4); poziție: relativă; dimensiunea fontului: 18px; înălțimea liniei: 20px; familia de fonturi: "Questrial", sans-serif; )

Exemplul 4

Să experimentăm cu fundalul - ce zici de adăugarea unei texturi de lemn. Fonturi Scada (sans-serif), Carrois Gothic (sans-serif), iar prospectul pentru H2 este, de asemenea, implementat printr-un font, nu printr-o imagine.

Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i ( padding-dreapta: 10px; culoare: #A8D13B; font-size: 0.8em; ) .demo-4 .principal h2:după, .demo-4 .principal h3:după, .demo-4 .principal h4:după (poziție: absolut; conținut: ""; înălțime: 1px; chenar-rază : 2px; stânga: 0; jos: 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 ( lățime: 100%; ) .demo-4 .principal h3:după ( lățime: 75%; ) .demo-4 .principal h4:după ( lățime: 50%; ) .demo-4 .principal h1 ( marjă: 1em 0 0,75em; umplutură: 0 0 5px 0; culoare: #6B5344; greutate font: normal; poziție: relativă; umbră text: 0 2px 0 rgba(255,255,255,0,5); dimensiune font: 36px; înălțime linie: 40px; font-family: "Carrois Gothic", sans-serif; ) .demo-4 .main h2 (marja: 1em 0 0.75em; umplutură: 0 0 5px 0; culoare: #6B5344; font-weight: normal; font -familie: „Scada”, sans-serif; poziție: relativă; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 30px; line-height: 40px; ) .demo-4 .main h3 ( marja: 1em 0 0,75em; umplutură: 0 0 5px 0; culoare: #6B5344; greutatea fontului: normal; familie de fonturi: "Scada", sans-serif; poziție: relativă; text-shadow: 0 2px 0 rgba(255,255,255,0.5); dimensiunea fontului: 24px; înălțimea liniei: 40px; ) .demo-4 .main h4 ( marja: 1em 0 0.75em; padding: 0 0 5px 0; culoare: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; poziție: relativă; text-shadow: 0 2px 0 rgba(255,255,255,0.5); dimensiunea fontului: 18px; înălțimea liniei: 20px; )

Exemplul 5

Un alt interesant și nu chiar obișnuit schema de culori- poate vă va împinge la unele dintre ideile și implementările sale. Titlurile, în principiu, nu pot avea întotdeauna font aldine, mari - există astfel de opțiuni.

Demo-6 .main h1 ( marja: 1em 0 0.5em 0; font-weight: 100; text-transform: majuscule; culoare: #00caa6; font-style: italic; font-family: "Josefin Sans", sans-serif ; dimensiunea fontului: 58px; înălțimea liniei: 54px; umbră text: 2px 5px 0 rgba(0,0,0,0.2); ) .demo-6 .main h2 (marja: 1em 0 0.5em 0; culoare: #148773; dimensiunea fontului: 26px; înălțimea liniei: 40px; greutatea fontului: bold; familia de fonturi: „Josefin Sans”, sans-serif; ) .demo-6 .main h3 (marja: 1em 0 0.5em 0 ; culoare: #343434; dimensiunea fontului: 22px; înălțimea liniei: 40px; greutatea fontului: 100; transformarea textului: majuscule; familia de fonturi: „Josefin Sans”, sans-serif; spațiere între litere: 1px; font -style: italic; ) .demo-6 .main h4 (marja: 1em 0 0.5em 0; culoare: #343434; font-size: 18px; line-height: 20px; font-weight: bold; font-family: " Josefin Sans", sans-serif; )

Dacă cunoașteți CSS aproape în detaliu, atunci articolul original vă spune cum să utilizați anumite pre-procesoare în stiluri pentru a reduce cantitatea de cod și a face acest lucru mai simplu. Sincer, folosind funcții și înlocuirea parametrilor într-un fișier Stiluri CSS L-am văzut pentru prima dată, dar codul este foarte clar. De asemenea, desigur, în articolul original veți găsi link-uri către surse și versiuni demo ale tuturor opțiunilor.

P.S. T Pentru cei care lucrează pe Internet sau abia încep, un articol despre ce este un TIC vă va ajuta să navigați pe unul dintre cele mai relevante și discutate concepte de pe Internet.

Întotdeauna vrei să atragi atenția asupra titlurilor de pe un site sau blog, vrei să le faci frumoase și de preferință cu efecte (de exemplu, umbră, strălucire sau 3D). Se pot face titluri destul de frumoase programul Adobe Photoshop, însă, la ieșire sunt imagini, ceea ce înseamnă că textul lor nu poate fi citit de roboții de căutare... Ce să faci? Există o ieșire!

Într-adevăr, atunci când determinați relevanța paginii dvs. web pentru anumite interogări de căutareși atribuindu-i un loc în rezultatele cautarii titlurile joacă DEPARTE de ultimul loc. Aș spune chiar una dintre cele mai semnificative. Ar fi destul de nechibzuit să le las sub forma unei imagini (deși am reproiectat odată un site, al cărui text întreg pe mai multe pagini era o imagine... da, da, se întâmplă și asta...).

Puteți, desigur, să uitați de frumusețe și să faceți titlurile obișnuite, ca peste tot. Dar de ce, dacă există o modalitate destul de simplă care vă va lăsa titlurile în format text și le poate oferi efecte foarte frumoase și interesante? Și astăzi vă voi arăta aceste tehnici. Cred că odată ce stăpânești aceste tehnici, le vei folosi constant. Într-un cuvânt, vei ucide două păsări dintr-o singură piatră: fă-ți designul web mai impresionant și relevanța paginii nu va face niciun rău.

Să începem!

Crearea unui antet 3D

Deci, vom crea efecte direct atunci când așezam pagina web.

1. Mai întâi trebuie să creați un fișier html nou, precum și un fișier de foaie de stil (css).

Pentru a vă arăta cum se fac toate acestea, am creat un fișier html și l-am numit „title.html” (all fișiere sursă Dacă este necesar, puteți descărca această lecție și o puteți vizualiza în „surse”). Aici sursă fișierul nostru html:

Text 3D aici

Shadow Title Aici

Text strălucitor aici

Text anaglific

Acesta este un document HTML5, o foaie de stil (fișier css.css) este conectată la acesta, iar în interiorul etichetei body există doar patru titluri de diferite calibre.

Vom lucra cu aceste titluri. Nu avem nevoie de nimic altceva în fișierul html.

2. După cum am spus deja, avem nevoie de un fișier de foaie de stil. L-am conectat deja, dar dacă nu l-ați creat, atunci creați-l.

Am creat un fișier numit css.css și l-am plasat în același director cu fișierul html.

Înainte de a începe să creăm antetul 3D, să adăugăm un stil de bază paginii pentru a o face să pară puțin mai atractivă.

Să specificăm înălțimea, lățimea, culoarea paginii, să o centrem și să setăm un cadru punctat pentru eticheta body.

De asemenea, să aliniem imediat toate titlurile noastre în centru.

Iată codul care trebuie scris în fișierul foaia de stil:

Corp (înălțime:700px; lățime:90%; culoarea fundalului:#069; margin:0 auto; chenar:1px întreruptă #000066; ) h1, h2, h3, h4(text-align:center;)

Lansați fișierul html în browser. Pagina va arăta astfel:

3. Acum să începem transformarea. Vom transforma titlul h1 în text 3D.

Toate acestea se vor întâmpla în același fișier de foaie de stil.

Pune următorul cod sub tot ce ai scris până acum în fișierul css.css:

H1(font-size:72px; color:#fff; text-shadow:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px 0, #B6B6B6 5px -5px 0;)

Acum să ne uităm la această bucată de cod. În primele două rânduri setăm dimensiunea fontului și culoarea principală. Dar apoi începe distracția. Folosind proprietatea text-shadow, creăm un fel de umbră pentru font, dar nu chiar.

Faptul este că după două puncte, această proprietate listează următorii parametri: culoare, deplasare orizontală, deplasare verticală și estompare.

Ce facem?

În primul rând: selectăm o culoare apropiată de cea principală, dar mai închisă. În exemplul nostru, culoarea primului plan este albă, iar culoarea umbră a textului este gri (dar nu foarte închisă). Aici trebuie să experimentați până când obțineți rezultatul dorit.

În al doilea rând: mutăm treptat (de fiecare dată cu 1 pixel) această umbră spre dreapta și în sus. Acest lucru este indicat de următorii 2 parametri (1px -1px, 2px -2px, etc.).

În al treilea rând: lăsăm neclaritatea la zero peste tot, pentru că pur și simplu nu avem nevoie de ea pentru a crea text 3D.

Drept urmare, obținem această imagine:

În acest exemplu m-am stabilit pe un offset de 5px, dar puteți face mai mult sau mai puțin. Totul depinde de ce rezultat vrei să obții.

De asemenea, asigurați-vă că experimentați cu culorile, încercând să creați un aspect mai natural.

Creați un antet cu o umbră

Crearea unui antet cu umbră este foarte simplă. Și vom realiza acest lucru cu doar câteva linii de cod.

Acum vom lucra la titlul h2.

În primul rând, trebuie să setați dimensiunea și culoarea principală (eu am setat dimensiunea exact la fel ca antetul h1, dar, desigur, proiectați fiecare antet după cum aveți nevoie).

După ce am setat culoarea și dimensiunea, vom folosi din nou proprietatea text-shadow. Primul parametru este de a specifica culoarea; trebuie să fie mai închisă (la urma urmei, este o umbră). Al doilea și al treilea parametru sunt deplasările orizontale și verticale. Textul meu este mare, așa că le voi face 5 pixeli. Iar ultimul parametru este raza de estompare. Umbra are nevoie de ea, așa că îi atribuim o valoare de 4 pixeli. Drept urmare, codul va arăta astfel:

H2(dimensiunea fontului:72px; culoare:#F90; text-shadow:#191919 5px 5px 4px; )

Și va arăta așa:

Puteți experimenta cu parametrii și puteți obține rezultate diferite. Luați în considerare dimensiunea fontului textului dvs., culoarea acestuia și ceea ce doriți să obțineți.

Creați un antet cu o strălucire

Acest lucru este, de asemenea, simplu. Aici vom lucra cu titlul h3.

Principiul este același: mai întâi setăm dimensiunea fontului și culoarea sa principală, apoi folosim text-shadow.

Selectați culoarea strălucirii. După cum înțelegeți, va fi mai deschis decât culoarea principală a titlului. Al doilea și al treilea parametru vor fi egali cu zero (aici nu vom muta nimic nicăieri). Dar raza de estompare trebuie să fie mai mare (dimensiunea sa depinde și de ce fel de strălucire doriți să obțineți).

Ca urmare, codul va fi după cum urmează:

H3(dimensiunea fontului:72px; culoare:#333; text-shadow:#fff 0 0 20px; )

Și titlul nostru cu strălucire va arăta astfel:

Antet cu efect stereo

Poate fi numit și text anaglif. Poate fi comparat cu ochelarii pentru vizionarea unui film 3D.

Nu te voi chinui... După cum se spune: este mai bine să vezi o dată decât să asculți o descriere lungă.

Efectul este foarte interesant și, în principiu, nu este greu de creat.

Să începem. Aici vom lucra cu un antet h4.

1. Mai întâi, să setăm dimensiunea antetului. O voi face la fel ca și restul antetelor din exemplul nostru.

Acum trebuie să poziționăm elementul antet. Să setăm proprietatea poziției la relativă. Aceasta înseamnă că poziția elementului va fi setată în raport cu locația sa inițială.

Acum să-i dăm o culoare. Vom face acest lucru în format rgba. Dacă nu ați întâlnit încă această definiție a culorii, atunci nu vă alarmați. Este simplu: primii trei parametri dintre paranteze vor determina culoarea ( format rgb), iar ultimul parametru va determina gradul de opacitate al acestuia. În exemplul nostru, această valoare va fi 0,5 (adică 50%).

Iată codul pentru toate cele de mai sus:

H4(dimensiunea fontului:72px; poziție:relativ; culoare:rgba(0,0,102,0.5); )

2. Acum vine partea distractivă. Vom crea un pseudo element pentru elementul nostru h4. Pentru a face acest lucru, va trebui să-l înregistrați în foaia de stil ca h4:dupa.

Acest pseudo element va avea câteva proprietăți interesante. De exemplu, proprietatea conţinut, în care trebuie să scrieți exact același text ca și antetul h4.

Pseudoelementul trebuie pozitionat absolut (position:absolute).

Culoarea sa trebuie setată la culoarea opusă elementului h4. Adică, dacă h4 are o culoare albastră, atunci pseudoelementul va avea o culoare roșie. Și opacitatea este încă de 50%.

Și, de asemenea, vom ajusta poziția pseudo-elementului folosind proprietățile din stânga și de sus. Trebuie să ne asigurăm că pseudoelementul, care dublează elementul h4 în conținutul său, este poziționat puțin în dreapta și mai jos (acum vei vedea totul pentru tine). Aici setările vor fi individuale și vor depinde de dimensiunea fontului, tipul fontului și efectul dorit.

Iată codul pentru toate cele de mai sus:

H4:după( conținut:„Text anaglific”; poziție:absolut; stânga:361px; sus:2px; culoare:rgba(255,0,0,0,5); )

Și iată efectul a ceea ce obținem:

Asta e tot ce am vrut să te învăț în această lecție.

Asigurați-vă că utilizați această tehnică! In primul rand: Frumoasa, În al doilea rând: toate titlurile sunt perfect lizibile de roboții de căutare, În al treilea rând: Odată ce ai scris codul, poți folosi titlul pe orice pagină web a site-ului sau blogului tău, pur și simplu declarându-l în codul html.

Dacă ți-a plăcut această lecție, Scrie comentariul tău(dacă nu ți-a plăcut și ție :)). Va fi privit drept recunoștință.

De asemenea, puteți partaja lecția cu prietenii dvs. folosind butoanele rețelelor sociale.

Și, desigur, abonați-vă la actualizările blogului (dacă nu ați făcut-o deja). Promit o mulțime de lucruri utile și interesante!

Să aveți o dispoziție bună și să ne revedem!

Se spune că nu poți judeca o carte după coperta ei și totuși oamenii o fac în fiecare zi. Ei iau o carte, se uită la coperta și apoi iau una nouă, sau o pun înapoi, sau o răstoarnă și se uită la ce este pe spate, SAU o deschid doar uitându-se la coperta. Site-urile web sunt, de asemenea, judecate după coperta și prima impresie, care provine adesea din titlu.

Titlul site-ului dvs. este de obicei primul lucru pe care îl văd oamenii. Din această scriere sau desen din partea de sus a paginii, oamenii fac judecăți ample despre ceea ce vor vedea și vor citi. Aceiași oameni care spun că nu poți judeca o carte după coperta ei spun, de asemenea, că ai doar 30 de secunde pentru a face o impresie bună. În lumea internetului, unde pagina următoare este la doar un clic distanță, aveți mult mai puțin timp pentru a face acest lucru.

Vă vom ghida prin Arhitectura antetului din WordPress și vă vom oferi sfaturi despre cum să o personalizați, astfel încât să devină propria „copertă de carte” care să atragă oamenii către site-ul dvs. în timp ce face o impresie bună. Apoi vă vom oferi câteva sfaturi de specialitate cu privire la ceea ce reprezintă exact un titlu bun de site.

Cuprins

Antet WordPress

În mod implicit, antetul din WordPress este o simplă bucată de cod. Nu trebuie să înțelegeți codul pentru a schimba antetul, care vine cu oricare Tema WordPress. Trebuie să setați blogul sau titlul site-ului și descrierea site-ului la > > și WordPress se va ocupa de restul.

În a lui cea mai simpla forma- Tema clasică - WordPress Antetul este codul din fișierul șablon wp-content/themes/classic/header.php:

">

Titlul se află în eticheta h1 și îndeplinește funcția de a fi utilizat în două opțiuni sau parametri diferiți. Puteți afla mai multe despre aceste opțiuni în . Practic, primul afișează site-ul în link, iar al doilea afișează numele blogului sau site-ului așa cum este setat în panoul > >. Când utilizatorul mută cursorul peste un titlu de titlu, titlul poate fi făcut clic pentru a reveni la pagina principală sau de start a site-ului, așa cum este prevăzut în panoul >>.

Tema WordPress implicită detectează caracteristicile imaginilor din fundal și prezintă antetul astfel în wp-content/themes/default/header.php:

Antetul temei implicite/Kubrick

Eticheta șablonului arată numele blogului sau al site-ului web în link, dar aceasta demonstrează o altă utilizare a unei interogări similare cu adresa URL de mai sus. El primește aceleași informații, doar într-un mod diferit. El adaugă din descrieri site în >> .

Mai simplu spus, aceste două exemple de antet fac același lucru în moduri diferite. Acestea oferă informații de antet cu potențialul de a include o imagine, iar crearea poate ajuta la navigarea pe site. Este doar o chestiune de câte informații doriți să vedeți în antetul dvs. și cum vor fi afișate acele informații.

Folosind primul exemplu din tema clasică, imaginea poate fi folosită în continuare ca imagine de fundal setată în foaia de stil din selectorul h1, a doua temă oferă mai mult control asupra utilizării imaginii din antet, oferindu-i propria sa împărțire. zonă. Modul în care arată este controlat complet de foaia de stil.

Stilul titlului

După cum sa menționat în cele două exemple de mai sus, stilurile pentru antet sunt conținute în selectoare: h1 , header , headerimg și description . Toate acestea sunt în style.css, deși poate fi și în fișierele de stil header.php din tema pe care o utilizați. Va trebui să verificați în ambele locuri. Într-o temă clasică, CSS-urile pentru antet sunt conținute într-un singur selector #header.

#header ( fundal: #90a090; chenar-jos: dublu 3px #aba; chenar-stânga: solid 1px #9a9; chenar-dreapta: solid 1px #565; chenar-sus: solid 1px #9a9; font: italic normal 230% „Times New Roman”, Times, serif; spațiere între litere: 0,2 em; marjă: 0; umplutură: 15px 10px 15px 60px; )

O nuanță verde este aleasă ca culoare de fundal și chenar în jurul antetului, dar chenarul este o nuanță diferită și creează un efect de umbră încastrat. Fontul Times New Roman este setat la 230% cu o spațiere mai mare decât cea normală. Indent to Side creează indentare pentru textul din titlu.

Toate pot fi modificate cu ușurință prin simpla editare a fiecărui atribut de stil: grosimea chenarului poate fi mărită și toate cu aceeași culoare, culoarea de fundal, dimensiunea și stilul fontului, spațierea literelor etc.

Același lucru este valabil și pentru antetul din tema WordPress implicită, cu excepția faptului că mai sunt câteva stiluri de care trebuie să aveți grijă. Acestea sunt localizate în interiorul header.php în eticheta „head”. Șiîn stil.css. Când există un număr mare de stiluri, este mai bine să mutați toate informațiile într-o foaie de stil.

Stilurile care controlează aspectul antetului sunt în cadrul h1, header , headerimg și selectoare CSS de descriere. La fel ca în cazul temei clasice, puteți găsi aceste link-uri și puteți face modificări acolo pentru a schimba aspectul.

Schimbarea titlului implicit al temei WordPress a fost simplificată prin introducerea unui utilitar numit Kubrickr. Pur și simplu vă cere să puneți un nou nume de fișier imagine pentru titlu și apoi îl traduce pentru dvs., astfel încât să nu trebuie să căutați codul. Dacă tot ce vrei să schimbi este imaginea antetului, acesta este un instrument extrem de util și simplu.

Dacă doriți, programați sau explorați stilurile de antet și faceți modificările necesare. Mai jos este un tutorial simplu despre cum să schimbați manual doar titlul unei imagini.