Egyedi motorok

Egyedi programozású rendszereket számos cég készít, jellemzően egyedi igényeket elégítenek ki.

Egyedi rendszerek előnyei

• Nincsenek ismert hibák, amit a hackerek (könnyen) kihasználhatnának.

• Azt az igényt elégíti ki, amire a megrendelőnek szüksége van.

• Nem tartalmaz felesleges funkciókat, így könnyebben optimalizálható.

Egyedi rendszerek hátrányai

• Nincs mögötte a közösség ereje, tudása.

• Jellemzően a legalapvetőbb funkciókon kívül mindent le kell fejleszteni.

• Nem jönnek ki új frissítések, csak ha ezért fizetünk.

• Megszűnik a fejlesztő cég nem biztos hogy (könnyen) találunk kompetens fejlesztőt.

Webes tartalomkezelő rendszerek

A webes tartalomkezelő rendszerek (CMS - Content Management System) adatok (tartalmak) kezelésére szolgálnak, és lehetőséget biztosítanak több felhasználó kollaboratív együttműködésére.

Webes tartalomkezelők legjellemzőbb képességei:

• Tartalmak kezelése, szerkesztése (szöveges, képi, multimédia)

• Különböző tartalomtípusok kezelése (aloldal, blogbejegyzés, hír, publikáció, termék, naptár időpont stb.)

• Tartalmak rendszerezésének lehetősége (kategóriák, cimkék, stb.)

• Több felhasználó kezelése

Jellemző a bőség zavara, mind fizetős, mind ingyenes rendszerből számolatlan áll rendelkezésre, legelterjedtebb ezek közül:

WordPress

A egy nyílt forráskódú, ingyenes tartalomkezelő rendszer, eredetileg blogmotor volt, elsődleges célja a blog funkciók kiszolgálása, de sokoldalúsága, és számtalan bővítményének hála nagyon széles körben bevethető, akár webshop funkciókkal is fel lehet ruházni. 2003 óta létezik, és aktívan fejlesztik, számos technológia, például a Gutenberg interaktív szerkesztő a Wordpress-ből nőtt ki. aktív, és is elérhető. Telepítése egyszerű, 5 perc alatt elvégezhető (híres 5 perces telepítés). A WordPressnek jelentős elterjedsége van, a Világháló öszes weblapjának 33.9%-a WordPress alapú, a tartalomkezelők piacán 60.7%-ot mondhat magáénak (2018-as adatok alapján).

Drupal

A 2000 óta létző nyílt forráskódú, ingyenes CMS, általános célra készült, a funkcionalitása bővítmények segítségével fejleszthető, bővíthető, a kinézete témázható (itt sminknek hívják). Telepítése, konfigurálása bonyolult a többi ingyenes CMS-hez képest. A magyar közösség aktív, létezik több magyar , fontos a Drupalaton, a Balatonnál megtartott éves Drupál konferencia. Sok magyar fejlesztőcég dolgozik ezzel a tartalomkezelővel (pl. Penceo, Cheppers).

Joomla

A 2005-ben jött létre nyílt forráskódu ingyenes rendszerként egy korábbi tartalomkezelőből a Mambo-ból. Bővíthető, és témázható CMS. A mai napig aktív a fejlesztése. Korábbi kiemelkedő népszerűségét átvette a WordPress.

Typo3

A jellemzően német nyelvterületen elterjedt 2001 óta létező nyílt forráskódú ingyenes tartalomkezelő rendszer.

Webshopok

A webshopok termékek és szolgáltatások forgalmazásra specializált tartalom kezelő rendszerek. A CMS alap funkciókon túl fel vannak ruházva az áruforgalom lebonyolításához szükséges képességekkel:

• Árucikkek kezelése, szerkesztése

• Raktárkészlet kezelése

• Vásárlók kezelése

• Kosár

Webáruház motorok tekintetében is bőséges kínálatból választhatunk:

Magento

A egy nyílt forráskódú e-kereskedelmi platform. Az Adobe 2018-ban megvásárolta a Magentót fejlesztő céget, és bemelte a Magentót a saját .

Opencart

Régi motoros a webshopok között az 1998 óta létező Opencart, ez szintén egy népszerű, nyílt forráskódú ingyenes rendszer.

WooCommerce

A plugin a WordPress-t ruházza fel webshop funkcionalítással. Létezik hozzá egy speciális WordPress téma, a , ez biztosítja a webshop megjelenést. Hatalmas előnye, hogy a WordPress-el együtt is gyorsan és egyszerűen telepíthető.

Egyéb alternatívák

Statikus oldal generáló (Static Site Generator)

A statikus oldal generáló szöveges állományokból, például állományokból állít elő egy teljes weboldalt, ezt a műveletet rendszerint az oldal szerzője, fejlesztője végzi el egy asztali gépen. Nagy előnye ezeknek a rendszereknek, hogy nincs szükség számításigényes szerveroldali technológiákra, adatbázisokra, így ezek az oldalak kifejezetten gyorsak, és biztonságosak. Hátrányuk az interaktivitás hiánya (nincsenek háttérműveletek).

Statikus oldal generálók: , ,

Felhő alapú weboldalkészítő (Cloude based website builder)

A kétezres évek közepén jelentek meg a felhő alapú weboldal készítő alkalmazások, és egyszerű kezelhetőségük miatt egyre növekszik a népszerűségük.

A felhő alapú weboldalkészítők egy online felületen drag and drop (fogd és vidd) technikával gyorsan összerakható, és szerkeszthető weboldalakat kínálnak.

Felhő alapú weboldalkészítő előnyei

• Gyorsan megtanulható a használata

• Nem szükséges csak minimális technikai háttér ismeret

• Számos előre elkészített sablon, és bővítmény

Felhő alapú weboldalkészítő hátrányai

• Kötve vagyunk a platformhoz, nem a miénk az oldal kódja, emiatt nem költöztethető

• Korlátozottan optimalizálható teljesítmény, SEO szinten

• Korlátozott funkcionalitása miatt egyedi igényeinket adott esetben nem tudja kielégíteni

Felhő alapú weboldal készítők: , , , ,

Domain név

A domain név egy könnyen megjegyezhető szöveges cím, amin a webes szolgáltatásokat és a honlapokat elérhetjük.

A domain nevek formátumát a DNS (Domain Name System) szabvány szabályozza, tartományokra, és altartományokra osztva a hálózatokon, például az interneten elérhető számítógépeket.

A domain név több egységből épül fel (ezek között a szeparátor szerepét egy pont . tölti be).

Az első egység a tartomány (Top Level Domain - TLD), ami lehet top domain (például .org, .gov, .com, .net), vagy nemzeti tartomány (például .eu, .hu, .de, .at). Például a Wikipedia domain nevében a tartomány az org: wikipedia.org.

A második egység (jobbról balra) az altartomány (Second Level Domain - SLD). A gyakorlatban ez azonosít egy tartomány alá besorolt számítógépet. Például a Wikipedia domain nevében ez a wikipedia: wikipedia.org

A harmadik opcionális egység az altartomány alá további címek besorolását teszi lehetővé, ez az aldomain (subdomain vagy Third Level Domain). Például a Wikipédián a különböző nyelvű Wikipédia alegységeket így azonosítják, a magyar wikipédia címe hu.wikipedia.org, a német nyelvű wikipedia címe de.wikipedia.org.

Domaint az úgynevezett domain regisztrátor cégeknél lehet igényelni, regisztrációs díj ellenében.

Tárhely

Hagyományos tárhelyek

Általában egy szerverparkban elhelyezett számítógép, amin több felhasználói fiók (tárhely) található. A tárhelyekhez rendszerint tartozik egy adminisztrációs felület, mint például a , amin keresztül a rendszer beállításait a tárhely bérlője is el tudja látni (például mentés/helyreállítás). A tárhelyhez lehet csatlakozni, és ennek segítségével lehet a weboldalak állományait le, és feltölteni.

Felhő alapú tárhelyek

Felhő alapú tárhelyen az igényeinknek megfelelő virtuális szerverek létrehozására van lehetőség, ez a költségek hatékony minimalizálhatóságát is lehetővé teszi, de szükséges hozzá némi szaktudás, cserébe jóval nagyobb szabadságot kapunk (akár bármikor ki is törölhetjük egy óvatlan mozdulattal a gépet). Számos cég kínál felhő alapú tárhelyet, például: , , ...

Szerver oldali technológiák

A egy szerver oldali programozási nyelv, úgynevezett scriptnyelv. A webszerverek a PHP kódból készítik el a weboldal HTML állományait, és ezt kapja meg a kliens.

A egy nyílt forráskódú adatbázis szerver, segítségével adatokat, például egy weboldal adatait tárolhatjuk egy webszerveren.

A LAMP egy szoftver csomag, tartalmaz minden alapvető komponenst, amiből egy webes kiszolgáló felépül:

• Linux (operációs rendszer)

• Apache (HTTP szerver)

• MySQL (adatbázis kezelő)

• PHP (script futtató környezet)

Alapfogalmak

A HTML (HyperText Markup Language) a weboldal alapja, olyan, mint egy ház alapja, csupasz falai, teteje.

A CSS (Cascading Style Sheets) felel a weboldal kinézetéért, olyan, mint a ház színe, dekorációja, bútorzata.

A JavaScript programozási nyelv felel az oldalak működésért, olyan mint egy ház gépészete, elektromos rendszere (ha itt megnyomok egy kapcsolót, amott felgyúl a villany).

A Világháló az Interneten működő egymással hiperhivatkozásokkal kapcsolódó weboldalak összessége. A felhasználók, akik igénybe akarnak venni egy szolgáltatást a Világhálón, internetképes eszközeikkel tehetik meg ezt (ez lehet hagyományos számítógép, okostelefon, konzol, még akár egy hűtőszekrény is). Az eszközön lévő böngésző vagy egyéb alkalmazás (kliens) egy kérést küld az interneten keresztül a kiszolgálónak (szerver). A kiszolgáló a kérésnek (request) megfelelően összeállítja a választ (response) csomagok formájában, és visszaküldi a kliensnek. A válaszként kapott csomagok alapján jeleníti meg a felhasználó gépén a kliens például a lekért weboldalt.

A kiszolgáló területét nevezzük backend-nek, vagy szerver oldalnak, a felhasználó gépét érintő területet frontend-nek, vagy kliens oldalnak.

Kliens oldalon alkotóelemeire bontva egy weboldalt, három fő elkülöníthető technológiát tudunk azonosítani:

Az első a , vagy hipertext jelölőnyelv, ez a szabvány a weboldalak strukturális felépítését (tartalmi szerkezetét) biztosítja. A második a , vagy egymásba ágyazható stíluslapok, ami a weboldalak megjelenéséért felel. A harmadik a JavaScript, ami a web programozási nyelve, és a weboldalak viselkedését vezérli.

Ennek a könyvnek a célja, hogy a Számalk-Szalézi Szakgimnázium Kiadványszerkesztő Technikus szakos hallgatóinak jegyzeteket biztosítson az órai gyakorlatok, és előadások mellett a Digitális kiadványok tantárgyban.

A Internet, és később a Világháló megjelenése megreformálta az élet minden területét, így a hagyományos tervezőgrafikai műfajokat (plakátok, meghívók, oklevelek, könyv-, lemez-, CDés DVD-borítók, szórólapok, hirdetések stb.) is, új ág keletkezett: az online tervezőgrafika.

Az új tervezőgrafikai műfajok:

• webtervezés (desktop, tablet, mobil)

• webes hirdetések, bannerek

• animált média, videók (!)

• weboldalakhoz, webáruházakhoz kapcsolódó grafika

• közösségi oldalakra borítóképek (G+, FB, Instagram, Twitter)

• közösségi oldalakra, blogokra bejegyzés-illusztrációk

• online prezentációk (Prezi)

Online tervezőgrafika korszakai

A online tervezőgrafika egy fiatal műfaj, közege a Világháló, ami csupán 30-éves múltra tekint vissza:

A Világháló az 1990-es évek előtt még nem létezett, elméleti koncepcióját 1989-ben dolgozta ki a kutatója, az , és is az ő nevéhez fűződik, szűk körben 1990-ben, széles nyilvánosság előtt 1991-ben mutatta be az új médiumot.

1990-es évek

Kilencvenes évek közepén jelentek meg az első böngészők, amik képeket is meg tudtak már jeleníteni, ezt tekinthetjük a webdesign hajnalának.

A hagyományos tervezőgrafikai megközelítéseket ültették át online környezetbe (könyv, magazin)

Feltűnik az interaktivitás a javaScript programozási nyelv megjelenésének köszönhetően. A weboldalakon elérhetővé válik a navigáció, gombok, űrlapok.

Ebben a korszakban még nem álltak rendelkezésre a felület kialakítását megkönnyítő CSS technikák, így a fejlesztők a weboldalak felületét táblázatokból és frame-ekből építették fel, ezek a technológiák mára már teljesen elavultak.

• 1990-ben adja ki az Adobe a Photoshop 1.0-át

• 1996 CSS 1

• 1996 Macromedia kiadja a Flash 1.0-át

• 1998 Létrejön a Google internetes kereső

2000-es évek első fele

Piacra kerülnek a fejlett LCD monitorok, nagyobb felbontással és színmélységgel, ami lehetővé tette a fejlettebb webdizájnok megjelenését.

• Oldal layout még mindig táblázatos struktúra

• Fash animációk az oldalakon

• Teljes weboldalak Flash-ben elkészítve

• Egyszerűbb munkafolyamat (csak monitorra kellett tervezni)

2000-es évek második fele

2007-ben megjelenik az első okostelefon, az iPhone, ez alapvetően változtatta meg az élet szinte minden területét (folyamatos online jelenlét, tartalomfogyasztás, információszerzés, navigáció, játékok, stb).

Megváltozik a világháló is Az Apple nem engedi az iPhone készüékekre a Flash animációkat, így ez a technológia lassan visszaszorul.

Az új felhasználói felületek új kihívásokat támasztanak, már nem csak az asztali gépekre kell tervezni, fejleszteni, tenyérnyi kijelzőre is, és megjelenik az érintőképernyő mint beviteli eszköz.

2010-es évek

Megjelenik az internetképes eszközök széles skálája, például a 4-es iPhone a korábbiaknál nagyobb felbontással, az iPad az első tablet, az Android-os telefonok, és a Windows Phone készülékek. A fejlesztőknek már számtalan eszközre, és képernyő felbontásra kell optimalizálni a weboldalakat, létrejön a reszponzív design, ami rugalmasan alkalmazkodik a kijelzők méretéhez.

A mobil ökoszisztémák virágzása elhozza az alkalmazások korszakát, megjelennek a webalkalmazások, és elterjednek HTML5 CSS3 alapú felhasználói felületek az alkalmazások között.

Háttérbe szorul az anyagi valóságot mimelő felhasználói felület, tért nyer a minimalizmus, és a flat design. Erre legjobb példa a Google Android operációs rendszere, a -al.

Megjelennek a fejlett keretrendszerek, mint a , vagy a .

Töretlen a CSS fejlődése: animációk, flexbox, CSS grid rendszer, …

Megfordult tendencia: az online tervezőgrafikai megközelítéseket ültetjük át hagyományos környezetbe (könyv, magazin)

Online tervezőgrafika szempontjai

Weboldaltervezés előtt tudni érdemes:

• Mi a célja a weboldalnak (eladás, informálás, szórakoztatás)

• Ki a célcsoport (nem, kor, ágazat)

• Milyen motorra készül (nyílt forráskódú, egyedi programozás)

• Technikai lehetőségek

Kezdetek

1980 - Tim Berners-Lee az akkor a CERN-ben dolgozó fizikus létrehozta ENQUIRE dokumentációs rendszert

1989 - Tanulmányt írt a hálózat alapú hipertext rendszerről, amiben lefektette a HTML koncepciójának alapjait.

1990 - Elkészítette az első (szöveges) böngészőt, és webszervert.

1991 - Kikerül az internetre az első weboldal (goo.gl/EApNkr).

A web kiteljesedése

1994 - Megalakul a W3C, szabványok és ajánlások formájában fejleszti és javítja az internet technológiáit

1995 - HTML 2.0

1997 - HTML 3.0 - HTML 4.0

(Sötét) Középkor

1997 - A HTML 4.0 ajánlás publikálása után bezárják a HTML munkacsoportot, két hónappal később megszületik az XML 1.0, ezt követően pedig az XHTML 1.0

Jelenkor

2004 - A gyártók fellázadnak és elkezdik fejleszteni a HTML 4 alapjain az újragondolt szolgáltatásokkal kibővített HTML 5-öt.

2006 - A W3C behozhatatlan hátrányba kerül, lemaradnak az XHTML 2.0 szabvány fejlesztésében, ekkor egyesítik erőiket a gyártókkal.

2008 - W3C ajánlásként kiadásra kerül a HTML 5

Szintaktikai hibák

Szintaktikai hibának számít, ha a HTML dokumentum forráskódja hibás.

Ezt rendszerint nem vesszük észre, a hibák egy részének jelenléte nem okoz vizuális eltérést, vagy a böngészők sikeresen javítják a hibát az oldal betöltésénél.

A hibákat , vagy fejlesztőeszközeink beépített tudjuk felderíteni.

Mi a HTML?

A HTML egy a webes szabványok közül. A webes szabványok közül a legfontosabb a HTML, a CSS és a JavaScript, ezek hármasa együtt alkotja a weboldalak technológiai alapját.

HTML egy mozaikszó, jelentése HyperText Markup Language, vagyis hiperszöveges jelölőnyelv.

A HTML egy leírónyelv, ami a webalkalmazások strukturális vázát, tartalmát adja.

A HTML-t mint szabványt a (World Wide Web Consortium) kezeli.

A HTML nyelv elsajátítása az első lépés azon az úton aminek a végén képessé válunk weboldalakat, web alapú alkalmazásokat készíteni.

Építőelemek

A HTML dokumentum tag-ekből (címke) épül fel, ezekből képezi le a böngésző a HTML elemeket, miután beolvasta és feldolgozta a dokumentumot.

Egy lehetséges HTML elem:

Hiperhivatkozások

A weboldalak legfontosabb építőelemei a hiperhivatkozások (link vagy hyperlink). Ezek kötik össze egy globális egységgé a weben található dokumentumokat.

CSS elhelyezése HTML állományokban

Szövegközi stílusok (inline style)

A CSS stílusokat egy HTML elem style tulajdonságában elhelyezve csak arra az egy elemre fognak vonatkozni. A következő példában egy bekezdés, vagyis egy p elem szövegszínét és betűméretét állítjuk be:

Beágyazott stíluslapok

A CSS stílusokat elhelyezhetjük egy HTML állomány egy style elemben. A style elemben CSS nyelvi szabályok lesznek érvényesek.

Külső stíluslapok

A CSS definícióinkat elhelyezhetünk CSS állományokban (rendszerint a HTML állomány mellett elhelyezve), ezeket az állományokat elemmel kapcsolhatjuk a HTML állományunkba ().

A külső CSS állomány kiterjesztése .css lehet.

A link elemeket minden esetben a HTML állomány fejlécében, a head elemben kell elhelyezni:

CSS importálása

Egy CSS állományba behívhatunk egy másik CSS állományt @import segítségével.

Megjegyzések

Megjegyzés (comment) /* */ jelek használatával hozható létre CSS-ben

A /* és a */ karaktersorozatok közötti részt a böngésző figyelmen kívül hagyja.

Stílusok felépítése

CSS stílus (CSS rule)

A célozza be az elemeinket a HTML struktúrának megfelelően (úgy kell elképzelni mint egy címzést, ami egy, vagy több elemre hivatkozik). A meghatározásblokk tartalmazza a kijelölt elemekre vonatkozó tulajdonságokat.

Kijelölők (selector)

A kijelölő a kapcsos zárójel előtt helyezkedik el, és tipusától függően hivatkozik egy vagy több HTML elemre. A következő példában az összes h1 (főcím) elem szövegszínét állítjuk be vörösre:

A kijelölőket lehet csoportosítani vesszővel elválasztva több elemre is vonatkoztathatjuk ugyan azt a szabályt. A következő példában már nem csak a h1 elem szöveg színét állítjuk be, a h2 h3 h4 HTML elemek szövegszínét is vörösre állítjuk:

A kijelölő szűrhet bizonyos elemkombinációkra, ekkor a szülőkön keresztül célozzuk meg az adott elemet. A következő példában a h1 elemekben lévő span elemek szövegszínét kékre állítjuk:

Meghatározások

A meghatározásokat a kijelölő utáni kapcsos zárójelben helyezzük el, egymástól pontosvesszővel elválasztva. Az utolsó meghatározás, vagy CSS szabály után nem kell pontosvessző (általában ki szoktuk tenni).

Egy meghatározás kulcsszóból, vagy névből, és a hozzá tartozó értékből áll, kettősponttal elválasztva.

Léteznek gyorsírásos szabályok, amikben több értéket is megadhatunk. Ebben az esetben az értékeket szóközzel kell elválasztani.

HTML állomány kiterjesztése

A HTML állományok kiterjesztése .html vagy .htm lehet.

A böngészők, és a fejlesztésre használt szövegszerkesztők automatikusan felismerik, és statikus weboldalként kezelik ezeket az állományokat.

Doctype

A HTML dokumentum a típusmeghatározással kezdődik, ez a !DOCTYPE.

Ez alapján azonosítja be a böngésző a dokumentum típusát, ettől függ az elemek megjelenítésének módja.

Kötelezően a HTML állomány első sorában, a többi elem előtt kell elhelyezni.

A !DOCTYPE nem érzékeny a kis- és nagybetűk különbözőségére

XHTML 1.0:

Régebbi verzióknál a !DOCTYPE tartalmazta a DTD (Document Type Definition) állományokra mutató hivatkozást, a HTML 5 esetében ez az elem is egyszerűsödött.

HTML 5

Megjegyzések (Comment)

A HTML állományban elhelyezhetők megjegyzések:

A megjegyzés nyitó <!--, és záró --> karaktersorozata közötti részt a böngésző figyelmen kívül hagyja.

A megjegyzés lehet kód magyarázat, jelölhetjük vele szekciók elejét és végét, ez a forráskód olvashatóságát könnyíti.

Elrejthetünk vele HTML elemeket is:

A fenti példában a középső lista elemet nem hozza létre a böngésző.

HTML Címkék (Tag)

A HTML dokumentum tag-ekből (címke) épül fel, ezekből képezi le a böngésző a HTML elemeket, miután beolvasta a dokumentumot.

Egy lehetséges HTML elem:

A HTML elemek nyitó és záró tagből állnak, amennyiben lehet tartalmuk:

Az elemek egymásba ágyazhatóak:

A fenti példában az ul egy lista, amiben lista elemek li vannak, ez a tartalma. Az li-k az ul gyermek elemei, és egymásnak testvér elemei.

Vannak HTML elemek, amiknek nem lehet tartalma, így záró tag-re nincs szükség:

Tulajdonságok (Atributes)

A HTML elemeket fel lehet ruházni tulajdonságokkal, illetve egyes HTML elemeknek kötelező megadni bizonyos tulajdonságokat.

Korábbi példa:

A tulajdonságok a nyitó tag-ben helyezhetőek el, szóközökkel elválasztva egymástól, és HTML tag nevétől.

Minden tulajdonság egy név-érték pár, balra a tulajdonság neve, jobbra az értéke, egyenlőségjellel elválasztva.

Az értéket idézőjelbe kell tenni, ha tartalmaz szóközt. Bár nem kötelező, az olvashatóság megkönnyítése érdekében ezt érdemes minden esetben kitenni.

Egyes tulajdonságok a HTML elemünk azonosítását könnyítik meg.

Az id (egyedi azonosító) tulajdonsággal egyedi nevet adhatunk elemeinknek:

Az class (osztály) tulajdonság csoportokba szervezi az elemeket:

További példák tulajdonságokra:

Az input (beviteli mező) elem megjelenése és viselkedése a type tulajdonságától függ.

Következő példában egy img (kép), az src a képállományra mutató hivatkozás, a title a kép címe, az alt pedig a kép tartalmának szöveges leirata:

Példa HTML állomány

Ebben a példában egy egyszerű HTML állomány tartalma látható:

Mire szolgál a CSS kijelölő?

A kijelölők segítenek kiválasztani azokat a HTML elemeket, amelyekre CSS stílus szabályokat szeretnénk alkalmazni. Minden stílusnak tartalmaznia kell egy kijelölőt, amit úgy kell elképzelni mint egy címzést, ami egy, vagy több elemre hivatkozik.

A következő példában, a HTML állományunkban elhelyzünk egyh1 címet:

A HTML elemek megjelenését CSS stílusokkal tudjuk befolyásolni, a lenti példában a h1 elem szövegszínét vörösre állítjuk. Maga a kijelölő a kapcsos zárójel nyitó eleme előtt található (h1).

A kijelölők hivatkozhatnak több elemre, vagy bizonyos típúsú elemekre (a fenti példában az összes h1 elemre), de egészen specifikusan egy-egy elemet is kiválaszthatunk velük.

A kijelölők könnyebb megértését segíti a CSS Diner nevű játék, ami elérhető az alábbi linken:

Általános kijelölő

Az általános kijelölő minden elemre általánosan hivatkozik, segítségével a HTML dokumentumban lévő összes elemre vonatkozó stílusokat tudunk megadni.

Az általános kijelölőt csillag (*) karakterrel hozhatunk létre.

Elem kijelölő

Az elem kijelölő ez elemeket típusuk alapján azonosítja, például lista elemre, vagy elemekre a kijelölő a következőképpen hivatkozhat:

Az alábbi példában a bekezdésekre célzunk, ez azt jelenti, hogy az összes p elem a dokumentumban megkapja a vörös szövegszínt:

Az elem összes példányát ki fogja választani az elem kijelölő az adott HTML dokumentumban.

A következő példában az összes cím (h1-h6) elemet kiválasztjuk vesszővel elválasztva (így minden cím a HTML dokumentumban vörös szövegszínű lesz):

Osztály kijelölő

Az osztály kijelölő az elemet az class (osztály) tulajdonsága alapján célozza be.

Az osztály kijelölő ponttal kezdődik (.) ezt követi az osztály neve.

Ugyanazzal az osztállyal több elem is rendelkezhet, és egy elem rendelkezhet több osztállyal is. Így lehetőség van elemeinket rugalmasan csoportosítani.

Azonosító kijelölő

Az azonosító kijelölő az elemet az id (egyedi azonosító) tulajdonsága alapján célozza be.

Az azonosító kijelölő rácsjellel (#) kezdődik, ezt követi az azonosító neve.

Egy HTML dokumentumban egy elem rendelkezhet egy adott egyedi azonosítóval, és ezt az elemet az azonosítókijelölővel tudjuk célozni.

Leszármazott kijelölő

Ezzel a kijelölővel szülő elem alapján tudunk szűkíteni egy elemre (leszármazott). A szülőt és a gyermeket a kijelölőben szóközzel választjuk el. A következő példában csak a section elemben lévő bekezdés kap vörös szövegszínt, a második bekezdés, ami nincs benne a section elemben nem kapja meg:

A gyermeknek nem kell közvetlenül a szülőben lennie, lehet egy vagy több szinttel beljebb is, abben a példában mindkét bekezdésre hatással van a css (mindkettő leszármazottja a section elemnek):

Lehetőség van kettőnél több szint megadására, és a korábban megismert kijelölők szabadon kombinálhatóak:

Gyermek kijelölő

A gyermek kijelölő az alapján jelöli ki az adott HTML elemet, hogy közvetlenül melyik elemben található (szülő).

Gyermek kijelölőt a > jellel hozhatunk létre, a > jel bal oldalán a szülő, jobb oldalán a gyermek található. Ebben a példában kizárólag a közvetlenül a p HTML elemekben lévő span elemek szövegszínét festi vörösre a CSS stílus:

Szomszédos testvér kijelölő

Ezzel a kijelölővel egy bizonyos elem után következő elemet célozhatunk meg.

A fenti esetben a második, és a harmadik bekezdésre fog vonatkozni a stílus (ezek a bekezdések találhatóak egy másik után, az első nem).

Álosztályok

Állapot álosztályok

Ezekkel a kijelölőkkel egy bizonyos állapotban lévő elemre hivatkozhatunk. Ilyen állapot például ha egy link fölött áll az egérkurzor, vagy ha egy beviteli mezőbe írunk éppen.

:active Aktív állapotban lévő elemre vonatkozik, egy link addig aktív, amíg lenyomva tartjuk az egér gombot. :focus Azokra az elemekre vonatkozik, amik fókuszban vannak (ráléptettünk tabbal, vagy benne állunk egy űrlap mezőben). :hover Az egérkurzor alatti elemekre vonatkozik. :visited Azokra a hivatkozásokra vonatkozik, amiket korábban már bejártunk. :empty Üres, és gyermek nélküli elemeket lehet kiválasztani vele. :link Eddig még nem bejárt linkeket lehet vele célozni. :checked Megjelölt input elemeket céloz.

A fenti példában a linkek vörös szövegszínt kapnak, ha föléjük kerül az egér kurzor.

Pozíció álosztályok

Ezekkel a kijelölőkkel egy bizonyos pozícióban lévő elemre hivatkozhatunk. Ilyen pozíció, hogy egy elem páratlan, vagy páros elem egy sorozatban, esetleg az első vagy az utolsó darabja egy sorozatnak.

:nth-child(n) n-edik elem a sorban :nth-type(n) n-edik bizonyos elem :first-child első elem :last-child utolsó elem :first-of-type első egy bizonyos elem típusból :last-of-type utolsó egy bizonyos elem típusból

Ebben a példában a lista elemek szövegszínét módosítjuk, az első elemét a :first-child (első gyermek) kijelölő segítségével vörösre, a harmadik lista elem színét a :nth-child() (n-edik elem) kijelölővel zöldre, és végül az utolsó lista elem színét kékre a :last-child (utolsó gyermek) kijelölővel.

Álelemek

Minden HTML elemhez hozzá lehet rendelni két álelemet, ezek az eredeti elem gyermekei lesznek, egyet a tartalma előtt, egyet pedig a tartalma után tud megjeleníteni a böngésző. Az így létrejövő elemek virtuális elemek, a CSS stílus hozza létre őket, nem képezik a HTML dokumentum részét.

Az álelemek CSS-ében el kell helyezni egy tartalom content meghatározást, ez adja meg az álelem tartalmát, e nélkül a böngésző nem hozza létre az álelemeket. Ez rendszerint szöveg vagy kép lehet, de üresen is lehet hagyni.

Álelemet az elem tartalma előtt a :before kijelölővel, a tartalom után az :after kijelölővel hozhatunk létre. Az álelemek alapesetben inline (szövegközi) elemek, és CSS stílusokkal módosítható a megjelenésük.

A következő példában egy főcím szövege előtt, és után elhelyezünk egy-egy kötőjelet, és a két kötőjelnek a szövegszínét is beállítjuk a :before, és az :after kijelölők segítségével:

Kijelölők listája

Mi a CSS?

A CSS egy a webes szabványok közül. A webes szabványok közül a legfontosabb a HTML, a CSS és a JavaScript, ezek hármasa együtt alkotja a weboldalak technológiai alapját.

A CSS egy mozaikszó, jelentése Cascading Style Sheets - Egymásba ágyazható stíluslapok.

A CSS a webes alkalmazások megjelenését szabályozó stílusnyelv:

• A stíluslapok definiálják, hogy hogyan jelenjenek meg vizuálisan a HTML elemek.

• Segítenek, hogy a tartalom, és a megjelenés elkülönüljön egymástól.

• Külső állományban is elhelyezhető, így több HTML állomány is használhatja ugyanazt a CSS-t.

• Egy elemre több stílus is hatással lehet.

CSS rövid története

Korábban a HTML tartalmazta a megjelenésre vonatkozó utasításokat.

A fejlesztői igények növekedésével végül 1994-ben , és kidolgozta a CSS alapjait.

1996-ban adta ki hivatalos ajánlásként a W3C Consortium a CSS level 1 -et.

A CSS 2. kiadása 1998-ban lett hivatalos ajánlás, ez a kiadás radikálisan kibővítette az első kiadás lehetőségeit.

2005-ben a 3. kiadás szakított az eddig fejlesztési formával, nem egységes dokumentumként, hanem modulokra bontva folyik a fejlesztés, így lehetőség van építőelemenként fejleszteni a szabványt.

Tömbszerű (vagy blokkos) elemek jellemzői

A blokkos elemek vízszintesen kitöltik, a rendelkezésre álló helyet, mellettük más elem nem lehet, az elem maga előtt és után sortörést hoz létre. Magasságuk a tartalmuktól függ, a tartalom tolja szét a blokkos elemeket függőlegesen.

A böngészők blokkos elemként jelenítik meg az ebbe a kategóriába tartozó HTML elemeket - lásd HTML elemek listája.

CSS-el fel lehet ruházni ezzel a megjelenítési móddal a nem blokkos elemeket is.

Tartalom - content

Ha külön nem határozzuk meg egy blokkos elem szélességét, és magasságát, az elem 100% széles lesz, vízszintesen teljesen kitölti a rendelkezésre álló helyet. Az elem magasságát a tartalma határozza meg, például a benne lévő szöveg. Tartalom hiányában az elem 0px magasságú.

A blokkos elemeknek megadhatjuk a szélességégét, magasságát a width és a height CSS tulajdonságokkal, ez felülbírálja az alapbeállításokat, az elem magassága függetlenül méretezhető a tartalmától, szélessége függetlenül méretezhető a rendelkezésre álló helytől.

Alapestben a böngésző határozza meg a width és height értékét, ez az auto, vagyis a fentebb taglalt elvek alapján számítja a szélességet, és magasságot.

A szélességnek, és a magasságnak megadhatunk minimum és maximum értéket is:

A min-height, és min-width CSS tulajdonságokban meghatározott érték alá nem csökken az elem szélessége és magassága (alapértéke 0px).

A max-height, és max-width CSS tulajdonságokban meghatározott érték fölé nem növekszik az elem szélessége és magassága (alapértéke none, vagyis nincs felső méret korlát).

Belső margó - padding

A blokkos elemeknek meg lehet adni belső margót a padding CSS tulajdonsággal, ez felveszi a háttér színét, és belső eltartása hozzáadódik a tartalom szélességéhez és magasságához (alapértéke 0px), a tartalom és az oldal széle között képezve eltartást (úgy kell elképzelni, mint egy hagyományos képkeret esetén a paszpartut a festmény és maga a képkeret között).

A padding -et megadhatjuk külön külön oldalanként, a padding-top, padding-right, padding-bottom és badding-left CSS tulajdonságokkal:

Vagy gyorsírásos módszerrel, felsorolhatjuk az összes oldalt is (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

Meghatározhatjuk egy érték megadásával az összes oldal padding értékét is, feltételezve, hogy az összes oldal belső margójának mérete megegyezik:

Keret - border

A blokkos elemeknek lehet kerete, a keret megjelenik vizuálisan, és hozzáadódik az elem magasságához és szélességéhez. Ha a keretnek vannak átlátszó részei az elem háttere látszódik ezeken a területeken.

Keret stílus

A border-style (keret stílus) tulajdonsággal határozhatjuk meg a keret vizuális megjelenését (alapértéke a none, vagyis nincs keret).

Lehetséges értékei:

• none, hidden - nincs keret

• solid - folytonos vonal

• dotted - pontozott

• dashed - szaggatott vonal

A keret stílust is megadhatjuk gyorsírásos formában (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

Lehetőség van az összes oldal keretének border-style értékét is beállítani egy értékkel, feltételezve, hogy az összes oldal keret stílusa megegyezik:

Keret szélesség

A border-width (keret szélesség) tulajdonságnak az értéke adja a keret vastagságát. Negatív értéket nem vehet fel (alapértéke medium, vagyis közepes).

A keret szélesség megadható gyorsírásos formában, oldalanként eltérő értékkel (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

Egy értékkel meghatározva is megadhatjuk az összes oldal keret szélességét, feltételezve, hogy minden oldalon megegyezik az értéke:

Keret szín

A border-color a keret színét határozza meg. Értéke lehet bármely CSS színrendszer szerinti szín (alapértéke felveszi a szövegszínt, vagyis a color tulajdonságban meghatározott színt).

A keret színt is megadhatjuk gyorsírásos formában (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

Meghatározhatjuk egy érték megadásával az összes oldal border-color értékét is, feltételezve, hogy az összes oldal keretének színe megegyezik:

Gyorsírásos keret

Gyorsírásos módszerrel megadhatjuk oldalanként a kereteket, ehhez meg kell adnunk a keret színét, stílusát és szélességét szóközökkel elválasztva border-top, border-right, border-bottom vagy border-left CSS tulajdonságokban meghatározva:

Egy még kompaktabb megoldás, amikor az összes oldal keretét egy border tulajdonságban írjuk le, feltételezve, hogy a keret minden oldalon egyező stílussal színnel, és vastagsággal rendelkezik:

Külső margó - margin

A margin, vagy külső margó az elemek közötti eltartást határozza meg. Értéke lehet negatív, ebben az esetben egymásra csúsznak az elemek. Alapértéke 0px.

A margin esetében is van gyorsírásos variáns, oldalanként külön értékkel (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

Be tudjuk állítani egy érték megadásával az összes oldal margin értékét is, feltételezve, hogy az összes oldal margójának mérete megegyezik:

A margin-nak van egy speciális értéke, ez az auto, vagy automatikus margó, ha ezt vízszintesen, vagyis jobb és, vagy bal oldalt megkapja egy elem, a margója az adott oldalon addig nyúlik, amíg a rendelkezésre álló hely el nem fogy. Ez lehetővé teszi, hogy automatikus margóval balra, középre, vagy jobbra rendezzük a blokkos megjelenítésű elemeket.

Az auto margin számos CSS megoldás alapját képezi, lásd:

Doboz méretezése - box-sizing

A box-sizing tulajdonság alapján számolja a böngésző az elemek méretét.

Két lehetséges értéke lehet, az alapérték a content-box ebben az estben az elem tartalmának szélességéhez, magasságához hozzáadódik a belső margó és a keret szélessége, magassága.

Sötétebb kékkel a padding, és a border, alapestben ezek hozzáadódnak az elem szélességéhez (fehér nyilakkal jelölve).

A box-sizing tulajdonság második lehetséges értéke a border-box, amikor a szélességbe, és magasságba beleszámít a belső margó és a keret szélessége, magassága.

Border-box esetében a padding, és a border nem növeli az elem méretét, befelé képződik (fehér nyilakkal jelölve).

Ábra

Gyökérelem

A html elem az összes többi elem szülője. Ebbe kerül az oldal teljes tartalma.

Jellemző, hogy az oldalak nyelvét a html elemen a lang (nyelv) tulajdonsággal határozhatjuk meg.

HTML dokumentum fejléce

A head a dokumentum fejléce, a dokumentum metaadatait, és egyéb állományokra való hivatkozásokat tartalmaz, ezeket nem jeleníti meg a böngésző vizuálisan (jellemzően ezek általános információk, amit a böngésző program, internetes keresők dolgoznak fel).

A head elemet közvetlenül a html elemben kell elhelyezni.

HTML elemek a fejlécben

Az oldal címe

A title elemben megadott szöveg azonosítja a HTML dokumentumot, és ez jelenik meg a böngészőablak címsorában. Kötelezően szerepelnie kell a head elemben.

Az oldal meta adatai

A meta elemben helyezhetünk el információkat a weboldalunkról (ez nem jelenik meg a látható tartalomban). A meta elemeknek egy name (név) és egy content (tartalom) tulajdonsága van. A name határozza meg a meta információ típusát, a content pedig a hozzá rendelt információt.

Kivétel a charset amivel az oldal karakter kódolását határozhatjuk meg, ez csak egy charset tulajdonsággal rendelkezik.

Példák meta információra:

Linkek

A link elemmel hivatkozhatunk külső állományokra, ezek egy részét be fogja tölteni a böngésző. A link elemmel köthetünk be például egy CSS állományt a dokumentumunkba.

Stílus

A style elemben a HTML dokumentum megjelenését szabályozó stílusokat helyezhetünk el. A style nyitó és záró eleme által közrefogott részen a érvényesek.

HTML dokumentum törzse

A body a dokumentum törzse, ezt jeleníti meg a böngésző vizuálisan, ennek az elemnek a gyermeke az összes böngészőben megjelenő elem. A body elemet közvetlenül a html elemben a head elem után kell elhelyezni.

Szöveges elemek

Címek

A HTML dokumentum tartalmát 6 cím mélységig lehet fejezetekre, alfejezetekre bontani, ezt a h1 h2 h3 h4 h5 h6 elemekkel tehetjük meg.

Bekezdések

Az oldal szöveges tartalmát bekezdésekben p helyezhetjük el.

Listák

Két típusát különböztetjük meg, számozott lista ol, és pontozott lista ul, mindkettőnek gyermekei a lista elemek li.

Számozott lista:

Pontozott lista:

A listákat egymásba is lehet ágyazni, így lehet több szintű listákat létrehozni.

Képek

Képeket a HTML dokumentumba az img (kép) elem segítségével tudunk beilleszteni. Két kötelező tulajdonsága van, az src (forrás), ami a behivatkozott kép elérési útvonala, és az alt (alternatív szöveg), a kép tartalmának szöveges leirata.

Ha a képünk csak dekorációs célokat szolgál, és nem kapcsolódik szorosan a dokumentum szöveges tartalmához, akkor is kötelező az alt tulajdonság, de üresen hagyhatjuk az értékét.

A képeket a böngésző megpróbálja eredeti méretükben megjeleníteni, amennyiben a megfelelő ablakméret rendelkezésre áll. A width (szélesség) és a height (magasság) tulajdonságokkal ezt felülbírálhatjuk. Ha csak az egyik értéket adjuk meg a böngésző az oldalarányok megtartásával számolja ki a másikat. Az értékek pixelben értendőek.

Szövegközi elemek

A HTML elemekben lévő szöveget szövegközi (inline) elemekkel módosíthatjuk. A szövegközi elemek teljes szöveges blokkok, vagy szövegrészletek megjelenését, viselkedését módosítják.

A fenti példakódban a bekezdés egyes szakaszai fontosként (<strong>), vagy hangsúlyosként (<em>) vannak megjelölve.

Hiperlink

A hiperlinkek, vagy linkek kattinthatóvá teszik a bennük foglalt szöveget. Linket az a elemmel lehet létrehozni. Van egy kötelező tulajdonsága a href ami azt a címet tartalmazza, amit a böngésző be fog tölteni kattintás esetén. Ez a cím lehet egy másik HTML dokumentum vagy egyéb állomány, internetes cím (URL), vagy e-mail cím.

A linkek módosítják a szöveg megjelenését is, a böngésző kék szövegszínnel, és aláhúzva jeleníti meg a kattintható szöveget, így könnyű a linkeket felismerni.

Span

Van egy szövegközi elem, ami nem hordoz jelentéstartalmat, és nem módosítja a bele foglalt szöveget vizuálisan, ez a span elem (szabad fordításban dirib-darab).

Dekorációs elemek

Sortörés

A br (sortörés) elem új sorba töri a szöveget, amiben elhelyezzük, úgy hogy a br elem után következő szöveg már új sorba törik.

Vízszintes vonal

A hr (vízszintes vonal) elem egy vízszintes vonalat hoz létre. Célja a tartalom tagolása.

Strukturális elemek

Általános konténer elem

A div (csoport, rész) elemmel hozhatunk létre általános gyűjtőelemeket, úgynevezett konténereket. A div nem hordoz semmilyen jelentéstartalmat, és a megjelenése is teljesen semleges, hasonlóan a korábban tárgyalt span elemhez, csak amíg a span szövegközi elem, addig a div blokkos elem.

Ezzel az elemmel foghatunk össze egy csoportba több elemet (ha úgy tetszik részekre bonthatjuk div elemekkel egy oldal tartalmát). A div-ekben bármilyen tartalom típusú elemet elhelyezhetünk, például címeket, szöveget, listákat, képet, linket, más div-eket, vagy egyéb strukturális elemeket.

A div szemantikus variációi

A HTML korábbi verzióiban a div elemet ruháztuk fel szerepekkel a role (szerep) tulajdonság segítségével, ez a lehetőség most is megvan, de megjelentek a HTML5-ben új elemek amik kiváltják ezt az igényt.

Navigáció

A nav elem kifejezetten egy weboldalon belüli (aloldalak közötti) navigációra szolgál, így helyezhetünk el benne.

Bonyolultabb navigáció, például egy weboldal főmenüje esetében a csoportosíthatjuk a nav elemen belül.

A menü linkek helyezése lehetővé teszi több szintű almenü struktúra létrehozását.

Fejléc elem

A header elem használható egy weboldal fejléceként (ebbe kerül például az oldal logója, főmenüje), vagy kisebb tartalmi egységek fejléceként is szolgálhat. Nem összekeverendő a elemmel!

Fő tartalmi egység

A main elembe kerül a lényegi tartalom egy oldalon, minden ami nem a tartalommal közvetlenül kapcsolatos (például ), az ezen az elemen kívül helyezendő el. Egy HTML dokumentumban csak egy main elem helyezhető el.

Másodlagos tartalom

Másodlagos, a fő tartalomhoz csak kapcsolódó tartalmaz az aside elemben helyezhetünk el. Jellemző, hogy a weboldalak oldalsávjait (sidebar) aside elemekből építjük.

Lábléc elem

A footer elem a header elem párja, értelemszerűen vizuálisan a dokumentum (vagy a dokumentum egy alegységének) alján alkalmazandó.

Szekció

Egy nagyobb szerkezeti egységet tagolhatunk a section elemekkel kisebb egységekre.

Cikk

Az article egy nagyobb összefüggő szöveges tartalmi egység. Egy ilyen tartalmi egység lehet egy blogbejegyzés, hír, recept, fórum hozzászólás, közlemény... Egy HTML dokumentumban több article is lehet.

Űrlapok

Az űrlap elem

Űrlapokat a form elemmel hozhatunk létre, az összes kitölthető űrlap mező (pár kivételtől eltekintve) ebben az elemben helyezendő el. A form elem képes a tartalmát elküldeni a webszervernek.

A beviteli elem

Az űrlap mezőit az input (beviteli mező) elemmel hozhatjuk létre. Az input elem viselkedését, kinézetét meghatározza a type (típus) tulajdonsága.

Címke elem

Az űrlap beviteli mezőit a label elem látja el feliratokkal. A label elem for tulajdonságában megadott egyedi azonosító összeköti a label-t az azonosítóval ellátott beviteli mezővel. Ekkor ha a címkére kattintunk, a kurzor automatikusan beáll a beviteli mezőbe.

Ez a kötés létrejön akkor is, ha a beviteli mező a label gyermeke:

Szövegdoboz

A textarea hasonló a szöveges beviteli mezőhöz, csak ez egy több soros, és átméretezhető beviteli eszköz.

A rows és cols (sorok és oszlopok) tulajdonságaival meghatározhatjuk a kiinduló méretét is.

Lenyíló lista

A select elem option elemeket tartalmaz, ezek a lenyíló lista választható opciói. Az option elemek közül az lesz az alapértelmezett, amelyik rendelkezik a kiválasztott (selected) tulajdonsággal.

Táblázatok

Táblázat

A table elem a táblázat szülőeleme, a sorokat a tr elemek képzik, az oszlopokat, vagy cellákat a td elemek.

Minden sorban egyező számú oszlopot kell elhelyezni.

Táblázat fejléc

Táblázat cella helyett lehet táblázat fejléc cellát alkalmazni, ez a th elem. A táblázat fejléc cellában lévő tartalom vizuálisan hangsúlyosabban jelenik meg.

Felsorolt elemek listája

Hexadecimális - #rrggbb

RGB szín, 256^3 bit mélységben, amit színenként egy két helyi értékű 16 számrendszerben kifejezett szám ad meg. (16*16=256)

Hexadecimális rövid - #rgb

Mint a hexadecimális, csak kevesebb árnyalatot tartalmaz, 256^3 helyett csak 16^3 eltérő árnyalatot lehet kifejezni vele. Hexadecimális színek közül azokat, amelyeknél egy szín két helyi értéke egyezik.

#000000 = #000 #777777 = #777 #112233 = #123 #ffffff = #fff

RGB színek - rgb(r, g, b)

Megadhatjuk a színeket direkt rgb értékük alapján, vagy egy 0-255 ig terjedő számmal, vagy százalékosan is.

RGBA színek - rgba(r, g, b, a)

Hasonló mint az RGB, de itt van egy alfa csatorna is, ami meghatározza a szín átlátszóságát, az alfa csatorna értéke egy 0 és egy közötti szám, tört érték esetén részleges az átlátszóság.

HSL színek - hsl(h, s, l)

HSL (Színezet telítettség fényesség) alapú színrendszer, az első értéke 0 -től 360 -ig terjedő szög érték, ami a HSL színkörön jelöl ki egy színt, második értéke a telítettség, harmadik a világosság, ez a kettő százalékos.

HSLA színek - hsla(h, s, l, a)

Itt is van alfa csatorna mint az RGBA esetében.

Kulcsszavas színek

Színeket megadhatunk a nevük alapján is, kulcsszavas formában. A modern böngészők 140 kulcsszavas színt támogatnak.

Átlátszó

A transparent (átlátszó) kulcsszóval adhatunk meg (teljesen) átlátszó színt.

Mi az a rangsor?

Egy elemre jellemzően több CSS szabály is vonatkozhat, amik felülbírálhatják egymást, a böngészők rangsorolással döntik el, hogy mely szabály lesz érvényes az adott elemre (melyik az erősebb).

Eredet

Három forrásból származhat stílus: A böngésző alapértelmezett készlete, a felhasználó által definiált, és a webalkalmazás saját CSS-e, ez utóbbi felülbírálja a többit.

A User agent CSS a böngésző alapértelmezett formázásai egy alapot adnak a weboldalak tartalmának, így az minden nemű stílus formázás nélkül is értelmezhető lesz, ez a leggyengébb, legegyszerűbben felülírható stílus. A felhasználó által definiálható Reader CSS valamivel erősebb, de mindkettőt felülbírálja a webalkalmazások saját CSS stílusai, az Author CSS.

Sorrend

A korábbi szabályokat felülírják a későbbiek. Minél később található a kódban egy stílus, annál erősebb. Ez az állományok bekötési sorrendjére is érvényes.

Szűkítés

4 szinten hoz létre minden szabály alapján a böngésző egy rangsort, a magasabb értékkel rendelkező szabály fog érvényesülni, felülbírálva a sorrendet. A szűkítés értékét a kijelölő alapján határozza meg a böngésző.

A szűkítés értékei összeadódnak, és a kapott érték alapján a rangsorolja a böngésző a CSS szabályokat. Ezek nem helyi értékek, egy darab egyedi azonosító a kijelölőben bármennyi osztályt felülbírál.

Fontosság (!important)

!important jelöléssel ellátott szabály mindig erősebb a nem important szabálynál, két important közözött a további rangsorolási szabályok érvényesülnek. Az fontosság felülbírálja az eredetet, a sorrendet, és a szűkítést is.

Százalék

A legtöbb értéket megadhatjuk százalékban, hosszmértékként értelmezve ezt általában a szülő konténer mérete alapján számolja a böngésző.

Képpont - pixel

Tekinthetjük alap mértékegységnek, egy képpontja a magjelenítő eszköznek. A böngészők minden egyéb hosszmértéket erre számítanak át. Ez eltérhet a nagyobb képpont sűrűségű eszközökön, például retina eszközön egy pixel egy 3*3 képpontos négyzet.

Tipográfiai mértékegységek

A tipográfiai mértékegységek jellemzően egy bizonyos betű magasságát veszik egy egységnek.

Em - M magasság

A nagy M betű magassága alapján számolja a távolságokat. Ez a legelterjedtebb tipográfiai mértékegység. A szülőhöz képest állítja be a fontméretet, ha a szülőnek 2em a font mérete, a gyermeknek pedig 1em, a szülő és a gyermek számított font mérete megegyező lesz.

Rem - Relatív M magasság

Az em párja, de ez nem öröklődik, a body fontmérete alapján számítja ki a böngésző.

Egyéb tipográfiai mértékegységek

Ex

Az ex a kis x magassága alapján számolt egység, az em érték fele pixelben

ch

A ch a 0 karakter szélessége alapján számolt egység.

Fizikai hosszmértékek

A méreteket megadhatjuk fizikai kiterjedés alapján, ez a HTML dokumentum nyomtatása estén használatos.

cm - centiméter mm - miliméter in - incs pc - nyomdai pica pt - nyomdai pont

Képernyőméret

Képernyőmező szélesség - viewport width

A vw egy egysége a képernyő szélességének századrésze. vagyis egy 100vw szélességű elem a képernyő teljes szélességét kitölti.

Képernyő magasság - viewport height

A vh egy egysége a képernyő magasságának századrésze. vagyis egy 100vh magasságú elem a képernyő teljes szélességét kitölti.

Kisebb képernyő dimenzió - viewport min

A vmin egy egysége a vh és a vw értéke közül a kisebbel lesz egyenlő.

Nagyobb képernyődimenzió - viewport max

A vmax egy egysége a vh és a vw értéke közül a nagyobbal lesz egyenlő.

Idő

Animációk, átmenetek vagy hang időzítése esetén az időfaktor beállítására használhatjuk.

Szögek

Elemek forgatása esetén használatos mértékegységek:

deg - fok grad - újfok (derékszög század része) rad - radiáns turn - teljes fordulat (360°)

Háttérszín

A background-color segítségével színt adhatunk elemeink hátterének. Átlátszó szín esetén az elem mögött lévő elemek is (részlegesen) látszódni fognak. A háttérszín az elem teljes hátterét kitölti, látható a belső margó (padding), és a keret átlátszó része alatt (border). Alapértéke a transparent, vagyis átlátszó.

Háttérkép

A background-image értékeként egy kép elérési útvonalát adhatjuk meg, url('elérési útvonal') formában. A kép valós méretében jelenik meg az elem hátterében. Alapértéke a none, vagyis nincs.

Háttérkép ismétlődése

A background-repeat segítségével szabályozhatjuk a háttérkép ismétlődését.

Értékei:

• no-repeat - nincs ismétlődés

• repeat - ismétlődés (ez az alapérték)

• repeat-x - ismétlődés csak vízszintesen

• repeat-y

Háttérkép helyzete

A background-position a kép helyzetét határozza meg vízszintesen, és függőlegesen.

Megadhatjuk kulcsszavakkal, ezek:

• center - középen

• top - fent

• bottom - lent

• left - balra

Két értéket is megadhatunk első a vízszintes, második a függőleges helyzetet adja meg.

Hosszértéket, vagy százalékot is felvehet, ebben az esetben a bal felső sarok lesz az origó (innen eltolva jelenik meg a kép).

Háttérkép méretezése

A background-size határozza meg, hogy az elem hátterének mekkora hányadát fedje a háttérkép. Alapértéke az auto vagyis a kép eredeti méretében jelenik meg.

Megadhatjuk hosszmértékben a méretet, például pixelben, vagy százalékban, ami az elem méretéhez képest értendő.

Kulcsszavas értékei:

• auto - eredeti méret (alapérték)

• cover - a háttérkép teljesen lefedi az elemet

• contain - a kép addig növekszik, amíg vízszintesen, vagy függőlegesen be nem tölti az elemet.

Gyorsírásos háttér

A background gyorsírásos forma, amivel egy menetben több háttér jellemzőt is megadhatunk.

Többszörös háttérkép

Egy HTML elemnek meg lehet adni több háttérképet is, ehhez vesszővel (nem pontosvesszővel) elválasztva kell a háttérképeket felsorolni:

A background-image tulajdonsághoz hasonlóan a további háttér beállításokat is megadhatjuk képenként, szintén vesszővel elválasztva:

Hasonlóképpen működik a background gyorsírásos CSS tulajdonság:

A fenti példában háttérképenként új sorba van törve a kód, ez nagyban könnyíti az olvashatóságot.

Ha több háttérképet állítunk be egy HTML elemnek, előfordulhat, hogy kitakarják egymást, mindíg a sorrendben korábban megadott kép fog rálapolódni a később megadott képre (az elsőnek megadott kép lesz legfölül, az utolsónak megadott kép legalul).

Vízszintes középre rendezés külső margóval.

A következő technikával blokkos megjelenítésű elemeket lehet a szülő elemükben középre rendezni. A vízszintes középre rendezéshez auto értéket kell beállítani a jobb és bal oldali margin (külső margó) tulajdonságnak.

div {
    margin-left: auto;
    margin-right: auto;
}

Az elem szélességét is szükséges megadni, ez lehet relatív szélesség (százalék, vagy viewport), vagy fix érték például pixel (ha nincs megadva szélesség az elem teljesen kitölti a szülő elemet).

Ez a technika csak működik, display: inline (szövegközi) elemekre hatástalan (nincs külső margójuk).

A technika úsztatott elemek esetében nem működik.

Szövegközi elemek jellemzői

A szövegközi elemek nem törik meg a szöveget sortöréssel, egyszerűen úgy viselkednek, mint egy szó, vagy mondat.

A szövegközi megjelenítésű elemekre nem érvényesülnek a doboz modell tulajdonságok. Nem határozhatjuk meg a szélességüket, és a magasságukat, illetve nem működik a margó.

A padding (belső margó), és a border (keret) használható, a blokkos elemektől némileg eltérő módon.

CSS-el megváltoztathatjuk az elemek megjelenítési módját szövegközire:

Betűtípusok, betűcsaládok

Betűcsalád (font-family)

Betűcsaláddal határozhatjuk meg az elemeink szövegének a betűtípusát. Vesszővel elválasztva több betűtípust is megadhatunk, ezeket sorrendben megpróbálja betölteni a böngésző, ha az elsőt nem találja, megkísérli a következőt.

A fenti példában az első az Arial betűtípus, ami "minden" Windows-os gépen megtalálható, a második a Helvetica, ami nagyon hasonlít az Arial betűtípusra, de OSX operációs rendszeren elterjedt. A sans-serif általános betűcsalád (generic-family), a böngésző az ebbe a kategóriába eső elérhető fontok közül próbál egyet betölteni.

Több font felsorolásával, és általános betűcsalád megadásával biztosíthatjuk, hogy a böngésző kezelni tudja a szöveg betűtípusát, hiányzó fontok esetén is.

Általános betűcsaládok:

• serif

• sans-serif

• cursive

• monospace

Web biztos fontok

Web biztos fontok azok a betűkészletek, amik széles körben elérhetőek a különböző operációs rendszereken. Az első nagyobb csomagot a Microsoft adta ki 1996-ban Core fonts for the Web néven.

Az alábbi fontokat tartalmazza: Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings

@font-face

A @font-face segítségével mi is létrehozhatunk betűcsaládokat, és betölthetünk betűkészleteket a HTML állományainkba. Ehhez szükséges a böngészők számára is emészthető fontok (webfontok) használata.

Betűméret (font-size)

A betűmérettel határozhatjuk meg a szöveg méretét. A böngészők a nagy M betű alapján méretezik a betűket (em méret), ezért az elterjedt mértékegységek a em, és a rem, illetve a pixelben megadott méret.

Betűvastagság (font-weight)

A font-weight-et (betűvastagságot) megadhatjuk kulcsszóval, vagy számmal (100-as lépésekben). Az hogy az adott érték érvényesül-e a szövegre nagyban függ az adott betűtípustól.

Használható kulcsszavak: normal, bold, bolder, lighter Használható számértékek: 100-900 -ig, ahol a 400 a normal méret, 700 a vastagon szedett (bold).

Az hogy mely betű vastagság értéket lehet használni függ az adott fonttól. A legtöbb webfont, vagy rendszerfont a 400-as (normal), és a 700-as (bold) értékekeket támogatja csak.

Betűstílus (font-style)

A betűstílussal tehetünk dőltté egy szöveget. Alapértéke a normal, a dőlt értékei italic vagy oblique.

Betűvariáns (font-variant)

Betűvariáns segítségével készíthetünk kiskapitális szöveget. A kiskapitális szövegben a kisbetűk is olyan alakúak, mint a nagybetűk, de magasságuk megegyezik a kisbetűk magasságával (bizonyos betűtípusoknál eltérhet). Alapértéke a normal.

Szöveg igazítás (text-align)

A text-align segítségével lehet igazítani egy blokkos elemen belül a szöveget vízszintesen.

Lehetséges értékei:

• left: balra igazítás

• right: jobbra igazítás

• center: középre igazítás

• justify: sorkizárt

Szöveg díszítés (text-decoration)

A text-decoration-al húzhatjuk át, vagy alá a szöveget.

Lehetséges értékei:

• none: nincs dekoráció

• underline: aláhúzás

• overline: föléhúzás

• line-trought: áthúzás

Szöveg behúzás (text-indent)

A text-indent a bekezdés első sorában behúzást hoz létre. Negatív értéke is lehet, aminek hatására ki fog lógni az elemből az első sor. Megadhatjuk százalékban is, de inkább jellemző az em, vagy a pixeles értékadás. Alapértéke 0 (nincs behúzás).

Szöveg transzformáció (text-transform)

A text-transform-al csupa kis vagy nagybetűssé változtathatunk egy szöveget attól függetlenül, hogy a HTML állományban hogy szerepel.

Értékei:

• none: nincs

• capitalize: szóeleji nagybetű

• uppercase: csupa nagybetű

• lowercase: csupa kisbetű

Sormagasság (line-height)

A line-height határozza meg a szöveg két sora közötti távolságot. Alapértéke normal, megadhatjuk százalékban, vagy hosszmértékben.

A tartalom terület (vörös vonalakkal határolva a fenti képen) a nagy M-betű magasságával egyező magasságú, gyakorlatban ez a font mérete (tipográfiában a verzál magasság, ezen túlnyúlhatnak a betűk fel- és lenyúló szárai). A szövegközi mező magassága a sormagasság (kék vonalakkal határolt terület a fenti képen).

A tartalom terület és a szövegközi mező külömbsége a sortávolság (adott esetben negatív értéket is felvehet) - vonjuk ki a line-height (sormagasság) értékéből a font-size (betűméret) értékét, így megkapjuk a két sor pontos távolságát.

Szóköz (word-spacing)

A word-spacing határozza meg a szavak közötti távolságot. Alapértéke a normal, ez nullával egyenlő, a módosított értéke a betűtípus szóköz karakterének szélességét módosítja, akár negatív irányban is, ekkor egymásra csúsznak a szavak.

Betűköz (letter-spacing)

A letter-spacing (betűköz) határozza meg a betűk karaktermezői közötti távolságot. Alapértéke a normal, ezt módosíthatjuk hosszmérték megadásával. Értéke lehet negatív, ebben az esetben a betűk közelebb kerülnek egymáshoz.

Mi az a rugalmas dobozok

A Flexbox, vagy rugalmas dobozok egy lineáris elem rendezési metódus. Egy konténer elemeit lehet vele sorba, vagy oszlopba rendezni. Az elemek méretét, helyzetét, sorrendjét rugalmasan szabályozhatjuk. Ehhez a konténer megjelenítés (display) értékét kell flex-re állítani:

Rugalmas irány - flex-direction

A flex-direction CSS szabállyal adhatjuk meg a rugalmas elemek rendeződésének ​ fő irányát (fő tengely).

Sor - row

Sorba rendezve az elemek vízszintesen rendeződnek egy sorba, és sorrendben balról jobbra következnek eymás után. Ez az alapértelmezett beállítás.

Fordított sor - row-reverse

Ugyanaz mint a sor, csak az elemek jobbról balra rendeződve jönnek egymás után a sorrendjük szerint.

Oszlop - column

Az elemek függőleges oszlopba rendezve jelennek meg, sorrendjük szerint fentről lefelé.

Fordított oszlop

Ugyanúgy mint az oszlop esetében, a fordított oszlopban nis függőlegesen rendezve jelennek meg az elemek, de a sorrendjük szerint lentről fölfelé alakul a sorrendjük.

Rugalmas törés - flex-wrap

A flex-wrap szabályozza az elemek több sorba törését. Ha nincs törés, az elemek összenyomódnak, és arra törekednek, hogy elférjenek egy sorban.

Nincs törés - no-wrap

Alapesetben az elemek egy sorban helyezkednek el, és rugalmasan összenyomódnak.

Törés - wrap

A törés engedélyezése esetén, ha elfogy az elemek helye egy sorban, akkor új sorba törnek.

Fordított törés - wrap-reverse

A elemeink törhetnek még fölfelé is.

Tartalom rendezése - justify-content

A justify-content határozza meg, hogy merre rendeződjenek az elemek a rugalmas konténerben, illetve hogy a közöttük lévő térközöket hogyan számolja ki a böngésző.

Némi hasonlóságot mutat a szöveg rendezéssel (text align) csak itt nem szövegsorokat rendezünk balra, vagy jobbra, esetleg középre, hanem rugalmas elemeket.

Kezdőponthoz rendezés - flex-start

Végponthoz rendezés - flex-end

Középre rendezés - center

Eltartás az elemek közé - space-between

Eltartás az elemek közé - space-around

Egyenlő eltartás - space-evenly

Elemek igazítása - align-items

...

Sorok, oszlopok igazítása - align-content

...

Rugalmas elemek tulajdonságai

...

Sorrend - order

...

Rugalmas nyúlás - flex-grow

...

Rugalmas összehúzódás - flex-shrink

A flex-shrink tulajdonság határozza meg, hogy a többi elemhez képest mekkora mértékben húzódjon össze az adott elem.

Önigazítás - align-self

Az align-self ugyan úgy működik, mint az align-items (), csak ez egyetlen elemre vonatkozik.

Ábra

A @media direktíva a megjelenítő eszköz típusa, és tulajdonságai alapján léptet életbe CSS szabályokat.

Segítségével eltérő kinézetet valósíthatunk meg eltérő képernyőfelbontásokon, vagy eszközökön.

Megjelenítő eszköz típusa (media types)

A közvetlenül a @media kulcsszó után kell megadni. Lehetséges értékei:

• all - minden típus

• print - nyomtatás

• screen - kijelző

• speech - felolvasóprogram

Nem kötelező megadni, ebben az esetben az alapértéket, az all-t veszi fel.

A fenti példában a bekezdések színe képernyőn vörös, kinyomtatva viszont fekete színű lesz.

Megjelenítő eszköz tulajdonsága (media features)

Megjelenítő eszköz szélesség alapján

Mobil eszközök esetén ez a megjelenítő eszköz szélessége, asztali böngésző esetén a böngésző ablaka mérvadó.

Megjelenítő eszköz magasság alapján

Megjelenítő eszköz orientációja alapján

...

További eszköz tulajdonságok

Reszponziv webalkalmazások építéséhez az eddig felsorolt eszköz tulajdonságok bő eszközkészletet biztosítanak, de rajtuk kívül még további tulajdonságok is elérhetőek. További példák:

• aspect-ratio - képernyő arány

• resolution - pixel sűrűség (retina)

• color - megjelenítő eszköz színei

• monochrome - monokróm e a kijelző

Logikai operátorok

not (nem)

A not operátorral megfordíthatunk egy @media direktívát.

Ebben a példában minden eszköz típusra, ami nem print érvényes CSS szabály.

and (és)

Az and operátorral összekapcsolhatjuk az eszköztípusokat és jellemzőket, így több szabálynak kell megfelelnie az adott eszközön, hogy érvénybe lépjen a @media-ba foglalt CSS.

A fenti példában média típust, és média tulajdonságot is megadtunk.

, (vagy)

A , operátorral több eszköz szabályt is megadhatunk, ha egy közülük érvényes, a @media direktívában lévő CSS szabály(-ok) érvénybe lépnek.

Ebben a példában 100px alatt és 200px felett is érvényesül a CSS.

Úsztatás (float)

Az úsztatott elemek a tartalmazó konténerük felső sarkába igyekeznek, az úsztatás irányában. Az előttük lévő tartalom alá úsznak be, az utánuk következő tartalom pedig körülfolyja őket.

Az úsztatott elemek nem hoznak létre sortörést, és nem tolják szét a tartalmazó konténerüket.

Ha nincs közöttük nem úsztatott elem vízszintesen egy vonalba rendeződnek az úsztatás irányának megfelelően.

Úsztatott elemek viselkedése szövegben.

Az úsztatott elemeket a szöveges tartalom, és a szövegközi elemek körbefolyják, körbeveszik.

Úsztatott elemek egymásra gyakorolt hatása

Az úsztatott blokkos elemek megpróbálnak egy sorba rendeződni, ezt úgy kell elképzelni, mintha betűk, vagy szavak lennének egy szövegben. Nem képeznek sortörést, és nem tolják szét az őket tartalmazó elemeket függőlegesen, így ezeknek az elemeknek be kell állítani a magasságát, vagy egyéb módon kell gondoskodni arról, hogy ne 0 legyen a magasságuk.

Úsztatás törése (clear)

A clear értékkel rendelkező elem mellé nem kerülhet úsztatott elem (abban az esetben sem, ha maga úsztatott elem). Beállíthatjuk, hogy csak az elem bal, vagy jobb oldalán left, right, vagy mindkét oldalán both akadályozza az úsztatott elemeket. Alapérték a none, vagyis nincs.

Úsztatott elemek törése

A CSS alapesetben nem kínál fel lehetőséget arra, hogy oldal arányait rugalmasan, reszponzív módon tartó téglalapot, vagy négyzetet hozzunk létre. A szélesség meghatározására számos lehetőségünk van, ha rugalmas felületeket akarunk létrehozni, a százalékos szélesség megadás egy optimális lehetőség, de a magasságot nem lehet úgy százalékosan megadni, mint a szélességet.

Fix méretű négyzetet egyszerűen készíthetünk, ha a szélességét és magasságát pixelben adjuk meg:

.square {
    width: 250px;
    height: 250px;
}

Ez nem egy reszponzív megoldás, és ha megpróbáljuk százalékos értékkel helyettesíteni a szélességet, és a magasságot, az elem magassága 0 lesz.

.square {
    width: 50%;
    height: 50%; /* ez nem működik :( */
}

A magasság helyett használjuk a padding-bottom (alsó belső margó) tulajdonságot, az elem szélességével megegyező százalékos méretben.

.square {
    width: 50%;
    padding-bottom: 50%;
}

Ha átméretezzük a böngésző ablakát a négyzet megtartja az arányait, és a böngésző ablak szélességétől függően méreteződik át.

Elegánsabb megoldás, ha álelemet használunk, ebben az esetben egyenlő arányú oldalaknál 100% padding-bottom-ot kell megadni:

Ha eltérő oldalarányt szeretnénk (téglalapot, nem négyzetet) módosítsuk a padding százalékos értékét az aránynak megfelelően.

Dokumentumfolyam

A dokumentumfolyam az elemek sorozata, ennek a sorozatnak a sorrendje alapján rajzolja ki a böngésző a HTML elemeket.

A pozicionálás az elemek a böngésző által, a dokumentumfolyam alapján meghatározott eredeti helyét módosítja. Az elem pozicionálásának típusát a position CSS tulajdonsággal lehet beállítani.

Statikus pozíció (static)

Ez az alapállapot, ebben az estben az elem statikus, nem változik a pozíciója (nincs pozicionálva).

Eltolás

A nem statikus helyzetű elemek helyzetét tudjuk módosítani a következő tulajdonságokkal:

• left - eltolás balról

• right - eltolás jobbról

• top - eltolás fentről

Az eltolás alapértéke auto ez nem befolyásolja az elem helyzetét. Megadhatjuk hosszmértékben, vagy százalékban. Százalékos érték esetén a pozicionálás típusától függő (szülő-)elem mérete alapján számolja ki a böngésző az eltolás mértékét. Felvehet negatív értéket is.

Viszonylagos pozíció (relative)

Viszonylagos pozicionálás esetén az elem eredeti helyéhez képest eltolódik a megadott mértékben.

Az elem eredeti helye megmarad a dokumentum- folyamban, az utána következő elemeket eltolja, ugyanúgy, mintha statikus helyzetű lenne a pozicionált elem.

Független pozíció (absolute)

Független pozíció esetén a legközelebbi nem statikus pozicionálású szülő elemhez képest történik az eltolás (ha az elem közvetlen szülője például relative pozíciójú, akkor ahhoz képest). Ha nincs nem statikus szülő, akkor a body elemhez képest történik az eltolás.​

Az abszolút pozicionálású elem nem lesz ráhatással a dokumentumfolyamra (eltűnik). Eredeti helyére becsúsznak az őt követő elemek, illetve nem tolja ki szülőelemeinek magasságát sem.

Rögzített pozíció (fixed)

Rögzített pozíció esetén a böngésző ablakához képest történik az eltolás, ebben az esetben a pozicionált elem nem scrollozódik együtt a többi elemmel (rögzített).

Eredeti helyére becsúsznak az őt követő elemek, illetve nem tolja ki szülőelemeinek magasságát sem - hasonlóan a független pozicionálású elemekhez.

Z magasság (z-index)

A dokumentumfolyam meghatározza az elemek egymásra lapolódását is, a később jövő elemek a korábbiak fölé kerülnek.

Ezen módosíthatunk a z-index tulajdonsággal.

A böngésző ablak síkjára merőleges tengelyen (z) mozgathatjuk vele az elemeket. A pozitív érték emel az elemen, a negatív érték süllyeszt. Értéke egész szám lehet (negatív is), alapértéke az auto vagyis a dokumentumfolyam alapján számított magasság.

Kör

Kört a border-radius (keret lekerekítés) CSS tulajdonsággal lehet létrehozni blokkos elemekből. Alapfeltétel, hogy az elem szélessége és magassága megegyezzen. A border-radius értéke 50%, vagy nagyobb kell legyen, hogy létrejöjjön a kör.

div {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Ellipszis

Annyiban különbözik a körtől, hogy az oldalak hosszai nem ugyanakkorák, ha a szélessége nagyobb a magasságánál, fekvő ellipszis jön létre, ha a magassága nagyobb szélességénél, álló ellipszis.

Háttérkép és keret is használható ezzel a technikával:

A konténer középre rendezése egy széles körben elterjedt technika, a lényege, hogy a weboldalak tartalma egy bizonyos szélesség fölött középre van rendezve, ha a böngésző ablaka szélességben kisebb ennél a bizonyos szélességnél, a weboldal tartalma teljesen kitölti a böngésző ablakot.

A jobb és bal oldali egyenlő eltartásért a margin-left: auto , és a margin-right: auto felel, a konténer maximális szélességét a max-width CSS tulajdonsággal lehet beállítani

A konténer magasságát a tartalma határozza meg (tolja ki), de megadhatunk neki fix értéket is.

Egy webes alkalmazás, vagy weboldal felületének kialakítása esetén felmerül annak az igénye, hogy elemeket helyezzünk el egymás mellett. Jellemző példa erre a weboldalak fő, és alárendelt tartalmi blokkjai, a lényegi tartalom oszlopa mellett helyezkedik el jobb vagy bal oldalon az oldalsáv, vagy oldalsó panel:

Ahhoz hogy a fő tartalmi részt, a main-t, és az oldalsó panelt, az aside-ot egymás mellé tudjuk rendezni meg kell határozni a szélességüket, erre a legmegfelelőbb a százalékos méretezés, úgy hogy az egymás mellé úsztatott elemek szélessége ne haladja meg a 100%-ot.

A következő lépésben úsztatjuk az elemeket, balra, és jobbra.

Az irányok felcserélésével a vizuális sorrendet tudjuk szabályozni.

Az úsztatott elemek után következő elemek megjelenítése eltérhet a megszokottól, ebben az estben érdemes clearfix-et használni, vagy a soron következő elemre elhelyezni egy clear: both CSS tulajdonságot.

A Clearfix arra a problémára ad megoldást, hogy az nem tolják szét a szülő konténerük magasságát, így például ha egy elem csak úsztatott elemeket tartalmaz, a magassága 0-val lesz egyenlő.

Az alábbi példában a nem úsztatott elem a szülő magasságát széttolja (a szülő elem vörös kerettel van körbevéve).

A gyermeket balra vagy jobbra úsztatva a szülő elem magasságára már nem lesz hatással:

Ez jellemzően akkor jelent gondot, ha szövegben úsztatunk egy képet, és a kép túllóg a szülő elem határán:

Az alábbi CSS-t elhelyezve a szülő elemen az úsztatott gyermekek befolyásolják az elem magasságát: