A weboldal létrehozása nagyszerű módja annak, hogy kifejezze magát. Habár sok webhelyépítő eszköz létezik, az önmaga megírása szórakoztató módja annak, hogy többet megtudjon arról, hogyan működnek a weboldalak a színfalak mögött. Egy jó kezdő projekt egy weboldal létrehozása és egy háttérkép hozzáadása a CSS segítségével. Ez a projekt mind HTML, mind CSS segítségével elindítja és elindul.
Mi a CSS?
A CSS jelentése Cascading Style Sheet. Ez egy programozási nyelv, amely lehetővé teszi a jelölőnyelvek stílusának megformálását. Ilyen jelölőnyelv a HTML vagy a Hyper-Text Markup Language. A HTML-t weboldalak létrehozására használják. Habár a weboldal egyes stílusait a HTML segítségével szabályozhatja, a CSS sokkal több vezérlési és tervezési lehetőséget kínál.
Alapvető weboldal készítése HTML-nel
Mivel a CSS csak stílusnyelv, annak használatához előbb szükségünk van valamire a stílushoz. Egy nagyon egyszerű weboldal elég lesz ahhoz, hogy elkezdhessünk játszani a CSS-sel. Oldalunkon a "Hello World" felirat jelenik meg.
Helló Világ
Abban az esetben, ha nem ismeri a HTML-t, nézzük át gyorsan, hogy mit csinálnak az összes elem. Mint említettük, a HTML jelölőnyelv, ami azt jelenti, hogy címkékkel jelöli a szöveg szövegét. Valahányszor meglát egy szót körülvéve <> ez egy címke. Kétféle címke létezik, egy olyan címke, amely egy szakasz elejét jelöli a <> használatával, és egy, amely a szakasz végét jelöli a
Példánkban négy tag van. A html tag jelzi, hogy mely elemek tartoznak a weboldalhoz. A fej tag tartalmazza a fejléc információkat, amelyek nem jelennek meg az oldalon, de az oldal létrehozásához szükségesek. Az összes megjelenített elem a test címkék. Csak egy megjelenített elemünk van, a o címke. Azt mondja a webböngészőnek, hogy a szöveg egy bekezdés.
Összefüggő: 10 egyszerű CSS-kód példa, amelyeket 10 perc alatt megtanulhat
Szeretne többet megtudni a CSS használatáról? Először próbálkozzon ezekkel az alapvető CSS-kódokkal, majd alkalmazza azokat a saját weboldalain.
CSS hozzáadása a HTML-hez
Most, hogy van egy egyszerű oldalunk, testreszabhatjuk a stílust a CSS segítségével. Az oldalunk most nagyon egyszerű, és nem sokat tehetünk, de kezdjük azzal, hogy kiemeljük a bekezdésünket, hogy határ hozzáadásával meg tudjuk különböztetni a háttértől.
Helló Világ
A bekezdésünket most fekete szegély veszi körül. Ha CSS-ben hozzáadunk egy stílusleírást a bekezdéscímkéhez, elmondtuk a webhelynek, hogyan kell a bekezdést stilizálni. Hozzáadhatunk további leírásokat. Növeljük a bekezdésünk körüli fehérteret vagy betétet, és középre helyezzük a szövegünket.
Helló Világ
Webhelyünk jobban néz ki, de HTML-jünk kezd rendetlenül megjelenni a bekezdéscímkében szereplő összes leírással. Áthelyezhetjük ezeket az információkat a fejlécünkbe. Fejlécünk tájékoztató jellegű, hogy a weboldalt helyesen kell megjelenítenünk.
Helló Világ
Most a HTML-jünk könnyebben olvasható. Észre fogja venni, hogy néhány dolgot meg kellett változtatnunk. A stíluscímke megadja a webböngésző stílusinformációit, de azt is, hogy mit kell stílusozni. Példánkban két különböző módszert alkalmaztunk arra, hogy megmondjuk, mit kell stílusozni. A o a stíluscímkében azt mondja a webböngészőnek, hogy alkalmazza ezt a stílust az összes bekezdéscímkére. A #ourParagraph szakasz csak az id azonosítójú stíluselemeknek mondja meg miBekezdés. Figyelje meg id információkat adtunk a testünk p címkéjéhez.
CSS fájl importálása a webhelyre
Ha hozzáadja a stílusinformációt a fejléchez, sokkal könnyebben olvasható a kódunk. Ha azonban sokféle oldalt ugyanúgy szeretnénk stílusozni, akkor ezt a szöveget fel kell tennünk minden oldal tetejére. Lehet, hogy ez nem tűnik sok munkának, elvégre átmásolhatja és áthelyezheti, de sok munkát hoz létre, ha később egy elemet szeretne megváltoztatni.
Ehelyett a CSS-információkat külön fájlban tároljuk, és importáljuk a fájlt az oldal stílusához. Másolja és illessze be az információkat a stíluscímkék közé egy új CSS fájlba ourCSSfile.css.
p {
text-align: center
}
#ourParagraph {
határ stílusú: szilárd;
párnázás: 30px;
}Ezután importálja a fájlt a HTML fájlba.
Helló Világ
Háttérkép hozzáadása CSS-sel
Most, hogy van egy szilárd alapja a HTML-ben és a CSS-ben, a háttérkép hozzáadása sütemény lesz. Először határozza meg, hogy mely elemnek szeretne háttérképet adni. Példánkban hozzáadunk egy hátteret az egész oldalhoz. Ez azt jelenti, hogy meg akarjuk változtatni a test. Ne feledje, hogy a törzscímkék tartalmazzák az összes látható elemet.
test{
háttérkép: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
határ stílusú: szilárd;
párnázás: 30px;
}A CSS teststílusának módosításához először használja a test kulcsszó. Ezután adjon hozzá göndör zárójeleket, mint korábban {}. A test minden stílusinformációjának a göndör zárójelek között kell lennie. Az a stílusattribútum, amelyet meg akarunk változtatni háttérkép. Sok stílusattribútum létezik. Ne számíts arra, hogy mindet megjegyezed. Könyvjelző a CSS tulajdonságok csalólap olyan tulajdonságokkal, amelyekre emlékezni akar.
Összefüggő: 8 jó HTML effekt, amelyet bárki hozzáadhat a weboldalához
Az attribútum után használjon kettőspontot annak jelzésére, hogy miként változtatja meg az attribútumot. Kép importálásához használja a URL (). ez azt jelzi, hogy a képre mutató linkre hivatkozik. Helyezze a fájl helyét zárójelbe idézőjelek közé. Végül fejezze be a vonalat pontosvesszővel. Bár a szóköznek nincs jelentése a CSS-ben, használjon behúzást a CSS könnyebb olvasása érdekében.
Példánk így néz ki:
Ha a kép mérete nem megfelelő, a kép mérete miatt közvetlenül módosíthatja a képet. Vannak azonban a CSS-ben olyan háttérstílus-attribútumok, amelyekkel megváltoztathatja a hátteret. A háttérnél kisebb képek automatikusan megismétlődnek a háttérben. Ennek kikapcsolásához adja hozzá háttérismétlés: nem ismételni; elemedhez.
Kétféle módon is elkészítheti a képet a teljes háttérre. Először beállíthatja a háttér méretét a képernyő méretéhez a gombbal háttérméret: 100% 100%;, de ez kinyújtja a képet, és túlságosan torzíthatja a képet. Ha nem szeretné megváltoztatni a kép arányait, akkor a háttérméretet is beállíthatja borító. A borító hatására a háttérkép eltakarja a hátteret, de nem torzítja a képet.
A háttérszín megváltoztatása
Változtassunk még egy utolsó dolgot. Most, hogy van háttérünk, a bekezdésünket nehéz elolvasni. Tegyük fehérvé a hátterét. A folyamat hasonló. Az elem, amelyet módosítani akarunk, a #ourParagraph. A # azt jelzi, hogy a "ourParagraph" azonosító név. Ezután szeretnénk beállítani a háttérszín attribútum a fehér.
test{
háttérkép: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
háttérszín: fehér;
határ stílusú: szilárd;
párnázás: 30px;
}Sokkal jobb.
A weboldal tervezésének folytatása CSS-sel
Most, hogy tudja, hogyan kell megváltoztatni a különböző HTML elemek stílusát, az ég a határ! A stílusattribútumok megváltoztatásának alapvető módszere ugyanaz. Határozza meg a módosítani kívánt elemet, és írja le, hogyan kell megváltoztatni az attribútumot. A legjobb módszer a további tanulásra az, ha különböző tulajdonságokkal játszik. Kihívja magát, hogy legközelebb változtassa meg a szöveg színét.
Szeretne megtanulni HTML-t saját webhelyek és alkalmazások kódolásához? Ezekkel a weblap-példákkal és forráskóddal taníthatja meg magának a HTML-t és a CSS-t.
- Programozás
- HTML
- Webdesign
- CSS
J. A Seaton tudományos író, amely összetett témák lebontására specializálódott. PhD fokozattal rendelkezik a Saskatchewani Egyetemen; kutatása a játékalapú tanulás felhasználására összpontosított a hallgatók online elkötelezettségének növelésére. Amikor nem dolgozik, megtalálja olvasás közben, videojátékokkal vagy kertészkedéssel.
Iratkozzon fel hírlevelünkre
Csatlakozzon hírlevelünkhöz, amely műszaki tippeket, véleményeket, ingyenes e-könyveket és exkluzív ajánlatokat tartalmaz!
Még egy lépés…!
Kérjük, erősítse meg e-mail címét az imént elküldött e-mailben.
