Kiegészítő eszközök és a tipográfia

Írta: Super User.

A weboldal jelszóval védett adminisztrációs (szerkesztői) panelének felhasználóbarát szerkesztői felületén igényesen és sokoldalúan alakítható ki a médium szöveges, képi és audiovizuális (hang és videó) tartalma. Ha ez nem volna elég, akkor az itt részletezett HTML és CSS elemek kiegészítő lehetőségeiből válogathatunk

Megjegyzés! Az alábbiakban vázolt lehetőségek a szerkesztői panelen kényelmesen, programozói tudás nélkül is is elérhetők, a felsorolással inkább azok számára kívánunk támpontot nyújtani, akik tudni akarják, hogy milyen kódolások működnek a stíluselemek hátterében

Alapvető HTML elemek

Íme a szöveg szemantika rövid bemutatója. A <p> elemek új szabályszerűséget állítanak, például új sorokat kezdenek. A linkek színét és magukat a linkeket a <a> elem állatja be és határozza meg

Szöveg szemantika

Dőlt betűs szöveg előállítására a <em> eleme a kövér betűs kiemelésre a <strong> elemen használható. A szöveg kiemelésére a <mark> használatos. Törlés szimbolizálására a <del> element vagy a <ins> element, aláhúzásra a <abbr> elem vagy a <dfn> alkalmas.

Rövid lista linkekkel

Speciális idézetek és kódok

A kenyérszöveg betűtípusától eltérő megjelenést a <q> eleme hozza létre

A <blockquote> elemmel olyan speciális bekezdés hozható létre, aminek elejét és hátulját un. fehér terület keretezi jobbról és balról, így emelve ki azt a kenyérszövegből

Sorból való kiemelésre használhatjuk a <code> elemet. A <pre> elemmel előformázott szöveget hozhatunk létre, új sortávval és sortöréssel rendelkező, új szövegdobozt kreálva

pre {
    margin: 15px 0;
    padding: 10px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 18px;
    white-space: pre-wrap;
}
A <small> elem az apró betűs részek előállítására való

Hasznos CSS osztályok

Here is a short demonstration of all style related CSS classes provided by the Warp framework.

Kiemelt tartalmak

Iniciáléval kezdődő szövegrészletek létrehozására jó az un. dropcap Css kód. Érdekessége, hogy elhelyezhetünk benne más kódokat is, mint például a szövegben lévő szövegrészlet keretezésére kialakított <em> elem a box CSS osztállyal

Egyszerű doboz, vagy más néven box a box-content CSS osztály használatával
Egyszerű doboz, vagy más néven box a box-note CSS osztály használatával
Információs doboz, vagy más néven box a box-info CSS osztály használatával
Figyelmeztető doboz, vagy más néven box a box-warning CSS osztály használatával
Figyelemfelhívó doboz, vagy más néven box a box-hint CSS osztály használatával
Un. letöltő doboz, vagy más néven box a box-download CSS osztály használatával

A dotted CSS osztály használatával pontozással aláhúzott box-ot hozhatunk létre


Táblák és táblázato

Un. zebra típusú táblázatot hozhatunk létre a zebra CSS kóddal

Table caption
Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Data Centered
Data Bold Table Data Data Centered
Table Data Table Data Data Centered

Definíciós listák

Mutatós definíciós listákat hozhatunk létre a separator CSS kóddal

Definition List
A definíciós listák indítását a <dl> elemmel kezdeményezhetjük és a <dt> valamint a <dd> kódokkal választhatjuk el függőlegesen és vízszintesen a különálló részeket
Definition Term
This is a definition description.
Definition Term
This is a definition description.
This is another definition description.

Formok, beviteli mezők és különböző form elemek

A form elemek stílusát és jó megjelenését alapvetően a box CSS kód hozza létre

Form legend