Cascading Style Sheets - CSS

(3.x verzió)


Forrás (lyften.com)

Hypertext Markup Language - HTML

A HTML betűszó a Hyper Text Markup Language nevet fedi. A "Hyper Text" rész arra utal, hogy a HTML-lel létrehozott szövegekben más szövegekre mutató linkek találhatók, a "Markup Language" pedig leíró nyelvet jelent angolul. A HTML a web standard leíró nyelve, amelyet weboldalak létrehozására használunk. A HTML az oldalak struktúráját határozza meg. Ennek az alapját a HTML tagek (ejtsd: teg, jelentése: címke) szolgáltatják, amelyekkel mintegy felcímkézhetjük az oldalt alkotó elemeket, így a böngésző képes azokat felismerni és elkülöníteni egymástól. A standard jelenlegi, legfrissebb verziója a HTML5.

A HTML (hiperszöveges jelölőnyelv) nyelvet weboldalak leírására találták ki. A HTML általában szöveges állomány. Ez tartalmazza azokat a szimbólumokat (tag-eket), amelyek a megjelenítő programnak (webböngésző: Mozilla Firefox, Google Chrome, Internet Explorer, stb.) leírják, hogyan is kell megjeleníteni illetve feldolgozni az adott fájl tartalmát.
Hosszabb leírás itt a wikipédián

Alap HTML


Megjelenése (Firefox)



A fenti "alap_css0.html" fájl innen letölthető, ezt formázgatjuk majd alább stílusokkal.

A CSS nyelvtana

A CSS az angol Cascading Style Sheets (rangsorolt stíluslapok) kifejezés rövidítése. A CSS egy stílusleíró nyelv, amelyet azért hoztak létre, hogy képesek legyünk befolyásolni a tartalom megjelenését. Ha emlékszel, a HTML alapok projektben többször is említettük, hogy a HTML csak a tartalom strukturálásáért felel. A CSS az érem másik oldala – ez a nyelv csak azt mondja meg, hogyan fog kinézni az a bizonyos paragrafus vagy címsor az oldalon. A HTML és a CSS két külön célt szolgál, és soha nem keverendő egymással.

A stílusokat a kijelölő és a meghatározások segítségével lehet megadni. A kijelölő megmutatja/kijelöli, hogy a stílus a HTML lap melyik elemére vonatkozik (példánkban a h1 címsor). A meghatározások blokkját kapcsos zárójelek közé kell zárni!
A meghatározás szintén két részből áll: elöl a tulajdonság, amelyet kettőspont és egy szóköz követ, végül az érték, ami után pontosvessző van.

A stílusdefiníciót nem kötelező így elrendezni, de ez áttekinthetőbb. Írhattuk volna egy sorba is:
h1 { font-family: Arial; font-size: 32px; color: DarkBlue; text-align: center; }

Stílusok elhelyezése HTML fájlokban

Szövegközi stílusok

A stílusokat a szövegtörzsbe helyezik a megfelelő elembe (tag-be), ezek csak egyszer használatos formázási utasítások. (Hátránya az, hogy a tartalom "összekeveredik" a formával.)

Ezt láthatjuk mindhárom esetben a stílusok hatására.


Beágyazott stílusok

Ezeket a stílusokat a HTML dokumentum fejrészébe helyezik (nevezik emiatt belső stílusnak is). Hatásuk csak erre a dokumentumra korlátozódik.


Külső stílusok

A külső stíluslap egy külön szöveges dokumentum:

  • egyszerű szövegszerkesztővel készítjük (nem Word!)
  • kiterjesztése .css
  • a rá való hivatkozást a html dokumentum fejrészében helyezzük el (<link href=...)
  • több HTML dokumentumban is felhasználható

Az alaposabb megértéshez célszerű az egyes stílusokat illetve meghatározásokat egyesével beírni, a stílus-tulajdonságok értékét módosítani!

Színek nevei és használata

Telítettség szerint


Világosság szerint


Ábécé sorrendben


A teljes CSS-3 színskála (140 szín) itt a wikipédián található.
Néhány stílus színekkel:

Margók használata

A margó egy bizonyos távolság a választott elem és az azt tartalmazó elem közt. Ez a távolság lehet az elem felett (top), alatt (bottom), tőle jobbra (right) vagy balra (left).

Például a <p style='margin-left:50px;'>Szöveg </p> bekezdést a "body" elem tartalmazza, így a bekezdés előtt (azaz tőle balra) 50 pixel távolság lesz.

Ezt a képet a következő HTML fájl "produkálta": margin.html
(Én a CTRL és + billentyűk egyszerre való többszöri lenyomásával nagyítgattam rajta, a CTRL+0 pedig visszaállítja az eredeti méretet).

A margin.html forrása a CTRL+U billentyűkombinációval nézhető meg.


Az egyes stílusok itt (a megfelelő gombra kattintva) egyedileg is megtekinthetők:



Az utolsó margómegadás esetén az első érték a "top", majd "right, bottom és left", azaz az óramutató járásával egyező irányba haladva: fenn, jobbra, lenn, balra.

Szövegek formázása

Címsorok, bekezdések, listák formázása

h1 {                                a legmagasabb szintű címsor a kijelölő, tehát ezek lesznek ilyenek
    font-family: Arial,sans-serif;  a betűtípus Arial legyen, ha nincs, akkor bármilyen talpatlan
    font-size: 180%;                a betűméret a böngésző alapértelmezett értékének 180%-a
    color: IndianRed;               a betűszín IndianRed (kb. barnásvörös)
    text-align: center;             igazítsuk a lap közepére
 }
p {                       az összes bekezdésre vonatkozzon
    font-size: 16px;      a betűméret 16 pixel (képpont) legyen
    line-height: 150%;    a sorok távolsága legyen az alapértelmezett érték 150%-a (másfélszerese)
    margin-left:20px;     baloldali margója balról 20 pixel
 }

ol li {                          minden sorszámozott lista minden elemére
    font-weight: bold;           vastagított lesz
    font-style: italic;          (és még) dőlt betűs
    text-decoration: overline;   föléhúzásos (underline-aláhúzás, line-through-áthúzás)
    background-color: Azure;     a háttérszín Azure (halványkék, azúr)
 }

li {                      az ol és az ul listák mindegyikének elemeire hat
    margin-right: 50%;    előbb beállítjuk a jobboldali margót a lap közepére
    text-align: right;    a listát jobbra igazítjuk (a lap középső vonalához "simulnak")
 }
p {
    text-align: justify;  a szövegek mind a bal, mind a jobb oldalra szépen rendeződnek (Word-ben sorkizárt)
 }

h4 {                                 a 4-es szintű címsorokra
    border-bottom: 2px solid Blue;   alatta 2px vastag, folytonos (lehetne double,dotted,dashed,stb.) kék vonal
 }
p span {                             bekezdésbeli span tag-eknél (pl. <p> nem keretes <span>keretes</span> ez sem </p>)
    border: 3px double Red;          3px vastag, dupla vonalas, vörös színű szegély lesz körben
 {
h5, h6 {                             az 5-ös és a 6-os szintű címsorok mindegyikére
    border-top: 1px dotted Green;    1px-es, szaggatott, zöld vonal van felettük
 }



Listák speciális formázása

ul {                            minden felsorolás listajeleire vonatkozik
    list-style-type: square;    tömör négyzetek (circle-üres kör, disc-tömör kör,alapértelmezett, none-nincs)
    color: DarkRed;             színe vörös (a listajelé is)
 }
ul ul {                         a lista második (belső) szintjére hat
    list-style-type: none;      nem lesz listajel
    line-height: 150%;          de a sorok távolsága 50%-kal nő
 }

ol {                                minden sorszámozott lista listajelei
    list-style-type: upper-latin;   latin nagybetűk (lower-roman-kisbetűs római szám, decimal-szám,alapértelmezett)
    margin-left: 20px;              20 pixellel jobbra toljuk (bal felére 20px margó)
 }
ol ol {                             a lista második (belső) szintjére hat
    list-style-type:lower-greek;    görög kisbetűk
    background-color: LightYellow;  háttérszíne halványsárga
 }

Képek használata

Stílus nélkül

Széncinke, de nem látszik

<img src='imgs/cinke.jpg' alt='Széncinke, de nem látszik' title='Széncinke, eredeti mérete: 300x200px'>

A kép jellemzői:

  • src - használata kötelező, a forráskép helyét, nevét adja meg
  • alt - célszerű megadni, ha a képet nem találja a böngésző, akkor ezt írja ki (vakbarát is!)
  • title - ha megadjuk, a képre téve az egérkurzort, ez a szöveg is látszik

Széncinke, de nem látszik

<img src='imgs/cinke.png' alt='Széncinke, de nem látszik' title='Széncinke 300x200px'>

A kép neve "cinke.jpg" és nem "cinke.png", mivel a böngésző nem találja, az "alt" utáni szöveget írja ki.


Széncinke, de nem látszik

<img src='imgs/cinke.jpg' alt='Széncinke, de nem látszik' title='Széncinke 300x200px' width='600'>

A megadott szélesség (width) kétszerese az eredetinek, tehát nagyítottuk (a magasság is automatikusan dupla lett).

Vegyük észre, hogy a "600"-as érték mögött nincs mértékegység (automatikusan pixel lesz)!


Széncinke, de nem látszik

<img src='imgs/cinke.jpg' alt='Széncinke, de nem látszik' title='Széncinke 300x200px' height='100'>

A megadott magasság (height) fele az eredetinek, tehát kicsinyítettük (a szélesség is automatikusan fele lett).


Széncinke, de nem látszik

<img src='imgs/cinke.jpg' alt='Széncinke, de nem látszik' title='Széncinke 300x200px' width='600' height='100'>

Mindkét méretet módosítottuk, de nem az erdeti arányban, emiatt a kép eltorzult.



Stílusokkal



<img src='imgs/cinke.jpg' style='margin-right:40px;'>

<img src='imgs/cinke.jpg' style='border:5px solid DarkGreen;'>

<img src='imgs/cinke.jpg' style='margin-left:20px;border:1px solid black;border-right:5px solid black;border-bottom:5px solid black;'>

A három képmegadás egymás alatt van (lehetne egy sorban is). Figyeljük meg a margókat, illetve a szegélyek színét, vastagságát!



<a href='https://hu.wikipedia.org/wiki/Sz%C3%A9ncinege'><img src='imgs/cinke.jpg' title='Kattints!' style='height:50px;'></a>

A képre kattintva elugrik a megfelelő wikipédia oldalra.


<a href='imgs/cinke1.jpg'><img src='imgs/cinke.jpg' title='Kattints!' style='height:50px;'></a>

A képre kattintva az kinagyítódik.


1. A háttérben a széncinege halványított képe, az előtérben (rajta) egy táblázat két cellával.2.cella

<table style='width:300px;height:200px;background-image:url(imgs/cinke2.jpg);'>
    <tr>
        <td>1. A háttérben a széncinege halványított képe, az előtérben (rajta) egy táblázat két cellával.</td>
        <td style='border:1px dotted DarkGreen;'>2.cella</td>
    </tr>
</table>

A táblázat a képpel azonos méreteket kap (300x200), majd megadjuk a háttérkép elérhetőségét (url-jét). Ez hasonlít a háttérszín megadásához (background-color:...;). A második cella köré sötétzöld, pontozott keretet rajzolunk.



<div style='width:600px;height:300px;background-image:url(imgs/cinke2.jpg);'></div>

A "div" egy tároló elem a HTML-ben. (Most ugyan nincs benne semmi!) Mivel nagyobb, mint a háttérkép, a böngésző megpróbálja mindkét irányban "kitapétázni".


Széncinke

<figure style='width:304px;border:1px solid black;'>
    <img src='imgs/cinke.jpg'>
    <figcaption style='margin:10px;text-align:center;'>Széncinke</figcaption>
</figure>

A "figure" és a "figcaption" a HTML5 újítása a képaláírás megkönnyítésére, ezt csak egy kis fekete szegéllyel, és a képaláírás középre igazításával szépítettük. Vegyük észre, hogy a "figure" szélességét egy kicsit nagyobbra vettük a kép 300 pixeles szélességénél!


A fenti képformázások egyetlen fájlban is megnézhetők: itt. Mentsük le, és próbáljuk módosítgatni a benne lévő stílusokat!

Táblázatok használata

Táblázat használata stílus nélkül

A látvány



A HTML kód


A "table" felépítése hasonló a "html" laphoz. Van "head", "body" (sőt "foot" is, csak előttük a "t" betű). A sorokat "tr", a cellákat a "td" vagy a "th" határolja. (Utóbbi alapból félkövér és középre igazított.)

A "border" itt a táblára és a cellákra is hat, a szélesség pixelben értendő, enélkül a cellatartalmak összessége adja a táblázat szélességét.

Táblázatok használata stílusokkal

     

A fenti táblázatok és formázásuk egyetlen fájlban is megnézhető: itt. Mentsük le, és próbáljuk módosítgatni a benne lévő stílusokat!