Isang pagpapakilala sa mga klase sa html at css

Pumunta ito nang walang sinasabi, ang pag-unlad ng web ay napakalaki. Ang isang malaking bahagi nito ay dahil halos lahat ay nasa Web. Gayunpaman, mayroong kakulangan ng mga developer sa larangan, at iyon ang dahilan kung bakit ang web development kurikulum ay madaling makuha, at libre din. Sa pag-iisip nito, ipapakita namin sa iyo ng kaunting kung ano ang lahat ng HTML at CSS. Mas partikular, ipapakita namin sa iyo kung paano gumagana ang "mga klase".

Hindi ka namin sinisimulan mula sa simula, dahil may mga toneladang libreng kurikulum na mayroon na. Sa halip, partikular na ipapakita namin sa iyo kung paano gumagana ang mga klase, dahil ito ay isang kinakailangang sangkap sa estilo ng iyong website. Naisip din namin na maaaring sulit na takpan bago ma-post ang aming pagtingin sa Twitter na Bootstrap API, dahil ang mga klase ay isang kinakailangang sangkap din doon.

Bilang isang pagtanggi, kung ikaw ay ganap na bago sa HTML at CSS, marahil hindi ito isang magandang pagsisimula para sa iyo. Kung pamilyar ka sa ito, hindi ito dapat maging mahirap matigas, kahit na. Ngunit, kung naghahanap ka para sa isang kumpletong tutorial sa nagsisimula, maraming magagaling na mga pagpipilian sa online. Upang pangalanan ang iilan, mayroong FreeCodeCamp, Ang Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity, at marami pang iba. Kung pipiliin mong simulan ang paghuhukay sa isa sa mga iyon, nais kong lubos na inirerekumenda na dumikit sa isa (tulad ng Free Code Camp) at pagtatapos nito bago simulan ang isa pa, bilang maraming "pangunahing" nilalaman ay maaaring medyo paulit-ulit.

Sa labas ng paraan, maghukay tayo sa kung ano ang mga klase.

Paano Gumagana ang Mga Klase

Ang mga klase ay lubos na kapaki-pakinabang. Kinukuha nila ang paulit-ulit na pag-istilo ng HTML. Kung walang mga klase, gusto mo ang bawat elemento sa iyong markup nang paisa-isa. At paano kung mayroon kang dalawa sa parehong mga elemento, ngunit nais na istilo ng bawat isa sa kanila nang iba? Ito ay magiging isang kumpletong gulo. Iyon ang dahilan kung bakit mayroon kaming mga klase. Ang mga klase ay nagdaragdag ng ilang istraktura ng samahan ng iyong HTML, na nagpapahintulot sa iyo na mapanatiling malinis ang iyong code. Hindi lamang iyon, ngunit ang mga klase ay maaaring magamit nang higit sa isang beses. Sa madaling salita, hindi mo na kailangang lumikha ng parehong mga patakaran sa estilo ng dalawang beses.

Narito kung ano ang hitsura ng mga klase sa loob ng aming tag:

Tulad ng nakikita mo, sa ilalim ng aming body tag, mayroon kaming dalawa

mga elemento na may iba't ibang klase. Ang una

ang tag ay ang klase ng "head1" habang ang pangalawang tag ay may klase na "head2." Kaya, sa aming CSS, sa halip na mag-apply sa estilo para lamang sa

elemento, maaari naming ilapat ang estilo sa mga indibidwal na klase. Bakit natin nais gawin iyon?

Ang pangunahing dahilan ay hindi mo nais ang lahat ng iyong

mga elemento upang magkaroon ng parehong estilo. Lumilikha ito ng maraming sakit ng ulo kapag gumagawa ng isang website, at bilang karagdagan sa mga iyon, ang mga website ay hindi magmukhang napakahusay. Pinapayagan kami ng mga klase na mag-aplay ng estilo sa isang halimbawa lamang ng tag, hindi lahat

mga tag sa buong dokumento. Kaya, paano ka magsusulat ng isang klase sa HTML? Ganito:

Ilang Nilalaman

Maaari mong idagdag ang pag-aari ng "klase" sa halos anumang elemento ng HTML.

Malaki! Kaya, mayroon kaming mga klase, ngunit sa kanilang kasalukuyang estado, wala silang ginagawa. Iyon ay dahil hindi namin naidagdag ang anumang mga panuntunan sa estilo sa klase. Upang gawin iyon, kakailanganin naming lumikha ng isang hiwalay na dokumento .css. Tatawagin ko na lang ito sa pangunahing.css. Sa dokumentong iyon, gugustuhin namin ang isang klase tulad nito:

Upang pumili ng isang klase na nais naming istilo, ginagawa namin ito:

.head1 {kulay: pula; align ng teksto: gitna; }

Sa loob ng mga kulot na braces ay ang lahat ng "mga panuntunan" (o pag-istil) na inilalapat namin sa klase na iyon. Maraming iba't ibang mga patakaran na maaari mong ilagay sa loob ng klase na iyon. Sa aking kaso, binago ko ang kulay ng teksto upang maging pula gamit ang panuntunan na "kulay" at isinentro ko ang teksto sa pamamagitan ng paggamit ng "alinsunod sa teksto." Maaari kang makahanap ng isang buong listahan ng mga panuntunan ng CSS pati na rin ang kanilang dokumentasyon mula sa Developer Network ng Mozilla.

Ngayon, ang aming pag-istilo ay hindi pa nalalapat sa mga klase sa aming dokumento ng HTML, at iyon ay dahil hindi pa namin nakaugnay ang dalawang file. Bumalik sa iyong HTML file, at sa tag, gusto mong mai-link ang iyong CSS file sa pamamagitan nito:

Ang iyong HTML dokumento ay dapat magmukhang ganito:

At ang iyong pagsubok sa proyekto ay dapat magmukhang ganito sa Web:

Para sa isang mas detalyadong video na naglalakad sa mga hakbang na ito, mangyaring tingnan sa ibaba.

Video

Konklusyon

At iyon lang ang mayroon sa mga klase! Ang mga ito ay talagang simple upang maunawaan. Malinaw na sa malaki at tanyag na mga website na binibisita mo, ang mga patakaran sa loob ng mga klase ay isang mas kumplikado kaysa sa nasaklaw namin, ngunit sa kanilang pinaka pangunahing form, iyon ay kung paano sila gumagana.

Kung mayroon kang anumang mga katanungan o nahihirapan sa pagsunod sa mahaba, siguraduhing ipaalam sa amin ang mga komento sa ibaba o higit pa sa mga PCMech Forum! O, kung nais mong maging interesado sa isang kumpletong gabay sa nagsisimula ng HTML / CSS sa PCMech, siguraduhing ipaalam din sa amin iyon!