21.5. fejezet: CSS alapismeretek – Keretek

Az egyes elemeknek kereteket is adhatunk. Jelenlegi típusaik a következők:

-          dotted – pontozott.

-          dashed – vonalas.

-          solid – sima egyenes.

-          double – dupla.

-          groove – 3D-s keret. Az effektus függ a keret színétől.

-          ridge - 3D-s (gerincvonal) keret. Az effektus függ a keret színétől.

-          inset - 3D-s (belső megadású) keret. Az effektus függ a keret színétől.

-          outset - 3D-s (külső megadású) keret. Az effektus függ a keret színétől.

-          none – nincs keret.

-          hidden – rejtett keret.

-          mix – vegyes keret. Sorrend: felső jobb alsó bal.

Megjegyzés: a négy különböző 3D-s kerettel érdemes kísérletezni!

Példa: htmlpelda32.html

<!DOCTYPE html>

<html>

<head>

                <meta http-equiv="Content-Language" content="hu">

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

 

<h2>Kerettípusok</h2>

 

<p class="dotted">pontozott</p>

<p class="dashed">vonalas</p>

<p class="solid">sima egyenes</p>

<p class="double">dupla</p>

<p class="groove">3D-s keret</p>

<p class="ridge">3D-s (gerincvonal) keret</p>

<p class="inset">3D-s (belső megadású) keret</p>

<p class="outset">3D-s (külső megadású) keret</p>

<p class="none">nincs keret</p>

<p class="hidden">rejtett keret</p>

<p class="mix">vegyes keret. Sorrend: felső jobb alsó bal</p>

 

</body>

</html>

 

border-width: keret vastagsága (megadott mértékegység szerint). Példa:

p.one {
    border-style: solid;
    border-width: 5px;
}
p.two {
    border-style: solid;
    border-width: medium;
}
p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

 

border-color: keret színe. Példa:

p.one {
    border-style: solid;
    border-color: red;
}
p.two {
    border-style: solid;
    border-color: green;
}
p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

 

egyedi kerettípus: a fentiek óvatos használatával lehet egyedi kerettípust is létrehozni. A lenti példában az alsó-felső keretszélek pontozottak, míg az oldalsók sima vonalasok.

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

 

border: a keret teljes szabályozása (mind a négy oldal). A fenti paraméterek együttes megadása. A sorrend: width, style, color. Példa:

p {
    border: 5px solid red;
}

Kicsit bővebben a fenti példa:

p {

border-width: 5px;

border-stíle: solid;

border-color: red;

}

 

border-left: a bal oldali keret szabályzása a sima keret eljárása szerint.

border-right: a jobb oldali keret szabályzása a sima keret eljárása szerint.

border-bottom: az alsó keret szabályzása a sima keret eljárása szerint.

border-top: a felső keret szabályzása a sima keret eljárása szerint.

 

border-radius: keretek lekerekítése.

Paraméter: képpont. Lásd a példában: htmlpelda33.html.

<!DOCTYPE html>

<html>

<head>

                <meta http-equiv="Content-Language" content="hu">

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>

p.sima {

    border: 2px solid red;

    border-radius: 0px;

}

p.egy {

    border: 2px solid red;

    border-radius: 1px;

}

p.harom {

    border: 2px solid red;

    border-radius: 3px;

}

p.ot {

    border: 2px solid red;

    border-radius: 5px;

}

</style>

</head>

<body>

 

<h2>Keret lekerítése</h2>

 

<p class="sima">sima</p>

<p class="egy">egy</p>

<p class="harom">harom</p>

<p class="ot">ot</p>

</body>

</html>

 

A fejezet leghitesebb forrása: https://www.w3schools.com/css/css_border.asp