Pats par sevi saprotams, tīmekļa izstrāde ir milzīga. Liela daļa no tā notiek tāpēc, ka gandrīz visi ir tīmeklī. Tomēr šajā jomā trūkst izstrādātāju, un tāpēc tīmekļa attīstības programma ir tik viegli pieejama un arī bezmaksas. Paturot to prātā, mēs jums mazliet parādīsim, kas ir HTML un CSS. Precīzāk, mēs jums parādīsim, kā darbojas “klases”.
Mēs nesākam jūs no paša sākuma, jo tur jau ir pieejams daudz bezmaksas mācību programmu. Tā vietā mēs konkrēti parādīsim, kā darbojas nodarbības, jo tas ir nepieciešams jūsu vietnes veidošanas elements. Mēs arī domājām, ka, iespējams, ir vērts to aptvert, pirms mēs ieskatīsimies Twitter pārskatā Bootstrap API, jo arī klases ir nepieciešama sastāvdaļa.
Kā atruna, ja esat pilnībā jauns HTML un CSS, tas, iespējams, nav labs sākums. Tomēr, ja jūs to pazīstat, to nevajadzētu pārāk grūti uzņemt. Bet, ja jūs meklējat pilnīgu apmācību iesācējiem, tiešsaistē ir daudz lielisku iespēju. Daži piemēri ir FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity un vēl daudz citu. Ja jūs izvēlaties sākt iedziļināties vienā no tiem, es ļoti iesakām pieturēties pie viena (piemēram, Bezmaksas koda nometne) un pabeigt to pirms citas darbības uzsākšanas, jo liela daļa “pamata” satura var būt diezgan atkārtojas.
Neatkarīgi no tā, iedziļināsimies klasēs.
Kā klases strādā
Nodarbības ir ārkārtīgi noderīgas. Viņi novērš HTML veidošanas atkārtojamību. Bez nodarbībām jūs varētu iezīmēt katru iezīmēšanas elementu atsevišķi. Un kas būtu, ja jums būtu divi vieni un tie paši elementi, bet katrs no tiem vēlētos stilizēt atšķirīgi? Tas būtu pilnīgs haoss. Tāpēc mums ir nodarbības. Klases pievieno zināmu organizācijas struktūru jūsu HTML, ļaujot jums saglabāt kodu samērā tīru. Ne tikai to, bet klases var izmantot vairāk nekā vienu reizi. Citiem vārdiem sakot, jums nekad nevajadzēs divreiz izveidot vienādus stila noteikumus.
Lūk, kādas nodarbības izskatās mūsu iekšienē
tags:
Kā redzat, zem ķermeņa marķējuma mums ir divi
elementi ar dažādām klasēm. Pirmaistagam ir klase “head1”, bet otrajam - “head2”. Tātad, mūsu CSS, tā vietā, lai veidotu tikaielementu, mēs varam piemērot stilu šīm atsevišķajām klasēm. Kāpēc mēs to vēlamies darīt?
elementu, mēs varam piemērot stilu šīm atsevišķajām klasēm. Kāpēc mēs to vēlamies darīt?
Galvenais iemesls ir tas, ka jūs nevēlaties visu savu
elementiem ir tāds pats stils. Veidojot vietni, tas sagādātu daudz galvassāpju, un turklāt vietnes neizskatītos ļoti lieliski. Klases ļauj mums izmantot stilu tikai vienam tagu gadījumam, nevis visiemtagi visā dokumentā. Tātad, kā jūs rakstāt klasi HTML? Kā šis:
Kaut kāds saturs
Jūs varat pievienot “klases” īpašumu gandrīz jebkuram HTML elementam.
Lieliski! Tātad, mums ir klases, bet pašreizējā stāvoklī viņi faktiski neko nedara. Tas ir tāpēc, ka mēs vēl pagaidām klasē neesam pievienojuši nevienu stila noteikumu. Lai to izdarītu, mums būs jāizveido atsevišķs .css dokuments. Es to saukšu tikai par main.css. Šajā dokumentā mēs veidotu šādu klasi:
Lai izvēlētos klasi, kuru vēlamies veidot, rīkojamies šādi:
.head1 {krāsa: sarkana; text-align: centrs; }
Cirtainu lenču ietvaros ir visi “noteikumi” (vai stils), kurus mēs piemērojam šai klasei. Šajā klasē ir daudz dažādu noteikumu. Manā gadījumā es mainīju teksta krāsu uz sarkanu, izmantojot “krāsu” likumu, un es centrēju tekstu, izmantojot “teksta līdzināšanas” noteikumu. Pilnu CSS noteikumu sarakstu, kā arī to dokumentāciju varat atrast Mozilla izstrādātāju tīklā.
Tagad mūsu stils joprojām netiek piemērots klasēm mūsu HTML dokumentā, un tas ir tāpēc, ka mēs vēl neesam sasaistījuši divus failus kopā. Atgriezieties savā HTML failā un
tagu, jūs vēlaties saistīt savu CSS failu, rīkojoties šādi:
Jūsu HTML dokumentam vajadzētu izskatīties šādi:
Un jūsu mūsu testa projektam tīmeklī vajadzētu izskatīties šādi:
Sīkāku video, kurā aprakstītas šīs darbības, lūdzu, skatiet zemāk.
Video
Secinājums
Un tas ir viss, kas nepieciešams nodarbībām! Viņi ir patiešām vienkārši saprotami. Acīmredzot lielajās un populārajās vietnēs, kuras jūs apmeklējat, nodarbību noteikumi ir daudz sarežģītāki nekā tie, kurus mēs apskatījām, taču to visvienkāršākajā formā, tas ir, kā viņi strādā.
Ja jums ir kādi jautājumi vai jums bija problēmas pēc ilgstošas sekošanas, noteikti informējiet mūs komentāros zemāk vai vairāk PCMech forumos! Vai arī, ja jūs interesē pilnīga HTML / CSS rokasgrāmata iesācējiem vietnē PCMech, noteikti informējiet arī mūs!
