Az alábbi leírásban csak a rövid deklarációk formájának bemutatására törekszem, és nem térek ki az egyes tulajdonságok magyarázatára, valamint arra, hogy az ezek milyen értékeket vehetnek fel. (Ezek megtalálhatók a W3schools CSS referenciájában)

Background (háttér)

A background meghatározásával egyszerre 5 háttér tulajdonság deklarációját helyettesíthetjük. Az első a background-color (#ffffff), majd background-image(url(’hatterkep.jpg’)),  background-repeat (no-repeat), background-position (10px 20px) és a background attachment (scroll).

background: #ffffff url('hatterkep.jpg') no-repeat 10px 20px scroll;

De mi történik ha nem határozzuk meg valamelyik tulajdonság értékét? A böngésző úgy fogja értelmezni a kódot, mintha az alapértelmezett értékeket adtuk volna meg. Lehet kísérletezni! :)

Margin, padding (margó és helykitöltés)

margin: 5px; padding: 5px;

Egy érték megadásakor az összes margó azonos nagyságú lesz.

margin: 2px 4px; padding: 2px 4px;

Ha két értéket adunk meg, akkor az első szám (2px) a felső és az alsó, a második szám (4px) a bal és jobb margókat jelöli.

margin: 1px 2px 3px; padding 1px 2px 3px;

Három érték megadásakor az történik, hogy az első érték a felső margót (1px), a második érték (2px) az oldalsó margókat(tehát a balt és a jobbat egyaránt), az utolsó pedig az alsó margó értékét határozza meg. Talán elsőre kicsit trükkösnek tűnhet, de jobban átgondolva ez a működés így logikus.

margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px;

Ez a rövidítés a margin-top, margin-right, margin-bottom és margin-left tulajdonságokat hivatott egyszerűsíteni egy sorban. (Ebben a sorrendben.) Az értékek megadása az óramutató járásával megegyező irányban történik, tehát az első érték a felső margó (1px) lesz, a következő a jobb oldali (2px), majd az alsó (3px) és a bal (4px) következik.

Border (szegély)

A border esetében border-width, border-style, border-color tulajdonságokat határozzuk meg egyszerre:

border: 1px solid #000;

Ezzel az egy deklarációval mind a 4 szegélyt azonos stílusúra állítjuk. Ha külön szeretnénk ezt megtenni, akkor

border-top: 1px solid #000;
border-right: 2px solid #000;
border-bottom: 3px solid #000;
border-left: 4px solid #000;

A szegélyek vastagsági értékeit is beállíthatjuk a következő formában:

border-width: 1px 2px 3px 4px;

Akárcsak a margó és a helykitöltés rövidített megadásánál, a sorrend itt is az óramutató járásával megegyező, tehát felső (1px), jobb oldali (2px), alsó (3px), majd bal oldali (4px).

Font (betű)

Font-style, font-variant, font-weight, font-size, font-height, font-family. Ennyi tulajdonsággal rendelkezhet egy font tag a CSS-ben. Nézzük a rövidítést:

font: italic small-caps bold 1em/120% sans-serif;

A sorrend a fentebb említett. A trükk a font-size és font-height résznél van, ezeket ugyanis per jellel elválasztva kell megadni. A font-size és font-family tulajdonságok kivételével az összes többit el lehet hagyni, ekkor az alapértelmezett értékeket fogja használni a böngésző.

List (lista)

List-style-type, list-style-position, list-style-image a meghatározandó tulajdonságok sorrendje. Valahogy így:

list-style: disc inside url('gomb.gif');

A rövidítésben először az egyes elemek jelölésének típusát, aztán a jelölő helyét, majd végül az elemek jelőlésére használandó kép url-jét állítjuk be.

Outlines (kontúrok, vagy körvonalak)

Ezt csak néhány böngésző támogatja, ezért én személy szerint nem is szoktam használni. Azért leírom:

outline: 1px solid #fff;

Akárcsak a border esetében, itt is a width, style és color tulajdonságokat deklaráljuk.

Színek

A CSS-ben leginkább 6 jegyű hexadecimális számokat (# jel és 6 számjegy illetve betű) használunk a színek meghatározására. (Ugyan az egyes színeket betűvel is ki lehet írni, én ezt nem szoktam használni.)
Az első két számjegy a vörös, a következő kettő a zöld, és az utolsó kettő a kék színkódja. (#RRGGBB)
Nem mindenki tudja azonban, hogy lehetőség van ezeknek a számjegyeknek is a rövidítésére. Például a vörös kódja a #ff0000, a rövidítése pedig #f00. Észrevehető, hogy nem egyszerűen elhagytuk az utolsó 3 karaktert, hanem a rövid kódból a karakterek duplázásával kapjuk meg a 6 jegyű karaktersort. Ha belegondolunk ebbe a konverzióba, akkor magától  értetődő, hogy nem minden színárnyalatnak létezik rövid változata.

A fejlesztés során nekem jól szokott jönni, hogy fejből tudom egy pár szín kódját, ezért összegyűjtöttem ide is néhányat, hátha jól jön valakinek:

#000 – fekete
#111, #222, #333, … #999, #aaa, #bbb, #ccc, #ddd, #eee – a szürke halványuló árnyalatai
#fff – fehér
#00f – kék
#ff0 – sárga
#f60 – narancs
#f00 – vörös

Kaptam egy érdekes feladatot: oldjam meg egy Windows XP rendszernél, hogy amikor az alapértelmezett internetkapcsolat megszakad, azt a rendszer észlelje és tegye meg a megfelelő lépéseket annak érdekében, hogy a gép interneten mardjon.

Elkezdtem kutakodni a rendszer lelkében, viszont minden egyes megoldás amit találtam valamilyen szerver verzióra vonatkozott, de egyik sem XP-re, viszont az adott gépen szerver alkalmazása nem lehetett megoldás anyagi okok miatt.

Adott néhány parancs a kapcsolat ellenőrzésére paranccsorból, de konkrétan hibakezelésre semmilyen élhető és hatékonyan hasznosítható eszközt nem találtam.

Elkezdtem kísérletezni mindenféle megszokott paranccsal (ping, rasphone, tracert,ipconfig), viszont mibe állítom én ezt össze, ami megfelelően le tudja kezelni a programok által visszaadott kimenetet, ráadásul reagálni tud rájuk úgy, hogy mellette jegyzeteket is készít a saját munkájáról?

Derült égből a villámcsapás: PHP!  Egyszerűbb, mint egy C-ben írt programot módosítgatni, sokkal könnyebben konfigurálható és ami nem utolsó szempont: nyílt és ingyenes, nem szükséges apróbb módosítások miatt százezrekért új programot csinálni – egy jegyzettömbben összerakható. Adott a feladat: Gép, aminek mindig online kell lennie, egy megadott gépre adatokat küldeni a nap 24 órájában, megszakadás nem engedélyezett.

El is készült egy kis szösszenet: leellenőrzi, hogy a kapcsolat él-e, végigellenőrzi, hogy az adatok küldése lehetséges-e minden megadott időben. Akár 3 másodpercenként is, amennyiben valahol hibába botlik azonnal naplózza azt és megteszi a szükséges intézkedéseket: ha az alapértelmezett net megszakad, létrehozza a másodlagos mobil internetet, ami éppen arra elég, hogy a legfontosabb adatok időben eljussanak a megfelelő helyre a megfelelő időben.

Az első jól működő verzió láttán igen meglepődtem, hogy több évi tanulás után még mindig tud újat mutatni nekem ez a nyelv. A végére hagytam a legjobbat: és még mindig fejlődik, alkalmazkodik az új kihívásokhoz, új célokat fogalmaz meg és kivitelez. A PHP 1995-ben még egy végtelenül egyszerű Perl-ben írt értelmező volt, mára… Doctor Who szuperszonikus csavarhúzója :).

PS: sajnos a kávéfőzésre és a pizzakészítésre még nem tudtam rávenni :(. Még.

1. Lépjen kapcsolatba velünk a rendelés oldalon keresztül.
2. Munkatársunk fel fogja keresni Önt, hogy egyeztethessünk egy időpontot a személyes találkozásra vagy telefonbeszélgetésre a konkrét igények tisztázása érdekében.
3. A részletek egyeztetése után írásos szerződésbe foglaljuk a honlap elkészítésének és fenntartásának feltételeit, majd miután ezt mindkét fél elfogadta, megkezdjük a weboldal elkészítését.
4. A tényleges munka első lépése egy grafikai látványterv elkészítése. Ez egy előzetes kép a későbbi weblap kinézetéről, amelyet a megrendelő véleménye alapján az igényeihez igazítunk.
5. A grafikai finomhangolás után következik a weboldal fejlesztése egy ideiglenes címen, amelyet a megrendelő folyamatosan figyelemmel kísérhet. Ezzel egyidőben megkezdjük a domain név regisztrálását is.
6. Közvetlenül a véglegesítés előtt elvégezzük a szükséges módosításokat, illetve ellenőrizzük a weboldal megjelenését a legnépszerűbb böngészőkben.
7. A weblapkészítés lezárásaként feltöltjük a honlapot a végleges címre.