Ang artikulong ito ay naglalabas ng isang kawili-wili at isang mahalagang paksang kilala bilang Mga tagapili at susundan ito ng isang sumusuporta sa praktikal na demonstrasyon. Saklaw ang artikulong ito sa artikulong ito,
- Pag-istilo ng Mga Elemento ng HTML
- Mga Pumili ng CSS
- Selector ng CSS Id
- Pinili ng Klase ng CSS
- Selector ng Universal na CSS
- Mga Pumili ng Grupo ng CSS
Kaya't magsimula tayo noon,
kung paano wakasan ang programa sa java
Pag-istilo ng Mga Elemento ng HTML
Unawain natin kung ano ang CSS bago makarating sa mga tagapili ng CSS. Kung ang HTML ay isasaalang-alang bilang isang balangkas, kung gayon ang CSS (Cascading Style Sheets) ay tulad ng mga kalamnan at balat. Ang utak ay JavaScript. Kaya, para sa isang web page, ang mga estilo ng CSS ay mahalagang layout at disenyo. Mula mismo sa pagpoposisyon ng mga imahe at teksto hanggang sa laki ng font at kulay ng background, kinokontrol ng CSS ang hitsura ng mga elemento ng HTML sa isang browser.
Mas mauunawaan mo ang CSS, kung mahusay mong maunawaan kung ano ang mga selectors ng CSS. Hinahayaan ka ng mga tagapili na ito na mag-target ng mga tukoy na elemento ng HTML upang mailapat mo ang tamang istilo sa kanila.
Unawain natin kung paano tayo maaaring pumili ng mga elemento ng HTML,
Paano Pumili ng Mga Elemento?
Sabihin, nais mo ang isang tiyak na heading na mai-istilo ng iba mula sa natitirang nilalaman sa isang web page. Ngayon, gamit ang mga selectors ng CSS maaari mong i-target ang sangkap ng HTML na i-istilo ito nang iba. Ang mga tagapili ng CSS ay tumutulong sa pagtukoy sa mga elemento kung saan nalalapat ang isang tiyak na hanay ng mga panuntunan sa CSS. Mayroong iba't ibang mga uri ng mga tagapili ng CSS na nagpapahintulot sa iyo na tiyak na piliin ang mga elemento na nais mong i-istilo. Maaari mong bigyan ang buong web page ng isang pangkalahatang estilo, at pagkatapos ay gawin ang iyong paraan upang istilo ang iba pang mga elemento ng pahina.
Ang mga tagapili ay bahagi ng isang panuntunan sa CSS, at ang mga tagapiling ito ay bago pa lamang ideklara ang mga CSS block. Para sa isang mas mahusay na pag-unawa, maaari kang mag-refer sa imahe sa ibaba.
Ang pagpapatuloy sa artikulo ng Mga Pumili ng CSS
Mga Pumili ng CSS
Hinahayaan ka ng tagapili na ito na pumili ng isang elemento ng HTML sa pangalan nito.
Isaalang-alang ang code sa ibaba:
p {text-align: center color: magenta}Ang estilo na ito ay mailalapat sa bawat talata.
Talata 1
Talata 2
Bibigyan ka ng code na ito ng sumusunod na output:
Ang estilo na ito ay mailalapat sa bawat talata
Talata 1
Talata 2
Sa code sa itaas, ang mga elemento ng HTML ay nakahanay sa gitna at may kulay na 'magenta'.
Ang pagpapatuloy sa artikulo ng Mga Pumili ng CSS
Selector ng CSS Id
Sa pamamagitan ng pagpili ng katangian ng id ng isang elemento ng HTML, maaari mong piliin ang tukoy na elemento. Dahil ang id ay natatangi sa isang pahina, maaari kang pumili ng tamang elemento sa pamamagitan ng paggamit ng katangian ng id.
Maaari mong piliin ang elemento ng HTML gamit ang '#' na susundan ng id ng sangkap na iyon. Halimbawa, pinipili ng '#firstname' ang elemento kung saan ang id ay 'firstname'.
Isaalang-alang ang sumusunod na code:
# para1 {text-align: center color: orange}Kamusta Mundo
Hindi maaapektuhan ang talatang ito.
Ang output para sa code sa itaas ay:
Kamusta Mundo
Hindi maaapektuhan ang talatang ito.
Tulad ng nakikita mo sa output sa itaas, sa pamamagitan ng pagsasama ng id = ”para1 ″, nagawang baguhin namin ang kulay ng elementong iyon sa orange. Ang iba pang elemento na wala nito ay nananatiling hindi apektado.
Ang pagpapatuloy sa artikulo ng Mga Pumili ng CSS
Pinili ng Klase ng CSS
Gamit ang tagapili ng klase, maaari kang pumili ng mga elemento ng HTML na may isang tukoy na katangian ng klase. Maaari mong tukuyin ang tagapili gamit ang isang panahon (simbolo ng full-stop) na sinusundan ng pangalan ng klase. Halimbawa, pinipili ng .intro ang mga elemento kung saan ang klase ay 'intro'. Ang isang bagay na dapat tandaan ay hindi ka maaaring magsimula ng isang pangalan ng klase sa isang numero.
Isaalang-alang ang sumusunod na code:
.center {text-align: center color: pink}Ang heading na ito ay rosas at nakahanay sa gitna.
Ang talata na ito ay rosas at nakahanay sa gitna.
Ang output ng code sa itaas ay:
Ang heading na ito ay rosas at nakahanay sa gitna.
Ang talata na ito ay rosas at nakahanay sa gitna.
Maaari mong gamitin ang mga tagapili ng klase ng CSS para sa isang tukoy na elemento. Kung nais mo lamang ng isang tukoy na elemento na mai-istilo, pagkatapos ay maaari mong gamitin ang pangalan ng elemento kasama ang tagapili ng klase.
Halimbawa, isaalang-alang ang sumusunod na code:
p.center {text-align: center color: pink}Hindi apektado ang heading na ito
Ang talata na ito ay rosas at nakahanay sa gitna.
Ang output ng code sa itaas ay:
Hindi apektado ang heading na ito
Ang talata na ito ay rosas at nakahanay sa gitna.
Tulad ng nakikita mo sa output, ang heading h2 ay hindi apektado ng estilo. Dahil tinukoy namin ang 'p.center', ang talata lamang ang apektado ng estilo.
Nagpapatuloy sa artikulong Mga Pumili ng CSS na ito,
Selector ng Universal na CSS
Ang uri ng tagapili na ito ay maaaring isaalang-alang bilang isang wildcard character na pumipili ng lahat ng mga elemento sa pahina. Pinipili nito ang lahat ng mga elemento sa pahina, at ito ay tinukoy ng '*'.
Halimbawa, isaalang-alang ang code sa ibaba:
* {color: darkgreen font-size: 30px}Ito ay isang pagsubok (mas maliit na font)
Ito ay isang talata.
Ang output para sa code sa itaas ay:
Kamusta Mundo
Ito ay isang pagsubok (mas maliit na font)
Ito ay isang talata.
kung paano gumawa ng isang alerto sa html
Tulad ng nakikita mo sa output, ang lahat ng mga elemento na tinukoy gamit ang tagapili ng pangkat ay may parehong kahulugan ng estilo - ang mga ito ay nakahanay sa gitna at ang kulay ng font ay cyan.
Dinadala tayo nito sa pagtatapos ng artikulong ito.
Suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Ang pagsasanay na ito ay gumagawa sa iyo ng kasanayan sa mga kasanayan upang gumana sa back-end at front-end na mga teknolohiya sa web. Kabilang dito ang pagsasanay sa Pag-unlad sa Web, jQuery, Angular, NodeJS, ExpressJS, at MongoDB.
May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng artikulo at babalikan ka namin.