CSS - lépcsőzetes stíluslapok a kezdőlap modern kialakításához
A lépcsőzetes stíluslapokat a modern webtervezés során használják a tartalom és a design elkülönítésére. Ez azt jelenti, hogy a tartalom a HTML-kódban található, és a dizájnt és a színeket a stíluslap-információk határozzák meg.
- központilag meghatározható (egy .css fájl meghatározza a teljes honlap megjelenését, ebben az egy fájlban végrehajtott változtatások megváltoztatják a teljes honlap megjelenítését is)
- gyorsabb betöltési idő, mivel az egyes HTML-oldalak karcsúbbak, és a központi .css fájlt csak egyszer kell betölteni
- A CSS-t az összes böngésző támogatja az alapfunkciókban
- Ha egy böngésző nem ismeri a CSS-definíciót, akkor egyszerűen nem jelenik meg. A webhely egyébként működik (természetesen nem néz ki jól, de a funkcionalitás megmarad)
Példa a CSS-sel történő formázásra:
CSS-sel formázott szöveg
És így néz ki a megfelelő forráskód:
style = "background-color: # 0080FF; color: black; font-family: BankGothic Md BT; font-size: 20pt; letter-spacing: 5px; padding: 10px; text-align: center"> CSS-sel formázott szöveg
A piros színű rész a CSS információ. Amint láthatja, a CSS-információk a címkében vannak
és az utolsó napon adják meg
ismét befejezte. A CSS információ csak a forrásszöveg ezen részét érinti.
Sokkal érdekesebb azonban, ha egy weboldal teljes felépítését külső CSS fájlon keresztül irányítjuk. Így integrálódik egy külső CSS fájl:
A HTML-fájl fejlécében adjon meg egy linket egy .css fájlhoz.
Így néz ki (a forráskódban):
A piros rész a .css kulcsfontosságú része - itt hivatkozunk a fájljára.
Most hozzon létre egy megfelelő .css fájlt a Windows szerkesztőben, példánkban a design.css fájlt a következő tartalommal:
Különösen figyeljen a .css fájlkiterjesztésre! Most már tetszés szerint megváltoztathatja a design.css fájlt.
A .css fájlok létrehozásának és szerkesztésének legegyszerűbb módja a Topstyle CSS szerkesztő használata. További információt itt kaphat:
- download.chip.eu/en/TopStyle-Lite-3.10_919203.html - itt megkapod az ingyenes Topstyle Lite-t a Chip-től
- és itt a professzionális változat (díjköteles): www.topstyle4.com
Rengeteg formázás van a CSS-ben. Ezeket a Selfhtml-ben lehet a legjobban leírni:
- wiki.selfhtml.org/wiki/CSS - A Selfhtml a HTML-re való hivatkozás nagy CSS-területtel, az összes formázási opció pontosan és részletesen le van írva, és vannak példák is.
A CSS körül rengeteg trükk, tipp és kísérlet is található. Az alábbiakban bemutatjuk a Cascading Style Sheets legérdekesebb webhelyeit:
Ezzel hivatalosan is megmutathatja, hogy webhelye tartalmaz kaszkád stíluslapokat (CSS).
Talált hibát a weboldalunkon? Mondja el nekünk, hogy kijavítsuk a hibát!