15. CSS - nastavení ohraničení

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR EU PENÍZE ŠKOLÁM
Číslo projektu CZ.1.07/1.4.00/21.2732
Název projektu školy EU Peníze školám
Klíčová aktivita III/2 Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_15

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - nastavení ohraničení

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro nastavení ohraničení.

Klíčová slova: border, border-left, border-right, border-top, border-bottom.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení ohraničení.

Ověřeno: 11. 2. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

15.1 CSS - nastavení ohraničení (studijní text)

Každému blokovému HTML prvku lze nastavit pomocí CSS stylů různá ohraničení. Lze nastavit ohraničení okolo nebo jen z některých stran. K nastavení ohraničení slouží CSS vlastnost "border".

border

  • tato vlastnost nastaví ohraničení ze všech stran
  • zápis vlastnosti border se skládá z více hodnot najednou
  • musí se dodržet přesné pořadí jednotlivých hodnot
  • první se udává tloušťka ohraničení
  • hodnotami může být:
    • thin (slabé ohraničení),
    • medium (střední ohraničení),
    • thick (silné ohraničení)
    • nebo rozměr (px, pt, em,...)
  • druhý se udává styl (typ) ohraničení
  • hodnotami může být:
    • none (žádný),
    • 2D efekt: dotted (tečkované), dashed (čárkované), solid (plné), double (dvojité),
    • 3D efekt: groove (příkop), ridge (val), inset (ďolík), outset (návrší)
  • třetí se udává barva ohraničení
  • hodnotami může být:
    • anglický název barvy
    • hexadecimálně RGB kód
    • desítkově RGB kód
    • percentuálně RGB kód

Příklady CSS syntaxe

selektor {border: 2px solid black}
selektor {border: 8pt dotted #00FFFF}
selektor {border: thin inset rgb(255,255,255)}
selektor {border: none}

border-left, border-right, border-top, border-bottom

  • tato vlastnost nastaví ohraničení jen pro požadovanou stranu
  • můžete nastavit různá ohraničení pro jednotlivé strany
    • border-left (levý ohraničení)
    • border-right (pravé ohraničení)
    • border-top (horní ohraničení)
    • border-bottom (dolní ohraničení)
  • lze definovat jen tu stranu, kterou potřebujete ohraničit
  • zápis hodnot se posléze řídí stejnými pravidly jako vlastnost "border"

Příklady CSS syntaxe

selektor {border-left: 1px solid blue}
selektor {border-top: 2px dotted #00FFFF}
selektor {border-right: thick outset rgb(255,255,255)}
selektor {border-bottom: none}

border-radius

  • umožní nastavit zaoblení rohů ohraničeného prvku
  • hodnotou je poloměr zaoblení
    • rozměr v pixelech
    • procento z výšky nebo šířky prvku
  • lze zapsat i formou 4 hodnot (pro každý roh zvlášť)
    • poté platí pořadí: horní levý roh - horní pravý roh - dolní pravý - dolní levý (ve směru hodinových ručiček)

Příklady CSS syntaxe

selektor {border-radius: 6px}
selektor {border-radius: 10%}
selektor {border-radius: 3px 3px 6px 6px}

15.2 CSS - nastavení ohraničení (cvičení)

Úkol

  • Ve složce WWW si vytvořte složku 15.
  • Ze složky 14 si zkopírujte všechny potřebné soubory.
  • Soubor style.css upravte podle následujícího postupu:
    • nadpisu 1. úrovně nastavte barvu pozadí RGB kódem na MidnightBlue, změňte barvu písma na bílou (RGB kódem),
    • dále tomuto nadpisu nastavte plné ohraničení ze všech stran o šířce 4 pixely barvy MidnightBlue a zaoblení rohů na 8 pixelů,
    • nadpisu 2. úrovně nastavte dolní plné ohraničení o šířce 2 pixely barvy stejné jako text,
    • pomocí kontextového zápisu nastavte obrázkům plné ohraničení o šířce 5 pixelů barvy SteelBlue (RGB kódem), a zaoblení rohů na 5 pixelů.
  • Zkontrolujte na případné chyby a uložte.