Prezentace na téma: "CSS – rámečky Mgr. Lenka Švancarová."— Transkript prezentace:

1 CSS – rámečky Mgr. Lenka Švancarová

2 CSS – rámečky <h1 style="border-width: 10px;
border-color: rgb(51,102,0); border-style: solid;"> Nadpis s rámečkem okolo </h1> <h1 style="border-left-width: medium; border-left-color: rgb(51,102,0); border-left-style: double;"> Nadpis s rámečkem vlevo </h1>

3 CSS – rámečky Vlastnost border-width určuje tloušťku orámování. Slovně
thin – slabý rámeček medium – středně silný rámeček thick – tlustý rámeček V px (pixel) border-width: 5px; Další jednotky

4 CSS – rámečky Vlastnost border-color určuje barvu rámečku.
Vlastnost border-style určuje styl rámečku. solid – plná čára double – dvojitá plná čára dashed – čárkovaná čára dotted – tečkovaná čára groove, ridge, inset, outset none – bez rámečku (výchozí hodnota)

5 CSS – rámečky Rámečky lze vykreslovat i jen po jednotlivých stranách.
Vlevo – left border-left-width: medium; border-left-color: rgb(51,102,0); border-left-style: double; Vpravo – right Nahoře – top Dole – bottom

6 CSS – left, right, top, bottom
Stejně tak si lze navolit různé vnější (a vnitřní) okraje prvku. margin – všechny vnější okraje prvku margin-left margin-right margin-top margin-bottom padding – všechny vnitřní okraje prvku padding-left padding-right padding-top padding-bottom

7 CSS – zkrácené zápisy <h1 style="border: 10px rgb(51,102,0) solid;
margin: 20px 50px 10px 30px;"> Nadpis s rámečkem okolo </h1> style="border-left: medium rgb(51,102,0) double; padding: 20px 50px 10px 30px;"> Nadpis s rámečkem vlevo </h1>

8 CSS – rámečky U vlastností margin a padding z předchozího příkladu zjisti, kterých okrajů se týkají jednotlivé hodnoty, a svůj závěr si zapiš do sešitu. V PSPadu si otevři soubor komponenta.html. Pomocí CSS orámečkuj ze všech stran obrázky na stránce. U všech nadpisů druhé úrovně zobraz pouze horní část rámečku.