Home-theater-designers
Egy weboldal létrehozása nagyszerű módja annak, hogy kifejezze magát. Bár sok webhely -készítő eszköz létezik, a saját maga írása szórakoztató módja annak, hogy többet megtudjon arról, hogyan működnek a webhelyek a színfalak mögött. Egy jó kezdő projekt egy webhely létrehozása és háttérkép hozzáadása CSS -sel. Ez a projekt elindítja a HTML és CSS használatát.
Mi az a CSS?
A CSS jelentése lépcsőzetes stíluslap. Ez egy olyan programozási nyelv, amely lehetővé teszi a jelölési nyelvek stílusát. Az egyik ilyen jelölőnyelv a HTML vagy a Hyper-Text Markup Language. HTML -t használnak webhelyek létrehozásához. Bár a webhely stílusának egy részét HTML segítségével szabályozhatja, a CSS sokkal több irányítási és tervezési lehetőséget kínál.
Alapvető weboldal készítése HTML segítségével
Mivel a CSS csak egy stílusnyelv, használatához először valami stílusra van szükségünk. Egy nagyon egyszerű webhely elegendő ahhoz, hogy elkezdhessünk játszani a CSS -sel. Oldalunkon megjelenik a 'Hello World'.
Hello World
Abban az esetben, ha nem ismeri a HTML -t, nézzük meg gyorsan, mit tesz az összes elem. Mint már említettük, a HTML egy jelölőnyelv, ami azt jelenti, hogy címkékkel jelöli a szöveg szövegét. Amikor meglát egy szót körülvéve ez egy címke. Kétféle címke létezik: egy címke, amely egy szakasz kezdetét jelöli, és egy, amely egy szakasz végét jelöli. A szakaszon belüli szöveg szintén megkönnyíti ezt a megkülönböztetést.
Példánkban négy címke van. Az html címke jelzi, hogy mely elemek a webhely részei. Az fej címke tartalmazza a fejléc információkat, amelyek nem jelennek meg az oldalon, de szükségesek az oldal létrehozásához. 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 -példa, amelyet 10 perc alatt megtanulhat
CSS hozzáadása a HTML -hez
Most, hogy van egy egyszerű oldalunk, testre szabhatjuk a stílust a CSS segítségével. Az oldalunk most elég egyszerű, és nem sokat tehetünk, de kezdjük azzal, hogy kiemeljük bekezdésünket, hogy szegély hozzáadásával megkülönböztethessük a háttértől.
Hello World
Most bekezdésünket fekete szegély veszi körül. A stílusleírás hozzáadása a CSS -ben a bekezdéscímkéhez megmondta a webhelynek a bekezdés stílusának kialakítását. További leírásokat is hozzáadhatunk. Növeljük a bekezdés körüli szóközt vagy kitöltést, és helyezzük középre a szöveget.
Hello World
Weboldalunk jobban néz ki, de a HTML kezd zavarossá válni a bekezdéscímke összes leírásával. Ezeket az információkat áthelyezhetjük a fejlécünkbe. Fejlécünk olyan információkat tartalmaz, amelyek szükségesek a webhely megfelelő megjelenítéséhez.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Most könnyebben olvasható a HTML. Észre fogja venni, hogy bizonyos dolgokon változtatnunk kellett. A stíluscímke megmondja a böngésző stílusinformációit, de azt is, hogy milyen stílusokat kell megadni. Példánkban két különböző módszert használtunk, hogy megmondjuk, mit kell stílusolni. Az 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. Az #ourPa bekezdés szakasz azt mondja, hogy csak az azonosítójú stíluselemeket kell használni bekezdésünk . Vedd észre id információkat adtunk a testünk p -címkéjéhez.
az időjárás alatti widget nem működik 2019
CSS -fájl importálása a webhelyre
Ha hozzáadja a stílusinformációkat a fejléchez, sokkal könnyebben olvasható a kódunk. Ha azonban sokféle oldalt szeretnénk egyformán stílusba állítani, akkor ezt a szöveget minden oldal tetejére fel kell vennünk. Ez talán nem tűnik sok munkának, elvégre lemásolhatja és átmásolhatja, de sok munkát hoz létre, ha később szeretne elemet módosítani.
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 miCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Ezután importálja a fájlt a HTML -fájlba.
Hello World
Háttérkép hozzáadása CSS segítségével
Most, hogy szilárd alapja van a HTML -ben és a CSS -ben, a háttérkép hozzáadása egy tortát jelent. Először határozza meg, hogy melyik elemnek szeretne háttérképet adni. Példánkban háttérképet adunk az egész oldalhoz. Ez azt jelenti, hogy meg akarjuk változtatni a stílusát test . Ne feledje, hogy a törzscímkék tartalmazzák az összes látható elemet.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}A CSS teststílusának módosításához először használja a test kulcsszó. Ezután adja hozzá a göndör zárójeleket, mint korábban {}. A test összes stílusinformációjának a göndör zárójelek között kell lennie. A stílus attribútum, amelyet meg akarunk változtatni háttérkép . Sok stílustulajdonság létezik. Ne várja el, hogy mindet megjegyzi. Könyvjelzővel jelölje be a CSS-tulajdonságok csalólapját olyan attribútumokkal, amelyekre emlékezni szeretne.
Összefüggő: 8 klassz HTML -effektus, amelyet bárki hozzáadhat webhelyéhez
A legjobb játékok, amelyeket utánozni lehet androidon
Az attribútum után kettősponttal jelezze, hogyan módosítja az attribútumot. Kép importálásához használja a url () . ez azt jelzi, hogy hivatkozást használ a képre mutatáshoz. Helyezze a fájl helyét az idézőjelek közötti zárójelbe. Végül fejezze be a sort pontosvesszővel. Bár a szóköznek nincs értelme a CSS -ben, használja a behúzást, hogy megkönnyítse a CSS olvasását.
Példánk így néz ki:
Ha a kép mérete miatt nem jelenik meg megfelelően, akkor közvetlenül módosíthatja a képet. Vannak azonban háttérstílus -attribútumok a CSS -ben, amelyekkel módosíthatja 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ér-ismétlés:nem-ismétlés; eleméhez.
Kétféleképpen is elkészítheti a képet a teljes háttérre. Először a gombbal állíthatja be a háttér méretét a képernyő méretéhez háttérméret: 100% 100%; , de ez megfeszíti a képet, és túlságosan torzíthatja a képet. Ha nem szeretné, hogy a kép arányai megváltozzanak, a háttérméretet is beállíthatja borító . A borító a háttérképet lefedi, de nem torzítja a képet.
A háttérszín megváltoztatása
Változtassunk még egy utolsó dolgon. Most, hogy megvan a háttér, a bekezdésünk nehezen olvasható. Tegyük fehérré a hátterét. A folyamat hasonló. A módosítani kívánt elem a #ourPa bekezdés. A # azt jelzi, hogy a „ourPa bekezdés” egy azonosító név. Ezután szeretnénk beállítani a háttérszín attribútum a fehérnek.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Sokkal jobb.
Folytatja webhelyének tervezését CSS segítségével
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 módosíthatja az attribútumot. A legjobb módja annak, hogy többet megtudjon, ha különböző tulajdonságokkal játszik. Kihívja magát, hogy legközelebb megváltoztassa a szöveg színét.
Részvény Részvény Csipog Email A 8 legjobb webhely a minőségi HTML kódolási példákhozSzeretné megtanulni a HTML -t a saját webhelyek és alkalmazások kódolásához? Használja ezeket a weblap -példákat és a forráskódot HTML és CSS tanításához.
Olvassa tovább Kapcsolódó témák- Programozás
- HTML
- Web Design
- CSS
J. Seaton tudományos író, aki összetett témák lebontására szakosodott. PhD fokozatot szerzett a Saskatchewan Egyetemen; kutatása a játékon alapuló tanulás felhasználására összpontosított, hogy növelje a diákok online elkötelezettségét. Amikor nem dolgozik, megtalálhatja őt olvasással, videojátékokkal vagy kertészkedéssel.
Bővebben: Jennifer SeatonIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide