Rámečky umístěné kolem obrázků nebo textu zdobí web a doplňují jeho design. Pokud k vytvoření ohraničení použijete tabulky, bude kód pro každé ohraničení zabírat příliš mnoho místa. V tomto případě také budete muset přepsat kód HTML pro každý snímek. Pomocí CSS můžete snadno vytvořit ohraničení libovolné tloušťky a barvy, které chcete, když jednou napíšete jednoduchý kód pro všechny prvky, které budou ohraničeny tímto ohraničením. Tato technologie umožní v případě potřeby změnit typ rámců na webu za pár minut.
Je to nutné
- - mít svůj vlastní web;
- - vědět, co je CSS a kde jsou tyto styly napsány na webu.
Instrukce
Krok 1
Chcete-li vytvořit ohraničení, nejprve napište do CSS následující kód:
ramka {}
Krok 2
Chcete-li, aby ohraničení mělo požadovanou velikost, použijte parametr border-width, který nastavuje šířku čáry v pixelech. Například pokud by měla být čára rámu široká 3 pixely, bude položka vypadat takto:
ramka {border-width: 3px;}
Krok 3
Nyní definujte styl ohraničení pomocí parametru stylu ohraničení. Pokud chcete vytvořit ohraničení, jehož strany jsou pravidelné plné čáry, vložte do kódu následující položku mezi složené závorky - border-style: solid.
Krok 4
Tečkovaný okraj lze získat tak, že jej napíšete takto: border-style: dotted. Kontrola stylu ohraničení: přerušovaná vám poskytne přerušované ohraničení.
Krok 5
Z ohraničení můžete udělat dvojitou plnou čáru takto: border-style: double. Pomocí border-style: groove nebo border-style: ridge zarámujte text nebo obrázky do rámečků s 3D vedlejšími efekty. Rozdíl mezi těmito dvěma možnostmi spočívá v tom, že v prvním případě se rám skládá z odsazených čar a ve druhém z konvexních čar.
Krok 6
Použijte tento kód: border-style: inset k vytvoření efektu vložky s ohraničením prvku webu. Chcete-li, aby byl obsah ohraničení, spolu s ohraničením, naopak konvexní, napište border-style: outset.
Krok 7
Požadovanou barvu můžete přidat do rámečku pomocí parametru border-color, který je také umístěn mezi složené závorky. Chcete-li ohraničení ohraničit červeně, napište barvu ohraničení: červená, modrá - barva ohraničení: modrá, oranžová - barva ohraničení: oranžová.
Krok 8
Hraniční kód CSS, včetně všech možností, vypadá takto:
ramka {border-width: 3px; styl ohraničení: pevný; barva ohraničení: modrá;}
Krok 9
Nyní v HTML napište toto:
Obsah rámečku Místo fráze „Obsah rámečku“vložte text nebo kód požadovaného obrázku.
Krok 10
Na webu tedy můžete navrhnout neomezený počet prvků. Chcete-li změnit vzhled rámečku, stačí změnit kód CSS.
