Jak vytvořit webové servery pomocí CSS

Kaskádové styly poskytují webovým návrhářům kontrolu nad vzhledy každé stránky na svých stránkách. Můžete ušetřit vývoj času na projektu vaší společnosti nebo klienta pomocí jediného externího souboru CSS pro formátování každé stránky na webu. Více souborů CSS může poskytnout jedinečný vzhled každé stránce nebo skupiny stránek. Tajemstvím rozvržení CSS je definování diskrétních prvků stránky uvnitř kódu HTML a přiřazení jejich vlastností zobrazení a pozic v souboru CSS.

HTML

1.

Vytvořte soubor HTML. Umístěte odkaz do souboru CSS uvnitř oddílu s příkazem:

Tato značka informuje prohlížeč, kde naleznete pokyny pro formátování této stránky.

2.

Definujte prvek div s identifikací "main" bezprostředně za otvírací značkou:

Tím vytvoříte kontejner, který lze použít k řízení celkových charakteristik stránky. Umístěte uzavírací značku pro tento prvek div bezprostředně nad značku uzavíracího těla stránky.

3.

Otevřete novou značku div s id "záhlaví" přímo pod položkou "hlavní":

Obsah je zde

Zavřete každý prvek div, s výjimkou "hlavní" kontejneru, na konci obsahu sekce.

4.

Použijte stejnou metodu pro vytvoření tří dodatečných značek div a přiřaďte jim ID "information1", "information2" a "foot".

CSS

1.

Vytvořte soubor s názvem "my_style.css" ve stejném adresáři jako předchozí soubor HTML.

2.

Definujte celkovou šířku a barvu pozadí stránky odkazem na značku div "hlavní":

hlavní{

šířka: 960px; barva pozadí: modrá; }}

Použijte znak "#" pro označení jednotlivého prvku podle jeho id.

3.

Určete vlastnosti zobrazení sekcí záhlaví a informací přidáním těchto řádků:

hlavička {

barva pozadí: bílá; text-align: centrum; }}

informace1 {

barva pozadí: šedá; šířka: 480px; výška: 200px; plavat vlevo; }}

informace2 {

barva pozadí: zelená; šířka: 480px; výška: 200px; plavat vlevo; }}

Poklepejte oběma informačními sekcemi doleva a přiřaďte jim stejnou výšku pro vytvoření dvoubodového zobrazení.

4.

Umístěte kontejner "noha" v dolní části stránky pomocí řádků:

noha{

barva pozadí: černá; barva bílá; jasné: obě; }}

Použijte vlastnost "Vymazat: obojí" pro umístění zápatí pod dva plovoucí sloupce.

Tip

  • Použijte jedinečné barvy pozadí pro každou sekci při návrhu souboru CSS a získejte rychlý přehled o rozvržení před přidáním obsahu. Nejlepší způsob, jak se cítit pohodlně s návrhem CSS, je experimentovat s vlastnostmi dostupnými pro každý prvek. Tento příklad využívá pouze některé z mnoha možných možností formátování, které jsou k dispozici ve službě CSS.
 

Zanechte Svůj Komentář