Box a jeho vlastnosti
Každý html dokument tvori stromovú štruktúru. Od najvyššej úrovne dokumentu až po najnnižšiu, kde sa jednotlive prvky do seba postupne vnárajú. V html je najvyššia úroveň prvok <html>v ktorom sú ďalšie prvky postupne vnárané(<head><body>..). HTML prvky sú vlastne akési boxy, ktorým môžeme pomocou css zadefinovať rôzne vlastnosti. Môžu byť riadkové (<h1>) alebo blokové(<div>). Každý box je tvorený v prvom rade svojim obsahom a potom oblastami (margin, padding, border), ktoré môžu mať aj nulovú hodnotu.
Margin
Komplexné nastavenie parametra margin- vonkajšie odsadenie:
margin: margin-top ¦¦ margin-right ¦¦ margin-bottom ¦¦ margin-left
margin-bottom: číslo ¦ percento – vonkajšie odsadenie okraja prvku (rámček, obrázok…).
margin-left: číslo ¦ percento – vonkajšie odsadenie od ľavého okraja rámčeka.
margin-right: číslo ¦ percento – vonkajšie odsadenie od pravého okraja rámčeka.
margin-top: číslo ¦ percento – vonkajšie odsadenie od horného okraja rámčeka.
Border
Komplexné nastavenie parametra border:
border: border-width¦¦ border-style¦¦ border-color
Komplexné nastavenie jenotlivých okrajov čiary (border):
border-top: border-width¦¦ border-style¦¦ border-color border-right: border-width¦¦ border-style¦¦ border-color border-bottom: border-width¦¦ border-style¦¦ border-color border-left: border-width¦¦ border-style¦¦ border-color
border-width: thin ¦ medium ¦ thick ¦ číslo – šírka čiary celého rámčeka
border-top-width: thin ¦ medium ¦ thick ¦ číslo – šírka hornej čiary rámčeka .
border-bottom-width: thin ¦ medium ¦ thick ¦ číslo – šírka dolnej čiary rámčeka
border-right-width: thin ¦ medium ¦ thick ¦ číslo – šírka pravej čiary rámčeka
border-left-width: thin ¦ medium ¦ thick ¦ číslo – šírka ľavej čiary rámčeka
border-style: none ¦ hidden ¦ dotted ¦ dashed ¦ solid ¦ double ¦ groove ¦ ridge ¦ inset ¦ outset ¦ inherit – definuje štýl čiary rámčeka
border-top-style: none… – definuje štýl hornej čiary rámčeka
border-bottom-style: none… – definuje štýl dolnej čiary rámčeka
border-right-style: none… – definuje štýl pravej čiary rámčeka
border-left-style: none… - definuje štýl ľavej čiary rámčeka
- none – nevykreslí sa žiadny rámček
- hidden – podobne ako none len pri tabuľkách sa chová trocku odlišne
- dotted – vykresli bodkovaný rámček
- dashed – vykresli čiarkovaný rámček
- solid – jednoduchá plná čiara
- double – vykresli rámček s dvojitou čiarou
- groove – čiara vyzerá akoby bola vyrytá do podkladu
- ridge – čiara akoby vystupovala z podkladu
- inset – čiara vykreslená tak, že celý rámček vyzerá ako zapustený do podkladu
- outset – čiara vykreslená tak, že celý rámček vyzerá ako vystupujúci z podkladu
Nie všetky prehliadače vedia vykresliť všetky štýly čiary.
border-color: farba ¦ transparent ¦ inherit - definuje farbu rámčeka
border-top-color: farba ¦ transparent ¦ inherit - definuje farbu hornej čiary rámčeka
border-bottom-color: farba ¦ transparent ¦ inherit - definuje farbu dolnej čiary rámčeka
border-right-color: farba ¦ transparent ¦ inherit - definuje farbu pravej čiary rámčeka
border-left-color: farba ¦ transparent ¦ inherit - definuje farbu ľavej čiary rámčeka
Outline
komplexné nastavenie vonkajšieho rámčeka prvku
outline: outline-width¦¦ outline-style¦¦ outline-color ¦ inherit
outline-width: thin ¦ medium ¦ thick ¦ číslo – šírka čiary celého rámčeka
outline-style: none ¦ hidden ¦ dotted ¦ dashed ¦ solid ¦ double ¦ groove ¦ ridge ¦ inset ¦ outset ¦ inherit – definuje štýl čiary rámčeka
outline-color: farba ¦ transparent ¦ inherit - definuje farbu rámčeka
Padding
Komplexné nastavenie parametra padding – vnútorné odsadenie:
padding: padding -top ¦¦ padding -right ¦¦ padding -bottom ¦¦ padding -left
padding-bottom: číslo ¦ percento – vnútorné odsadenie od spodného okraja prvku (rámček, obrázok…).
padding-left: číslo ¦ percento – vnútorné odsadenie od ľavého okraja rámčeka.
padding-right: číslo ¦ percento – vnútorné odsadenie pravého okraja rámčeka.
padding-top:číslo ¦ percento – vnútorné odsadenie horného okraja rámčeka.
Pozadie
Komplexné nastavenie parametra background:
background: background-color ¦¦ background-image ¦¦background-repeat ¦¦ background-attachment ¦¦ background-position ¦ inherit .
background-color: transparent ¦ farba ¦ inherit – farba pozadia prvku. Hodnota transparent nastavuje priehľadné pozadie.
background-image: url ¦ none ¦ inherit – definuje obrázok pozadia ktorý prekryje farbu pozadia. url – url obrázku kde sa nachadza
background-repeat: repeat ¦ repeat-x ¦ repeat-y ¦ no-repeat ¦ inherit - ak v prvku body udávame obrazok pozadia tak sa nám celý vytapetuje… ak sa vám to nepáči, práve s týmto parametrom si môžeme nadefinovať ako sa obrázok vytapetuje na pozadí ….
- repeat - vytapetuje všetko
- repeat-x – vytapetuje vo vodorovnej osi
- repeat-y - vytapetuje vo zvislej osi
- no-repeat – vypne opakovanie a v pozadí bude iba jeden obrázok
background-attachment: scroll ¦ fixed ¦ inherit - definuje či má byť obrazok pripichnutý na pozadí alebo má scrollovať spolu so stránkou
background-position: percento ¦ rozmer ¦ top ¦ center¦ bottom ¦ left ¦ right ¦ inherit -nastavuje polohu obrázku ktorý tvorí pozadie.
Príklad:
background-position: left – obrázok bude umiestnený na ľavej strane
Príklad na obrázok v pozadí stránky
body {backfround-image: url(obrazok.jpg); background-repeat: no-repeat; background-position: center;}
</style>
Vlastnosť display:
display -definuje zobrazenie prvku
- block – vytvorí blokový kontajner – viacriadkový
- none – negeneruje žiadny kontajner – skryje prvok
- in-line – vytvorí jeden alebo viac jednoriadkových kontajnerov
- list-item – vytvorí blokový kontajner a riadkový kontajner pre každú položku zoznamu
- run-in, compact – generuje riadkový alebo blokový kontajner v závislosti od obsahu (nezariadkuje napr. pri h2 …)
- table – prvok je bloková tabuľka, obdĺžnikový blok, ktorý je súčasťou blokového formátovacieho kontextu
- inline-table – prvok je inline tabuľka, je súčasťou riadkového (inline) kontextu
- table-row – prvok je riadok buniek
- table-row-group – prvok je skupinou jedného či viacej riadkov buniek
- table-header-group – rovnako ako ‘table-row-group’, ale pri vizuálnom formátovaní je skupina zobrazená vždy pred všetkými ostatnými riadkami a skupinami riadkov tabuľky, za prípadným horným nadpisom (top caption). Pri tlači sa môže opakovať na začiatku každej stránky, pokiaľ je tabuľka rozdelená na viacej stránok.
- table-footer-group – Podobne ako ‘table-header-group’, zobrazuje sa až za všetkými ostatnými riadkami pred prípadným spodným nadpisom (bottom caption). Pri tlači sa môže opakovať na každej stránke.
- table-column – prvok je stĺpec buniek
- table-column-group – prvok je skupinou jedného alebo viacerých stĺpcov buniek
- table-cell – prvok predstavuje bunku tabuľky
- table-caption – špecifikuje nadpis tabuľky
- inherit – zdedená vlastnosť