Kataporta webdesign, webhosting

A stíluslap

A stílusfájl megkönnyíti a weblapkészítő dolgát, ugyanis ennek segítségével sokkal kevesebb kódot kell bepötyögtetni, bizonyos formázási elemeket egyszerű módszerrel alkalmazhatunk a honlapunkon.

Pédául, ha több helyen mindig középre rendezett nagy kék betűkkel szeretnénk írni, akkor a hagyományos módszerrel, hosszú kódsorozatot kell megadnunk minden ilyen sor esetében.
A css stílusfájl használatával csupán a szöveg előtt kell hivatkoznunk az előre beállított tulajdonságokra.

A stílusfájlt is lehet sima jegyzettömbbe szerkeszteni, mentéskor pl. ilyen nevet lehet adni neki: stilus.css (tehát a kiterjesztés css, majd a "minden fájl" opciót kell választani, ANSI kódolással.) Ezt a fájlt abba a mappába érdemes menteni, ahol a honlapon dolgozunk - a fejlécben a </head> ELŐTT kell behívni ezzel a sorral:
<link href="stilus.css" type="text/css" rel="stylesheet" />

Stílusfájl készítése - alapok


  1. Beállíthatjuk az egész weboldal alap-megjelenését, használatos betűtípusát, betűméretét, betű-színét, háttérszínt, háttérképet, ...stb. - kb. 5-8 sorban. Ezek a beállítások az egész honlapra érvényes hatással vannak.
  2. És vannak a főcímek, a kiemelt szövegrészek, táblázat fejlécek,... stb. amelyek akkor a legszebbek, ha azokat mindig egységesen jelenítjük meg. Ezeket az elemeket külön definiáljuk - s csak az alapbeállítástól eltérő helyeken hivatkozunk rájuk: Pl. minden oldal főcíme előtt... (Mint itt a tanfolyami részben is a "Stíluslap" feliratnál)
  3. A stíluslappal eleve tagolhatjuk a honlapot is - kisebb egységeket alkotunk, és azokra alkalmazunk egyedi beállításokat, amik csak arra az adott egységre vonatkoznak. (pl. a menü megjelenítése - itt nálam is sötét alapon fehér betűk és linkek, a belső szövegmezőben pedig más beállítás szerint)
  4. Ezek a fő- és alapbeállítások az összes aloldalra is hatással vannak, ezért rendkívül hasznos alkalmazni a stílusfájlt. Érdemes megismerkedni vele már a HTML tanulással egy időben, és, ha lehet, akkor azonnal használni is - hiszen a későbbiek folyamán úgyis mindenki áttér az "egyszerűbb" módszerre:-)


Alkalmazás


A hosszú kódsorozat helyett - példaképpen - így hivatkozunk:<div class="nagykek"> Ide jön az a kiemelt szövegrész, vagy címmező </div>


.... a lecke kidolgozása folyamatban van....



KATAPORTA - HONLAPKÉSZÍTÉS
0670 261 2135


kata@kataporta.net
Megosztás
Copyright © kataporta.net 2021 | web: KataPorta.net