Programozási nyelv-e a CSS?

  • Reading time:14 perc alatt olvasható

Programozásnak számít-e, amikor CSS kódot írunk?

A programozási nyelvek utasítások sorozatát fogalmazzák meg, amiken keresztül a számítógép műveleteket hajt végre. Ezzel szemben a stíluslapok (style sheets) – amilyen pl. a CSS is – strukturált dokumentumok (pl. egy HTML vagy XML fájl) megjelenéséről hordoznak információt, meghatározzák az elrendezést, betűtípusokat, színeket stb-t.

 

Na de akkor programozási nyelv-e a CSS?

Ha tömören válaszolunk a fenti kérdésre: “Programozási nyelv-e a CSS?”, azt mondhatjuk: nem, a CSS nem programozási nyelv, hanem stíluslap (CSS = Cascading Style Sheet). Haladó szinten viszont megjelennek olyan komplex lehetőségek a CSS-ben és ahhoz kapcsolódva, amik már inkább a programozáshoz állnak közel. 

Ebben a cikkben részletesen körüljárjuk, mik azok a stíluslapok, hogyan épül fel a CSS szintaxisa, mi mindent lehet kihozni ugyanabból a HTML dokumentumból különböző stílusok segítségével és milyen extra lehetőségek rejlenek a CSS-ben, ha már mesteri szinten ismerjük ezt a nyelvet. 

 

 

Mi a különbség a programozási nyelvek és a stíluslapok között? 

Programozási nyelvek

A programozási nyelveken utasítások sorozatát fogalmazhatjuk meg, tehát azokat a lépéseket, amiket el kell végeznie a számítógépnek valamilyen feladat végrehajtásához. 

Vannak az emberi nyelvektől távolabb álló, a gépi kódhoz közelebbi nyelvek (mint pl. az Assembly), és magas szintű programozási nyelvek, amelyeket könnyű olvasni, közel állnak az emberi nyelvekhez, de távol a gépi kódtól (mint a C# vagy a Java). 

Számtalan programozási nyelvet hoztak létre, ma is folyamatosan bővül a tárházuk, újak kerülnek a piacra és könyvtárakkal bővülnek a lehetőségek. Sokféle szempont szerint csoportosítani őket: pl. objektumorientált programozási nyelvek, funkcionális nyelvek, vagy felhasználási terület szerinti kategorizálás. Ha továbbolvasnál a programozási nyelvek témájában, sok érdekes cikket találsz a CodeBerry blog “Programozási nyelvek” fejezetében. 

 

Stíluslapok 

A stíluslapok olyan, informatikában használatos nyelvek, amelyek strukturált dokumentumok (például a HTML vagy XML fájlok) formázásra, megjelenítésére vonatkozó leírást adnak. Egy stíluslap meghatározza, milyen stílusszabályok érvényesüljenek a dokumentum egyes elemeinél, milyen színeket, hátteret, elrendezést, betűtípusokat, stb. jelenítsen meg a böngésző. 

Stíluslap-nyelvek például:

  • CSS (Cascading Style Sheets)
  • XSL (Extensible Stylesheet Language) 
  • JSSS (JavaScript Style Sheets) 

 

Programozási nyelv-e a CSS

 

Mi az a CSS? 

Már tudjuk, hogy a CSS a Cascading Style Sheet rövidítése, a leggyakrabban használt stíluslap-nyelv. Segítségével megadhatjuk, hogyan jelenítse meg a böngésző a HTML dokumentum elemeit. 

Bár a HTML-ben is van lehetőség formázásra (lehet például színt, betűvastagságot, elrendezést megadni), mégsem a HTML dokumentumba szokás írni a stílusra vonatkozó információkat, mert nagyon hosszadalmas és nehezen karbantartható lenne minden elem formázását külön bevinni, és a lehetőségek is jóval korlátozottabbak. A HTML dokumentumhoz ezért általában külső CSS fájlt szokás csatolni, ami egyszerre tudja kezelni sok-sok elem stílusra vonatkozó utasításait, és szükség esetén automatikusan felülírni azokat. 

Ezen kívül szuper lehetőségek vannak bármilyen bonyolult, trükkös elrendezés vagy kifinomult dizájn megvalósítására (mostanában például a Flexbox vagy a Grid technológiák segítségével). 

 

A CSS szintaxisa 

A CSS utasítások szelektorokból, (angolul selector) és tulajdonságokból (properties), valamint az általuk felvett értékekből (values) állnak. 

A szelektor jelöli ki, melyik HTML elemre vonatkozik az utasítás. Ezután kapcsos zárójelben következnek a tulajdonságok, pl. szín, betűtípus, méret, elrendezés stb. és a hozzájuk tartozó értékek. Ha több formázás tartozik egy HTML elemhez, akkor pontosvessző választja el őket.

Általános formában:

selector {

property: value;

property: value;

}

Egy bekezdés színének és középre igazításának beállítása például így néz ki:

p {

  color: green;

  text-align: center;

}

Haladó szinten sok lehetőségünk van: készíthetünk különböző képernyőméreteken is egyaránt jól működő weboldalakat, készíthetünk animációkat, akár reagálhat is a design a felhasználó tevékenységére.

 

 

Ugyanaz a HTML-váz, más-más stílus

Ha megfigyeled az alábbi példákat, láthatod, hogy az oldal szövege ugyanaz, sőt a mögöttük megbújó HTML kód is egyezik. Mégis gyökeresen különböző hatást lehet elérni, ha más stílust adunk az oldalnak CSS segítségével. 

  • Ezen az oldalon a webdizájn fejlődését követheted végig a kezdetektől 2020-ig. Ugyanazt a HTML dokumentumot egyre modernebb CSS stílusokkal felruházva láthatod, ahogy mozgatod a csúszkát a lap alján. – Evolution of Webdesign
  • A CSS Zen Garden oldal egy ismert példája annak, hogy hogyan lehet ugyanazt a HTML fájlt gyökeresen másképp megjeleníteni, ha más stíluslapot adunk hozzá. Érdemes néhány designt végigkattintani, és megfigyelni, milyen elemekhez nyúltak hozzá és hogyan változtatták meg a készítők. – CSS Zen Garden 

 

 

 

Néhány érdekesség, ha kíváncsi vagy, mi mindent tud a CSS

Azon kívül, hogy egy weboldal tartalmát tudjuk vele formázni és színeket, betűtípusokat, elrendezést tudunk módosítani a CSS segítségével, egyéb látványos megoldásokat is létrehozhatunk vele. Az alábbiakban néhány példát találsz izgalmas, CSS-sel megvalósítható lehetőségekre. 

 

Fotóalbum

Áttekinthető, szép fotómegjelenítés: a kurzort mozgatva automatikusan kinagyítja azt a képet, ami fölé visszük.  Forrás: Sonspring

Itt megtalálod, hogy hogyan készült.

 

Látványos képelrendezések

Ezt a galériát öröm görgetni, annyira látványos. A nyilak segítségével tudjuk lapozni a képeket, a készítő 3D transzformációkat használt az elkészítéséhez.

 

Forrás: Snow Stack

 

3D hatású grafikák 

Ez a progress bar, vagy akár diagramként is funkcionáló 3D-s hatású elemek néhány CSS trükkel jönnek létre. 

 

Forrás: Pure CSS Progress Bar

 

Egyszerű játékok

Bár a CSS nem arra való, hogy játékokat készítsenek vele, kihívásképp sokan megpróbálnak játékokat készíteni, pusztán HTML és CSS segítségével. 

Ezeken az oldalakon különböző játékokat találsz összegyűjtve, amik csupán CSS trükkökön alapulnak: 

 

 

Haladó CSS technológiák és a programozás

Ha továbblépük attól a szinttől, hogy egyszerű formázásokat adunk a HTML dokumentumunk eleminek, mint pl. a színek, betűméret, betűtípus stb. beállítása és elkanyarodunk a haladó technológiák felé, egyre inkább olyan megoldásokat fogunk használni, amik a hagyományos értelemben vett programozásból ismerősek. 

CSS-ben is adhatunk meg függvényeket, érvényesíthetjük az objektumorientált szemléletet, felépíthetünk egy áttekinthető, könnyen fenntartható moduláris rendszert. 

 

CSS preprocesszorok

A CSS preprocesszorok olyan CSS kiterjesztések, amik segítségével CSS kódot generálhatunk, vagyis programozási módszereket használva automatizálhatunk lépéseket. Többféle preprocesszor is létezik, a legismertebbek a Sass és a Less. 

Segítenek létrehozni és karbantartani komplex appok vagy weboldalak CSS szerkezetét, újrafelhasználható, több ember által átlátható és szerkeszthető kódot létrehozni. Lehetőséget adnak, hogy CSS-ben is használhassunk például beágyazást, loopokat, megjelenjen az öröklődés.

A preprocesszorok területén már összeér a CSS és a programozás, bár a cikk elején azt mondtuk, hogy a CSS nem programozási nyelv, hanem stíluslap, valójában haladó technológiákkal kiegészítve megjelennek a programozási koncepciók és műveletek a CSS-ben is. 

 

 

Megéri-e megtanulni a CSS-t? 

Rövid válaszunk: igen, mindenképp. A CSS-ben számtalan lehetőség rejlik, kiélheted a kreativitásod, haladó szintre fejlesztve az ismereteidet gyönyörű, izgalmas dizájnokat tudsz megvalósítani vele. JavaScript tudással kiegészítve hamar frontend fejlesztő válhat belőled, így jól fizető állások megszerzésére lesz esélyed. 

A magas szintű, korszerű CSS tudás értékes a munkaerőpiacon, bár az alapokat rövid idő alatt el lehet sajátítani, a CSS-ben igazán profi webfejlesztők nincsenek túl sokan. A dizájn és annak megvalósítása pedig olyan terület, ahol mindig lehetőség van fejlődni.  

 

A CodeBerry Programozóiskola “Programozási nyelvek” című cikksorozatából megtudhatjátok, hogy milyen alapvető jellemzői vannak az egyes programozási nyelveknek, mire alkalmasak, kinek érdemes választani őket.

Bevezetés a programozásba

Szeretnél online megtanulni programozni? Gyere, és próbáld ki az első 25 leckénket ingyen a CodeBerry Programozóiskolában!

Tanulj programozni és válts karriert!

100% ONLINE

IDEAL FOR BEGINNERS

SUPPORTIVE COMMUNITY

SELF-PACED LEARNING

Not sure if programming is for you? With CodeBerry you’ll like it.