Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: ]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 362316

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [55266]
2. CSS
Bevezetés a CSS alapjaiba [30762]
3. CSS
A pozícionálás, és a z-index [30252]
4. CSS
A felhasználói felület - első rész [24595]
5. CSS
Függőleges menü, legördülő almenüvel [24463]
 

 

CSS -> Bevezetés a CSS alapjaiba

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-02-23 21:11:32
Lektorálta: adrob
Lektorálva:
2005-10-01 12:06:28 [30762]
A HTML kevés lehetőséget az oldalak formázására, tulajdonságaik beállítására.
Ezért bevezették a CSS-t (cascading style sheets - egymásba ágyazott stíluslapok), amely a HTML-t hivatott kiegészíteni.
A CSS nagymértékben megkönnyíti, és gyorsabbá teszi munkánkat, mivel elég csak az oldalainkhoz tartozó stíluslapot módosítani.
Míg HTML-ben például egy száz soros szöveg minden mondatának kezdőbetűjét zöldre akarjuk színezni, akkor az összes ilyen helyrebe kellene írnunk a megfelelő kódot, ami elég sokáig tartana. Ugyanezt CSS-ben elérhetjük pár másodperc alatt.

1. A stíluslapok csatolása



A stíluslapot használhatjuk egy adott csoportra, egy elemre vagy akár egy adott részletre is.
Ha külön file-ba tesszük a CSS-t (amit ajánlok) és ezt a file-t importáljuk, elég csak a HTML
</head> tag-je elé beírnunk:
<style type="text/css">

        @import "style.css";

</style>

Megadhatjuk másképp is az oldalhoz kötődő stíluslapot:
<link href="style.css" rel="stylesheet" type="text/css">

De lehetőségünk van az oldalba is elhelyezni a kódot:
<style type="text/css">
      .......
</style>

Ha külön stíluslapot használunk, akkor annak legyen .css a kiterjesztése. Ezt megírhatjuk egy egyszerű szövegszerkesztőben is, amit később átnevezünk. Ha módosításra kerül a sor, nem kell megnyitni, belejavítani a HTML forrásába, elég csak CSS file-t módosítani.

2. Szinatkszisa



Vegyünk egy egyszerű példát a könnyebb megértés kedvéért:
Előbb nézzük meg a CSS-t:
H2 {
      color: green;
}
.kiemeles {
      color:blue;
}

Az ehhez tartozó HTML:
<H2>
 Első példa a 
  <SPAN CLASS="kiemeles">
      kiemelés
  </SPAN>
</H2>


Ez esetben a szöveg minden betűje zöld lesz, a "kiemelés" szöveg pedig kék.
Az első kapcsos zárójel előtti rész neve szelekor, amivel megadhatjuk, hogy az oldal mely részére vonatkozzon a megadott tulajdonság. A szelektor tartalmazhat HTML elemet, osztályt, azonosítót, illetve látszólagos elemet is.
Vegyük őket külön, részletesebben:
Osztály:
Az osztály nevét "." vezeti be, amint az látható volt a fenti példában is. Attribútuma CLASS=" ".
Azonosító:
Az azonosítót egy "#" vezeti be, attribútuma az ID=" ".
Figyeljünk arra, hogy az azonosítók egyediek tehát csakis egyszer használhatók.
Ide tartozó CSS kód:
#azonositoblokk {
      background-color: red;
}


... és a HTML:
<div id="azonositoblokk"> Az azonositoblokk tartalma ... (piros háttér)</div>

Elemek:
A HTML tag-jei szerepelhetnek. Ha egyszerre több tag-nek is akarunk tulajdonságot adni, elég csak a tag-eket egymás után írnunk.
A kapcsos zárójelben lévő rész neve deklaráció, ami megmutatja, milyen tulajdonságokat/értékeket állítottunk be.
Ebben megadhatunk több tulajdonságot is ";" elválasztva.
#tobbet{
      color:black; 
      font-family:times; /* betűtípus */
      text-decoration:underilne; /* szöveg díszítése */
}

Még valami: hogy átláthatóbbá és később egyszerűbbé tegyük munkánkat, érdemes megjegyzéseket használni.
Szintakszisa:
/* megjegyzés szövege */


3. Látszólagos elemek (pszeudo-osztály):



Ezek az elemek nem jelennek meg a HTML forrásában, de segítségükkel még több formázási lehetőséget érhetünk el, több mindennek adhatunk tulajdonságot. Például A HTML forrásában nincs benne, sem kiemelve a bekezdés első betűje, de ezt elérhetjük, ha veszünk egy peszeudo-osztályt, amivel már tulajdonságot adhatunk neki. Igaz ez a HTML forrásában nem jelenik meg külön.
P:first-letter{
      color:blue;
      font-size:12px;

Itt a bekezdés első betűjét módosítottuk. Ez hasznos lehet például iniciálé létrehozásához.
Most nézzünk meg néhány fontosabb pszeudo-osztályt:
#lat P:first-child {
      color:green;
}

A példa a "lat" azonosítójú elemcsoport első sorát módosítja
A{
     text-decoration: none
}
A:hover{
     color: blue
}

A linkek tulajdonságait változtatja meg attól függően, hogy a felhasználó
1. még nem használta
2. ez egér fölötte van.
Természetesen használható még a visited illetve az active látszólagos elem is.

4. Öröklődés



A CSS-ben is minden elemnek van egy szülőeleme, tehát minden elem kapcsolódik egymáshoz és ennek az elemnek lehet több gyereke is.
Például, ha a BODY elemben zöld betűszínt adunk meg, akkor az oldalon minden elem,, amely örököli ezt a beállítást, zöld színű lesz vagy, ha 18-as betűméretet adtunk meg, akkor minden betű ezt a méretet veszi fel.

Utoljára


Bővebb információt, illetve a teljes angol nyelvű CSS referenciát a W3C oldalán érheted el.
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!