Dizajn hlavičky. Presné štýly nadpisov z vybraných pseudoprvkov Krásny dizajn h1 pomocou css

: odstránili sme značky h z prvkov šablóny, pridali sme značku h1 do nadpisu každého článku a priradili sme značky h2 k oznámeniam príspevkov v sekciách.

Teraz pomocou ďalších značiek h1-h6 môžete dať príspevkom jasnú štruktúru, a preto máte tak radi vyhľadávače. Bohužiaľ, titulkové štýly, zdanlivo jemné, sú zbavené krásy.

Jednoduché veľké čierne písmo pôsobí naozaj nudne. Yaskravі farbi si jednoznačne pýtajú titulky.

Názov článku v h1 je, že by som ho chcel vidieť s čiarou, rámom alebo krásnym obrázkom na pozadí s okrajmi. Je tiež dobré, že názov ďalšej nižšej úrovne by mal mať o niečo menšie písmo ako nižšie.

Chcete, aby bol váš web potešením? Poďme sa teda naučiť, ako webom priradiť štýly hlavičky.

Podľa tradície používame šablónu Twenty Eleven. Nižšie uvediem niekoľko štýlov nadpisov, ktoré si môžete zmeniť podľa svojich predstáv. Medzitým rýchlo zistíme, kde sú v šablóne napísané štýly nadpisov a kam vložíme náš kód.

Kde sa v šablóne zobrazujú štýly nadpisov?

Otvorte "Externé zobrazenie" - "Editor". Nájdite šablónu štýlov style.css. Nájdite blok textu pod názvom /* =Global.

Tento má riadky:

/* Nadpisy */ h1,h2,h3,h4,h5,h6 ( jasné: oba; )

Os s nimi my a pratsyuvatimemo.

Namiesto tohto kódu musíme napísať niečo takéto:

/* Nadpisy */ h1 (bla bla bla) h2 (bla bla bla) h3 (bla bla bla) h4 (bla bla bla)

Namiesto bla bla bla zadajte svoje hodnoty pre písma, zarážky a prechody.

Ak nejaký význam, napríklad veľkosť písma nie je správny, znamená to konflikt štýlov. V ktorom konkrétnom riadku, pred bodom, v ktorom je potrebné zadať špeciálne slovo!

Vyzerajte takto:

Veľkosť písma: 23px !important;

Zagalom, bolo to takto:

Pripravené štýly hlavičiek pre webové stránky

Hlavička s obrázkom na pozadí v ráme

Ktorý štýl pre pozadie hlavičky bude vyplnený rovnakým obrázkom. CSS kód výziev je správny: položky sú špecifikované na stránkach, takže pri zmene obrázka text nadpisu nezasahuje do obrázka na pozadí. Písmo - Titillium Web (bezpätkové), Muli (bezpätkové).

Na základe tohto štýlu som vytvoril nadpisy na stránke.

H1 ( margin: 1 em 0 0.5 em 0; font-weight: 600; font-family: "Titillium Web", bezpätkové; pozícia: relatívna; font-size: 36px; line-height: 40px; padding: 15px 15px 15px 15%; farba: #355681; box-shadow: vložka 0 0 0 1px rgba(53,86,129, 0,4), vložka 0 0 5px rgba(53,86,129, 0,5), vložka -285px 0 3 0 10px pozadie; : #fff url(../images/bartoszkosowski.jpg) bez opakovania v strede vľavo; ) h2 ( okraj: 1em 0 0,5em 0; font-weight: normal; position: relatívna; text-shadow : 0 -1px rgba( 0,0,0,0,6); font-size: 28px; line-height: 40px; background: #355681; padding: 5px 15px; color: white; border-radius: 0 10px 0 10px; box-shadow: inset 0 0 5px rgba(53,86,129, 0,5); okraj: 1 em 0 0,5 em 0; font-weight: 600; font-family: "Titillium Web", bezpätkové; pozícia: relatívna; font-size: 22px;, riadok -výška: 40px; farba: #355681; transformácia textu: veľké písmená; okraj-dole: 1px plné rgba (53,86,129, 0,3); ) h4 ( margin: 1em 0 0,5em 0; font-weight: 600; font- rodina: "Titillium Web", bezpätkové; postavenie: príbuzný; veľkosť písma: 18px; line-height: 20px; farba: #788699 rodina písma: "Muli", bezpätkové;

Zmením veľkosť obrázka, ktorý je zobrazený v príklade.

Namiesto zaregistrovaného obrázka môžete napríklad vziať akúkoľvek inú textúru.

Adresy obrázkov sú napísané v rade:

Pozadie: #fff url(../images/bartoszkosowski.jpg) stred vľavo bez opakovania;

Zadajte adresu URL obrázka na vašej webovej lokalite. Na stránku môžete pridať obrázok prostredníctvom zachytenia mediálneho súboru bez publikovania štatistík. Tam v správcovi sa môžete pozrieť na adresu svojho nového obrázka.

Farbu textu je možné zmeniť na inú v riadku

Farba: #355681;

Hlavička pre webovú stránku s tmavým dizajnom

Medzi jasnou čiernou farbou a tmavosivým pozadím je jasný kontrast. Písmo - Hammersmith One (bezpätkové), Questrial (bezpätkové).

H2:after, h3:after, h4:after ( pozícia: absolútna; obsah: ""; zľava: 0; hore: 0; dole: 0; šírka: 5px; polomer okraja: 2px; 1px rgba(0,0, 0,0.5), 0 1px 1px rgba(255,255,255,0.3); ) h2:after ( pozadie: #0AF; ) h3:after ( pozadie: #3BF; ) h4:after ( pozadie: #6Cf; ) h1 ( font- veľkosť: 36px; výška riadku: 40px; okraj: 1 em 0 ,6 em 0; váha písma: normálna; farba: biela; rodina fontov: "Hammersmith One", bezpätkové; tieň textu: 0 -1px 0 rgba (0,0,0,0,4); pozícia: relatívna; farba: #6Cf; farba: biela; rodina písma: "Hammersmith One", bezpätkové; 40px;) h3 ( okraj: 1 em 0 .6 em 0; výplň : 0 0 0 20px; váha písma: normálna; 0 rgba(0,0,0,0,4), pozícia: relatívna, veľkosť písma: 24px; rodina fontov: "Questrial", sans-serif; ) h4 ( okraj : 1 em 0 .6 em 0; výplň: 0 0 0 20px; váha písma: normálna; farba: biela; rodina fontov: "Hammersmith One", bezpätkové; tieň textu: 0 -1px 0 rgba (0,0 ,0 ,0,4), pozícia: relatívna; veľkosť písma: 18px; výška riadku: 20px;

Hlavička na pozadí textúry dreva

Písmo - Scada (bezpätkové), Carrois Gothic (bezpätkové). Leták pre implementácie nadpisu h2 cez písmo, nie cez obrázok.

H1 i, h2 i, h3 i, h4 i ( padding-right: 10px; color: #A8D13B; font-size: 0.8em; ) h2:after, h3:after, h4:after (position: absolute; content: " "; výška: 1px; border-radius: 2px; left: 0; bottom: 0; box-shadow: 0 -1px 0 rgba(0,0,0,0.1); h2:after ( width: 100%; ) h3 :after ( width: 75%; ) h4:after ( width: 50%; ) h1 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344 font-weight: normal, position: relatívne, text -shadow: 0 2px 0 rgba(255,255,255,0,5); font-size: 36px; line-height: 40px; ) h2 ( margin: 1em 0 0,75em; padding: 0 0 5px 0; colors: #6B5344; 0 255,255,255,0.5); font-size: 30px; line-height: 40px; ) h3 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; family: "Scada", bezpätkové; pozícia: relatívna; text- tieň: 0 2px 0 rgba(255,255,255,0,5); font-size: 24px; line-height: 40px; ) h4 ( margin: 1em 0 0,75em; padding: 0 0 5px 0; color: #6B5344; font-weight normálne; rodina fontov: "Scada", bezpätková; pozícia: relativ; 0 rgba(255,255,255,0,5); veľkosť písma: 18px; výška riadku: 20px;

Nadpisy tučným písmom

Jednoduché a nenápadné. Možno sme sa v tomto bode rozhodli dať vám nový nápad.

H1 ( okraj: 1 em 0 0,5 em 0; váha písma: 100; transformácia textu: veľké písmená; farba: #00caa6; štýl písma: kurzíva; rodina fontov: "Josefin Sans", bezpätkové; veľkosť písma: 58px;line-height: 54px;text-shadow: 2px 5px 0 rgba(0,0,0,0.2); ) h2 ( margin: 1em 0 0,5em 0; height: 40px; font-weight: bold; font-family : "Josefin Sans", bezpätkové; ) h3 ( okraj: 1 em 0 0,5 em 0; farba: #343434; veľkosť písma: 22px; váha písma: 100; transformácia textu: veľké písmená; rodina fontov: "Josefin Bez", sans-serif; medzery medzi písmenami: 1px; štýl písma: kurzíva; : #343434; veľkosť písma: 18px; výška riadku: 20px; váha písma: tučné; rodina písma: "Josefin Sans", sans-serif;

Jednoduché titulky v štýle novín

Štýl je úžasný pre webovú stránku ZMI. Bez višukuvanu. Písma – Ultra (bezpätkové), Orienta (bezpätkové).

Anglomovna dzherelo veľa štýlov: http://tympanus.net/codrops/2012/11/02/heading-set-styling-with-css/

Hlavička v štýle Web 2.0

Hlavička je len jeden CSS bez obrázkov. Epizodický blok prekrýva hlavný text. Farbu, pozadie a rozmery je možné zmeniť na príjemnú chuť.

Ak skombinujete množstvo prvkov s rôznou úrovňou jasnosti, môžete text nadpisu vyplniť tmavými kruhmi alebo vytvoriť krásny prechod.

Príklad 1. Nadpis v štýle web 2.0

H3#example ( font: normálne 27px tahoma; pozícia: relatívna; pozadie: #000; farba: #0cf; výplň: 10px 0px; ) h3#example span ( pozícia: absolútna; hore: 29px; vľavo: 0; šírka: 100 %: výška: 15px; pozadie: #000;

Táto metóda má však jednu nevýhodu: tú časť textu, ktorá je pod viditeľným blokom, kurzor nevidí.

Nadpis s popisom

To, čo je tu prekryté, nie je jednoduchý blok, ale plnohodnotný obrázok vo formáte PNG alebo GIF. Obrázok môže byť nejaký čudák. Spektrum Vizerunky má len jednu farbu – farbu zeme.

Príklad 2. Formátovanie titulku s miniatúrami

H3#example2 ( písmo: normálne 27px tahoma; pozícia: relatívna; pozadie: #000; farba: #0cf; výplň: 10px 0px; ) h3#example2 rozsah ( pozícia: absolútna; hore: 15px; vľavo: 0; šírka: 100 %; výška: 30px; pozadie: url(riadky.gif);

Môžete použiť tieňovanie textu alebo môžete nastaviť ľubovoľnú textúru: kovové zvýraznenie, zrnitosť, prechod, kockovaný vzor.

Na základe ktoréhokoľvek z týchto štýlov si môžete vytvoriť svoje vlastné jedinečné nadpisy. Nakoniec uvediem malú tabuľku hlavných autorít v texte, ktorý možno budete potrebovať.

Výkonný	popísať
veľkosť písma	veľkosť textu
font-family	text písma
zarovnanie textu	Otáčanie textu
zarážka textu	rad červených
medzi písmenami	stáť medzi spisovateľmi
line-height	medziradový interval
medzery medzi slovami	stáť medzi slovami
Biely vesmír	zobrazuje medzery medzi slovami
font-variant	prezentácia textu veľkými/malými spisovateľmi
font-weight	zástup listov
textový tieň	tieň na texte

Bez ohľadu na to, ktorá stránka alebo webový doplnok sa vyvíja, vždy je potrebné vytvoriť štýly pre nadpisy ako h1 alebo h2. V tejto lekcii sa pozrieme na množstvo efektov, ktoré je možné vytvoriť pre nadpisy s pseudoprvkami.

Prečo by mali pseudoprvky stagnovať? Odpoveď je jednoduchá: nie je potrebné žiadne ďalšie rozloženie.

HTML

Vezmite si lekciu pokory

Každé špeciálne označenie. Primárny nadpis je pre priradenú triedu.

CSS

Telo( šírka: 60%; okraj: 50px automaticky; odsadenie: 15px; pozícia: relatívna; /*potrebné pre hlavičku 4*/ z-index: 0; /*potrebné pre hlavičku 4*/ orámovanie: 7px plné #cecece; okraj : 7px solid rgba(0,0,0,.05);background: #fff;background-clip: padding-box;-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0,5); box-shadow: 0 0 2px rgba(0, 0, 0, 0,5); ) h1( font-family: "Droid Bez", bezpätkové; veľkosť písma: 22px; )

Vráťte sa k klipu na pozadí deklarácie: padding-box. Vaughn pomáha eliminovať tento efekt: vytvorte rám pre náš kontajner. Sila klipu pozadia CSS určuje, či pozadie prvku (farba alebo obrázok) bude interagovať so základnými guličkami.

Toto je taký jednoduchý a prijateľný efekt, ako sa dostať z hranice víťaznej moci:

Nadpis1 ( okraj-dole: 1 pixel prerušovaný #aaa; okraj-ľavý: 7 pixelov plný #aaa; border-left: 7px plný rgba(0,0,0,.2); okraj: 0 -15 pixelov 15px -22px; odsadenie: 5px 15px;

Nadpis 2

Tento štýl možno dosiahnuť pomocou trikutilnej metódy:

Headline2 ( border-bottom: 1px solid #aaa; margin: 15px 0; padding: 5px 0; position: relativní; ) .headline2:before, .headline2:after( content: ""; border-right: 20px solid #fff; border-top: 15px solid #aaa; bottom: -15px; position: absolute; left: 25px; ). vľavo: 26px; )

Nadpis 3

A túto os efektu čiary možno použiť aj na návrh nadpisu:

Nadpis3( pozícia: relatívna; ľavý okraj: -22px; /* 15px padding + 7px okrajový tieň stuhy*/ okraj-vpravo: -22px; padding: 15px; pozadie: #e5e5e5; pozadie: -moz-linear-gradient(# pozadie: -webkit-gradient(lineárne, vľavo hore, vľavo dole, from(#f5f5f5), to(#e5e5e5));pozadie: -webkit-linear-gradient(#f5f5f5, #e5e5e5); pozadie: -o-linear -gradient(#f5f5f5, #e5e5e5); pozadie: -ms-linear-gradient(#f5f5f5, #e5e5e5); pozadie: linear-gradient(#f5f5f5, #e5e5e5); -webkit-box- shadow: 0 -1px 0 rgba(255,255,255,.8) inset;-moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; inset; text-shadow: 0 1px 0 #fff; ) .headline3:before, .headline3: after( position: absolute; left: 0; bottom: -6px; content:""; border-left: 6px solid transparent;) .headline3:before( border-top: 6px solid #555; border-right: 6px full transparent ; ľavý okraj: žiadny; )

Môžete si tiež vytvoriť vlastnú hlavičku pre dodatočný napájací box-shadow:

Nadpis4( pozícia: relatívna; farba okraja: #eee; štýl okraja: plná; šírka okraja: 5px 5px 5px 0; pozadie: #fff; okraj: 0 0 15px -15px; odsadenie: 5px 15px; -moz-box -shadow: 1px 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3); ,0,0,.3); ) .headline4:after ( content: ""; pozícia: absolútna; z-index: -1; bottom: 15px; rgba(0, 0, 0, .7);-webkit-box-shadow: 0 15px 10px rgba( 0,0,0, 0,7);0, 0,7), tieňový rámček: 0 15px 10px rgba(0, 0, 0, 0,7); otočiť (2 stupne);-ms-transformovať: otočiť (2 stupne); transformácia: rotácia(2deg);

Prečo by mali pseudoprvky stagnovať? Odpoveď je jednoduchá: nie je potrebné žiadne ďalšie rozloženie.

HTML

Vezmite si lekciu pokory

Každé špeciálne označenie. Primárny nadpis je pre priradenú triedu.

CSS

Toto je taký jednoduchý a prijateľný efekt, ako sa dostať z hranice víťaznej moci:

Nadpis1 ( okraj-dole: 1 pixel prerušovaný #aaa; okraj-ľavý: 7 pixelov plný #aaa; border-left: 7px plný rgba(0,0,0,.2); okraj: 0 -15 pixelov 15px -22px; odsadenie: 5px 15px;

Nadpis 2

Tento štýl možno dosiahnuť pomocou trikutilnej metódy:

Nadpis 3

A túto os efektu čiary možno použiť aj na návrh nadpisu:

Môžete si tiež vytvoriť vlastnú hlavičku pre dodatočný napájací box-shadow:

Zdá sa, že nemôžete súdiť knihu podľa jej obálok, ale ľudia sú dnes hanbliví. Vezmete knihu, pozriete sa na obálku a potom vezmete novú, alebo ju vložíte späť, alebo ju otočíte a čudujete sa, čo je na obálke napísané, alebo ju otvoríte, len keď sa pozriete na obálku. Webové stránky hodnotia aj ich krytie a prvých nepriateľov, keďže sa často objavujú v Hlavičke.

Názov vašej stránky je v prvom rade to, čo ľudia chcú. Z ktorého budem písať alebo malý kúsok hornej časti stránky, ľudia začnú hovoriť o radikálnych veciach o tých, ktorí smradia a čítajú. Zdá sa, že tí istí ľudia, ktorí hovoria, že nemôžete súdiť knihu podľa obalu, si myslia, že na odstránenie škody máte len 30 sekúnd. Na internete až do konca dňa – kliknutia medveďa, máte na internete veľa menej ako hodinu.

Povieme vám o architektúre nadpisov vo WordPress a dáme nám vedieť, ako ju trénovať tak, aby sa stala vašou mocnou „obálkou knihy“, ktorá láka ľudí na vašu stránku a slúži ako zdroj nepriateľstva. Potom vám povieme, čo robiť v záujme odborníkov o tom, čo predstavuje dobrý nadpis na stránke.

Obsah

Hlavička WordPress

Za hlavičkou WordPress sa nachádza jednoduchý kúsok kódu. Na zmenu hlavičky, ktorá sa dodáva s akoukoľvek témou WordPress, nemusíte rozumieť žiadnemu kódovaniu. Budete si musieť nainštalovať do blogu alebo na stránku Názov a popis stránky > > a na všetko ostatné budete musieť nainštalovať WordPress.

V jednoduchej forme - Classic Theme - WordPress Hlavička je kód v súbore šablóny wp-content/themes/classic/header.php:

Názov zmien v tagu h1 a funkcia ikony sa používajú v dvoch rôznych možnostiach alebo parametroch. Viac o týchto parametroch sa dozviete v dokumentácii. V podstate prvý sa zobrazuje na stránke v uverejnenom formulári a druhý zobrazuje názov blogu alebo stránky, ako je nainštalovaný v paneli > >. Ak používateľ presunie kurzor na nadpis nadpisu, kliknutím na nadpis sa otočí na hlavnú alebo hlavnú stránku webu, pretože sa prenáša na panel > >.

Predvolená téma WordPress obsahuje funkcie na obrázku na pozadí a predstavuje hlavičku, ako v wp-content/themes/default/header.php:

Hlavička predvolenej/Kubrickovej témy

Šablóna značky zobrazuje názov blogu alebo webovej stránky v príspevku, ale zobrazuje aj iné vyhľadávacie nástroje podobné hľadanej adrese URL. Prijíma tie isté informácie, len iným spôsobom. Vіn dodáva s inventár stránke >> .

Zjednodušene povedané, dve zarážky nadpisov sú rozdelené do rovnakých rôznych smerov. Poskytnú informácie pre hlavičku s možnosťou umiestnenia obrázka a obsah môže pomôcť pri navigácii na webe. Je to všetko o tom, koľko informácií chcete zahrnúť do hlavičky a ako sa tieto informácie zobrazia.

Zatiaľ čo prvý príklad Vikorist je s klasickou témou, obrázok možno stále použiť ako obrázok na pozadí nastavený v šablóne štýlov vo selektore h1, iná téma poskytuje väčšiu kontrolu obrázku vikoristu v hlavičke cesty priradenej k vodnej ploche. pod dnom. Tie, ako sa zdá, sú úplne kontrolované šablónou štýlov.

Štýl nadpisu

Ako je uvedené v dvoch príkladoch po umiestnení kurzora myši, štýly pre hlavičku sa nachádzajú v strede selektorov: h1, header, headerimg a description. Všetko je obsiahnuté v style.css, aj keď môžete zmeniť aj súbory štýlu header.php z tých, ktoré používate vikoristing. Na oboch miestach budete mať možnosť skontrolovať. V klasickej téme sa CSS pre hlavičku nachádza v jedinom selektore #header.

#header ( pozadie: #90a090; border-bottom: double 3px #aba; border-left: solid 1px #9a9; border-right: solid 1px #565; border-top: solid 1px #9a9; font: italic normal 230% "Times New Roman", Times, pätka; medzera medzi písmenami: 0,2 em; okraj: 0; odsadenie: 15 pixelov 10 pixelov

Zelený odtieň výberu sa používa ako farba pozadia a medzi okrajmi v blízkosti hlavičky, zatiaľ čo kordón získa iný odtieň a vytvára zapustený tieňový efekt. Veľkosť písma Times New Roman je nastavená na 230 % so širšou medzerou medzi znakmi. Odsadenie na stranu vytvorí odsadenie pre text v strede nadpisu.

Všetky sa dajú ľahko zmeniť jednoduchou úpravou atribútu kože štýlu: možno zväčšiť hrúbku kordónu a všetky s rovnakou farbou, zmeniť farbu pozadia, zmeniť veľkosť a štýl písma, medzera medzi písmenami sa dá zmeniť atď.

To isté platí pre hlavičku v predvolenej téme WordPress, pretože má oveľa viac štýlov, o ktorých sa dá diskutovať. Vôňa je v strede header.php v texte "head". і na style.css. Ak máte veľa štýlov, je najlepšie presunúť všetky informácie do šablóny štýlov.

Štýly, ktoré riadia vzhľad hlavičky, sa nachádzajú medzi h1, selektory CSS hlavičky, headerimg a popisu. Takže, čo sa týka tých klasických, môžete zistiť, čo robíte a urobiť tam zmeny, aby ste zmenili svoj aktuálny vzhľad.

Zmena názvu obrázka pre propagačnú tému WordPress bola zjednodušená zavedením pomôcky s názvom Kubrickr. Jednoducho vás požiada, aby ste súboru s obrázkom dali nový názov pre hlavičku, a potom vám ho preloží, takže sa nemusíte prehrabávať kódom. Všetko, čo chcete zmeniť, je len obrázok hlavičky, veľmi jednoduchý nástroj.

Podľa želania naprogramujte alebo sa ponorte do štýlov hlavičiek a vykonajte potrebné zmeny. Nižšie je uvedený jednoduchý návod na manuálnu zmenu názvu obrázka.

Zmeniť obrázok hlavičky Na úpravu a úpravu je k dispozícii široká škála obrázkov hlavičiek a dizajnových riešení. Štýly pre obrázok hlavičky pre tému Kubrick WordPress a to, či je téma založená na tejto téme, sú zložitejšie, takže ich môžete zmeniť na klasické. štýly nájdete v štýloch v sekcii header.php "head", ako aj v styles.css. Ak chcete zmeniť predvolenú hlavičku obrázka, otvorte súbor header.php na šablónu a zmeňte štýly na predvolené: #header (pozadie: url("/images/wc_header.jpg") bez opakovania v strede dole; ) #headerimg ( okraj: 7px 9px 0; výška: 192px; šírka: 740px; ) POZNÁMKA: Blogginginfo je možné upravovať iba vtedy, ak je štýl súčasne upravovaný z hlavného súboru šablóny. Značky šablón WordPress nepatria do šablóny štýlov (style.css). Ak chcete presunúť tento štýl do šablóny so štýlmi, zmeňte značku šablóny na skutočnú adresu URL z obrázka hlavičky. Ak chcete súbor zmeniť, nahraďte „kubrickheader.jpg“ názvom nového grafického obrázka, ktorý ste pridali na svoju stránku, aby ste ho nahradili. Ak sa nachádza v inom adresári, zmeňte ho nahradením značiek bloginfo () špecifickou adresou grafického umiestnenia. Ak si vyberiete obrázok, ktorý má rovnakú veľkosť, jednoducho ho vymeňte. Ak je veľký, nastavte výšku a šírku obrázka v ďalšej časti s názvom #headerimg. Ak nepoznáte a nepoužívate Windows, pozrite si priečinky, v ktorých sa nachádzajú obrázky v počítači v režime „Miniatúra“. Kliknite na tlačidlo „Zobraziť > Miniatúra“ v ponuke Prieskumníka systému Windows. V režime miniatúrneho zobrazenia nájdite svoj obrázok a stlačte tlačidlo myši. Zobrazí sa malá poznámka so zoznamom veľkostí. Vickory tieto informácie zo štýlov. V opačnom prípade kliknite pravým tlačidlom myši na grafický súbor a vyberte „Napájanie“, čím získate veľkosť a rozmery súboru. Keď je názov obrázka na svojom mieste, je čas pridať ďalšie názvy. Otvorte súbor so štýlom style.css a zmeňte nastavenia na: hlavička headerimg popis Váš motív môže alebo nemusí obsahovať všetky z nich, ale motív za kombináciou ich môže obsahovať všetky na rôznych miestach v šablóne štýlov. Vo všetkých prípadoch môžete zmeniť atribúty, aby ste zmenili vzhľad hlavičky. Keď zmeníte veľkosť obrázka hlavičky alebo záhlavia, prejdite na a zmeňte ďalšie štrukturálne selektory CSS, ako je napríklad zmena veľkosti bočného panela pred zmenou veľkosti hlavičky. Špecifikácia hlavičky obrázka Hlavička obrázka, ktorý sa hodí do WordPressu, téma by mala mať približne 192 x 740 pixelov. Pri výmene hlavičky v ľubovoľnej téme WordPress skontrolujte veľkosť hlavičky obrázka a potom zistite, čo zodpovedá tejto veľkosti. Ak vyberiete obrázok hlavičky, ktorý je menší, širší alebo vyšší, možno budete musieť zmeniť iné štrukturálne prvky webovej stránky, aby ste zmenili veľkosť hlavičky. Ak zmeníte tému celej stránky, šírka zadnej strany alebo zmena oblasti zodpovednosti sa bude brať do úvahy veľkosť obrázku hlavičky. Dve najväčšie veľkosti obrazovky sú 1024 x 768 a 800 x 600 pixelov. Nie menej, široké monitory naberajú na sile a weboví dizajnéri sa teraz musia pripraviť na šírky obrazovky 1280x1024 a 1600x1200. Ak umiestnite svoju webovú stránku „plávať“ do stredu okna prehliadača na oboch stranách, môžete si nastaviť šírku hlavičky na čokoľvek chcete. Pri zvažovaní tých, ktoré majú flexibilnú alebo „pružinovú“ šírku obrazovky, je dôležitá šírka hlavičky. Ak prispôsobíte názov obrázka tak, aby sa mohol opakovať, a prispôsobíte šírku pružiny, môžete nastaviť štýly v nadpise opakovania, aby sa vyplnil priestor: #header (background: url("/images/kubrickheader.jpg") repeat-x vľavo hore; ) Okrem toho sa obrázky hlavičky opakujú horizontálne od ľavého horného rohu až po koniec. Toto správanie môžete upraviť pri zmene pozície pozadia v závislosti od vašich technických a dizajnových potrieb. Titulná mystika Novým pojmom, ktorý sa objavil v oblasti webdizajnu je Hlavička kusu(Heder umenie). Tieto obrázky hlavičky, ktoré sú zvyčajne ručne kreslené, pozostávajú z rôznych kombinácií farieb, tvarov, symbolov, obrázkov a textu. Vytvorenie takéhoto titulu môže byť dôležité, pričom autorovi veľa vezme. Webové stránky, ktoré chcú vytvoriť jedinečné vlastné titulky, predávajú svoje ručne vyrobené titulky. Zatiaľ čo fotografia môže byť sama o sebe jedinečná a sprostredkovať požadovaný vizuálny štýl, vlastnoručne vyrobený popis sa dá ľahšie zladiť s inými farbami webovej stránky a spravidla pôsobí estetickejšie vďaka svojmu špeciálnemu charakteru. Výber hotových titulkov môže byť veľmi prospešný. Umelci vytvorili dielo a všetko, čo k vytvoreniu potrebujete, preto si vyberte dizajn, ktorý najlepšie reprezentuje vašu stránku. І grafika je pripravená pred vikoristanya, už s veľkosťou a uložená ako malá veľkosť súboru. V tejto aplikácii značka šablóny list_cats() vkladá triedenie kategórií podľa ID do neusporiadaných kategórií ( ) bez dátumov alebo poistenia príspevkov, ktoré neakceptujú prázdne kategórie, vikoryst kategória “popis” pre titul v uverejnenom, nevykazuje pokles Otcových kategórií, kam patria kategórie 1 a 33 .Vin zostáva pri svojom mocnom blok „kategórie“. Upozorňujeme, že toto bolo odoslané na „domovskú“ stránku alebo bola hlavná stránka bfla pridaná ručne do klasu arkush. DOMOV "> Ak chcete upraviť tento hárok, použite #categorylist v style.css: #categorylist (font-size:12px; font-style:normal; text-transform:uppercase; ) #categorylist ul (list-style-type: none; list-style-image:none; margin:0; padding-bottom: 20px; ) #categorylist li (zobrazenie: vložené; výplň: 0px 5px;) Blok bude vyzerať takto: Táto časť poskytuje informácie, ktoré vám pomôžu vybrať a prispôsobiť hlavičku pre váš web WordPress. Venujte pozornosť umiestneniu textu a farbe. Pred prezentáciou je možné pridať alebo zvýšiť farbu a umiestnenie textu v nadpise. Os je malá. Ak si prezeráte biely text, zmeňte farbu pozadia v hlavičke a/alebo na obrázku hlavičky, aby sa znova zobrazil biely text, ak sa z nejakého dôvodu obrázky nezobrazia na obrazovke alebo je vypnutá možnosť „zobraziť obrázky“. Umožnite, aby bol váš biely text stále viditeľný. Obrázok je hlavnou črtou každého prvku a je umiestnený v texte tak, aby nepresahoval cez hlavný predmet obrázka. Je dôležité čítať text tak, aby bola grafická plocha obsadená a text bol umiestnený menej ako obsadená plocha názvu obrázka. Skontrolujte, či je farba textu ľahko vymeniteľná pre všetkých používateľov stránky a nie je v rozpore s pravidlami mystiky. Fluorescenčný oranžový text na zelených voškách je bolestivý. Majte na pamäti, že rôzne farby a modely v názve vašej misie môžu vytvoriť písmeno pre text v texte v časti „vedieť“. To isté platí, ak vložíte text vedľa hornej časti alebo názvu obrázka. Rozvíjajte ciele. Dobrý názov odráža stránku. Reshta sa môže prejaviť aj vo výsledkoch a môže sa objaviť v nadpise. Preto má nadpis odrážať miesto, myšlienku lokality. Názov je vinný za to, že pokazil rešpekt koristuvach a „primushuvati“, ktorý sa na stránke stratil. Dobrý názov, napríklad obálka knihy alebo časopisu. Môže v ľuďoch vyvolať túžbu zastaviť sa a žasnúť s rešpektom, prečítať si to, žasnúť viac, nájsť niečo hodnotné. Tse teaser, ktorého cieľom je rešpektovať ich rešpekt a povedať: "Tu ste." Názov môže zapadnúť do slávnostného štýlu. Výrazné a dramatické hlavičky sa hodia k jemnejším grafickým hlavičkám. Na webovej stránke venovanej punk rocku a grunge vyzerá hlavička punkovo a výstredne. Je to na vás, ale myslite na dôslednosť. Roztomilé stránky uprednostňujú doplňujúce a efektné nadpisy, zatiaľ čo jemné a pastelové tóny stránok uprednostňuje jemnosť grafických nadpisov. Materský punk a grungeový titul má na svedomí stránka venovaná punkrockovým a grungeovým skupinám. Stojí za to držať sa pred vami, inak je dobré pracovať. Nadpisy vždy obsahujú obrázky. Nie všetky titulky obsahujú fotografie a obrázky. Niekedy sú dôležitejšie slová, smrad farby alebo biele vošky. Hlúpy názov robí stránku ešte hlúpejšou. Vyhnite sa rušivým hlasovým prejavom, obsedantnej navigácii, nečitateľnému textu a dlhým radom správ v titulku. Čím jednoduchšie, tým lepšie. Postupujte podľa štandardov prístupnosti v hlavičke. Bolo nám povedané, že môžete urobiť viac, aby ste sa uistili, že váš titul spĺňa štandardy dostupnosti. Vikorist h1 tagy a špeciálne programy na čítanie textu z obrazovky a zistenie názvu. Vikoristannya Alt y posilannyakh ta izobryzhnyakh. Nadpisy môžu mať ľubovoľnú výšku, ale majte na pamäti, bez akéhokoľvek zmätku. Stredná hlavička má na výšku menej ako 200 pixelov a výška hlavičiek sa pohybuje od tenkých až po polovicu strany. Pamätajte si, že hlavným dôvodom, prečo ľudia prichádzajú na vašu stránku, je toto, a preto je najlepšie posunúť sa nadol podľa názvu, aby ste sa dostali na stránku, čo je zvyčajne menej zrejmé. Prosím, prineste ich skôr, ako ich nahradíte z nadpisu. Zamyslite sa nad „individuálnosťou stránky“. Názov je čiastočne jedinečný pre stránku; ľudia si musia pamätať, že sú na tej istej stránke, keď prenesú správu na druhú stranu stránky. Nechajte sa prekvapiť nadpisom a/alebo vlastnou hlavičkou je ako „značka značky“ pre vašu stránku. Tento článok sa bude zaoberať rôznymi možnosťami štylizácie nadpisov h1 a h2. Značka H1 je dôležitá značka v tele stránky. Spravidla by ste mali používať tematický nadpis stránky. Značka H1 musí byť viditeľná, aby vývojári nemali problém pochopiť, čo sa deje na stránke vášho webu. Preto môže tento tag rozjasniť moment vašej stránky. CSS štýl značky H1 môže byť čo najjednoduchší, aby bola veľkosť písma väčšia ako na ostatných stránkach. A nielen to, zohráva úlohu aj v relevantnosti stránky, a teda aj pri optimalizácii. Tag H2, tento tag, ktorý navyše môže byť podmnožinou H1. Pozeráme sa aj na možnosti tejto štylizácie. Nižšie je uvedený príklad metód štýlu CSS pre nadpisy h1, h2. Metódy štylizácieh1,hlavičky h2 Aplikujte toCSSH1,H2 Metódy štylizácieh1,hlavičky h2 Spôsoby, ako štýlovať značky h1, h2, sa pozrieme na ďalšie riadky. Pozrime sa na dve možnosti implementácie hlavičky na zobrazenie stránky: posledná možnosť a moja možnosť. Neskôr poviem, že môj preferovaný spôsob, ak máte vlastné možnosti (metódy) na štylizáciu nadpisov, rád sa o ne podelím v komentároch. Vstupná metóda Toto je dobrá možnosť, ale veľmi sa mi nepáči metóda CSS implementácie riadku. Poznám túto metódu na vytváranie riadkov css h1 na jednej z webových stránok. Tento riadok je implementovaný v čistom kóde CSS, aj keď je ovplyvnená kompatibilita medzi prehliadačmi (v IE to vyzerá ako jednoduchý blok). Nižšie je uvedený výstupný kód v štýle css. H1.ribbon ( veľkosť písma: 16px !dôležité; pozícia: relatívna; pozadie: #ba89b6; farba: #fff; h1.ribbon:po ( obsah: ""; pozícia: absolútna; zobrazenie: blok; spodok: -1em; orámovanie: 1,5em plné #986794; z-index: -1; ) h1.stužka:pred (vľavo: -2em šírka-vpravo-okraja: 1,5em; farba ľavého okraja: priehľadná; h1.páska:po (vpravo) : -2em; border-left-wid: 1,5em; border-right-color: transparent; ) ribbon .ribbon-content:before, h1.ribbon .ribbon-content:after ( content: ""; position: absolute; display : block; border-style: solid; border-color: #804f7c transparent transparent transparent transparent transparent; bottom: - 1em; ) h1.ribbon .ribbon-content:before ( left: 0; border-width: 1em 0 0 1em; ) h1.ribbon .ribbon-content:after ( right: 0; ) V kóde HTML vyzerá riadok h1 takto: CSS štýl hlavičiek h1, h2 na stránke Moja cesta Ako vidíte, kód CSS je ťažkopádny na úpravu štýlu iba značky h1. Takže vysvetľujem môj spôsob vytvorenia podobného stehu. Kompatibilita medzi prehliadačmi bola testovaná na IE, FireFox, Opera, Chrome. Nižšie je uvedený css kód a všetky výstupné súbory. H1 (výška:67px; pozadie: url(ribbon_left.png) vľavo hore bez videa; farba:#FFF;) H1 silné (výška:67px; display:block; max-width:450px; margin-left:56px; padding - right:56px;background:url(ribbon_right.png) vpravo hore bez opakovania;) Spôsob embosovania v HTML: Hlavička CSS H1 pre web Obrázok: Zagalna vaga obrázkov – 750 bajtov. Kód CSS zaberá o niečo viac ako dva riadky a celkovo má 236 bajtov. S výsledkom som spokojný a vzhľadom na metódu vstupu je všetko jednoduché a zrozumiteľné, aj keď kód CSS má 980 bajtov. Ak chcete lepšiu možnosť pre svoju identitu, je oveľa ťažšie pracovať s kódom, takže môžete obrázok upraviť vo Photoshope. Môžete predpokladať, že viditeľnosť jedného css súboru, alebo aspoň troch súborov (úplne identické s jedným css súborom), alebo môžete implementovať pozadie do vzhľadu spritov, čo zvýši viditeľnosť stránky. Získajte informácie o zvyšovaní rýchlosti pomocou metódy sprite CSS. Zadok CSS H1, H2 Všetky aplikácie budú implementované na princípe štylizácie hlavičky mojou metódou (napríklad webová stránka). CSS štýl hlavičky H1 Tento bod je založený na skutočnej štylizácii zadku hlavičky h1. Aplikujte to nahlas, pretože stránka má jedinečný dizajn. Ukážem vám jeden univerzálny zadok štylizácie H1. Moja myšlienka štylizácie nadpisov už bola pochopená, chcem k nej pridať vikorystya náhľad na obrázok na pozadí, ktorý sa dá ľahko dosiahnuť vo Photoshope. Zadoček je úžasný. Nadpis ( width:500px; background: #888;) h1 (height:70px; : display:block;margin-left:60px;padding: 6px 60px 0px 0px;background: url(right.png) right top no-repeat; ) Fotky z víkendu: Text hlavičky h1 Keď sa pozriete na výstupné obrázky, môžete dosiahnuť nasledujúce výsledky: CSS h1 + h2 (úplný štýl) Štýl h1 a h2 naraz, najlepšie kvôli prehľadnosti, alebo malý vstup do článku na vašej stránke, ktorý je možné umiestniť do tagu h2. Napríklad: H1- štýl nadpisov h1, h2; H2– Je dôležité navrhnúť hlavičky h1, h2 v CSS. Každopádne, s najväčšou pravdepodobnosťou máte vlastnú predstavu o tom, ako navrhnúť stránky webu. Príklad css h1 + h2, podobne ako predchádzajúci, pozrime sa na kód css. Left(height:100px; background: url(left.png) left top no-repeat;) .right( width:500px; height:100px; display:block; margin-left:45px; padding: 0px 45px 0px 0px; : url(right.png) pravá verzia no-repeat;) h1 (color:#FFF; font-size:18px; padding:15px;) h2 (color:#CCC; font-size:16px; padding:5px;) Fotky z víkendu: Text hlavičky H1 Malý úvod alebo popis informácií, ktoré sú súčasťou značky H2. Obrázok: Podstata delenej (h1 + h2) štylizácie nadpisov je podobná ako pri prednom zadku, len v ňom sú zaseknuté div bloky. CSS štýl hlavičky H2 Štylizácia hlavičky h2 vpravo nie je náročná. Keďže náš článok obsahuje štylizáciu nadpisov h1 a h2, pozrieme sa na všetko až do konca. Značka h2 sa spravidla používa na zobrazenie podpoložiek článkov alebo iných materiálov na stránke. Rád by som vytvoril skromné, nenápadné alebo dokonca ručne vyrobené nadpisy h2. Veľmi sa mi páči nápad, ktorý je organizovaný na Wikipédii. Raju a ty urobíš to isté. Je to tak šikovné. Napríklad: Príklad štylizácie hlavičky H2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Celé číslo v leo alebo ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Rozšíril som aj váš článok Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh. Obrázok: Jednoduchý, manuálny a cross-browser. Dúfam, že vám môj článok pomohol. Ak ste prišli o výživu a propozície kvôli CSS štylizácii nadpisov h1, h2, napíšte do komentárov.