Stíluslapok¶

A HTML tagek további paraméterezése helyett általános megoldást, a stíluslapokat alkalmazzuk. Az alábbiakban áttekintjük ennek alapjait. A témával kapcsolatban kiváló és részletes videó érhető el ezen a linken. (Köszönjük.)

Stíluslap alkalmazása a HTML kódban:¶

A stílusok leírását első megoldásban <style> </style> tagek közt helyezzük el.

 <!DOCTYPE html>
 <html lang="hu">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Stíluslapok</title>

     <!-- stíluslap kezdete -->
     <style type="text/css">
         body {
             background-color: yellow;
         }
     </style>
     <!-- stíluslap vége -->

 </head>
 <body>
     <h1>A CSS</h1>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sem at diam tincidunt,
         ac dapibus ipsum laoreet. Sed posuere ornare velit, eu imperdiet lorem fringilla tempus.
         Praesent in enim pharetra, lacinia mi nec, bibendum urna. Phasellus aliquet ex id suscipit mattis.
         Nunc tempus nulla in sapien faucibus, pulvinar accumsan nibh lobortis. Mauris ornare tristique neque
         semper imperdiet. Quisque quis enim sodales, gravida mauris volutpat, lobortis erat.
     </p>
 </body>
 </html>

A stíluslapot gyakran önálló fájlban helyezzük el azért, mert egy több lapból álló site esetén felesleges pluszmunkát jelentene, hogy annak változásait minden fájlban követni kellene. A stílusinformációkat tartalmazó fájlt rendszerint egy css nevű könyvtáron belül, style.css nevű fájlban írjuk le. (Több ilyen fájl is használható, a látássérülteknek készült változatok rendszerint egy másik fájlban vannak.) A HTML oldalakban így csak egy <link> taget kell elhelyeznünk, mely betölti a meghatározott stíluslap fájlt.

 <!DOCTYPE html>
 <html lang="hu">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/style.css">
     <title>Stíluslapok</title>

 </head>
 <body>
     <h1>A CSS</h1>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sem at diam tincidunt,
         ac dapibus ipsum laoreet. Sed posuere ornare velit, eu imperdiet lorem fringilla tempus.
         Praesent in enim pharetra, lacinia mi nec, bibendum urna. Phasellus aliquet ex id suscipit mattis.
         Nunc tempus nulla in sapien faucibus, pulvinar accumsan nibh lobortis. Mauris ornare tristique neque
         semper imperdiet. Quisque quis enim sodales, gravida mauris volutpat, lobortis erat.
     </p>
 </body>
 </html>

A css/style.css tartalma:

body {
    background-color: yellow;
}

Az oldal megtekintéséhez kattintson ide.

Bekezdés formázása¶

A bekezdések formázását számos stíluselemmel végezhetjük:

body {
    background-color: yellow;
}
p {
    color: darkgray;               /* szöveg színe */
    background-color: lightgray;   /* háttér színe */
    font-family: verdana;          /* betűtípus */
    font-size: 16px;               /* karakterek mérete pixelben */
    border: 1px solid darkgray;    /* körvonal vastagsága, jellege és színe */
    border-radius: 10px;           /* körvonal csúcsainak lekerekítése */
    padding: 5px;                  /* A beltartalom távolsága a körvonaltól */
    margin: 10px;                  /* A körvonal külső margója  */
}

h1 {
  font-size: 40px;
  color:#0000FF;
}

Az oldal megtekintéséhez kattintson ide.

Megjegyzés

A stílusok leírását és hatásait a böngésző Inspect Element menüpontjában lehet nyomon követni.

Táblázatok¶

Az index.html tartalma legyen az alábbi:

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Stíluslapok</title>

</head>
<body>
    <h1>Egy táblázat</h1>
    <table>
        <tr>
            <th>Név</th>
            <th>Születési év</th>
            <th>Lakhely</th>
        </tr>
        <tr>
            <td>Szabó Pál</td>
            <td>1992</td>
            <td>Kiskunlacháza</td>
        </tr>
        <tr>
            <td>Kiss Lajos</td>
            <td>1995</td>
            <td>Budapest</td>
        </tr>
        <tr>
            <td>Kovács Emese</td>
            <td>1945</td>
            <td>Pécs</td>
        </tr>
        <tr>
            <td>Redele Ilona</td>
            <td>2010</td>
            <td>Bánhorváti</td>
        </tr>
    </table>

</body>
</html>

A formázást végző css/style.css tartalma:

body {
    background-color: black;    /* Az oldal háttere fekete */
}

h1 {
    font-size: 40px;
    color: orange;
    text-align: center;         /*  a szöveg középre igazított */
}

table {
    width: 90%;                 /* a szélesség az oldal szélességének 90%-a */
    margin-left: auto;          /* a bal és a jobb margó értékét automatikus  */
    margin-right: auto;
    border-collapse: collapse;  /* a cellák közti távolság legyen 0 */
}

table, th, td {                 /*  a table, th és a td tulajdonságait együtt állítjuk be */
    border: 1px solid white;
    padding: 0px;
    color: white;
}

th {                           /* a korábbi tulajdonságokat kiegészítjük, vagy felülírjuk */
    background-color: #4fa772;
    text-align: center;
    padding: 20px;
}

td {
    border: 1px solid white;
    text-align: center;
    padding: 5px;
}

.graybackground {              /* Saját stílus létrehozása: a név ponttal kezdődik */
    background-color: #e7e9eb; /* Használata: class="graybackground" */
}

Osztálystílusok¶

A stílusok megadásával eddig az egyes tagek megjelenését módosítottuk, hatásuk a tag minden egyes példányára érvényes volt. Készíthetünk olyan stílusokat is, amelyek nem egy-egy taghez kötődnek, hanem szabadon, tetszőleges módon hozzárendelhetők egy egy elemhez.

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Osztálystílusok</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <p class="piros">Piros szöveg.</p>
    <p class="kek">Kék szöveg.</p>
    <p class="zold">Zöld szöveg.</p>

</body>
</html>

A stílus hozzárendelését a class paraméterrel lehet megtenni, ahol a stílus nevét kell megadni. Az osztálystílusok meghatározása azonban kissé eltér az eddig látottaktól: azért, hogy egyértelmű legyen, hogy egy html taget akarunk módosítani, vagy egy új, saját stílust akarunk létrehozni, utóbbiak nevét a css fájlban (tehát a stílus definíciójakor) ponttal kell kezdeni. Ezek kiemelve láthatók az alábbi ábrán.

 .kek {
     color: blue;
 }
 .piros {
     color: red;
 }
 .zold {
     color: green;
 }

Az oldal megtekintéséhez kattintson ide.

A Span Tag¶

Hogyan tudjuk alkalmazni a fenti stílusokat a szöveg egy részének kiemelésére? Lássuk ezt egy példán keresztül! A megoldáshoz a <span> </span> tageket fogjuk felhasznáni, melyek önmagukban az oldalon semmilyen változást sem eredményeznek, viszont alkalmasak arra, hogy stílusokat rendeljünk hozzájuk úgy, ahogyan azt az alábbi példa mutatja. Az egyszerűség kedvéért ezt a példát most egyetlen fájlban alakítjuk ki.

 <!DOCTYPE html>
 <html lang="hu">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>A Span Tag</title>
     <style>
         .fontos {
             color: white;
             background-color: red;
             padding: 5px;
             border: 1px solid black;
         }
     </style>
 </head>
 <body>
     <p>Lorem ipsum <span class="fontos">dolor</span>, sit amet consectetur
         adipisicing elit. Consequuntur illo maxime, hic sunt neque cum
         ex ea voluptate soluta. Itaque numquam hic vel perspiciatis eos voluptatum
         nobis enim praesentium officia?</p>
 </body>
 </html>

Az oldal megtekintéséhez kattintson ide.

Linkek¶

A linkek megjelenésének meghatározása szintén elvégezhető stílusok alkalmazásával. Azért, hogy a példáink egy kicsit életszagúbbak legyenek, formázásukban osztálystílusokat is alkalmazni fogunk. Kiinduló oldalunkon szerepeljen három link két különböző stílusban:

 <!DOCTYPE html>
 <html lang="hu">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Linkek</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <a href="#">Első link</a>
     <a class="btnStyle" href="#">Második link</a>
 </body>
 </html>

Az alábbi css fájlban négy stílusdefiníció szerepel, az első az a tag megjelenését a teljes oldalra nézve módosítja, a btnStyle stílus pedig egy gombszerű megjelenést ír le, mely bármelyik elemhet is szabadon hozzárendelhető. Mindkét stílushoz tartozik egy eddig nem látott módosító, a :hover. Ez egy újabb stílust definiál, melyet a linkek akkor vesznek fel, amikor az egérkurzor rájuk kerül. Ennek megtekintéséhez kattintson ide, és vigye az egérkurzort a linkekre.

 a {
     color: blue;
     text-decoration: none;
 }
 a:hover {
     color:red;
     border-bottom: 1px dotted red;
 }
 .btnStyle {
     color: white;
     text-decoration: none;
     background-color: orange;
     border: 1px solid #A8A8A8;
     border-radius: 5px;
     padding: 3px;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     font-size: 12px;
 }
 .btnStyle:hover {
     color: orange;
     background-color: white;
     border: 1px solid orange;
 }

Megjegyzés

Érdemes tudni, hogy nem csak a link stílusaihoz tartozhat :hover, hanem más elemekhez is, ezzel pl. egy h1 vagy p tartalma is megváltoztatható.

Betűtípusok¶

A szövegek betűtípusát alapvetően a font-family beállításával lehet meghatározni. Mivel a fejlesztő nem tudhatja előre, hogy az oldalt milyen operációs rendszeren fogják megnézni, és hogy azon rendelkezésre áll-e majd az adott betűtípus, ezért nem csak egyet érdemes megadni úgy, ahogyan az az alábbi példában is látható.

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Betűtípusok</title>
    <style>
        p {
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At aspernatur ratione esse repellendus, doloremque est! Rerum, quo accusantium consequuntur aspernatur sequi tenetur consectetur sunt velit fugiat earum modi corrupti provident?</p>
</body>
</html>

Az oldal megtekintéséhez kattintson ide.

A fenti megoldás mellett a Google számos betűtípust tesz elérhetővé, melyeket szabadon beépíthetünk oldalainkba. A betűtípusok kiválasztása a https://fonts.google.com oldalon végezhető el, mely egyértelmű segítséget nyújt az oldalban történő elhelyezésre is. A css fájl első sorában a Google leírása alapján importáljuk a kiválasztott betűtípust, majd a harmadik sorban annak felhasználása látható a h1 és a p tagekre.

 @import url('https://fonts.googleapis.com/css2?family=Mynerve:wght@700&display=swap');
 h1, p {
     font-family: 'Mynerve', cursive;
 }

Maga az oldal nem tartalmaz stílusfdefiníciót, hiszen azokat a fenti css fájlban tettük meg:

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Fonts</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Üdvözöljük a konferencián!</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    Ducimus minima necessitatibus quo corrupti ab consequatur, labore
    quisquam. Tenetur suscipit labore voluptates eum. Et, laborum libero!
    Odit perferendis est eos veritatis.</p>
</body>
</html>

Az oldal megtekintéséhez kattintson ide.

Veszély

A Google a betűtípusok letöltését minden bizonnyal naplózza, és ezzel további információkat gyűjthet a látogatóiról. Ezért annak használatát biztonsági szempontok figyelembevétele mellett érdemes megfontolni.

Képek¶

Képek megjelenítésére az img szolgál, melynek megjelenése gazdagon szabályozható. Az alábbi példában ismét csak egy fájllal dolgozunk, és a stílusok megadásának egy harmadik módját, a inline megadási formát alkalmazzuk, melynek során a stílus leírását közvetlenül az elemben, a style paraméterben soroljuk fel. Ez látható az alábbi példa 11. sorában, ahol a bal oldalon „lebegő” 300 pixel szélesre méretezett képet az azt követő szövek körbefolyja.

 <!DOCTYPE html>
 <html lang="hu">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Kép megjelenítése</title>
 </head>
 <body>
     <h1>Doloribus, alias sit culpa</h1>
     <img style="width: 300px; float: left;"
     src="https://api.spgnordic.com/wp-content/uploads/2021/04/nvh2q1tu03-01-s.png"
     alt="Vespa"
     >
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ut
         inventore cumque sed atque, et veniam tempora, deserunt laudantium
         aperiam, repudiandae placeat nemo eligendi! Dolor libero nulla vero
         quia pariatur! Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Velit, eum cupiditate ex, voluptatum quod possimus optio voluptatibus
         autem culpa, ducimus quo! Ut, ipsam. Optio voluptate voluptatem
         consequuntur cupiditate officiis animi. Lorem ipsum dolor, sit amet
         consectetur adipisicing elit. Adipisci reiciendis officiis dolorum natus
         necessitatibus iure, aperiam expedita ad minima similique commodi
         tempore labore? Soluta earum iste, non temporibus nulla ullam!
     </p>
 </body>
 </html>

Az oldal megtekintéséhez kattintson ide.

Űrlapok¶

Az űrlapok formázásakor számos stílusdefiníciós lehetőség áll rendelkezésre, melyekből néhány jellemző:

input: minden input mezőre érvényes tulajdonság beállítása.
select: a select lista beállításainak meghatározása.
input[type=password]: csak a password típusú beviteli mezőre érvényes beállítások meghatározása.
input[type=radio]: a rádiógombok beállításainak meghatározása.
input:focus: a beviteli mezők sítlusai abban az esetben, amikor azok éppen kitöltés alatt vannak.
input[type=submit]: az űrlap kitöltésének befejezését jelző gomb stílusainak meghatározása.
input[type=submit]:hover: az űrlap kitöltésének befejezését jelző gomb aktív állapotához tartozó meghatározása.

<!DOCTYPE html>
<html lang="hu">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Stíluslapok</title>

</head>

<body>
    <form method="post" action="processit.php">
        Név: <input type="text" name="nev" value="Kiss Lajos"><br>

        Jelszó: <input type="password" name="jelszo" value=""><br>

        Renault: <input type="radio" name="marka" value="renault" selected>
        Dacia: <input type="radio" name="marka" value="dacia"><br>

        Vegetariánus: <input type="checkbox" name="vega" value="t" checked><br>

        Lakhely: &nbsp;
        <select name="lakohely">
            <option>Főváros</option>
            <option>Megyeszékhely</option>
            <option>Község</option>
            <option>Falu</option>
            <option>Egyéb</option>
        </select><br>

        Megjegyzés:<br>
        <textarea name="megjegyzes">Adja meg a megjegyzést!</textarea><br>

        <input type="hidden" name="rejtett_ertek" value="23">
        <input type="submit" name="submit" value="Beküldés">
        <input type="reset" name="reset" value="Törlés">
    </form>
</body>

</html>

A css/style.css tartalma:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

body {
    background-color: #AAAAAA;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: bold;
}

input {                                   /* az összes input tagre érvényes tulajdonságok */
    width: 300px;
    padding: 5px;
    margin-left: 10px;
}

input:focus,
select:focus,
textarea:focus {                         /* stílusok a felsorolt elemek fókuszba kerülésekor */
    background-color: yellow !important;
    border: 3px dotted red;
}

input[type=password] {                   /* a jelszó beviteli mező stílusa */
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    color: red;
}

input[type=radio] {                       /* a rádiógombok stílusa */
    width: 30px !important;
}

select {                                  /* a legördülő lista stílusai */
    width: 90%;
    padding: 10px;
}

textarea {                                /* textarea stílusa */
    width: 90%;
    height: 50px;
}

input[type=submit], input[type=reset] {   /* a submit és a reset gombok stílusai */
    background: #4fa772;
    border: 1px solid white;
    border-radius: 5px;
    width: auto;
    padding: 10px;
    cursor: pointer;
}

input[type=submit] {                      /* A submit gomb további stílus beállítása */
    background: #4fa772;
}

input[type=reset] {                       /* A reset további beállítása */
    background: orange;
}

input[type=reset]:hover {                 /* Az inputnak is van :hover-je*/
    background: black;
    color: orange;
}

Az oldal megtekintéséhez kattintson ide.

A div¶

A <div> (rövidítés a „division” vagy „divisor” szóból) egy HTML elem melynek nincs speciális megjelenési formája és funkciója. Konténerként működnek, amelyet CSS-stílusokkal lehet formázni.

<div class="myDiv">
    Lorem Ipsum
</div>

.myDiv {
    background-color: red;
    color: white;
    position: absolute;
    top: 30px;
    left: 100px;
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 1px solid darkred;
    border-radius: 5px;
}

Todo: Dobozmodell.

Stílus megadási módok:¶

Inline:

<p style="color: blue; font-size: 16px;">Lorem Ipsum.</p>

Elem:

p {
   color: blue;
}

Egy elem id tagje alapján:

<p id="fejlec">Lorem Ipsum</p>


#fejlec {
   color: red;
}

Osztály szelektor:

<p class="fontos">Lorem Ipsum</p>


.fontos {
   color: red;
   background-color: white;
}

Univerzális:

Ez a kiválasztó minden elemre érvényes lesz.

* {
    text-align: center;
}

Csoportosítás:

h1, h2, h3 {
    color: red;
}

Adott elemen belül: Az img tag jelentése a fejléc id-jű elemen belül:

#fejlec img {
    width: 200px;
}

Gyakorlatok¶

Készítse el a gyakorlat-1 linken megtekinthető oldalt! A munka során csak abban az esetben nézze meg az oldal forrását, amennyiben nem tud továbblépni. Az oldalban megjelenő fénykép legyen tetszőleges, az internetről letöltött kép, melyet az images könyvtárban helyezzen el! Az alkalmazott betűtípusook a Roboto és a MyNerve.

Feladatok¶

A korábban elkészített oldalakat formázza meg ízlés szerint stíluslap használatával!

Formázza a önéletrajzoldalát stíluslapok segítségével!
Formázza a heti órarendjének táblázatát stíluslapok segítségével!
Készítsen egy két-három oldalas szöveget, melyben a címsorok, a karakterstílusok formázását kizárólag stíluslapokkal végzi! Csillogtassa tudását, vonultasson fel minél több elemet az oldalban úgy, hogy igyekezzen azt ízlésesen tartani!
Formázza a céges vacsora jelentkezési űrlapját CSS-sel!
Formázza a naptár oldalt CSS-sel!
Validálja az elkészíett lapok tartalmát, és javítsa az esetleges hibákat!