Yon style vizyèl sit entènèt ak layout yo dikte pa CSS oswa Cascading Style Sheets. Sa yo se dokiman ki fòme HTML markup yon paj entènèt la, bay navigatè entènèt ak enstriksyon sou ki jan yo montre paj sa yo ki rezilta ki soti nan ki markeup. CSS jere layout yon paj, osi byen ke koulè, imaj background, tipografi ak plis ankò.
Si ou gade nan yon dosye CSS, ou pral wè ke tankou nenpòt ki marke oswa kod lang, dosye sa yo gen yon sentaks espesifik yo. Chak fèy style te fè leve nan yon kantite nan règleman CSS. Règleman sa yo, lè yo pran an plen, yo se sa ki Styles sit la.
Pati nan yon Règ CSS
Yon règ CSS te fè de de pati distenk - seleksyon an ak deklarasyon an. Selektè a detèmine ki sa ki te estil sou yon paj ak deklarasyon an se ki jan li ta dwe estile. Pa egzanp:
p {
koulè: # 000;
}}
Sa a se yon règ CSS. Pati seleksyon an se "p", ki se yon selektè eleman pou "paragraf". Li ta, Se poutèt sa, chwazi TOUT paragraf nan yon sit epi ba yo ak sa a style (sòf si gen paragraf ki yo vize pa plis estil espesifik yon lòt kote nan dokiman CSS ou).
Pati nan règ la ki di "koulè: # 000;" se sa ki konnen kòm deklarasyon an. Sa deklarasyon an te fè leve de moso - pwopriyete a ak valè a.
Pwopriyete a se moso "koulè" nan deklarasyon sa a. Li dikte ki aspè nan seleksyon an pral chanje vizyèlman.
Valè a se sa ki chwazi pwopriyete CSS la ap chanje nan. Nan egzanp nou an, nou ap itilize valè eksepsyonèl la nan # 000, ki se CSS steno pou "nwa".
Se konsa, lè l sèvi avèk règ sa a CSS, paj nou an ta gen paragraf parèt nan yon font-koulè nan nwa.
CSS Prensip Fondamantal nan
Lè ou ekri pwopriyete CSS, ou pa ka senpleman fè yo moute jan ou wè anfòm. Pou ka, "koulè" se yon pwopriyete CSS aktyèl, konsa ou ka itilize li. Pwopriyete sa a se sa ki detèmine koulè tèks la nan yon eleman. Si ou te eseye sèvi ak "tèks koulè" oswa "font-koulè" kòm pwopriyete CSS, sa yo ta fail paske yo pa pati reyèl nan lang lan CSS.
Yon lòt egzanp se pwopriyete "background-image" la. Pwopriyete sa a kouche yon imaj ki ka itilize pou yon background, tankou sa a:
.logo {
background-image: url (/ imaj / company- logo);
}}
Si ou te eseye sèvi ak "background-foto" oswa "background-grafik" kòm yon pwopriyete yo, yo ta febli paske, yon lòt fwa ankò, sa yo, se pa aktyèl CSS pwopriyete.
Gen kèk pwopriyete CSS
Genyen yon kantite pwopriyete CSS ke ou ka itilize nan style yon sit. Gen kèk egzanp yo se:
- Border (ki gen ladan fontyè-style, fontyè-koulè, ak fontyè-lajè)
- Padding (ki gen ladan padding-tèt, padding-dwa, padding-anba, ak padding-kite)
- Marges (ki gen ladan Marge-tèt, Marge-dwa, Marge-anba, ak maj-kite)
- Font-fanmi
- Font-gwosè
- Istorik-koulè
- Lajè
- Wotè
Pwopriyete CSS sa yo se gwo moun itilize kòm egzanp, paske yo tout trè senp epi, menm si ou pa konnen CSS, ou ka pwobableman devine kisa yo baze sou non yo.
Gen lòt pwopriyete CSS ke ou pral rankontre kòm byen ki pa ka tankou evidan ki jan yo travay ki baze sou non yo:
- Flote
- Klè
- Plis pase
- Tèks-transfòme
- Z-endèks
Kòm ou jwenn pi fon nan konsepsyon sit entènèt, ou pral rankontre (epi sèvi ak) tout pwopriyete sa yo ak plis ankò!
Pwopriyete yo bezwen valè
Chak fwa ou sèvi ak yon pwopriyete, ou dwe bay li yon valè - ak pwopriyete sèten ka sèlman aksepte valè sèten.
Nan egzanp premye nou an nan "koulè" pwopriyete a, nou bezwen sèvi ak yon valè koulè. Sa a ta ka yon valè ègzagonal , valè RGBA, oswa menm mo kle . Nenpòt nan valè sa yo ta travay, sepandan, si ou itilize mo "lugubr" ak pwopriyete sa a, li pa ta fè anyen paske, jan deskriptif kòm mo sa a pouvwa, li se pa yon valè rekonèt nan CSS.
Dezyèm egzanp nou an nan "background-imaj" mande pou yon chemen imaj dwe itilize yo chache yon imaj reyèl nan dosye sit ou a. Sa a se valè / sentaks ki nesesè.
Tout pwopriyete CSS gen valè yo atann. Pa egzanp:
- Border-koulè espere yon valè koulè
- Border-gwosè espere yon valè dimensionnement, tankou piksèl oswa pousantaj
- Styles Border espere youn nan estil yo rezève itilize pou pwopriyete sa a, tankou "solid"
Si ou ale nan lis CSS pwopriyete yo, ou pral dekouvri ke chak nan yo gen valè espesifik ke yo pral itilize yo kreye estil yo yo fèt pou.
Edited pa Jeremy Girard