TFeri.hu

CSS referencia PDF Nyomtatás E-mail
  
Tartalomjegyzék
CSS referencia
3.: Írjunk stíluslapot!
4.: Betű- és formátumkódok
5.: Színek és hátterek
6.: Elemek és határai
7.: Osztályozási tulajdonságok és felsorolások
8.: Pozicionálási tulajdonságok
9.: Nyomtatási tulajdonságok
10.: Pszeudo-osztályok és egyéb tulajdonságok
Minden oldal

CSS leírás és teljes referencia

1. fejezet: Bevezető

A HTML-nyelv elsősorban szövegek egyszerű leírására szolgál, formátumára és megjelenítésére igen csekély instrukcióval szolgál. Sokszor előfordul, hogy a megjelenítők nem képesek pontosan a szerző által megálmodott formátumban megjeleníteni a tartalmat. Ezért kell használni a stíluslapokat, amely először a Internet Explorer 3.0-ban, illetve a Netscape Navigator 4.0-ban jelent meg. Még egy indok a CSS-ek használata mellett: ha egyszerre párhuzamosan kell formázni sok lapot, akkor elegendő a stíluslapot átírni és máris egyszerre átformálódik az összes weblap. Ez egy hatalmas lehetőség – saját példámból is tudom. Ha például egyetlen weblapon belül van több tucatnyi HTML-lap, akkor nem kell minden stílus-igazításkor minden egyes lapot egyesével átbogarászni, vagy egy jobb minőségű HTML-szerkesztővel a megfelelő elemeket átírni, hanem elegendő a CSS-lap megfelelő kiigazítása.

Másik fontos lehetőség a CMS-rendszerek - pl.: Joomla, Drupal, Wordpress, stb. - által tárolt CSS-ek átírása. Ilyen esetben gyakorlatilag minden egyes apró tulajdonságot a CSS tárol és ha csak 1-2 apróságot szeretnénk átírni a kinézeten belül, akkor elő kell venni a megfelelően áttekinthető CSS referenciát.

 

Sokan írtak a HTML-lel, illetve a CSS-sel kapcsolatban. Többen hiányolták, hogy a HTML nem teljes, mivel több paraméter nincsen benne. Igen, ez szándékos volt, mivel ezt a HTML-könyvet elsősorban az emelt szintű informatika érettségire készülőknek írtam. Persze bárki informatika iránt érdeklődő is forgathatja és nyugodtan, önállóan megtanulhatja belőle a nyelv alapjait. A CSS más téma! Kérem, hogy csak az vágjon bele a CSS-be, akinek szüksége van rá! Ez már nem egy tankönyv, hanem egy referencia. Igyekszem minél pontosabb lenni, de még érthető!

Fontos megemlíteni, hogy eme írás elkészítésekor igen sokat használtam a következő oldalakat:

2. fejezet: A CSS három alapvető formája

A stílus leírását többféleképpen is bele lehet ágyazni a lapokba. A legegyszerűbb és a leggyakoribb megoldás, ha egy önálló, külső CSS-lapot használunk. Példa:

<LINK REL="stylesheet" HREF="styles.css" TYPE="text/css">

TITLE paraméterbe bele lehet írni egy tetszőleges címet a CSS fájlból, amelyet a böngészők felhasználnak az éppen aktuális lap megjelenítésére. Ha több ilyen is fel van sorolva, akkor a böngésző felajánlja a választást. Javaslat: az alapértelmezett stíluslap legyen az utolsó, mivel a legutolsó lesz mindig az érvényes. További paraméter még a HREF , ahová a stíluslap URL-je kerüljön! Az egész utalást a HEAD-szekcióba kell tenni. Most pedig lássunk egy konkrét példát:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Stilusok</title>
<link REL="StyleSheet" TYPE="text/CSS" HREF="Stilusok/Summer.css" TITLE="Minta33">
</head><body bgcolor="#FFFF00"> <h1>Csatolt CSS-p&eacute;lda</h1>
Ez a p&eacute;lda a TFeri.css 
nev&ucirc; st&iacute;luslapot haszn&aacute;lja a megjelen&iacute;t&eacute;shez..
</body>
</html>

A <LINK> paraméterei - az említetteken kívül - nem túl bonyolultak. Az említett REL paramétere stíluslapok használatánál érthetően kötelező: "stylesheet". Szintén kötelező a TYPE="text/css" is, mivel ez a link típusára utal. A TITLE és a HREF használatáról már szó esett. Lehet használni a DISABLED elemet is, amikor - például az oldal kipróbálásakor - semlegesíteni kell az elemet. Szintén használható a MEDIA paraméter, mely értékei szerint lehet SCREEN, PRINT vagy ALL is. (képernyős kimenet, csak nyomtató, mindkettő - alapértelmezés)

A második lehetőség a <HEAD> tagen belüli STYLE megoldás. Itt nincs külső fájl, így nem használhatjuk más file-okban, viszont a megadott stíluskompozíciót az egész HTML-oldalon belül könnyedén alkalmazhatjuk. Legyen példa az előző file - átírva eme módszerrel:

<HTML>
<HEAD>
<TITLE>Stílusok</TITLE>
<STYLE TYPE="text/css" TITLE="Bright Colours">
body {background: blue; color: red}
p {color: red;font-size: 14 pt;font-family: Arial;font-weight: bold;margin-left: 5%}
H1 {font-family: "Times New Roman"; color: green; font-weight: bold; text-transform: capitalize; margin-left: 3; font-size:25; font-style: "bold"}
</STYLE>
</HEAD>
<BODY>
<H1>Be&aacute;gyazott CSS</H1>
<P>Be&aacute;gyazott st&iacute;luslapok.</p>
</BODY>
</HTML>

A <STYLE> lehetséges paraméterei, mint a fentiekben is látható, egyszerűek. A TYPE="TEXT/CSS" kötelező. Használható a TITLE is a stílus címének megadásához, de ez itt igen csekély jelentőségű. Ugyancsak használhatóak az előzőben (is) ismertetett DISABLED és MEDIA paraméterek.

A harmadik módszer az egyes HTML-szerkesztők által előszeretettel használt tagen belüli formázás. Lényege, hogy a stílus hatóköre pontosan addig terjed ki, amíg a tag lezárásra nem kerül. Íme az eddig kétszer használt fájl harmadik verziója:

<HTML>
<HEAD>
<TITLE>Stilusok</TITLE>
</HEAD>
<BODY style="background: blue; color: red">
<H1 style="font-family: "Times New Roman";color: green; font-weight: bold;
margin-left: 5%; text-transform: capitalize; margin-left: 3; font-size: 25; font-style: "bold">
Be&aacute;gyazott CSS</H1>
<P style="color: red; font-size: 14 pt; font-family: Arial; font-weight: bold; margin-left: 5%">
Be&aacute;gyazott st&iacute;luslapok.</p>
</BODY>
</HTML>

Véleményem szerint a három lehetséges módszer szerint a legjobban a legelsőt lehet kihasználni, de ez is, mint oly' sok minden a HTML-nyelvben, ízlés kérdése.

 



 
Ulti Clocks content

Hirdetés