Dekoráció szöveges információk a weben megvannak a maga sajátosságai. Ha valamilyen tartalmat helyez el az oldalon, akkor általában jól strukturáltnak kell lennie - ehhez fejléceket használnak. Segítségükkel a szövegek a lehető legkönnyebben olvashatók és érthetők.

Néhány dolog, mielőtt elkezdjük:

• Minden minta-betűtípus ingyenes, és elérhető a Google WebFonts webhelyen.
• A példákban csak H1-H4 fejlécek szerepelnek, mivel ezek a leggyakrabban használtak.
• A CSS stílusíró egy olyan modellt használt, ahol [szélesség] = [tényleges elemszélesség] + [padding] + [szegélyek]. Ehhez van egy részlet a kódban:

*, *:utána, *:előtte ( box-sizing: border-box; )

Végül a bevezetőben egy olyan fogalom szerepel, mint a „függőleges ritmus”. Valójában beállítja az összes behúzást az oldalon lévő blokkok között – legyen szó címsorokról, szöveges bekezdésekről, képekről vagy akár csak webhelysablonelemekről. Ez különösen igaz szokatlan használat esetén. Tehát minden CSS-stíluspélda ugyanazt a „ritmust” használja:

h1 ( betűméret: 36 képpont; vonalmagasság: 40 képpont; ) h2 ( betűméret: 30 képpont; sormagasság: 40 képpont; ) h3 ( betűméret: 24 képpont; vonalmagasság: 40 képpont; ) h4 ( betűméret : 18 képpont; sor magassága: 20 képpont; )

Most közvetlenül mehet a gyakorlatba.

1. példa

Kezdjük egy többé-kevésbé egyszerű lehetőséggel. A tipográfia kiválóan alkalmas egy médiaoldalhoz, talán még egy újsághoz is. Ez a megoldás nem kínál különösebb sallangot, kivéve, hogy 2 betűtípust használnak - Ultra (sans-serif), Orienta (sans-serif). Végső CSS kód:

Demo-1 .main h1 ( margó: 1em 0 0,5em 0; szín: #343434; betűsúly: normál; font-család: "Ultra", sans-serif; betűméret: 36 képpont; vonalmagasság: 42 képpont; szövegátalakítás: nagybetűk; szövegárnyék: 0 2px fehér, 0 3px #777; ) .demo-1 .main h2 ( margó: 1em 0 0,5em 0; szín: #343434; betűsúly: normál; betűméret : 30px; sormagasság: 40px; betűcsalád: "Orienta", sans-serif; ) .demo-1 .main h3 ( margó: 1em 0 0,5em 0; szín: #343434; betűméret: 22px; vonal -magasság: 40 képpont; betűsúly: normál; szövegátalakítás: nagybetűk; betűcsalád: "Orienta", sans-serif; betűköz: 1px; betűstílus: dőlt; ) .demo-1 .main h4 ( margó: 1em 0 0,5em 0; szín: #343434; betűméret: 18px; vonalmagasság: 20px; betűvastagság: normál; betűcsalád: "Orienta", sans-serif; )

2. példa

Itt van egy kicsit érdekesebb megvalósítás - a cím hátteret adunk szilárd kitöltés és kép formájában. A CSS kód elég jól ki van írva, a behúzások százalékban vannak feltüntetve, hogy a kép kicsinyítésekor a címszöveg ne olvadjon össze a háttérképpel. Használt betűtípusok Titillium Web (sans-serif), Muli (sans-serif).

Demo-2 .main h1 ( margó: 1em 0 0,5em 0; betűsúly: 600; font-család: "Titillium Web", sans-serif; pozíció: relatív; betűméret: 36 képpont; sormagasság: 40 képpont; padding: 15px 15px 15px 15%; szín: #355681; box-shadow: inset 0 0 0 1px rgba(53,86,129, 0,4), inset 0 0 5px rgba(53,86,129, inset, -035p) ; szegélysugár: 0 10px 0 10px; háttér: #fff url(../images/bartoszkosowski.jpg) nincs ismétlés középen balra; ) .demo-2 .main h2 ( margó: 1em 0 0.5em 0; font- súly: normál; pozíció: relatív; szövegárnyék: 0 -1px rgba(0,0,0,0,6); betűméret: 28px; vonalmagasság: 40px; háttér: #355681; háttér: rgba(53,86,129 , 0,8); szegély: 1px tömör #fff; kitöltés: 5px 15px; szín: fehér; szegélysugár: 0 10px 0 10px; doboz-árnyék: beillesztés 0 0 5px rgba(53,86,129, 0,5); betűcsalád: "Muli", sans-serif; ) .demo-2 .main h3 ( margó: 1em 0 0.5em 0; betűsúly: 600; font-család: "Titillium Web", sans-serif; pozíció: relatív; szöveg- árnyék: 0 -1px 1px rgba(0,0,0,0,4); betűméret: 22 képpont; sor magassága: 40 képpont szín: #355681; szöveg-átalakítás: nagybetűk; border-bottom: 1px tömör rgba(53,86,129, 0,3); ) .demo-2 .main h4 ( margó: 1em 0 0,5em 0; betűsúly: 600; font-család: "Titillium Web", sans-serif; pozíció: relatív; betűméret: 18px; sormagasság: 20px; szín: #788699; betűcsalád: "Muli", sans-serif; )

3. példa

Most egy példa a fejlécek megvalósítására egy sötét kialakítású webhelyen. Ehhez egy meglehetősen világos, kontrasztos kék színt választottak a sötéttel szemben szürke háttér. Használt betűtípusok: Hammersmith One (sans-serif), Questrial (sans-serif).

Demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after ( pozíció: abszolút; tartalom: ""; bal: 0; felül: 0; alul: 0; szélesség: 5px; szegélysugár: 2px; keretes árnyék: beillesztés 0 1px 1px rgba(0,0,0,0,5), 0 1px 1px rgba(255,255,255,0,3); ) .demo-3 .main h2:after háttér: #0AF; ) .demo-3 .main h3:after ( háttér: #3BF; ) .demo-3 .main h4:after ( háttér: #6Cf; ) .demo-3 .main h1 ( betűméret: 36 képpont; sormagasság: 40 képpont; margó: 1em 0 ,6 em 0; betűvastagság: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; szövegárnyék: 0 -1px 0 rgba(0 ,0,0,0,4); pozíció: relatív; szín: #6Cf; ) .demo-3 .main h2 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér ; font-család: "Hammersmith One", sans-serif; szövegárnyék: 0 -1px 0 rgba(0,0,0,0.4); pozíció: relatív; betűméret: 30px; sormagasság: 40px; ) .demo-3 .main h3 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér; betűcsalád: "Hammersm ith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0,4); pozíció: relatív; betűméret: 24 képpont; sor magassága: 40 képpont font-family: "Questrial", sans-serif; ) .demo-3 .main h4 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; text-shadow : 0 -1px 0 rgba(0,0,0,0.4); pozíció: relatív; betűméret: 18px; sormagasság: 20px; betűcsalád: "Questrial", sans-serif; )

4. példa

Kísérletezés a háttérrel - mit szólnál egy fa textúra hozzáadásához. A Scada (sans-serif), Carrois Gothic (sans-serif) betűtípusok és a H2 szórólapja szintén betűtípuson, nem képen keresztül valósul meg.

Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i ( padding-right: 10px; color: #A8D13B; font-size: 0.8em; ) .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after ( pozíció: abszolút; tartalom: ""; magasság: 1px; határsugár : 2px; bal: 0; alsó: 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 ( szélesség: 100%; ) .demo-4 .main h3:after ( szélesség: 75%; ) .demo-4 .main h4:after ( szélesség: 50%; ) .demo-4 .main h1 ( margó: 1em 0 0,75 em; kitöltés: 0 0 5 képpont 0; szín: #6B5344; betűvastagság: normál; pozíció: relatív; szövegárnyék: 0 2px 0 rgba(255,255,255,0,5); betűméret: 36 képpont; vonalmagasság: 40 képpont; betűcsalád: "Carrois Gothic", sans-serif; ) .demo-4 .main h2 ( margó: 1em 0 0,75 em; kitöltés: 0 0 5px 0; szín: #6B5344; betűsúly: normál; betűtípus -család: "Scada", serif nélkül; pozíció: relatív; szövegárnyék: 0 2px 0 rgba(255,255,255,0,5); betűméret: 30px; sormagasság: 40px; ) .demo-4 .main h3 ( margó: 1em 0 0,75em; padding: 0 0 5px 0; szín: #6B5344; betűsúly: normál font-család: "Scada", sans-serif; pozíció: relatív; text-shadow: 0 2px 0 rgba(255,255,255,0,5); betűméret: 24 képpont; sor magassága: 40 képpont ) .demo-4 .main h4 ( margó: 1em 0 0,75 em; kitöltés: 0 0 5px 0; szín: #6B5344; betűsúly: normál; font-család: "Scada", sans-serif; pozíció: relatív; szövegárnyék: 0 2px 0 rgba(255,255,255,0,5); betűméret: 18px; sormagasság: 20px; )

5. példa

Egy másik érdekes és nem egészen hétköznapi színes megoldás- talán ráveszik néhány ötletére és megvalósítására. A címsoroknál elvileg nem lehet mindig félkövér, nagy betűtípus – vannak ilyen lehetőségek.

Demo-6 .main h1 ( margó: 1em 0 0,5em 0; betűsúly: 100; szövegátalakítás: nagybetűk; szín: #00caa6; betűstílus: dőlt; font-család: "Josefin Sans", sans-serif ; betűméret: 58 képpont; vonalmagasság: 54 képpont; szövegárnyék: 2 képpont 5 képpont 0 rgba(0,0,0,0,2); ) .demo-6 .main h2 ( margó: 1em 0 0,5em 0; szín: #148773; betűméret: 26 képpont; vonalmagasság: 40 képpont; betűvastagság: félkövér; betűcsalád: "Josefin Sans", sans-serif; ) .demo-6 .main h3 ( margó: 1em 0 0.5em 0 ; szín: #343434; betűméret: 22px; sormagasság: 40px; betűvastagság: 100; szövegátalakítás: nagybetűk; betűcsalád: "Josefin Sans", sans-serif; betűköz: 1px; betűtípus -stílus: dőlt; ) .demo-6 .main h4 ( margó: 1em 0 0,5em 0; szín: #343434; betűméret: 18px; vonalmagasság: 20px; betűsúly: félkövér; betűcsalád: " Josephine Sans, sans-serif;)

Ha szinte alaposan ismeri a CSS-t, akkor az eredeti cikk elmondja, hogyan kell bizonyos előfeldolgozókat stílusokban használni a kód mennyiségének csökkentése és megkönnyítése érdekében. Hogy őszinte legyek, függvények és paraméterek helyettesítése egy fájlban css stílusok Először láttam, de a kód nagyon világos. Természetesen az eredeti cikkben az összes lehetőség forráskódjára és demóverziójára mutató hivatkozásokat talál.

P.S. T Eszem, aki az interneten dolgozik, vagy éppen most kezd egy cikket arról, hogy mi az a TIC, segít eligazodni a hálózat egyik legrelevánsabb és legvitatottabb koncepciójában.

Mindig fel akarja hívni a figyelmet egy webhely vagy blog címsoraira, szeretné őket széppé tenni és lehetőleg effektusokkal (például árnyék, ragyogás vagy 3D). Egészen szép címsorok készíthetők a programban Adobe Photoshop, azonban a kimeneten képek, ami azt jelenti, hogy a keresőrobotok nem tudják elolvasni a szövegüket... Mi a teendő? Van kijárat!

Valóban, amikor meghatározza a weboldal relevanciáját bizonyos keresési lekérdezésekés egy hely hozzárendelése a keresési eredmények címsoraiban nem az utolsó helyen szerepel. Még azt is mondhatnám, hogy az egyik legjelentősebb. Meglehetősen meggondolatlanság lenne képnek hagyni őket (bár valamikor újraterveztem egy weboldalt, aminek több oldalon a teljes szövege egy kép volt... igen, és ez előfordul...).

Természetesen lehet „pontozni” a szépségre, és hétköznapivá varázsolni a címlapokat, mint mindenhol. De miért, ha van egy meglehetősen egyszerű módszer, amely a címsorokat szöveges formátumban hagyja, és nagyon szép és érdekes hatásokat tud adni nekik? És ma megmutatom nektek ezeket a technikákat. Azt hiszem, miután elsajátítottad ezeket a technikákat, folyamatosan használni fogod őket. Egyszóval két legyet ölsz egy csapásra: tedd látványossá a webdesignod, és az oldal relevanciája ne okozzon kárt.

Kezdjük!

3D fejléc készítése

Tehát effektusokat fogunk létrehozni közvetlenül a weboldal elrendezésekor.

1. Először létre kell hoznia egy új html fájlt, valamint egy stíluslap (css) fájlt.

Hogy megmutassam, hogyan történik mindez, létrehoztam egy html fájlt, és elneveztem "title.html"-nek (minden forrás fájlok Ha szükséges, letöltheti ezt a leckét, és megnézheti a "forráskódokat"). Itt forrás html fájlunk:

3D szöveg itt

Árnyékcím itt

Glow Text Here

Anaglif szöveg

Ez egy HTML5-ös dokumentum, amelyhez stíluslap (css.css fájl) kapcsolódik, a body tag-en belül mindössze négy különböző kaliberű címsor található.

Ezekkel a címsorokkal fogunk dolgozni. Semmi másra nincs szükségünk a html fájlba.

2. Mint mondtam, szükségünk van egy stíluslap fájlra. Már csatlakoztattuk, de ha még nem hozta létre, akkor hozza létre.

Létrehoztam egy css.css nevű fájlt, és ugyanabba a könyvtárba helyeztem, mint a html fájlt.

Mielőtt elkezdené a 3D fejléc létrehozását, írjunk néhány alapvető stílust az oldalhoz, hogy egy kicsit vonzóbbá tegyük.

Írjuk fel az oldal magasságát, szélességét, színét, központosítsuk, és állítsunk be egy pontozott keretet a body tag számára.

És azonnal középre igazítjuk az összes fejlécünket.

Íme a stíluslapfájlba helyezendő kód:

Törzs (magasság: 700 képpont; szélesség: 90%; háttérszín: # 069; margó: 0 automatikus; szegély: 1 képpont szaggatott # 000066; ) h1, h2, h3, h4 (szöveg igazítása: középre;)

Futtassa a html fájlt egy böngészőben. Az oldal így fog kinézni:

3. Most kezdjük az átalakítást. A h1 címsort 3D szöveggé alakítjuk.

Mindez ugyanabban a stíluslapfájlban fog megtörténni.

Helyezze el a következő kódot mindazok alá, amelyeket eddig a css.css fájljában írt:

H1(betűméret:72px; szín:#fff; szövegárnyék:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px6p6 -5p 0 ;)

Most pedig vessünk egy pillantást erre a kódrészletre. Az első két sorban a betűméretet és a fő színt állítjuk be. És itt kezdődik a legérdekesebb tovább. A text-shadow tulajdonság segítségével mintegy árnyékot hozunk létre a font számára, de nem egészen.

Az a tény, hogy ebben a tulajdonságban a kettőspont után a következő paraméterek szerepelnek: szín, vízszintes eltolás, függőleges eltolás és elmosódás.

Mit csinálunk?

Először is: a fő színhez közeli, de sötétebb színt választunk. Példánkban az előtér színe fehér, a szöveg-árnyék színe pedig szürke (de nem túl sötét). Itt addig kell kísérleteznie, amíg el nem éri a kívánt eredményt.

Másodszor, fokozatosan (minden alkalommal 1 pixellel) eltoljuk ezt az árnyékot jobbra és felfelé. Ezt a következő 2 paraméter jelzi (1px -1px, 2px -2px stb.).

Harmadszor, az elmosódást mindenhol nullán hagyjuk, mert egyszerűen nincs rá szükségünk 3D szöveg létrehozásához.

Ennek eredményeként ezt a képet kapjuk:

Ebben a példában 5 képpontos eltolást választottam, de többet vagy kevesebbet is megtehet. Minden attól függ, hogy milyen eredményt szeretne elérni.

Ügyeljen arra is, hogy kísérletezzen a színekkel, és próbáljon természetesebb megjelenést létrehozni.

Hozzon létre egy címet árnyékkal

A cím létrehozása árnyékkal nagyon egyszerű. És ezt néhány sornyi kóddal elérjük.

Most a h2 címsoron fogunk dolgozni.

Először be kell állítani a méretét és a fő színét (én pontosan ugyanannyira állítottam be a méretet, mint a h1 fejlécet, de természetesen te alakítsd ki az egyes fejléceket, ahogy kell).

A szín és a méret beállítása után ismét a text-shadow tulajdonságot használjuk. Az első paraméter a szín, ezt sötétebbre kell venni (végül is ez egy árnyék). A második és harmadik paraméter a vízszintes és függőleges eltolások. A szövegem nagy, ezért 5 pixelessé teszem őket. És az utolsó paraméter az elmosódási sugár. Az árnyékhoz kell, ezért 4 pixel értéket adunk neki. Ennek eredményeként a kód így fog kinézni:

H2(betűméret:72px; szín:#F90; szövegárnyék:#191919 5px 5px 4px; )

És így fog kinézni:

Kísérletezhet a paraméterekkel, és mégis eltérő eredményeket kaphat. Vegye figyelembe a szöveg betűméretét, színét és azt, hogy mit szeretne elérni.

Hozzon létre egy fényes címet

Ez is egyszerű. Itt a h3 címsorral fogunk dolgozni.

Az elv ugyanaz: először beállítjuk a betűméretet és annak fő színét, majd szöveges árnyékot használunk.

Válassza ki a ragyogó színt. Mint érti, világosabb lesz, mint a fejléc fő színe. A második és harmadik paraméter nulla lesz (itt nem tolunk el semmit sehova). De az elmosódási sugarat nagyobbra kell tenni (a mérete attól is függ, hogy milyen fényt szeretnél elérni).

Ennek eredményeként a kód a következő lesz:

H3(betűméret:72px; szín:#333; szövegárnyék:#fff 0 0 20px; )

Csillogó címünk pedig így fog kinézni:

Fejléc sztereó hatással

Nevezhetjük anaglif szövegnek is. A 3D-s filmnézéshez használható szemüveghez hasonlítható.

Nem kínozlak... Ahogy a mondás tartja: jobb egyszer látni, mint meghallgatni egy hosszú leírást.

A hatás nagyon érdekes, és létrehozása elvileg szintén nem nehéz.

Kezdjük. Itt a h4 címsorral fogunk dolgozni.

1. Először is állítsuk be a fejléc méretét. A példánk többi fejlécével megegyezővé teszem.

Most el kell helyeznünk a fejlécet. Állítsuk a pozíció tulajdonságot relatívra. Ez azt jelenti, hogy az elem pozíciója az eredeti helyzetéhez képest lesz beállítva.

Most adjunk színt. Ezt rgba formátumban fogjuk megtenni. Ha még nem találkozott a szín ilyen definíciójával, ne ijedjen meg. Egyszerű: a zárójelben lévő első három paraméter határozza meg a színt ( rgb formátumban), és az utolsó paraméter határozza meg az átlátszatlanságának mértékét. Példánkban ez az érték 0,5 (azaz 50%) lesz.

Íme az összes fenti kód:

H4(betűméret:72px; pozíció:relatív; szín:rgba(0,0,102,0,5); )

2. És most a legérdekesebb. Létrehozunk egy pszeudo elemet a h4 elemünkhöz. Ehhez regisztrálnia kell a stíluslapon mint h4:utána.

Ennek a pszeudo elemnek lesz néhány érdekes tulajdonsága. Például ingatlan tartalom, amelybe pontosan ugyanazt a szöveget kell beírni, mint a h4 címsort.

A pszeudo elemet abszolút pozícionálni kell (pozíció:abszolút).

A színt a h4 elem ellentétes színére kell beállítani. Vagyis ha a h4 színe kék, akkor az álelem színe piros lesz. És az átlátszatlanság még mindig 50%.

És mégis, a bal és a felső tulajdonságok segítségével módosítani fogjuk a pszeudoelem helyét. Meg kell győződnünk arról, hogy a pszeudo elem, amely tartalmában megkettőzi a h4 elemet, kicsit jobbra és lejjebb kerüljön (most mindent meglátsz). Itt a beállítások egyediek lesznek, és a betűmérettől, betűtípustól és a kívánt hatástól függenek.

Íme az összes fenti kód:

H4:after(tartalom:"Anaglif szöveg"; pozíció:abszolút; bal:361px; top:2px; szín:rgba(255,0,0,0,5); )

És itt van annak a hatása, amit kapunk:

Ennyit akartam megtanítani neked ebben a leckében.

Feltétlenül használja ezt a technikát! Először: Gyönyörű, Másodszor: minden címsor tökéletesen olvasható a keresőrobotok által, harmadik: Miután megírta a kódot, használhatja a címet webhelye vagy blogja bármely weboldalán, egyszerűen deklarálva azt a html-kódban.

Ha tetszett ez a lecke, Írja meg észrevételét(ha nem tetszett, akkor is :)). Köszönetnek fogjuk tekinteni.

A leckét megoszthatja barátaival is a közösségi hálózatok gombjaival.

És természetesen iratkozz fel a blogfrissítésekre (ha még nem iratkoztál fel). Sok hasznosat és érdekeset ígérek!

Jó hangulatot és hamarosan találkozunk!

Azt mondják, nem lehet megítélni egy könyvet a borítója alapján, pedig az emberek nap mint nap ezt teszik. Felvesznek egy könyvet, megnézik a borítót, aztán felvesznek egy újat, vagy visszateszik, vagy megfordítják és megnézik a hátulját, VAGY csak úgy kinyitják, hogy ránéznek a borítóra. A weboldalakat az első borítójuk és az első benyomásuk alapján is megítélik, ami gyakran a címből fakad.

A webhely címe általában az első, amit az emberek látnak. Az oldal tetején található feliratból vagy rajzból az emberek radikális ítéleteket hoznak arról, hogy mit fognak látni és olvasni. Ugyanazok az emberek, akik azt mondják, hogy nem lehet megítélni egy könyvet a borítója alapján, azt is mondják, hogy csak 30 másodperced van jó benyomást kelteni. Az internet világában, ahol egy kattintásnyira van a következő oldal, sokkal kevesebb idő jut rá.

Végigvezetjük a WordPress címsorarchitektúráján, és tippeket adunk, hogyan állítsd be saját „könyvborítóvá”, amely csalogatja az embereket a webhelyedre, és jó benyomást kelt. Ezután néhány szakértői tanácsot adunk a webhely jó címsorához.

tartalom

WordPress fejléc

Alapértelmezés szerint a WordPress fejléce egy egyszerű kódrészlet. Nem kell értenie a kódot ahhoz, hogy módosítsa a fejlécet WordPress téma. Blogja vagy webhelye webhelycímét és leírását > > értékre kell állítania, és a WordPress elvégzi a többit.

Az övében a legegyszerűbb forma- Klasszikus téma - A WordPress fejléc a wp-content/themes/classic/header.php sablonfájl kódja:

">

A cím a h1 címkében található, és azt a funkciót tölti be, hogy két különböző opcióban vagy opcióban használják. Ezekről a lehetőségekről többet tudhat meg a következőhöz tartozó dokumentációban. Alapvetően az első a hivatkozásban szereplő webhelyen jelenik meg, a második pedig a blog vagy webhely nevét, a > > panelen beállított módon. Amikor a felhasználó a kurzort a címsor neve fölé viszi, a címsorra kattintva visszatérhet a webhely fő- vagy főoldalára, a >> panelen látható módon.

Az alapértelmezett WordPress-téma meghatározza a képfunkciókat a háttérben, és ehhez hasonló fejlécet jelenít meg a wp-content/themes/default/header.php fájlban:

Az alapértelmezett/Kubrick-téma fejléce

A sabloncímke a linkben szereplő blog vagy webhely nevét mutatja, de ez a fenti hasonló lekérdezés URL-jének eltérő használatát mutatja. Ugyanazt az információt kapja, csak más módon. Hozzáteszi tőle leírások webhely itt: >> .

Egyszerűen fogalmazva, ez a két fejlécpélda ugyanazt a dolgot különbözteti meg. Címadatokat adnak a lehetséges képelhelyezéssel, a létrehozás pedig segíthet a webhelyen való navigálásban. Csak azon múlik, hogy mennyi információt szeretne látni a fejlécében, és hogy ezek az információk hogyan jelennek meg.

A klasszikus téma első példáját használva egy kép továbbra is használható háttérképként a stíluslapon a h1 választóban, a második téma jobban szabályozza a fejlécben lévő kép használatát azáltal, hogy saját osztott területet ad neki. . A megjelenését teljes mértékben a stíluslap szabályozza.

Fejléc stílusa

Ahogy a fenti két példában is megjegyeztük, a fejléc stílusait a kiválasztók tartalmazzák: h1 , header , headerimg és description . Ez mind a style.css fájlban van, bár lehet a használt téma header.php stílusú fájljaiban is. Mindkét helyen ellenőrizni kell. A klasszikus témában a fejléc CSS-je ugyanabban a #header választóban található.

#fejléc (háttér: #90a090; szegély-alsó: dupla 3px #aba; szegély balra: tömör 1px #9a9; szegély jobbra: tömör 1px #565; szegély felső: tömör 1px #9a9; betűtípus: dőlt normál 230% "Times New Roman", Times, serif; betűköz: 0,2 em; margó: 0; kitöltés: 15 képpont 10 képpont 15 képpont 60 képpont; )

A háttérszínként és a fejléc körüli szegélyként zöld árnyalatot választunk, de a szegély más árnyalatú, és süllyesztett, árnyékos hatást kelt. A Times New Roman betűtípus 230%-ra van állítva, a normálnál szélesebb karakterközzel. Az oldalsó kitöltés a címsoron belüli szöveg kitöltését hozza létre.

Mindegyik egyszerűen módosítható az egyes stílusattribútumok egyszerű szerkesztésével: a szegély vastagsága növelhető és továbbra is ugyanazzal a színnel, a háttérszín, a betűméret és -stílus, a betűköz stb.

Ugyanez vonatkozik az alapértelmezett WordPress-téma fejlécére is, azzal a különbséggel, hogy még néhány stílusra kell vigyázni. A header.php-n belül vannak a "head" címkében és stílusban.css . Ha sok stílus van, a legjobb, ha minden információt áthelyez egy stíluslapra.

A címsor megjelenését szabályozó stílusok a h1-en belül vannak, fejléc , fejlécimg és leírás CSS-választók. Csakúgy, mint a klasszikus téma esetében, megtalálhatja ezeket a linkeket, és módosíthatja a megjelenést és a hangulatot.

Az alapértelmezett képcím módosítása A WordPress témája leegyszerűsödött a Kubrickr nevű segédprogram bevezetésével. Csak azt kéri, hogy adjon meg egy új képfájlnevet a fejléchez, majd lefordítja azt, hogy ne kelljen beleásnia magát a kódba. Ha csak a fejlécképet szeretné módosítani, ez egy rendkívül hasznos és egyszerű eszköz.

Ha tetszik, kódoljon vagy ásson bele a címsorstílusokba, és végezze el a szükséges módosításokat. Az alábbiakban egy egyszerű oktatóanyag található a kép címének manuális megváltoztatásához.