Ang estilo sa visual ug layout sa usa ka website gidiktahan sa CSS o Cascading Style Sheets. Kini mga dokumento nga nag-umol sa HTML markup sa webpage, nga naghatag sa web browsers og mga panudlo kon unsaon sa pagpakita sa mga panid nga resulta gikan sa maong marka. Ang CSS naghupot sa layout sa pahina, ingon man sa kolor, mga hulagway sa background, typography ug daghan pa.
Kon ikaw motan-aw sa usa ka CSS file, imong makita nga sama sa bisan unsang markup o coding nga pinulongan, kini nga mga file adunay usa ka piho nga syntax alang kanila. Ang matag style sheet gilangkoban sa daghang mga lagda sa CSS. Kini nga mga lagda, kung gikuha sa hingpit, mao ang mga estilo sa site.
Ang Bahin sa usa ka CSS Rule
Ang usa ka lagda sa CSS nga gilangkuban sa duha ka managlahi nga bahin - ang selector ug ang deklarasyon. Ang tigpili nagtino kung unsa ang gi-istilo sa usa ka panid ug ang deklarasyon mao ang pag-istilo niini. Pananglitan:
p {
kolor: # 000;
}
Kini usa ka lagda sa CSS. Ang selector nga bahin mao ang "p", nga usa ka element selector alang sa "parapo". Busa, pagpili sa TANANG parapo sa usa ka site ug paghatag kanila niini nga estilo (gawas kon adunay mga parapo nga gipuntirya sa mas espesipikong mga estilo sa ubang dapit sa imong CSS nga dokumento).
Ang bahin sa lagda nga nag-ingon "kolor: # 000;" mao ang gitawag nga deklarasyon. Kana nga deklarasyon gilangkoban sa duha ka piraso - ang kabtangan ug ang bili.
Ang propiedad mao ang "kolor" nga bahin niini nga deklarasyon. Kini nagdiktar kung unsang aspeto sa tigpili ang mausab sa panan-aw.
Ang bili mao ang gipili nga propiedad sa CSS. Sa among panig-ingnan, gigamit namo ang hex value nga # 000, nga ang CSS shorthand for "black".
Busa sa paggamit niini nga lagda sa CSS, ang among panid adunay mga parapo nga gipakita sa kolor sa itom nga font.
Mga basehan sa Property CSS
Sa diha nga ikaw magsulat sa mga kabtangan sa CSS, dili nimo mahimo kini nga yano samtang imong makita nga angayan. Alang sa mga higayon, ang "kolor" usa ka tinuod nga propiedad sa CSS, aron mahimo nimo kini. Kini nga kabtangan mao ang nagatino sa kolor sa teksto sa elemento. Kon nagsulay ka sa paggamit sa "color-text" o "font-color" nga CSS properties, kini mapakyas tungod kay kini dili aktwal nga bahin sa CSS nga pinulongan.
Ang laing pananglitan mao ang property nga "background-image". Kini nga kabtangan nagtakda og usa ka imahe nga mahimong magamit alang sa usa ka background, sama niini:
.logo {
background-image: url (/images/company-logo.png);
}
Kon gisulayan nimo ang paggamit sa "background-picture" o "background-graphic" isip usa ka propiedad, mapakyas sila tungod kay, sa makausa pa, kini dili tinuod nga propiedad sa CSS.
Ang ubang mga Properties sa CSS
Adunay ubay-ubay nga mga kabtangan sa CSS nga mahimo nimong gamiton sa estilo sa usa ka site. Ang pipila ka mga pananglitan mao:
- Ang utlanan (lakip ang estilo sa utlanan, kolor sa border, ug gilapdon sa utlanan)
- Padding (lakip ang padding-ibabaw, padding-tuo, padding-bottom, ug padding-left)
- Mga margin (lakip ang margin-top, margin-tuo, margin-bottom, ug margin-left)
- Font-pamilya
- Ang gidak-on sa font
- Ang kolor sa background
- Gilapdon
- Gitas-on
Kini nga CSS nga mga kabtangan mga maayo nga gamiton isip mga ehemplo, tungod kay kini tanan nga matinud-anon ug, bisan kon wala ka mahibal-an sa CSS, mahimo nimong mahunahuna unsa ang ilang gibuhat base sa ilang mga ngalan.
Adunay lain nga mga kabtangan sa CSS nga imong mahibalag ingon usab nga dili ingon ka dayag kon giunsa nila pagtrabaho base sa ilang mga ngalan:
- Magpalupad
- Tin-aw
- Nag-awas
- Pag-usab sa teksto
- Z-index
Samtang ikaw magkalalom sa disenyo sa web, imong mahibalag (ug gamiton) ang tanan niini nga mga kabtangan ug daghan pa!
Mga Kinaiya Nagkinahanglan og Mga Bili
Sa matag higayon nga mogamit ka og usa ka kabtangan, kinahanglan nimo kining hatagan og bili - ug ang pipila ka mga kabtangan mahimo lamang nga makadawat sa piho nga mga hiyas.
Sa among unang pananglitan sa "kolor" nga propiedad, gikinahanglan nga gamiton ang bili sa kolor. Mahimo kini nga usa ka hex value , RGBA value, o bisan mga color keywords . Bisan unsa nga mga hiyas nga mahimo nga magtrabaho, bisan pa, kon imong gigamit ang pulong nga "kasubo" uban niini nga kabtangan, kini wala'y mahimo tungod kay, ingon nga mahulagwayon nga ingon niana nga pulong, kini dili usa ka giila nga bili sa CSS.
Ang atong ikaduha nga panig-ingnan sa "background-image" nagkinahanglan sa usa ka dalan sa imahen nga gamiton aron makuha ang aktwal nga larawan gikan sa mga file sa imong site. Kini ang bili / syntax nga gikinahanglan.
Ang tanan nga mga kabtangan sa CSS adunay mga bili nga ilang gipaabut. Pananglitan:
- Ang kolor sa bandera nagpaabot sa bili sa kolor
- Ang gidak-on sa utlanan nagpaabot sa bili sa sizing, sama sa pixel o porsyento
- Ang mga estilo sa utlanan nagpaabot sa usa sa gitagana nga estilo nga gigamit alang niini nga propyedad, sama sa "solid"
Kon imong makita ang listahan sa mga propiedad sa CSS, mahibal-an nimo nga ang matag usa kanila adunay mga piho nga mga prinsipyo nga ilang gamiton aron sa paghimo sa mga estilo nga gituyo alang niini.
Gipagamyan ni Jeremy Girard