05. CSS + SASS

CSS3

Mi a CSS?

Mint a tanfolyam bevezetőjében leírtam a HTML felelős a tartalom meghatározásáért, az weboldal szerkezetének leírásáért, a CSS felelős  a megjelenésért.

A CSS - Cascading Style Sheet => szabadon fordítva: Stíluslapok.

A CSS segítségével a HTML elemek és a tartalom színét, a betűk méretét, a szöveg igazítását, a táblázatok szélességét, magasságát, a keretek minőségét, és sok egyéb paramétert állíthatunk részletesen, akár karakterről karakterre. Óriási szabadságot biztosít nekünk ez, így rendkívül jó kinéző oldalakat ( és persze kifejezetten rondákat is) képesek leszünk készíteni vele.

Mikor használjunk CSS-t?

  • Ha egy vagy néhány elemnek akarjuk a formátumát beállítani könnyen és gyorsa: inline stílus deklarációról beszélünk
  • Ha egy weboldalon egy helyen akarjuk az oldal stíluselemeit állítani könnyen és gyorsan: Ilyenkor a weboldal fejlécében helyezhetjük el a stílusdeklarációt
  • Ha több több száz oldalas website esetén akarunk egységes kinézetű felületet biztosítani könnyen és gyorsan: Önálló stíluslap fájlok.
  • Minden olyan esetben, amikor pontosan akarjuk a stílusok beállítását végezni, nem csak elnagyoltan...

A legfontosabb azonban, hogy segítségével nagy website-oknak egységes, átlátható kóddal rendelkező kinézetet tudunk létrehozni.

Inline stílusdeklaráció

Ebben a szövegben néhány szó színét átállítom inline stílusdeklarációval. majd megmutatom a kódot is.

Ebben a szövegben <span style="color:#FF0000;">néhány szó színét</span> átállítom <strong>inline</strong> stílusdeklarációval. majd megmutatom a kódot is.</p>

A példában már lehet látni a stílus működését. A <span....>....</span> tagek közé zárt szövegre alkalmazzuk a stílusdeklarációt. A TAG-ben használjuk a style="color: #FF0000;" attribútumot. Az attribútumban megnevezzük a tulajdonságot: color: (szín) és a tulajdonság értékét #FF0000, ami az informatikában megszokott RGB színmegadás (=Red Green Blue) 16-os számrendszerben.

Megjegyzés: Ezzel a módszerrel tényleg minden egyes módosított szövegrész stíluselemeit külön-külön kell beállítani, vagyis ezt a módszert tényleg csak akkor érdemes használni, ha csak néhány szövegrész stílusát akarjuk megváltoztatni.

A weboldal fejlécében elhelyezett stílusdeklaráció

Ha egy weboldal összes bekezdését szeretnénk hasonló stílusdeklarációval ellátni (például a betűtípust és betűméretet átállítani), akkor az alábbi módot használhatjuk:

<!DOCTYPE HTML> 
  <HTML> 
    <HEAD> 
      <STYLE> 
      p {
        font-size: 16px; 
        font-family: Arial,Verdana,sans-serif; 
      } 
     </STYLE>
   </HEAD> 
  <BODY> 
     <p> Ennek a bekezdésnek változtatjuk a betűtípusát és méretét</p> 
     <p> ennek is változtatjuk a betűtípusát és méretét</p>
  </BODY>
 </HTML>

Ebben a példában az látszik, hogy a HTML oldal <HEAD> részében beírjuk a <STYLE> tag-et. Azon belül azt mondjuk, hogy az összes <p> tag-re akarom a font-size (betűméret) és a font-family (betűcsalád) paramétereket állítani. Vagyis a kérdéses oldalon minden <p> tag-gel megjelölt szövegrésznek a kérdéses paraméterét módosítom.

Ha az oldalon minden ilyen szövegrésznek a színét kékre akarom állítani, akkor a color paramétert kell beírnom. Akkor így változik az oldal:

<style type="text/css">
p {
        font-size: 16px;
        font-family: Arial,Verdana,sans-serif;
        color: #00FF00;
  }
</style>

Egy teljes website több oldalán akarjuk használni ugyanazt a stílusdeklaráció készletet:

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <link rel="stylesheet" href="minta.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="masikminta.css" type="text/css" media="print" />
    <style>
       @import url("harmadikminta.css");
    </style>
  </HEAD>
  <BODY>
    <p> Ennek a bekezdésnek változtatjuk a betűtípusát és méretét</p>
    <p> ennek is változtatjuk a betűtípusát és méretét</p>
  </BODY>
</HTML>

A fenti példában azt láthatjuk, hogy a minta.css, masikminta.css es a harmadikminta.css fájlokra hivatkozom a szövegben. A minta.css-t akkor fogja használni a weboldal, ha a képernyőn megjelenő tartalmat akarjuk formázni(!). A masikminta.css fájl a nyomtatásnál használandó. A harmadikminta.css fájlt mindig használja. Ez tulajdonképpen annak a kibővítése, amit az egyszerű weboldalakon használnánk.

A CSS fájlok egyszerű szövegfájlok, amelyeknek a szerkezetét és általában a CSS deklarációk szerkezetét a továbbiakban mutatjuk meg.

CSS