5.1 Ang katangian ng istilo ng isang tag
At ilang mas kapaki-pakinabang na bagay tungkol sa HTML. Habang nagsimulang sumikat ang web, dumarami ang pangangailangan para sa mga web page na maging maganda o napakagandang disenyo. Ang problemang ito ay nalutas sa pamamagitan ng paggamit ng style .
Ang pangkalahatang anyo ng katangiang ito ay may sumusunod na format:
<tag style="name=value;name2=value2;nameN=valueN">
Ang value ng attribute, na pinaghihiwalay styleng semicolon, ay naglilista ng lahat ng "estilo" na kailangang ilapat sa tag.
Sabihin nating gusto mong ipakita ang isang imahe bilang isang parisukat 100*100at gawin din itong kalahating transparent. Upang gawin ito, kailangan mong magdagdag ng mga espesyal na estilo dito:
- lapad=100px;
- taas=100px;
- opacity=0.5;
Pagkatapos ang HTML code na may ganitong larawan ay magiging ganito:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Mayroong daan-daan, kung hindi libu-libo, ng mga istilo. At ang mga developer ng browser ay patuloy na gumagawa ng mga bago. Buti na lang nag-aaral ka para maging Java developer, hindi web designer :)
5.2 Mga Sikat na Estilo ng CSS
Malamang na hindi ka magsulat ng maraming HTML code o mag-edit ng mga istilo nito sa iyong buhay, ngunit anumang bagay ay maaaring mangyari. Halimbawa, sumusulat ka ng ilang maliliit na pahina ng HTML upang subukan ang API. Samakatuwid, ang pag-alam sa mga pangunahing istilo HTMLay maaaring makatulong.
Nasa ibaba ang 10 pinakakaraniwan para sa mga developer ng backend:
| # | Pangalan | Halimbawa | Paglalarawan |
|---|---|---|---|
| 1 | lapad | lapad: 100px | lapad ng elemento sa mga pixel |
| 2 | taas | taas: 50% | taas ng elemento bilang porsyento (ng lapad ng magulang) |
| 3 | display | display: wala | display elemento (huwag ipakita ang elemento) |
| 4 | visibility | visibility: nakatago | visibility ng elemento (nakatago ang elemento, ngunit nakalaan ang espasyo para dito) |
| 5 | kulay | Kulay pula; | Kulay ng teksto |
| 6 | kulay ng background | kulay ng background: usok | kulay ng background |
| 7 | hangganan | hangganan: 1px solid black; | hangganan (lapad 1px, kulay itim, solidong linya) |
| 8 | font | font: verdana 10pt | font: verdana, size 10pt |
| 9 | text-align | text-align: center; | pahalang na pagkakahanay ng teksto |
| 10 | margin | margin:2px | padding sa labas ng elemento |
Hindi mo kailangang tandaan ang mga tag na ito, ang lahat ay nasa Internet. Bukod dito, ang bawat "estilo" ay may sariling hanay ng mga wastong halaga at sariling format para sa paglalarawan ng halaga. Tumingin ng hindi bababa sa bordero font.
GO TO FULL VERSION