CSS je kaskádová šablona stylů, což je jazyk pro popis vzhledu webových stránek. Jednou z hlavních výhod CSS je schopnost nahradit rozložení tabulky blokovým rozložením.
Je to nutné
Editor HTML kódu
Instrukce
Krok 1
Vytvořte první blok. Ve formě HTML bude vypadat jako značka div s id 'block01'. Identifikátor block01 zde naznačuje, že v popisu CSS jsou pro selektor # block01 zadány všechny vlastnosti tohoto bloku.
Krok 2
Popište blok v CSS. Ve stylech CSS zadejte název identifikátoru (# block01) a ve složených závorkách popište jeho parametry - šířku, umístění, offset, barvu pozadí atd. Může to například vypadat takto: # block01 {width: 150px; výška: 150px; pozice: absolutní; nahoře: 0px; vlevo: 0px; barva pozadí: růžová}. Tento popis předpokládá, že pole bude 150 pixelů dlouhé a 150 pixelů široké, bude pevně umístěno v levém horním rohu dokumentu a jeho pozadí bude zbarveno do růžova.
Krok 3
Dejte bloku relativní umístění. Pokud v popisu CSS nepoužíváte absolutní, ale relativní umístění, pak můžete umisťovat bloky nikoli pevným přitahováním k mřížce souřadnic, ale vzhledem k jiným již existujícím blokům. Chcete-li to provést, změňte pozici kódu: absolutní; nahoře: 0px; left: 0px by position: relative; nahoře: 200px; vlevo: 100 pixelů
Krok 4
Dejte bloku zaokrouhlování. V CSS je za to odpovědný příkaz border-radius. Přidejte následující kód do šablony stylů: border-radius: 8px. Blok bude mít nyní zaoblené rohy. Pokud chcete zaoblit pouze některé rohy, popište rádius zvlášť pro každý z nich: border-radius: 8px 8px 0px 0px.
Krok 5
Dejte bloku mrtvici. Chcete-li zvýraznit obrys bloku tenkou čarou, přidejte do jeho popisu CSS následující kód: border-top: 1px dashed black. Tato instrukce znamená, že hranice bloku bude černá a bude mít tloušťku jeden pixel. V tomto případě se samotná obrysová čára zobrazí jako přerušovaná čára (přerušovaná - tečkovaná čára, tečkovaná - tečky, plná - plná čára).
Krok 6
Nastavte zbývající vlastnosti bloku. V popisu CSS zadejte, jaké písmo má být použito pro text uvnitř bloku, jaká by měla být velikost písma, zarovnání a odsazení od okrajů bloku. Tyto vlastnosti jsou popsány v definicích font-family, font-size, text-align a padding.
Krok 7
Vlastnost float můžete použít k přizpůsobení toku jednoho bloku přes druhý. Pokud ji nastavíte na „vlevo“, pak ostatní prvky budou proudit kolem bloku nalevo a „vpravo“- napravo. Pokud nastavíte plovoucí hodnotu na „none“, zarovnání bloku nebude nastaveno. Vlastnost clear v CSS zabrání toku bloku na pravou, levou nebo obě strany a přepíše příkaz float.
