Html konténerek

Html konténerek
Mivel így elkezdtük megérteni a kódot az blogok Wordpress - nem tudjuk elkerülni a problémát html formázást. Persze, ez egy tudomány. De megpróbáljuk rendezni az alapokat: megérteni, hogy mely címkéket használnak formázni a szöveget - az egyes bejegyzéseket, oldalakat. Akkor leszünk képesek, hogy ez a szerkezet jelentős változást.

Blokk elrendezés Wordpress

Kezdeni, hogy megvitassák a kialakulását az általános elvének html-kódot WordPress. Ez az úgynevezett „blokk elrendezés.” És ahogy sejteni lehet, ez azt jelenti, hogy a minta áll néhány blokkot. Láttuk már ezt a példában oldalon vagy feljegyzéssablon.

Tény, hogy nem minden egyértelmű. Itt például, make-up table:

Látjuk, hogy az egyes elemek (sejtek) fejtik ki egymás fölött. És lesz található ugyanabban a sorban. Itt az eredménye, hogy egy egyszerű eredménye:

Megjegyezzük, hogy ha az asztalon nincsenek határai -, akkor a tartalmát a sejtek néz ki, mint a normál felvétel. Képzeljük el, mi tudjuk (és mi!), Hogy bármilyen konfigurációt a sejtek felvenni nem csak szöveget, hanem képeket ... Most próbáld meg elképzelni, hogy egy ilyen kód lenne púpozott oldal!

Ez az elv az elrendezés korábban használt (pl oldalak Narod), és néha az eddig használt! Ez az úgynevezett „táblázatos elrendezés.” Így természetesen blokk elrendezés - egy szerencsés találni a fejlesztők, és nem véletlen.

Az elemek a blokk elrendezés

De ahogy a blokkok alakulnak ki a blokk elrendezés? Mivel a böngésző eltérő, hogy az egyik elem véget ért, és a következő kezdődött? Ez határozza meg, hogy ez az elem az ilyen tulajdonságokkal és stílusok, a másik - a másik? - Ezek a fő kérdés, hogy vezessen minket az elmélettől a gyakorlatig.

Így, a blokkok -, mint a tartalom darabjai amelyek zárt a blokk címke vagy blokk elemek (konténerek). Tény, hogy sok közülük, de találkozunk ma a legfontosabb és a gyakori - címkék div, p, h.

Minden blokk elemek közös formázási szabályok:

  • A szélessége ez az elem egyenlő lesz a szülő szélessége. Ez azt jelenti, például a szélessége a poszt a szöveg lesz egyenlő a teljes oszlop szélessége;
  • A magasság határozza meg a tartalom mennyisége. Azaz, egy bekezdés magasabb lesz, ha több szöveget;
  • Az új blokk kezdődik egy új sort.

div tároló

Ez az alapja az egyes címkesablonjához Wordpress. Lásd a témát kód - vannak függvényhívásokkal php:

És néhány töredék zárt címkék - sőt, a tartály:

Továbbá, egy ilyen tartályba és lehet php-csoporttal és más címkék (például, aktív hivatkozások, és korlátozott címkék, fejlécek stb h)

Akkor miért van szükség egy tartályban? - Annak érdekében, hogy neki a saját stílusát, amelyet külön kell nyilvántartásba venni (a stíluslap). Tehát levelet elég tömör kódot, amely az egyes blokkok lesz rendelve egy név vagy azonosító stílusban. De a CSS-kód design is lesz betöltve egy másik fájlt. Stílus tulajdonságok csatolt a következőképpen:

Nézd meg a kódot sem a szakaszok blogsablonod, és azonnal látni, mire gondolok. Gyakorolni, hogy elszigetelje az egyes blokkok és világos kijelző bármely oldal elemek felelősek. Ezután keresse meg a stíluslap neve vagy azonosító stílusok, amelyek különböző blokkokat.

konténer p

  • text-align: left; - balra igazítás;
  • text-align: right; - jobbra igazított;
  • text-align: indokolják; - teljes körű indoklását;

Teljes rekord így néz ki:

Minden más stílusú ingatlan a címke határozza meg a stíluslap. Ott van regisztrálva, és a betűtípusok és a méretek és a szöveg színét (mert nem csak fekete!)

konténer h

Ez az ismert tag, amelyben fejlécek - H1, H2, H3, és így tovább. Stílusok minden típusú fejléc már regisztrált a blog téma. Részt vesznek az oldal sablont formázását egyes bejegyzésekben.

A címek használatát a különböző szinteken a szövegben már beszélt-beszélt SEO minden csíkokkal. De tudjuk alkalmazni a címkét a WordPress sablon. Például, hogy adjunk a mottója a blog főoldalán - a főcím, a jegyzékét is. Például így:

És a következő alkalommal nézzük meg belső elemek, amelyek nélkül a elrendezését és formázását a blog is lehetetlen.

Kapcsolódó cikkek