Bevezetés a html és a css osztályokba

Magától értetődik, hogy a webfejlesztés hatalmas. Ennek nagy része azért van, mert szinte mindenki az interneten van. Ugyanakkor hiányzik a fejlesztő a területen, ezért a webfejlesztési tanterv olyan könnyen elérhető és ingyenes is. Ezt szem előtt tartva, megmutatjuk egy kicsit, hogy mi a HTML és CSS. Pontosabban, megmutatjuk, hogyan működik az „osztályok”.

Nem az elejétől kezdjük el, mivel már rengeteg ingyenes tanterv létezik. Ehelyett kifejezetten megmutatjuk Önnek az osztályok működését, mivel ez elengedhetetlen része a weboldal kialakításához. Arra is gondoltuk, hogy érdemes lehet még áttekinteni, mielőtt elolvassuk a Twitter Bootstrap API-ját, mivel az osztályok ebben is kötelező összetevők.

Fontos nyilatkozatként, ha teljesen új vagy a HTML és a CSS számára, akkor ez valószínűleg nem jó kezdés az Ön számára. Ha jól ismeri, ezt nem szabad túl nehéz felvenni. Ha azonban teljes kezdő oktatóanyagot keres, akkor rengeteg remek lehetőség közül választhat az interneten. Néhány példa erre: FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity és még sok más. Ha úgy dönt, hogy belemegy az egyikbe, akkor nagyon ajánlom ragaszkodni az egyikhez (például a Free Code Camphez), és befejezni egy másik indítása előtt, mivel az „alapvető” tartalom nagy része megismétlődik.

Ezzel kihagyva vizsgáljuk meg, hogy mi az osztályok.

Hogyan működnek az osztályok?

Az osztályok rendkívül hasznosak. Az ismétlődő képességet kiküszöbölik a HTML stílus kialakítása során. Osztályok nélkül a jelölés minden elemét külön-külön megtervezheti. És mi lenne, ha két azonos elem lenne, de mindegyiket külön szeretné stílusolni? Teljes rendetlenség lenne. Ezért vannak órák. Az osztályok hozzáadnak valamilyen szervezeti struktúrát a HTML-hez, lehetővé téve a kód viszonylag tiszta megőrzését. Nem csak ezt, hanem az osztályokat is egyszerre lehet használni. Más szóval, soha nem kell kétszer ugyanazt a stílusszabályt létrehoznia.

Íme, hogy néznek ki az osztályok az önökön belül címke:

Mint láthatja, a testcímke alatt kettőnk van

elemek különböző osztályokkal. Az első

a címke „head1” osztályú, míg a második címke „head2” osztályú. Tehát a CSS-ben a stílus helyett a

elem, a stílusokat alkalmazhatjuk az egyes osztályokra. Miért akarjuk ezt megtenni?

Elsődleges oka az, hogy nem az összeset akarja

az elemeknek ugyanaz a stílus. Nagyon sok fejfájást okozna egy weboldal készítésekor, és ezen felül a webhelyek nem tűnnek túl nagyszerűnek. Az osztályok lehetővé teszik a stílus alkalmazását a címke egyetlen példányára, nem az összesre

címkék a dokumentumon. Szóval, hogyan írhat egy osztályt HTML-ben? Mint ez:

Néhány tartalom

Szinte bármilyen HTML elemhez hozzáadhatja az „osztály” tulajdonságot.

Nagy! Tehát vannak osztályok, de jelenlegi állapotukban valójában nem csinálnak semmit. Ennek oka az, hogy még nem adtunk hozzá stílus stílusokat az osztályhoz. Ehhez külön .css dokumentumot kell létrehoznunk. Csak main.css-nak hívom. Ebben a dokumentumban az alábbi osztályt formáljuk:

Az osztály kiválasztásához, amelyet stílusba szeretnénk csinálni, ezt tesszük:

.head1 {szín: piros; szöveg igazítás: középpont; }

A göndör tartókon belül az összes „szabály” (vagy stílus), amelyet erre az osztályra alkalmazunk. Sok különböző szabály van, amelyeket az osztályba helyezhet. Saját esetemben a szöveg színét vörösre változtattam a „színes” szabály használatával, és a szöveg középpontjába állítottam a „text-igazítás” szabály használatával. A CSS-szabályok teljes listáját, valamint azok dokumentációját a Mozilla fejlesztői hálózatában találja meg.

Most a stílusunkat még mindig nem alkalmazzák a HTML-dokumentumunk osztályaira, és azért van, mert még nem kapcsoltuk össze a két fájlt. Menjen vissza a HTML-fájljába, és a címkével, a következő módon kell összekapcsolnia CSS-fájlját:

HTML-dokumentumának így kell kinéznie:

És tesztprojektünknek így kell kinéznie az interneten:

Az alábbiakban olvashat részletesebb videóról, amely a következő lépéseket tartalmazza.

Videó

Következtetés

És ennyi is van az osztályokhoz! Tényleg egyszerű megérteni. Nyilvánvaló, hogy a meglátogatott nagy és népszerű weboldalakon az osztályok szabályai sokkal bonyolultabbok, mint amit az általunk leírtuk, de a legalapvetőbb formájukban, azaz hogyan működnek.

Ha bármilyen kérdése van, vagy ha hosszú ideje nehézségekbe ütközik, ne felejtse el velünk értesülni az alábbiakban vagy megjegyzésekben a PCMech fórumokon! Vagy ha érdekel egy teljes HTML / CSS kezdő útmutató a PCMech-n, akkor erről mindenképpen tájékoztasson!