20.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">
A HREF paraméterbe a stíluslap URL-je kerüljön! A típus egyértelmű (type), ahogy a stípuslap utalás is (REL=”stylesheet”). Az egész utalást a HEAD-szekcióba kell tenni. Bele lehet még építeni a szerzőt (author), a felhasználói ikont (icon), További részletekért érdemes felkeresni a https://www.w3schools.com/Tags/att_link_rel.asp weblapot. 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élda</h1>
Ez a példa a TFeri.css nevű stíluslapot használja a megjelenítéshez..
</body>
</html>
A második lehetőség a <HEAD> tagen belüli STYLE megoldás. Itt nincs külső fájl, tehát nem használhatjuk más fájlokban, viszont a megadott stíluskompozíciót az egész HTML-lapon belül könnyedén alkalmazhatjuk. Legyen példa az előző fájl - á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ágyazott CSS</H1>
<P>Beágyazott stí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ű.
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ágyazott CSS</H1>
<P style="color: red; font-size: 14 pt; font-family: Arial; font-weight: bold; margin-left: 5%">
Beágyazott stí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.