CSS Ääris
CSS äärise omadused määratlevad raamistuse elemendi ümber.
Selleks, et luua ääriseid Html elementide ümber ei piisa ainult Html'ist. Kui siis ainult tabeleid kasutades. Css'i abil aga saab seda teha kiiresti ning täpselt nii nagu sul vaja on. Sinu käsutuses on terve hulk erinevaid äärise stiile. Nendega eksperimenteerides, leiad endale kindlasi sobiva lahenduse.
Näited
Äärise omadused ühes deklaratsioonis.
Selles näites demonstreeritakse, kuidas märkida kõik äärise omadused ühte deklaratsiooni.
Iga külg erinev
Selles näites demonstreeritakse, kuidas elemendi ümber saab luua äärise, kus iga külg on erinev.
Ülaäärise omadus ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas elemendi ülaäärise omadused saab märkida kõik ühte deklaratsiooni.
Alaäärise omadus ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas elemendi alaäärise omadused saab märkida kõik ühte deklaratsiooni.
Vasakäärise omadus ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas elemendi vasakäärise omadused saab märkida kõik ühte deklaratsiooni.
Paremäärise omadus ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas elemendi paremäärise omadused saab märkida kõik ühte deklaratsiooni.
Erinevad ääriste stiilid
Selles näites demonstreeritakse, kuidas märkida erinevaid ääriste stiile.
Ülaäärise stiilid
Selles näites demonstreeritakse, kuidas märkida ülaäärise stiile.
Alaäärise stiilid
Selles näites demonstreeritakse, kuidas märkida alaäärise stiile.
Vasakäärise stiilid
Selles näites demonstreeritakse, kuidas märkida vasakäärise stiile.
Paremäärise stiilid
Selles näites demonstreeritakse, kuidas märkida paremäärise stiile.
Ääriste paksus
Selles näites demonstreeritakse, kuidas märkida ääriste paksust ühes deklaratsioonis.
Ülaäärise paksus
Selles näites demonstreeritakse, kuidas märkida üääriste paksust.
Alaäärise paksus
Selles näites demonstreeritakse, kuidas märkida alaääriste paksust.
Vasakäärise paksus
Selles näites demonstreeritakse, kuidas märkida vasakääriste paksust.
Paremäärise paksus
Selles näites demonstreeritakse, kuidas märkida paremääriste paksust.
Nelja äärise värvid
Selles näites demonstreeritakse, kuidas märkida nelja värvilise äärise omadused.
Ülaäärise värv
Selles näites demonstreeritakse, kuidas märkida ülaäärise värvi omadused.
Alaäärise värv
Selles näites demonstreeritakse, kuidas märkida alaäärise värvi omadused.
Vasakäärise värv
Selles näites demonstreeritakse, kuidas märkida vasakäärise värvi omadused.
Paremäärise värv
Selles näites demonstreeritakse, kuidas märkida paremäärise värvi omadused.
Kasulikud Näpunäited
Css ääriste stiili "margin", "padding" kirjutamisel on järjekord selline:
top(üleval) right(paremal) bottom(all) left(vasakul)
Kuid jättes teatud väärtused kirjutamata, võib saavutada parema kontrolli ääriste üle.
margin: 0px;
kõik "margin" väärtused on 0px.
padding: 10px 5px;
top ja bottom "padding" on 10px ning right ja left "padding" on 5px.
border-width: 1px 5px 2px;
top border on 1px, right ja left border on 5px ning bottom border on 2px.
margin: 1px 10px 5px 3px;
top on 1px, right on 10px, bottom on 5px, ning left on 3px.
Oluline on meeles pidada järjekorda(top right bottom left). Vastasel juhul võib tüütuid probleeme tekkida. Selleks, et järjekord ei ununeks soovitan võtmesõna meeldejätmiseks:
TRiBLa
| Omadus | Kirjeldus | Väärtus |
|---|---|---|
| border | Kõik nelja äärise omadused ühes deklaratsioonis | border-width border-style border-color |
| border-bottom | Kõik alaäärise omadused ühes deklaratsioonis | border-bottom-width border-style border-color |
| border-bottom-color | Määrab alaäärise värvi | border-color |
| border-bottom-style | Määrab alaäärise stiili | border-style |
| border-bottom-width | Määrab alaäärise paksuse | thin medium thick length |
| border-color | Määrab nelja äärise värvi eraldi igaühele | color |
| border-left | Kõik vasakäärise omadused ühes deklaratsioonis | border-left-width border-style border-color |
| border-left-color | Määrab vasakäärise värvi | border-color |
| border-left-style | Määrab vasakäärise stiili | border-style |
| border-left-width | Määrab vasakäärise paksuse | thin medium thick length |
| border-right | Kõik paremäärise omadused ühes deklaratsioonis | border-right-width border-style border-color |
| border-right-color | Määrab paremäärise värvi | border-color |
| border-right-style | Määrab paremäärise stiili | border-style |
| border-right-width | Määrab paremäärise paksuse | thin medium thick length |
| border-style | Kõik nelja äärise stiilid ühes deklaratsioonis | none hidden dotted dashed solid double groove ridge inset outset |
| border-top | Kõik ülaäärise omadused ühes deklaratsioonis | border-top-width border-style border-color |
| border-top-color | Määrab ülaäärise värvi | border-color |
| border-top-style | Määrab ülaäärise stiili | border-style |
| border-top-width | Määrab ülaäärise paksuse | thin medium thick length |
| border-width | Kõik ülaäärise paksuse omadused ühes deklaratsioonis | thin medium thick length |
