Fizika, matek, informatika érettségi

Home Fizika Excel Access
Python az érettségin Python elmélet Egy megoldás evolúciója Python feladatgyűjtemény
Követelmények A weblapokról általában CSS, háttérkép, háttérszín HTML elemek
A weboldalról ☰
A CSS alapjai

A CSS alapjai, háttérszín, háttérkép


A CSS a megjelenítést (pl. szövegszín, keret), egyes esetekben az elemek viselkedését (pl. animálás, megjelenés, eltűnés, oldal layout, reszponzibilitás) szabályozza.

CSS csatolása a HTML-hez

A CSS leírások egy-egy html elemhez kapcsolódnak, amit megadhatunk ...

  1. közvetlenül az elem HTML címkéjének a részeként a style="…" tulajdonsággal, ez az inline CSS

    Pl. ha kék betűs bekezdést akarunk írni: 
    <p style="color: blue;">Ez egy kék bekezdés.</p>

  2. a HEAD részben a <style>…</style> címkék között.


  3. külön stílusleíró fájlban (általában style.css), ekkor a HEAD részben megadjuk ennek a fájlnak a nevét.

    A következő példában a style.css fájl tartalma egyetlen sor:

    p.kek {color: blue;}

    Ha a style.css fájl a weboldallal megegyező mappában található, a HTML fájlba elég beleírni a következőket:

    <head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="kek">Ez egy kék bekezdés.</p>
</body>

    Azért érdemes külön fájlba szedni a stílusok leírását, mert ekkor:

     

    A CSS utasítás formája

    Minden CSS utasítás így néz ki: selector {tulajdonság: érték;}, ahol

    1. a selector (magyarul kijelölő) mondja meg, milyen html elemre vonatkozik a stílusformázás, pl. p esetén a dokumentum összes bekezdésére;
    2. a tulajdonság mondja meg, mit formázunk, pl. color a betűszín;
    3. az érték adja meg a tulajdonság beállítását, pl. #ff0000 piros színt ír le.

      Összegezve a p {color: #ff0000;} CSS bejegyzés az írja le, hogy minden bekezdés legyen piros színű.

    Több féle selectort használunk, ld https://www.w3schools.com/cssref/css_selectors.php. A leggyakoribbak:
    selectorértelmezéspéldahatása
    egy html tagminden elemre érvényesp {color: blue;}minden bekezdés kék színű lesz
    egy osztályminden elemre érvényes, ahol megadják a class="osztálynév" tulajdonságot.p1 {background-color: #c3c3c3;}minden éritett elem háttere adott színű lesz
    egy adott elemarra az elemre érvényes, ahol megadják a id="név" tulajdonságot#név {border: 1px solid rgb(100,100,100);}az elem kerete adott vastagságú, stílusú és színű lesz
    egérmutató fölé húzásaminden elemre érvényes, ahol megadják a class="oszt" tulajdonságot.oszt:hover {transform: scale(0.7);}az egérmutatót fölé húzva megváltozik az elem mérete


    Példák:

    1. Ha minden bekezdést szeretnénk kékkel írni, akkor a p címkéhez határozunk meg kék betűszínt. 
      <head>
<style>
p {color: blue;}
</style>
</head>

    2. Ha csak bizonyos bekezdéseket akarunk kékkel írni, akkor stílusosztályt (class) hozunk létre, és arra hivatkozunk a bekezdés meghatározásánál (a class tulajdonságban megadjuk a definiált osztály nevét).

      <head>
<style>
p.kek {color: blue;}
</style>
</head>
<body>
<p>Ez sima bekezdés.</p>
<p class="kek">Ez egy kék bekezdés.</p>
</body>

      Van még több lehetőség, ld (angolul): https://www.w3schools.com/html/html_css.asp

     

    RGB színkeverés

    A színek leírására is több lehetőség van a CSS-ben

    (https://www.w3schools.com/html/html_colors.asp)

    Kombináljuk a dolgokat! Legyen Piroska félkövérrel is szedve! Ezt elérheted a már korábban ismert <b>…</b> címkékkel, de CSS-sel is:

    <p style="color: blue;"><span style="color: red;"><b>Piroska</b></span> és a farkas nem voltak jóban.</p>

    Piroska és a farkas nem voltak jóban.

    <p style="color: blue;"><span style="color: red; font-weight: bold">Piroska</span> és a farkas nem voltak jóban.</p>

    Piroska és a farkas nem voltak jóban.

     

    Háttér beállítása

    Az egyes elemek (pl. táblázatcellák, blokkok) hátterének beállítása ugyanolyan lehetőségeket tartalmaz, mint az egész dokumentum hátterének beállítása. A weboldalon van lehetőség területeket meghatározni a <div>…</div> címkékkel, a responsive weboldalak is ilyenekkel dolgoznak. A méreteket ilyenkor %-os mértékben adják meg, így az oldal szélességétől függően változik a területek (blokkok) mérete is.

    Ha weblap hátterének képet adunk meg, akkor figyelni kell arra, hogy a kép melyik mappában van. Egyszerű weblapoknál a weblap HTML fájljával egy mappába rakjuk, és sima fájlnévvel hivatkozunk rá.

    Ha egy weboldal sok képet használ, azokat külön (pl. img) mappába szokás rakni – ilyenkor a fájlnévvel együtt megadjuk a képeket tartalmazó mappa elérési útját is:

     

    A teljes weboldal háttérszínét vagy háttérképét a <body> tagnál adjuk meg, de csak CSS-sel. Példák:

    <body style="background-image: url(hatter.jpg);">
    <body style="background-color: yellow;">
    <head><style>body {background-color: #55AA00;}</style></head>

    Az igazsághoz hozzá tartozik az is, hogy régebben HTML attribútumként (jellemzőként), CSS nélkül is megadható volt a háttérkép és a háttérszín, de a szabványok fejlődése abban az irányban halad, hogy ahol lehet, inkább CSS-t használjunk. A HTML 5 nem támogatja, de itt megtalálod a részleteket: http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/tags/tag_body.asp.html#gsc.tab=0.


    Az egyes blokkok háttérszínének, háttérképének beállításai:

     

    A leggyakoribb CSS tulajdonságok

    Eddig volt: color és háttér jellemzők. Figyelj oda, a mértékegység (pl. px, %, em...) előtt ne legyen helyköz!

     

     

    És ismétlésként: mindezt megadhatod

     

     

    Copyright © Vidra Gábor | Adatkezelési tájékoztató, impresszum