Kahulugan ng CSS Property

Ang visual style at layout ng isang website ay idinidikta ng CSS o Cascading Style Sheets. Ang mga ito ay mga dokumento na hugis ng HTML markup ng webpage, na nagbibigay ng mga web browser na may mga tagubilin kung paano ipakita ang mga pahina na nagreresulta mula sa markup na iyon. Pinangangasiwaan ng CSS ang layout ng pahina, pati na rin ang kulay, mga larawan sa background, palalimbagan at marami pang iba.

Kung titingnan mo ang isang CSS file, makikita mo na tulad ng anumang markup o coding na wika, ang mga file na ito ay may partikular na syntax sa kanila. Ang bawat estilo ng sheet ay binubuo ng isang bilang ng mga panuntunan ng CSS. Ang mga alituntuning ito, kapag kinuha nang buo, ay ang mga estilo ng site.

Ang Mga Bahagi ng isang CSS Rule

Ang panuntunan ng CSS ay binubuo ng dalawang magkakaibang bahagi - ang tagapili at ang deklarasyon. Tinutukoy ng tagapili kung ano ang naka-istilong sa isang pahina at ang deklarasyon ay kung paano ito dapat na istilong. Halimbawa:

p {
kulay: # 000;
}

Ito ay isang panuntunan sa CSS. Ang bahagi ng tagapili ay ang "p", na isang tagapili ng elemento para sa "mga talata". Samakatuwid, piliin ang LAHAT ng mga talata sa isang site at bigyan sila ng estilo na ito (maliban kung mayroong mga talata na naka-target ng mas tiyak na mga estilo sa ibang lugar sa iyong CSS na dokumento).

Ang bahagi ng panuntunan na nagsasabing "kulay: # 000;" ay kung ano ang kilala bilang deklarasyon. Ang deklarasyon na iyon ay binubuo ng dalawang piraso - ang ari-arian at ang halaga.

Ang ari-arian ay ang "kulay" na piraso ng deklarasyon na ito. Ito ay nagpapahiwatig kung aling aspeto ng tagapili ay mababago sa paningin.

Ang halaga ay kung ano ang pinalitan ng pinili na property ng CSS. Sa aming halimbawa, ginagamit namin ang hex na halaga ng # 000, na kung saan ay CSS shorthand para sa "black".

Kaya gamit ang tuntunin ng CSS, ang aming pahina ay may mga talata na ipinapakita sa kulay ng font na itim.

Mga Pangunahing Kaalaman sa Ari-arian ng CSS

Kapag nagsusulat ka ng mga katangian ng CSS, hindi mo maaaring gawin ang mga ito habang nakikita mong magkasya. Para sa mga pagkakataon, ang "kulay" ay isang aktwal na ari-arian ng CSS, kaya maaari mo itong gamitin. Ang ari-arian na ito ang tumutukoy sa kulay ng teksto ng isang elemento. Kung sinubukan mong gamitin ang "kulay ng teksto" o "kulay ng font" bilang mga katangian ng CSS, ang mga ito ay mabibigo dahil hindi sila aktwal na mga bahagi ng wika ng CSS.

Ang isa pang halimbawa ay ang "background-image" ng ari-arian. Nagtatakda ang property na ito ng isang imahe na maaaring magamit para sa isang background, tulad nito:

.logo {
background-image: url (/images/company-logo.png);
}

Kung sinubukan mong gamitin ang "background-picture" o "background-graphic" bilang isang ari-arian, mabibigo sila dahil, sa sandaling muli, ang mga ito ay hindi aktwal na mga katangian ng CSS.

Ang ilang mga CSS Properties

Mayroong isang bilang ng mga katangian ng CSS na maaari mong gamitin upang estilo ng isang site. Ang ilang mga halimbawa ay:

Ang mga katangian ng CSS na ito ay mahusay na magagamit bilang mga halimbawa, dahil ang mga ito ay ang lahat ng napaka-tapat at, kahit na hindi mo alam CSS, maaari mong hulaan kung ano ang ginagawa nila batay sa kanilang mga pangalan.

May iba pang mga pag-aari ng CSS na makakasama mo rin na maaaring hindi malinaw kung paano gumagana ang mga ito batay sa kanilang mga pangalan:

Habang nakakakuha ka ng mas malalim sa disenyo ng web, makikita mo (at gamitin) ang lahat ng mga pag-aari na ito at higit pa!

Mga Katangian Kailangan ng Mga Halaga

Sa bawat oras na gumamit ka ng isang ari-arian, dapat mong bigyan ito ng isang halaga - at ang ilang mga katangian ay maaari lamang tanggapin ang ilang mga halaga.

Sa aming unang halimbawa ng "kulay" na ari-arian, kailangan naming gumamit ng halaga ng kulay. Maaaring ito ay isang hex value , RGBA value, o kahit na kulay na mga keyword . Gayunman, alinman sa mga halagang ito ang gagana, kung ginamit mo ang salitang "madilim" sa ari-arian na ito, wala itong gagawin sapagkat, bilang mapaglarawang gaya ng salitang iyon, hindi ito isang kinikilalang halaga sa CSS.

Ang aming ikalawang halimbawa ng "background-image" ay nangangailangan ng path ng imahe na gagamitin upang makuha ang isang aktwal na imahe mula sa mga file ng iyong site. Ito ang halaga / syntax na kinakailangan.

Ang lahat ng mga katangian ng CSS ay may mga halaga na inaasahan nila. Halimbawa:

Kung pupunta ka sa listahan ng mga katangian ng CSS, matutuklasan mo na ang bawat isa sa kanila ay may mga tiyak na halaga na gagamitin nila upang lumikha ng mga estilo na nilayon para sa.

Ini-edit ni Jeremy Girard