Css dinamikus átméretező űrlap. CSS űrlapok. Relatív méretváltozás százalékos arányban

4. sz. laboratóriumi munka

LÉPTETÉSŰ STÍLUSLAPOK (CSS)

A munka célja

Ismertesse meg a CSS lépcsőzetes stíluslapok fogalmát, valamint sajátítsa el a használatukban gyakorlati ismereteket.

Elméleti információk.

Az Internet Explorer saját stílusát kínálja, amelyet alapértelmezettnek neveznek. Ez a stílus tiszta fehér hátteret, fekete betűszínt feltételez, minden hivatkozás aláhúzott és kék, stb. Mi van, ha mindez nem tetszik? Már tudja, hogyan módosíthat közvetlenül különféle attribútumokat. Még ha sok azonos értékű objektum is van, már tudja, hogyan kell osztályokat használni. De van egy másik lehetőség is. A dokumentum teljes stílusának beállításához az úgynevezett hierarchikus stíluslapokat (Cascade Style Sheets – CSS) használják, amelyek a különféle objektumok tulajdonságainak beállítási halmaza. Bizonyos szempontból hasonlítanak az osztályokra, de ha egy osztály egy dokumentumon belül jön létre, és lehet, hogy nem alkalmazzák, akkor a CSS, ha benne van, akkor a benne lévő beállítások közvetlenül érintik a dokumentum összes objektumát.

Bevezetés a CSS-be

A CSS nagyon hasonlít az osztályokhoz, az egyetlen különbség az, hogy egy már ismert objektum stílusát írják le. Vizuális példaként most nézzen körül a szobájában (irodában, hallban...), amelyben éppen tartózkodik. Biztosan sok különféle tárgyat fog látni (asztal, szék, ablak, számítógép). Ezen objektumelemek mindegyike rendelkezik jellemzőkkel, és listát kell készítenie ezekről az objektumokról és jellemzőikről. Valami ilyesmihez juthat a végén:

táblázat:
szín - barna
anyaga - fa
számítógép:
szín - fehér
anyaga - műanyag
cél - munkához

Természetesen lehet menni másfelé is, de csak a CSS van így összeállítva, ahol az objektumok helyett objektumok jelennek meg, és a jellemzőik kissé eltérnek. Például itt van egy részlet egy ilyen dokumentumból:

test
{
háttérszín: rgb(255,255,153);
szín: rgb(51,51,153);
}
h3
{
szín: rgb(255,0,0);
betűcsalád: arial, helvetica;
}

Itt állíthatod be, hogy a BODY és a h3 elem stílusa milyen legyen. A nem megadott paraméterek alapértelmezés szerint megmaradnak.

A CSS létrehozása nem igényel nagy erőfeszítést, és egy egyszerű jegyzettömbben is elvégezhető, bár vannak erre a célra speciális programok, amelyek megkönnyítik a munkát, és egyértelműen megmutatják, hogyan fog kinézni a majdani dokumentum ezzel a stílussal. Keressen ilyen programokat a lemezén vagy ismerőseinél.

2.2.Stíluslap készítése egy dokumentumban

A CSS felvételének két módja van. Az első, hogy a dokumentum elején a STYLE elemben, osztályként állítsuk be. Ez így történik (1. példa):

h3 (szín: piros)
h3 (szín: piros; betűstílus: dőlt)



Ez a dokumentum
stíluslapokat használ

Ebben a példában a képernyőn két vonalat fog látni, amelyek két objektumból állnak: h3 és h3. Nézze meg, mi lett az Internet Explorer alapértelmezett stílusa. Magában az objektumban azonban nem adtunk utasításokat a stílusára vonatkozóan. Így akárhány h3 és h3 objektumot hoz létre, a stílusuk mindig ugyanaz lesz, mint amit a stíluslapon megadott.

2. 3. Stíluslap külön fájlban

Ha tetszik az Ön által létrehozott stílus, és minden dokumentumában használni szeretné. Vagy a dokumentuma sok HTML-oldalból áll, és mindegyiknek azonos stílusúnak kell lennie, nem kell minden alkalommal a stíluslap sorait beütni a dokumentum elején.

A CSS-nek egy weboldalhoz való csatlakoztatásának második módja az, hogy a CSS-t külön fájlban hozzuk létre, és magában az oldalon belül hivatkozunk erre a fájlra. Ezután csak egy sort írhat az oldalra, és a stílusa továbbra is ugyanaz lesz, mint a külső fájl stílustáblázatában. Úgy gondolom, hogy ennek a módszernek az előnyeiről nem kell sokáig beszélni.

Tehát először hozzon létre egy táblázatot a fenti szabályok szerint. Ezután adjon hozzá egy, a következőhöz hasonló sort az elemhez, hogy tartalmazza a stíluslapot:

A LINK azt jelenti, hogy az elem kapcsolódik az aktuális oldalhoz, a REL és a TYPE stíluslapként írja le az elemet, a HREF pedig azt a címet tartalmazza, ahol a CSS-t tartalmazó fájl található.

Dinamikusan változó CSS

Dinamikusan módosíthatja a mellékelt stíluslapfájl nevét, ennek megfelelően magát a stílust is. Itt van egy függvény a JScriptben, amely meghívásakor, ha már alkalmaztak valamilyen stílust, eltávolítja azt, és újat csatlakoztat.

függvény change_style()

(if (document.styleSheets.href != null)
document.styleSheets.href = "newStyle.css";
}

Ha egy stíluslap egy HTML-oldalon belül van definiálva, akkor az addRule(object, style) függvény segítségével új definíciókat adhat hozzá. Ahol az objektum egy objektum, a stílus pedig stílusbeállítások. Íme egy példa, amelyben egy gombra kattintás után a stíluslap megváltozik (2. példa):

függvény newRule()

document.styleSheets.MyStyles.addRule("P","szín:kék");)


h3 (szín:piros)
h3 (szín:piros;betűstílus:dőlt)



Ez a dokumentum stíluslapokat használ

Ez egy bekezdés. Kattintson a gombra a stílus megváltoztatásához

Ha megtekinti az oldalt ezzel a kóddal, látni fogja, hogyan változik a stílus a beállítás stíluslaphoz való hozzáadásával.

osztályok

Az osztály egy másik módja annak, hogy beállítsuk, hogyan nézzen ki a szöveg az oldalon. Lényegében megad egy stíluskészletet, például színt, betűméretet, betűméretet és így tovább, de nem rendeli hozzá egy adott címkéhez. Az osztály így néz ki:

#szöveg
( pozíció: abszolút;
felső: 400 képpont;
bal: 10px ;)

A (szöveg-dekoráció:nincs;)

.szabályos
(szín: piros ;)
.szuperNagy
( betűméret: 16 pt;
font-weight:bold;
szín: piros;
}
.szerzői jog
( font-size:9pt;
betűstílus:dőlt;
text-transform:capitalize;
}

Ebben a példában három osztály jön létre: normál, szuperBig, szerzői jog. Az alábbiakban bemutatjuk, hogyan kell ezeket az osztályokat alkalmazni a szöveges navigációs rétegben.

SzuperBig osztály

Rendszeres osztály

Osztály szerzői jog

P
{
betűméret: 16 pt;
font-weight:bold;
}

P.kicsi
( font-size:9pt;
margó-bal:5em;
margó-jobb:5em;
}
Az alábbiakban bemutatjuk, hogyan kell alkalmazni az osztályt

( font-size: 16pt;

font-weight:bold;

font-family: verdana, sans-serif;

( font-size:9pt;

margó-bal:5em;

margó-jobb:5em;

cool (szín: kék; betűtípus; dőlt;)

Ez a dokumentum stíluslapokat használ

Szigorú ellenőrzés címkével

A címke kényelmes, sokoldalú eszköz a stílus alkalmazásához, ahol szükség van rá.

Ez a dokumentum stíluslapokat használ

Ez a dokumentum