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

CSS alapismeretek 3. rész

22.1. fejezet: CSS alapismeretek – Dobozmodell

A CSS segítségével sok olyan látványt is megoldhatunk, amit a HTML-lel egyáltalán nem, vagy csak elég nehezen. Ezt mutatja be a következő ábra is:

Kép eredetije: https://www.w3schools.com/css/css_boxmodel.asp

Az egyes részek magyarázata:
-   margin = margó. Részletesebben: http://tferi.hu/weblapkeszites-html-alapokon-1/css-2?start=5
-   border = keret. Részletesebben: http://tferi.hu/weblapkeszites-html-alapokon-1/css-2?start=4
-   padding = helyhagyás. Részletesebben: http://tferi.hu/weblapkeszites-html-alapokon-1/css-2?start=6
-   Tartalom. Ez önmagáért beszél. Lehet szöveg, kép, vagy bármi hasonló.

A fenti ábrát a következő részlettel kaphatjuk meg:

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Megjegyzés: amikor egy elem szélességét vagy magasságát szabályozzuk, akkor csak a „Tartalom” részt szabályozzuk, tehát csak óvatosan a méretekkel!

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

22.2. fejezet: CSS alapismeretek – Körvonalak (outline)

Ez a tulajdonság beállítja a CSS körvonalak stílusát, színét és vastagságát. Az egyértelmű megfogalmazásért íme egy ábra:

outline-style: A keret típusai megegyeznek a vonalnál már megismertekkel:
-   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) körvonal. Az effektus függ a körvonal színétől.
-   inset - 3D-s (belső megadású) körvonal. Az effektus függ a körvonal színétől.
-   outset - 3D-s (külső megadású) körvonal. Az effektus függ a körvonal színétől.
-   none – nincs körvonal.
-   hidden – rejtett körvonal.

Példa:

p {
border: 1px solid black;
outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Ennek gyakorlati megvalósítása látható itt: htmlpelda34.html.

outline-color: A körvonal színe – a már megszokott lehetőségekkel.
-   egyszerűen név, pl.: „red”.
-   RGB-kód, pl.: rgb(255,0,0).
-   hexadecimális érték, pl.: „#ff0000”.
-   invert – ez új! Ez a gyakorlatban a szín inverzióját jelenti, tehát a körvonal ellentéte lesz a háttér színének.

Példa:

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

outline-width: körvonal vastagsága - a már megszokott lehetőségekkel. A vastagság megadható a szokott mértékegységekkel (px, pt, cm, em, stb.) vagy lehet a három megadott értéket is használni: thin (vékony), medium (közepes) vagy thick (vastag).
Példa:

p {border: 1px solid black;}
p.egy {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}
p.ketto {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

outline-offset: hely a körvonal és az elem sarka vagy határa között. Példa:

div {
    border: 2px solid black;
    outline: 2px solid red;
    outline-offset: 15px;
}

outline: körvonal gyors megadása. A fenti lehetőségek együttese. Sorrend: width style color. E három tulajdonságból a style (típus) kötelező. Példa:

p {
border: 1px solid black;
outline: 5px dotted red;
}

Ugyanez másképpen:

p {
border-width: 1px;
border-style: solid;
border-color: black;
outline-width: 5px;
outline-style: dotted;
outline-color: red;
}

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

22.3. fejezet: CSS alapismeretek – Betűtípusok

A CSS betűtípus-családok két alapvető fajtára tagozódnak:
-   általános család – egyszerű kinézettel rendelkező típusok, pl.: „Serif” vagy „Monospace”.
-   speciális családok – valami különleges kinézettel, pl.: „Arial” vagy „Times New Roman”.
A legfontosabb általános családok:
-   Serif: Az egyes betűk végén van pár vonal, de ezek nem feltétlenül láthatóak.
-   Sans-serif: Ugyanaz, mint a fenti, de kísérő vonalak nélkül.
-   Monospace: Minden karakter megegyező szélességű.

font-family: a betűtípus beállítása. Több betűtípust is be lehet állítani egymás után. Ha az elsőt nem támogatja a böngésző, akkor jön a második, majd a harmadik, stb. Ha egyiket sem támogatja a böngésző, akkor jön az alapértelmezett típus. Példa:

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

font-style: Betűstílus. A leggyakoribb a döntött.
Paraméretek: normal (= normál; alapértelmezett), italic (= döntött), oblique (= egyszerű döntött, de alig támogatott).
Példa:

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

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

Ugyanez „em”-mel:

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ális; 700=bold / kövér)
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).
Példa:

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

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

Még egy gyakorlati példa ehhez a ponthoz:

The browser font used in captioned controls.
The browser font used in icon labels.
The browser font used in dropdown menus.
The browser font used in dialog boxes.
A smaller version of the caption font.
The browser font used in the status bar.

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

22.4. fejezet: CSS alapismeretek – Ikonok

A betűk helyett szükség esetén használhatunk különleges ikonokat is. Ennek legegyszerűbb módja, hogy a <HEAD> szekcióba berakjuk a következő sort:

Megjegyzés: semmilyen letöltés, illetve installálás nem szükséges!
Példa: (htmlpelda36.html)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>







</body>
</html>

És az eredmény:
Az összes Cloudfare ikon megtekinthető itt: https://icons8.com/icon/872/cloudflare
Megjegyzés: érdemes a bal oldalt látható csoportokban barangolni!

Másik lehetőség a Bootstrap könyvtár használata. Itt a következő sort kell beleírni a <HEAD> szekcióba:

Megjegyzés: semmilyen letöltés, illetve installálás nem szükséges!
Példa: (htmlpelda37.html)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>





</body>
</html>

És az eredmény:
Az összes Bootstrap ikon megtekinthető itt:
https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp
Csoportosítva az ikonok: https://www.w3schools.com/icons/fontawesome_icons_intro.asp

Harmadik lehetőség a Google ikonkönyvtár használata. Itt a következő sort kell beleírni a <HEAD> szekcióba:

Megjegyzés: semmilyen letöltés, illetve installálás nem szükséges!
Példa: (htmlpelda38.html)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

cloud
favorite
attachment
computer
traffic

</body>
</html>

És az eredmény:
Az összes Googleapis ikon megtekinthető itt: http://materializecss.com/icons.html
További lehetőségek a Googeapis ikonok használatához:
https://www.w3schools.com/icons/google_icons_intro.asp

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

22.5. fejezet: CSS alapismeretek – Linkek

A CSS számos lehetőséget ad a linkek megjelölésére, illetve díszítésére.
A négy alapvető link-állapot a következő:
-   a:link – sima, nem látogatott link
-   a:visited – már meglátogatott link
-   a:hover – a link megjelenése, ha az egér fölötte van
-   a:active – a link megjelenése ha éppen aktív (kattintáskor!)
Példa:

a:link {
    color: red;
}
a:visited {
    color: green;
}
a:hover {
    color: hotpink;
}
a:active {
    color: blue;
}

Megjegyzés: az a:hover csak az a:link és az a:visited után következhet.; továbbá az a:activa csak az a:hover után jöhet. Összegezve: a fenti sorrendet érdemes tartani!

text-decoration: szövegdíszítés. Ez a leggyakrabban használt díszítő elem a linkeknél. Általában ez az alapeset:

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}

background-color: háttérszín. Ez már ritkábban használt. Példa:

a:link {
    background-color: yellow;
}
a:visited {
    background-color: cyan;
}
a:hover {
    background-color: lightgreen;
}
a:active {
    background-color: hotpink;
}

A fenti lehetőségeket persze egyesíthetjük, de bele is tehetünk más megoldásokat is. Példa:

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a:hover, a:active {
    background-color: red;
}

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

22.6. fejezet: CSS alapismeretek – Listák

A HTML nyelv alapvetően két típusú listát tesz lehetővé:
- számozatlan lista (<ul>) – az egyes elemeket felsorolásjelek előzik meg.
- számozott lista (<ol>) – az egyes elemek előtt számok vagy betűk vannak.
A fentiek mellett a CSS további lehetőségeket is ad:
- különböző jelek a számozatlan lista elemei előtt
- különféle jelek a számozott lista elemei előtt
- kép használata a felsorolásos elemek előtt
- háttérszín hozzáadása az egyes elemek előtt

list-style-type: A definiált listaelem jelzését határozza meg. Fontos! Csak pár elemnél elemeknél használható.

Paraméterek:
disc (alapértelmezett) egyszerű ovális
circle: sima kör
square: sima négyzet
decimal: számok (pl.: 1,2,3, stb.)
decimal-leading-zero: számok előtti nulla (pl.: 01,02,03,04, stb.)
lower-roman: kicsi római számok (pl.: i, ii, iii, iv, stb.)
upper-roman: nagy római számok (pl.: I, II, III, IV, stb.)
lower-greeek: kicsi görög betűk (pl.: alpha, beta, gamma, stb.)
lower-alpha: kisbetűk (pl.: a,b,c,d, stb.)
upper-alpha: nagybetűk (pl.: A,B,C,D, stb.)
armenian: örmény karakterek
georgian: grúz karakterek
none: semmilyen.

Példa:

ul.a {
    list-style-type: circle;
}
ul.b {
    list-style-type: square;
}
ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}

list-style-image: Egy képet határoz meg, amely listaelem jelzőjeként szolgál.
Paraméterek: none (semmilyen), illetve url(pontosan).
Példa:

ul {
list-style-image: url(/’mintakep.gif’);
}

list-style-position: Meghatározza a listaelem jelzőjének helyét.
Paraméterek: inside (a bekezdésen belül), outside (alapértelmezett; a bekezdésen kívül).
Példa:

ul {
list-style-position: inside;
}

A fenti lehetőségeket persze egyesíthetjük. Példa:

ul {
list-style: square inside url("sqpurple.gif");
}

Alapértelmezés visszaállítása. (Néha erre is szükség van!)
Példa:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Megjegyzés: a felsorolást színesebbé tehetjük, ha az ol vagy ul elemen belül háttérszínt (backgroundcolor), margót (margin), vagy helyhagyást (padding) is használunk.

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

Folytatása következik!

CSS 3. rész