HTML Klass Feature

Et ass selbstverständlech datt d'Webentwécklung enorm ass. E groussen Deel dovun ass datt bal jiddereen um Internet ass. Wéi och ëmmer, et ass e Mangel un Entwéckler am Feld, dofir ass de Web-Entwécklungsplang sou séier verfügbar a gratis. Mat dëser Astellung wäerte mir Iech e bësse weisen wat HTML an CSS alles ass. Mir weisen Iech am Detail wéi "Klassen" funktionnéieren.

Mir wäerten net ufänken iwwer well et scho vill gratis Léierpläng dobaussen sinn. Amplaz, weisen mir Iech speziell wéi Klassen funktionnéieren, well dëst ass e noutwendege Bestanddeel fir den Design vun Ärer Websäit. Mir hunn och geduecht datt et wäert wäert sinn ze goen ier mer e Twitter's Bootstrap API kucken, well Klassen och hei eng noutwendeg Komponent sinn.

Wann Dir nach keng HTML an CSS kennt, ass dëst wahrscheinlech net eng gutt Plaz fir ze starten. Wann Dir et awer vertraut, sollt et net ze schwéier sinn ze léieren. Wann Dir awer no engem komplette Tutorial fir Ufänger sicht, ginn et vill grouss Optiounen online. Fir nëmmen e puer ze nennen: FreeCodeCamp, den Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity a vill méi. Wann Dir gewielt hutt mat engem vun dësen Inhalter ze këmmeren, da géif ech recommandéieren Iech un een (wéi Free Code Camp) ze halen an en ofzeschléissen ier Dir en aneren start, well et vill sinn Widderhuelen dat "Basis" Inhalt dacks.

Loosst eis erausfannen wat d'Klassen ugeet.

Wéi Klassen schaffen

D'Lektioune sinn extrem nëtzlech. Si reduzéieren d'Widderhuelung vum HTML Stil. Ouni Coursen, géift Dir all Element an Ärem Markup individuell designen. A wat wann Dir zwee vun deemselwechten Elementer hätten awer jidderee anescht wëllt style? Et wier eng Chaos. Dofir hu mir Coursen. Klassen adden eng gewëssen Organisatiounsstruktur an Ären HTML Code fir datt Dir Äre Code relativ propper kann halen. Zousätzlech kënne Klassen méi oft benotzt ginn. An anere Wierder, Dir musst ni déi selwecht Stylingsregele zweemol erstellen.

Dëst ass wéi Klassen an eiser gesinn -Tag vun:

HTML Klassen

Wéi Dir kënnt gesinn, hu mir zwee ënner eisem Kierperdag -Elementer mat verschiddene Klassen. Deen éischte Tag huet den Head1 Klass, während den zweete Tag den Head2 Klass huet. Also an eisem CSS kënne mir et maachen amplaz just dat Element Formatéierung, benotze de Format op dës eenzel Klassen. Firwat solle mer dat maachen?

Den Haaptgrond ass datt Dir net jiddereen wëll -Elementer hunn deeselwechten Design. Et gi vill Kappwéi wann Dir eng Websäit erstellt. Zousätzlech Websäite kucken net besonnesch gutt. Mat Klassen, kënne mir nëmmen de Styling an dëser eenzeger Instanz vum Tag benotze, an net op all Tags am ganzen Dokument. Wéi schreift Dir eng Klass an HTML? Also wat:

E puer Inhalt

Dir kënnt d'Eegeschafte "Klasse" baal zu all HTML Element addéieren.

Grousst! Also mir hunn Coursen, awer an hirem aktuellen Zoustand maachen se näischt. Dat ass well mir nach keng Stylregelen der Klass bäigefüügt hunn. Fir dëst ze maachen, musse mir en separat CSS Dokument erstellen. Ech ruffen et just main.css. An dësem Dokument, wäerte mir eng Klass formatéieren wéi follegt:

CSS Markup

Fir eng Klass ze wielen déi mir wëllen ze stiléieren, maacht déi folgend:

.head1 {Faarf rout; Text Ausrichtung: Mëtt; }

An den krullenden Klammern sinn all "Reegelen" (oder Stiler) déi mir fir dës Klass uwenden. Et gi vill verschidde Reegelen déi Dir an dës Klass kënnt aféieren. A mengem Fall hunn ech d'Faarf vum Text geännert mat rout mat der Faarfregel an d'Mëtt vum Text mat der Text Ausrichtungsregel. Eng komplett Lëscht mat CSS Reegelen an hir Dokumentatioun fannt Dir am Mozilla Developer Network.

Eise Styl ass nach ëmmer net fir d'Klassen an eisem HTML Dokument ugewannt, an dat ass well mir déi zwee Dateien nach net verlinkt hunn. Gitt zréck op Är HTML Datei an ech Tagéiert Dir wëllt Är CSS Datei esou hei verbannen:

Äre HTML Dokument soll esou ausgesinn:

final html

An esou soll eisen Testprojet um Internet ausgesinn:

Finale Dokument

En méi detailléierte Video deen dës Schrëtt beschreift kann hei ënnen fonnt ginn.

Video

Konklusioun

An dat ass alles fir Klass! Si si wierklech einfach ze verstoen. Op grousse a populäre Websäiten déi Dir besicht, sinn d'Regelen an de Coursen natierlech vill méi komplizéiert wéi déi déi mir ofgedeckt hunn, awer an hirer meescht Basis Form funktionnéiere se sou.

Wann Dir Froen hutt oder laang Probleemer hutt, loosst eis w.e.g. an de Kommentaren op de PCMech Forum'en wëssen! Wann Dir an engem komplette HTML / CSS Ufängerhandbuch fir PCMech interesséiert sidd, da sot eis et och!