4 módszer a CSS létrehozására

Tartalomjegyzék:

4 módszer a CSS létrehozására
4 módszer a CSS létrehozására

Videó: 4 módszer a CSS létrehozására

Videó: 4 módszer a CSS létrehozására
Videó: How to Change the Language of the User Interface: Instructor 2024, Március
Anonim

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

CSS létrehozása 1. lépés
CSS létrehozása 1. lépés

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.

CSS létrehozása 2. lépés
CSS létrehozása 2. lépés

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

  • .
CSS létrehozása 3. lépés
CSS létrehozása 3. lépés

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.

CSS létrehozása 4. lépés
CSS létrehozása 4. lépés

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.

CSS létrehozása 5. lépés
CSS létrehozása 5. lépés

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

CSS létrehozása 6. lépés
CSS létrehozása 6. lépés

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

CSS létrehozása 7. lépés
CSS létrehozása 7. lépés

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

CSS létrehozása 8. lépés
CSS létrehozása 8. lépés

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.

CSS létrehozása 9. lépés
CSS létrehozása 9. lépés

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.

CSS létrehozása 10. lépés
CSS létrehozása 10. lépés

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

CSS létrehozása 11. lépés
CSS létrehozása 11. lépés

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.

CSS létrehozása 12. lépés
CSS létrehozása 12. lépés

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.
CSS létrehozása 13. lépés
CSS létrehozása 13. lépés

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.

CSS létrehozása 14. lépés
CSS létrehozása 14. lépés

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

).

CSS létrehozása 15. lépés
CSS létrehozása 15. lépés

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ó

CSS létrehozása 16. lépés
CSS létrehozása 16. lépés

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.

CSS létrehozása 17. lépés
CSS létrehozása 17. lépés

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.

CSS létrehozása 18. lépés
CSS létrehozása 18. lépés

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.

CSS létrehozása 19. lépés
CSS létrehozása 19. lépés

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.

Videó - A szolgáltatás használatával bizonyos információk megoszthatók a YouTube -lal

Ajánlott: