Mi az a CSS3?

A CSS, teljes nevén Cascading Style Sheets, az a stílusleíró nyelv, amelyet a HTML (vagy XML) dokumentumok megjelenésének és formázásának leírására használunk. A CSS3 ennek a nyelvnek a legújabb, harmadik főverziója, amely moduláris felépítésével és számos új tulajdonságával forradalmasította a webdesignt, lehetővé téve gazdagabb és dinamikusabb vizuális élmények létrehozását.

Hogyan működik a CSS?

A CSS szabályokból áll, amelyek meghatározzák, hogyan kell egy vagy több HTML elemnek megjelennie. Egy CSS szabály jellemzően két fő részből áll:

• Szelektor (Selector): Meghatározza, hogy mely HTML elem(ek)re vonatkozik a stílusszabály (pl. minden 'p' bekezdésre, egy adott 'id'-val rendelkező elemre, vagy egy bizonyos 'class'-ba tartozó elemekre).
• Deklarációs blokk (Declaration Block): Egy vagy több deklarációt tartalmaz, kapcsos zárójelek között ({ }). Minden deklaráció egy tulajdonságból és egy értékből áll, pontosvesszővel elválasztva (pl. color: blue; vagy font-size: 16px;).

A stíluslapokat többféleképpen lehet egy HTML dokumentumhoz csatolni: külső .css fájlként (ez a leggyakoribb és ajánlott módszer), a HTML dokumentum 'head' részében 'style' tagek között, vagy közvetlenül egy HTML elem 'style' attribútumában (inline stílus).

A CSS3 legfontosabb újításai és képességei

A CSS3 nem egyetlen monolitikus specifikáció, hanem modulok gyűjteménye, amelyek fokozatosan fejlődnek. Néhány a legjelentősebb újítások és képességek közül:

• Fejlett szelektorok: Új, erőteljesebb szelektorok jelentek meg, amelyekkel precízebben célozhatók meg az elemek (pl. attribútum szelektorok, pszeudo-osztályok mint az ':nth-child()').
• Webes betűtípusok (@font-face): Lehetővé teszi egyedi betűtípusok használatát a weboldalakon, nem csak a felhasználó gépén telepített alap betűkészleteket.
• Színátmenetek (Gradients): Lineáris és radiális színátmenetek létrehozása képek használata nélkül.
• Árnyékok (Box Shadow, Text Shadow): Dobozok és szövegek árnyékolása a mélységérzet növelése érdekében.
• Lekerekített sarkok (Border Radius): Elemek sarkainak egyszerű lekerekítése.
• Áttetszőség (Opacity, RGBA/HSLA színek): Elemek áttetszőségének szabályozása és alfa-csatornás színek használata.
• 2D/3D transzformációk (Transforms): Elemek elforgatása, méretezése, mozgatása és torzítása 2D-ben és 3D-ben.
• Áttűnések (Transitions): Tulajdonságváltozások sima animálása egy adott idő alatt.
• Animációk (Animations & @keyframes): Komplex animációk létrehozása.
• Flexbox és Grid Layout: Erőteljes eszközök a rugalmas és reszponzív elrendezések egyszerű létrehozására.
• Média lekérdezések (Media Queries): Lehetővé teszik különböző stílusok alkalmazását a képernyőméret, felbontás vagy egyéb eszközjellemzők alapján (ez a reszponzív webdesign alapja).