Tamás Ferenc: Weblapkészítés HTML alapokon – 7. rész

CSS alapismeretek 2. rész

21.1. fejezet: CSS alapismeretek – Betűformázások

font-family: Megadja a betűtípus családjának nevét.
Paraméterek: családnevek: Times, Helvetica, Arial, Western, vagy Courier.
általános nevek: serif, sans-serif, cursive, fantasy, vagy monospace.
HTML-minta: { font-family : Paraméter }
Scriptben: objectum.style.fontFamily [ = Paraméter ]

Konkrét példa:

p {
font-family: "Times New Roman", Times, serif;
}

font-style: Betűtípus.
Paraméterek: normal (= normál; alapértelmezett), italic (= döntött), oblique (= ez is döntött, de kevésbé támogatott).
HTML-minta: { font-style : paraméter }
Scriptben: objectum.style.fontStyle [ = paraméter ]

Konkrét példa:

p.normal {
    font-style: normal;
}
p.italic {
    font-style: italic;
}
p.oblique {
    font-style: oblique;
}

font-size: Betűméret. Bár a HTML/CSS nyelvben lehetséges a méret ilyenképpen való változtatása, de ha lehetséges, inkább fejezetcímeket (H1…H6) vagy bekezdést (P) használjunk helyette.
Paraméter: abszolút-méret | relatív-méret | hossz | százalék. Alapérték: medium (közepes).
Az abszolút méret számokkal értelmezhető vagy kulcsszavak: xx-small | x-small | small | medium | large | x-large | xx-large.
Relatív méret lehetséges értékei: larger | smaller.
Hosszúság: Egy abszolút (szám)érték a méret részére.
A százalékérték a szülőelem %-ában értendő. Csak egész szám lehet, melyet közvetlenül követ a %-jel.

Ha nincs megadva egyéb módon, akkor az alapértelmezett méret: 16px (=1em).
Lehetséges hosszúság-egységeket lásd itt: http://tferi.hu/html-konyv/css-mertektablazat.
HTML-minta: { font-size : paraméter }
Scriptben: objectum.style.fontSize [ = paraméter ]

Konkrét példa:

h1 {
    font-size: 40px;
}
h2 {
    font-size: 30px;
}
p {
    font-size: 14px;
}

Betűméret képpont (px) helyett em-mel: Az em-méretezési szabvány a W3C konzorcium által ajánlott méretezés. Az alapértelmezett méret a 16 pixel (képpont). Ez megfelel az 1em-nek, tehát az átszámítása: pixel/16=em.

Megjegyzés: a két módszer keverhető!

Konkrét példa – a fenti mintájára:

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}
p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

font-weight: A szöveg vastagságát adja meg.
Paraméterek: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
(Érthetőbben: 400=normal / normál; 700=bold / kövér)
HTML-minta: { font-weight : paraméter }
Scriptben: objectum.style.fontWeight [ = paraméter ]

Konkrét példa:

p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}

font-variant: A kisbetűs betűk típusát adják meg.
Paraméterek: normal (=normál; alapértelmezett), small-caps (=kisméretű nagybetűk).
HTML-minta: { font-variant : paraméter }
Scriptben: objectum.style.fontVariant [ = paraméter ]

Konkrét példa:

p.normal {
font-variant: normal;
}
p.kicsi {
font-variant: small-caps;
}

font: az összes deklaráció egyszerre.

A fontosabb tulajdonságok kötelező sorrendje: "font-style font-variant font-weight font-size/line-height font-family".

Konkrét példa:

p.ex1 {
font: 15px arial, sans-serif;
}
p.ex2 {
font: italic bold 12px/30px Georgia, serif;
}

A lehetőségek (teljes) skálája a következő:

A további (eddig nem tárgyalt) paraméterek:

- caption: olyan betűtípust használ, amelyet a feliratozott kezelőelemek használnak (például gombokat, legördülő elemeket stb.).

- icon: ikon-feliratok.

- menu: legördülő menük betűtípusa.

- message-box: dialógus-ablakok betűtípusa.

- small-caption: a nagybetűk kisebb verziója.

- status-bar: a felirat-sorban (status bar) használt betűtípus.

- initial: ez legyen az alapértelmezett érték.

- inherit: ez a tulajdonság a szülőelemből származik.

Konkrét példa:

Feliratok
Ikonfeliratok
Legördülő menük
Diagólus ablakok
A nagybetűk kisebb verziója
Felirat-sor

A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_font.asp

21.2. fejezet: Szövegformázások

color: a szöveg színe. Lehetséges paraméterek:

- szöveg színe, pl.: „red”

- 16-os formátumú (hexa) kódja, pl.: „FF0000”

- RGB-értéke, pl.: „rgb(255,0,0)”

Konkrét példa:

body {
color: blue;
}
h1 {
color: c0c0c0;
}

p {

color: rgb(14,120,201);

}

A színek kiválasztásához ötletadónak érdemes használni a következő oldalt: http://tferi.hu/weblapkeszites-html-alapokon-1/weblapkeszites-html-alapokon-5?start=3

Megjegyzés: ha használjuk a fenti (color) paramétert, akkor használni kell a háttérszínt (background-color) is!

text-align: Hogyan igazítsa a szöveget a tagen belül.
Paraméterek: left (balra; alapértelmezés), right (jobbra), center (középre), justify (hasábszerűen, de ez néha hibás!).
HTML-minta: { text-align : paraméter }
Scriptben: objectum.style.textAlign [ = paraméter ]

Konkrét példa:

h1 {
    text-align: center;
}
h2 {
    text-align: left;
}
h3 {
    text-align: right;
}

p {
text-align: justify;
}

text-decoration: Szöveg díszítések.
Paraméterek: none (semmi), underline (aláhúzott), overline (föléhúzott), line-through (keresztülhúzott), blink (villogó, sokszor nem támogatott).
HTML-Minta: A:link, A:visited, A:active, A:hover { text-decoration: underline}
HTML-minta: { text-decoration : paraméter }

Scriptben: objectum.style.textDecoration [ = paraméter ]

Konkrét példa:

a {
text-decoration: none;
}

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

Megjegyzés: az aláhúzott szövegdíszítést nem érdemes használni, mivel könnyen keverhető a linkkel.

text-transform: A szöveg méretezését változtatja meg.
Paraméterek: capitalize (minden szó első betűjét naggyá teszi), uppercase (minden betűt naggyá tesz), lowercase (minden betűt kicsivé teszi), none (semmi; alapértelmezés).
HTML-minta: { text-transform : paraméter }
Scriptben: objectum.style.textTransform [ = paraméter ]

Konkrét példa:

p.uppercase {
    text-transform: uppercase;
}
p.lowercase {
    text-transform: lowercase;
}
p.capitalize {
    text-transform: capitalize;
}

text-indent: Bekezdés első sorának behúzása hosszmértékkel vagy százalékkal.
Minta: P { text-indent: 3em }
Lehetséges paramétereket lásd itt: htmllang7.html.
HTML-minta: { text-indent : paraméter }
Scriptben: objectum.style.textIndent [ = paraméter ]

Konkrét példa:

p {
text-indent: 50px;
}

letter-spacing: A betűk közötti helyet adja meg.
Paraméterek: { letter-spacing: normal | hosszúság_egység }
HTML-minta: BLOCKQUOTE { letter-spacing: 1.0em }
További hosszúság-egységeket lásd itt: htmllang7.html.
HTML-minta: { letter-spacing : paraméter }
Scriptben: objectum.style.letterSpacing [ = paraméter ]

Konkrét példa:

h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -2px;
}

line-height: Bekezdésen belül a sorok távolságát adja meg.
Paraméterek: normal (alapértékek), szám, hossz, százalék.
Minta: P { line-height:8mm}
További hosszúság-egységeket lásd itt: htmllang7.html.
HTML-minta: { line-height : paraméter }
Scriptben: objectum.style.lineHeight [ = paraméter ]

Konkrét példa:

p.kicsi {
line-height: 0.8;
}
p.nagy {
line-height: 1.8;
}

text-direction: A szöveg írási irányát adja meg.
Paraméterek: ltr (balról jobbra - alapértékek), rtl (jobbról balra).
Konkrét példa:

p {
direction: rtl;
}

word-spacing: a szavak közötti üres hely méretét szabályozza.
Paraméterek: normal (alapértelmezett; a hagyományos méret), szabályozott_méret (szabályozott méretű beszúrási egység. Lehetséges paramétereket lásd itt: htmllang7.html)
HTML-minta: { word-spacing : paraméter }
Scriptben: objectum.style.wordSpacing [ = paraméter ]

Konkrét példa:

h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}

text-shadow: a szöveg árnyékolását adja meg.

Paraméterek: vízszintes_méret függőleges_méret szín.

Konkrét példa:

h1 {
text-shadow: 3px 2px red;
}

Ebben a példában a vízszintes árnyék három képpont, míg a függőleges kettő. Az árnyék színe: piros.

text-overflow: szabályozza az esetlegesen túlcsordult (pl.: túl hosszú) szöveg helyett mit írjon ki a böngésző.

Paraméterek: clip|ellipsis|string|initial|inherit;

- clip: a szöveget elcsípi.

- ellipsis: egy ellipszist renderel a megszokott három pont helyett.

- string: egy adott szöveget ír ki.

- initial: Ezt állítja be alapértelmezettnek.

- inherit: ez a tulajdonság a szülőelemből származik.

Konkrét példa:

div {
text-overflow: ellipsis;
}

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

21.3. fejezet: CSS alapismeretek – Színek

A színek megadásának három alapvető formája létezik:

- egyszerűen név, pl.: „red”.

- RGB-kód, pl.: rgb(255,0,0).

- hexadecimális érték, pl.: „#ff0000”.

A három fenti megadási mód ugyanazt az értéket jelenti, nevezetesen a vörös színt. Létezik egy táblázat az általánosan elfogadott nevekkel és színekkel ITT: http://tferi.hu/weblapkeszites-html-alapokon-1/weblapkeszites-html-alapokon-5?start=3

Lényegében hasonló a következő variáns: https://www.w3schools.com/colors/colors_names.asp

Az RGB-módszer esetén a három alapszínt (vörös, zöld, kék) tudjuk keverni. Mindhármat 0-tól 255-ig terjedő tartományban (egész értékeket) használva.

A hexadecimális érték megadása ugyanezt jelenti, mivel itt az egyes RGB-kódokat 16-os számrendszerbe átszámítva kel egymás után írni. Erre is van egy egyszerű módszer, melyet ITT lehet megismerni: http://tferi.hu/binaris-szamabrazolas.

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

A fentieken kívül még számos, de kevesek által használt (vagy ismert) forma létezik. Ilyen többek között a HSL-színezés:
- hue = színárnyalat; értékek 0 és 360 közötti egész számok, ahol 0: vörös, 120: zöld, 240: kék.
- saturation = telítettség; 0 és 100 közötti százalékos érték, ahol 0%: szürke árnyalata, 100%: teljes szín
- lightness = könnyűség; 0 és 100 közötti százalékos érték, ahol 0%: fekete; 100% fehér.
Például : hsl(0, 100%, 50%) = rgb(255, 0, 0) = #ff0000
A HSL-színezés leghitelesebb forrása: https://www.w3schools.com/colors/colors_hsl.asp
Továbbiak: HWB-színezés, CMYK-színezés és NCol-színezés.
További színezési ötletek és formák: https://www.w3schools.com/colors/default.asp

21.4. fejezet: CSS alapismeretek – Hátterek

CSS segítségével egyes elemekhez lehet hátteret hozzárendelni.

background-color: az egyes elemhátterét adja meg (valamelyik fenti módszerrel. A lenti példában a fő-szöveg hátterét világoskéknek adjuk meg.

Paraméter: a szín meghatározása.

body {
background-color: lightblue;
}

background-image: egy weblap hátterének be lehet állítani egy képet is. Érdemes vigyázni az olvashatóságra!

Paraméter: a kép URL-je. Példa:

body {
background-image: url("/valamihatter.gif");
}

background-repeat: a háttérkép ismétlődése.

Paraméter: repeat-x|repeat-y|no-repeat.

Példa a vízszintes ismétlődésre:

body {
background-image: url("/valamihatter.png");
background-repeat: repeat-x;
}

background-position: a háttérkép pozíciója. Akkor érdemes megadni, ha nem ismétlődik.
Paraméter: left|center|right, illetve top|center|bottom.

Az 1. paraméter a vízszintes, míg a 2. a függőleges elhelyezésért felel. A következő példában a háttér a jobb felső sarokba kerül.

body {
    background-image: url("/valamihatter.jpg");
    background-repeat: no-repeat;
    background-position: right top;
}

Megjegyzés: itt sokszor érdemes margókat is használni a jobb elhelyezés végett.

background-attachment: a háttérkép helyét le lehet fixálni, így ez az elem nem lesz görgethető!
Másik lehetséges érték: scroll – azaz a háttér a tartalommal együtt görgethető. Ez az alapérték.

Paraméter: fixed. Példa:

body {
    background-image: url("/valamihatter.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
}

background: a háttér teljes szabályozása. A fenti paraméterek együttes megadása. A sorrend: color, image, repeat, attachment, position. Példa:

body {
background: #ffffff url("valamihatter.jpg") no-repeat right top;
}

Kicsit bővebben a fenti példa:

body {

background-color: #ffffff;

background-image: url("/valamihatter.jpg");

background-repeat: no-repeat;

background-position: right top;

}

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

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>

pontozott

vonalas

sima egyenes

dupla

3D-s keret

3D-s (gerincvonal) keret

3D-s (belső megadású) keret

3D-s (külső megadású) keret

nincs keret

rejtett keret

vegyes keret. Sorrend: felső jobb alsó bal

</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>

sima

egy

harom

ot

</body>

</html>

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

21.6. fejezet: CSS alapismeretek – Margók

Négy alapvető beállítás lehetséges:

margin-top: felső margó.

margin-right: jobb oldali margó.

margin-bottom: alsó margó.

margin-left: bal oldali margó

Mindegyik esetén érvényes, hogy a margó nagyságát szabályozó paraméter:

- auto: a böngésző állítja be.

- hossz: valamilyen mértékegység szerinti érték, pl.: px, pt, cm, stb.

- %: a szülőelem százalékában állítja be az értéket.

- inherit: a szülőelem értékeit örökli.

Megjegyzés: a negatív értékek is megengedettek!

Példa:

p {
    margin-top: 100px;
    margin-right: 150px;
    margin-bottom: 30px;

margin-left: 80px;
}

margin: a margó teljes szabályozása (mind a négy oldal). A fenti paraméterek együttes megadása. A sorrend: felső, jobb, alsó, bal. A fenti példa ismétlése – immár rövidebb verzióval:

p {
margin: 100px 150px 30px 80px;
}

Másik lehetőség: ha csak egyetlen paramétert használunk, akkor az mind a négy oldalra vonatkozik.

Megjegyzés: a legegyszerűbb szabályozás a paraméterek sima közlése, ahol csak a nem-zérus értékek kapnak mértékegységet. A lenti példában csak a felső margónak van 20 pixeles értéke, a többi zérus:

h2 {
margin: 20px 0 0 0;
}

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

21.7. fejezet: CSS alapismeretek – Helyhagyás (Padding)

Megadja a szükséges helyet az objektum és az egyéb tartalom között.

- auto: a böngésző állítja be.

- hossz: valamilyen mértékegység szerinti érték, pl.: px, pt, cm, stb.

- %: a szülőelem százalékában állítja be az értéket.

- inherit: a szülőelem értékeit örökli.

Négy alapvető beállítás lehetséges:

- padding-top: felső hely.

- padding-right: jobb oldali hely.

- padding-bottom: alsó hely.

- padding-left: bal oldali hely.

Példa:

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

padding: a helyhagyás teljes szabályozása (mind a négy oldal). A fenti paraméterek együttes megadása. A sorrend: felső, jobb, alsó, bal. A fenti példa ismétlése – immár rövidebb verzióval:

p {
padding: 50px 30px 50px 80px;
}

Másik lehetőség: ha csak egyetlen paramétert használunk, akkor az mind a négy oldalra vonatkozik.

Megjegyzés: a padding kipróbálásához érdemes (látható) keretes elemmel próbálkozni.

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

21.8. fejezet: CSS alapismeretek – Magasság és szélesség

Az adott elem dimenzióit adja meg.

width: szélesség

height: magasság (megadott mértékegység szerint).

Az alábbi példában 200 képpont magas, 50%szélességű púderkék téglalap látható:

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

max-width: legnagyobb szélesség beállítása (megadott mértékegység szerint).

max-height: legnagyobb magasság beállítása (megadott mértékegység szerint).

Példa:

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}

min-width: legkisebb szélesség beállítása (megadott mértékegység szerint).

min-height: legkisebb magasság beállítása (megadott mértékegység szerint).

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

Folytatása következik!

Legfontosabbak

Programleírások

Egyéb informatika

Nem informatika

CSS 2. rész

Tamás Ferenc: Weblapkészítés HTML alapokon – 7. rész

CSS alapismeretek 2. rész

21.1. fejezet: CSS alapismeretek – Betűformázások

21.2. fejezet: Szövegformázások

21.3. fejezet: CSS alapismeretek – Színek

21.4. fejezet: CSS alapismeretek – Hátterek

21.5. fejezet: CSS alapismeretek – Keretek

21.6. fejezet: CSS alapismeretek – Margók

21.7. fejezet: CSS alapismeretek – Helyhagyás (Padding)

21.8. fejezet: CSS alapismeretek – Magasság és szélesség

Keresés