CSS – rámečky Mgr. Lenka Švancarová
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>
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 http://www.jakpsatweb.cz/css/css-jednotky.html
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)
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
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
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>
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.