A Cascading Style Sheet (CSS) a weboldalak kódolására szolgáló rendszer, amely lehetővé teszi a tervezők számára, hogy egyszerre több funkciót manipuláljanak bizonyos elemek csoportokhoz való hozzárendelésével. Például a weboldal hátterének kódjával a tervezők megváltoztathatják a háttérszínt vagy -képet a webhely minden oldalán, a CSS -fájl egyetlen módosításával. Így hozhat létre CSS -t egy alap weboldalhoz.
Lépések
Rész 1 /4: Soros CSS írása
1. lépés. Győződjön meg arról, hogy rendelkezik alapvető ismeretekkel a HTML -címkékről
Tudnia kell a címkék működését és a
src
és
href
attribútumok.
2. lépés Ismerje meg az alapvető CSS -tulajdonságokat
Meg fogja találni, hogy nagyon sok ingatlan van. Nem szükséges azonban mindegyiket megtanulni.
-
Néhány jó CSS alapvető tulajdonság, amit tudnia kell
szín
és
betűtípus család
- .
3. lépés. Ismerje meg az egyes tulajdonságok értékeit
Minden tulajdonságnak szüksége van értékre. A
szín
például a tulajdonságot
piros
érték.
4. lépés. Ismerje meg a
stílus
HTML attribútum.
Olyan elemen belül használják, mint például
href
vagy
src
. Használatához az egyenlőségjel utáni idézőjelek közé tegye a CSS attribútumot, egy kettőspontot, majd a tulajdonság értékét. Ezt CSS -szabálynak nevezik.
5. Lépés. Tudja meg, hogy a professzionális webfejlesztők általában nem használják az inline CSS -t webhelyekhez
A soron belüli CSS szükségtelen rendetlenséget adhat egy HTML dokumentumhoz. Ez azonban nagyszerű módja annak, hogy megismerkedjen a CSS működésével.
2. rész a 4 -ből: Basic CSS írása
1. lépés: Indítsa el a használni kívánt programot
Lehetővé kell tennie HTML és CSS fájlok létrehozását.
Ha nincs telepítve speciális program, használhatja a Jegyzettömböt vagy más szövegszerkesztőt. Egyszerűen mentse el a fájlt szöveges fájlként és CSS -fájlként is
2. Nyissa meg a webhely HTML -fájlját
Nyissa meg ezt HTML -szerkesztővel is, ha telepítve van.
A HTML -szerkesztők lehetővé teszik a HTML és a CSS egyidejű szerkesztését
3. Hozzon létre egy címkét a HTML fejében
Ez lehetővé teszi a CSS írását külön fájl nélkül.
4. lépés: Válasszon ki egy elemet, amelyhez stílust szeretne hozzáadni, és írja be az elem nevét, majd egy göndör zárójelet ({})
A kód olvashatóbbá tétele érdekében mindig tegye a második göndör zárójelet a saját sorára.
5. lépés. A zárójelek közé írja be a CSS -szabályokat, ahogy a
stílus
tulajdonság.
Minden sornak pontosvesszővel (;) kell végződnie. A kód olvashatósága érdekében minden szabálynak a saját sorában kell kezdődnie, és minden sornak behúzva kell lennie.
Nagyon fontos megjegyezni, hogy ez a stílus az oldalon a kiválasztott típus minden elemére hatással lesz. A pontosabb stílusról a következő részben lesz szó
3. rész a 4 -ből: Továbbfejlesztett CSS
1. Létrehoz egy CSS -fájlt, nem pedig HTML -fájlt, és mentse a
.css
kiterjesztés.
Nyissa meg a HTML -fájlt is.
2. Hozzon létre egy címkét a HTML fejében
Ez lehetővé teszi, hogy külön CSS -fájlt kapcsoljon a HTML -dokumentumhoz. A linkcímkének három attribútumra van szüksége:
rel
típus
és
href
-
rel
"kapcsolatot" jelent, és megmondja a böngészőnek, hogy mi a kapcsolat a HTML dokumentummal. Itt ennek értéke kell, hogy legyen
"stíluslap"
- .
-
típus
megmondja, hogy milyen típusú médiához kapcsolódik. Itt ennek értéke kell, hogy legyen
"text/css"
-
href
- itt hasonlóan használják, mint egy elemben, de itt egy CSS -fájlhoz kell linkelni. Ha a CSS fájl ugyanabban a mappában található, mint a HTML fájl, akkor csak a fájl nevét kell az idézőjelek közé írni.
3. Válassza ki a különböző típusú elemeket, amelyekhez ugyanazt a stílust szeretné hozzáadni
Add hozzá a
osztály
attribútumot ezekhez az elemekhez, és állítsa őket egyenlővé az Ön által választott osztálynévvel. Ez ugyanazt a stílust adja az elemeihez.
Lépés 4. Rendelje hozzá, hogy az osztály milyen stílust kap
Írja be az osztály nevét a CSS -fájlba, előtte egy ponttal (.) (Pl.
.osztály
).
5. lépés Válassza ki azokat az elemeket, amelyekhez különleges stílust szeretne hozzáadni, és adjon hozzá egy elemet
id
tulajdonság.
Az azonosítók a CSS -ben egy font szimbólum (#) használatával jönnek létre, nem pedig pont.
Az azonosítók specifikusabbak, mint az osztályok, ezért az azonosító felülír minden osztálystílust, ha rendelkezik az osztálytól eltérő értékű attribútummal
4. rész a 4 -ből: További információ
1. Látogassa meg a w3 iskolákat
Ez egy hivatalos weboldal, amelynek célja a webfejlesztési készségek oktatása. A w3 rengeteg hivatkozást tartalmaz a HTML és a CSS, valamint más webes nyelvek számára.
2. lépés. Keressen más webhelyeket, amelyek kifejezetten a HTML és a CSS tanulását és tanítását célozzák
Az olyan webhelyek, mint a CSS tricks.com, kifejezetten a CSS és a webdesign készségek oktatására irányulnak. Jó hírű források megtalálása segít a tanulási úton.
Lépés 3. Vegye fel a kapcsolatot webes tervezőkkel és fejlesztőkkel
Tapasztalataik és tudásuk értékes ismereteket és készségeket taníthatnak Önnek.
4. Nézze meg az Ön által talált webhelyek forráskódját
A jól fejlett webhelyek CSS-jének megtekintése megmutatja a webhelyek egyes részeinek tervezésének módjait. Ha gyakorlatként másolja le, és a kóddal babrál, akkor megtanulhatja a különböző CSS -attribútumok használatát.