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