Rámy umiestnené okolo obrázkov alebo textu zdobia web a dotvárajú jeho dizajn. Ak na vytvorenie orámovania použijete tabuľky, potom kód každého orámovania zaberie príliš veľa miesta. V takom prípade tiež budete musieť prepísať kód HTML pre každý rámec. Pomocou CSS môžete ľahko vytvoriť ohraničenie ľubovoľnej požadovanej hrúbky a farby napísaním jednoduchého kódu pre všetky prvky, ktoré budú ohraničené týmto ohraničením. Táto technológia umožní, ak je to potrebné, zmeniť typ rámov na webe za pár minút.
Je to nevyhnutné
- - mať svoj vlastný web;
- - vedieť, čo je CSS a kde sú tieto štýly napísané na webe.
Inštrukcie
Krok 1
Ak chcete vytvoriť hranicu, najskôr napíšte do CSS nasledujúci kód:
ramka {}
Krok 2
Ak chcete, aby mal orámovanie požadovanú veľkosť, použite parameter border-width, ktorý nastavuje šírku čiary v pixeloch. Ak má byť napríklad rámcová čiara široká 3 pixely, bude položka vyzerať takto:
ramka {border-width: 3px;}
Krok 3
Teraz definujte štýl ohraničenia pomocou parametra štýlu ohraničenia. Ak chcete vytvoriť hranicu, ktorej bočné strany sú pravidelné plné čiary, vložte do kódu medzi kučeravé zátvorky túto položku - border-style: solid.
Krok 4
Bodkovaný okraj môžete získať tak, že ho napíšete takto: border-style: dotted. Zaškrtnutie štýlu orámovania: prerušované, zobrazí sa prerušované orámovanie.
Krok 5
Orámovanie môžete urobiť dvojitou plnou čiarou takto: border-style: double. Na zarámovanie textu alebo obrázkov do rámov s vedľajšími 3D efektmi použite border-style: groove alebo border-style: ridge. Rozdiel medzi týmito dvoma možnosťami spočíva v tom, že v prvom prípade sa rám skladá z odsadených čiar a v druhom z konvexných čiar.
Krok 6
Použite tento kód: border-style: inset na vytvorenie efektu vložky s ohraničením prvku lokality. Ak chcete, aby bol obsah ohraničenia, spolu s ohraničením, naopak konvexný, napíšte border-style: outset.
Krok 7
Môžete pridať požadovanú farbu do rámu pomocou parametra border-color, ktorý je tiež umiestnený medzi zložené zátvorky. Ak chcete, aby bol okraj červený, napíšte border-color: red, blue - border-color: blue, orange - border-color: orange.
Krok 8
Hraničný kód CSS, vrátane všetkých možností, vyzerá takto:
ramka {šírka okraja: 3px; hraničný štýl: pevný; farba orámovania: modrá;}
Krok 9
Teraz do HTML napíšte toto:
Obsah rámu Namiesto frázy „Obsah rámu“vložte text alebo kód požadovaného obrázka.
Krok 10
Na webe teda môžete navrhnúť neobmedzený počet prvkov. Ak chcete zmeniť vzhľad rámu, musíte zmeniť iba kód CSS.
