Stili vizual dhe faqosja e një faqe interneti janë diktuar nga CSS ose Cascading Style Sheets. Këto janë dokumente që formojnë një shenjë HTML të një faqeje interneti, duke siguruar shfletues të internetit me udhëzime se si të shfaqin faqet që rezultojnë nga kjo shenjë. CSS trajton paraqitjen e një faqe, si dhe ngjyrën, imazhet e sfondit, tipografinë dhe shumë më tepër.
Nëse shihni një skedar CSS, do të shihni se si çdo gjuhë e markup ose kodim, këto skedarë kanë një sintaksë specifike për ta. Çdo fletë stilesh përbëhet nga një numër i rregullave të CSS. Këto rregulla, kur merren plotësisht, janë ato që stilet e faqes.
Pjesët e një Rregulli CSS
Një rregull CSS është i përbërë nga dy pjesë të dallueshme - zgjedhësi dhe deklarata. Zgjedhësi përcakton se çfarë është duke u formuar në një faqe dhe deklarata është se si duhet të jetë vetëquajtur. Për shembull:
p {
ngjyra: # 000;
}
Ky është një rregull CSS. Pjesa përzgjedhëse është "p", e cila është një përzgjedhës elementësh për "paragrafët". Prandaj, do të zgjedhë paragrafët e GJITHA në një vend dhe do t'u ofrojë atyre këtë stil (përveç nëse ka paragrafë të caktuar nga stilet më specifike diku tjetër në dokumentin tuaj CSS).
Pjesa e rregulla që thotë "ngjyra: # 000;" është ajo që njihet si deklarata. Kjo deklaratë përbëhet nga dy pjesë - pasuria dhe vlera.
Prona është copa "ngjyra" e kësaj deklarate. Ajo dikton se cili aspekt i përzgjedhësit do të ndryshohet vizualisht.
Vlera është ajo që do të ndryshohet prona e zgjedhur e CSS. Në shembullin tonë, ne po përdorim vlerën magjike të # 000, që është stenografia CSS për "e zezë".
Pra, duke përdorur këtë rregull CSS, faqja jonë do të kishte paragrafë të shfaqur në një ngjyrë të zezë.
Bazat e Pronës CSS
Kur shkruani pronat CSS, ju thjesht nuk mund t'i bëni ato siç e shihni të arsyeshme. Për raste, "ngjyra" është një pronë aktuale CSS, kështu që mund ta përdorni. Kjo pronë është ajo që përcakton ngjyrën e tekstit të një elementi. Nëse jeni përpjekur të përdorni "text-color" ose "font-color" si vetitë CSS, këto do të dështonin sepse ato nuk janë pjesë aktuale e gjuhës CSS.
Një shembull tjetër është imazhi "sfond-imazh". Ky pronë vendos një imazh që mund të përdoret për një sfond, si ky:
.logo {
background-image: url (/images/company-logo.png);
}
Nëse jeni përpjekur të përdorni "background-picture" ose "background-graphic" si një pronë, ata do të dështojnë sepse, edhe një herë, këto nuk janë prona aktuale CSS.
Disa nga CSS Properties
Ka një numër të pronave CSS që ju mund të përdorni për të stiluar një vend. Disa shembuj janë:
- Kufiri (duke përfshirë stilin kufitar, ngjyrën e kufirit dhe gjerësinë e kufijve)
- Padding (duke përfshirë padding-top, padding-djathtas, padding-fund, dhe padding-majtas)
- Margjinat (duke përfshirë margjinën e sipërme, margjinën e djathtë, fundin e margjinës dhe margjinën e majtë)
- Font-family
- Përmasa e germave
- Ngjyrë e sfondit
- gjerësi
- lartësi
Këto prona CSS janë të mëdha për t'u përdorur si shembuj, sepse të gjitha janë shumë të drejtpërdrejta dhe, edhe nëse nuk e dini CSS, ndoshta mund të mendosh se çfarë bëjnë ata bazuar në emrat e tyre.
Ka edhe prona të tjera të CSS që do të hasni gjithashtu, të cilat mund të mos jenë aq të qarta sa punojnë në bazë të emrave të tyre:
- shket
- Qartë
- del nga shtrati
- Text-transformuar
- Z-indeks
Si ju merrni më thellë në web design, ju do të hasni (dhe përdorin) të gjitha këto prona dhe më shumë!
Prona të nevojshme Vlerat
Çdo herë që përdorni një pronë, ju duhet t'i jepni një vlerë - dhe disa prona mund të pranojnë vetëm vlera të caktuara.
Në shembullin tonë të parë të pronës "ngjyra", ne duhet të përdorim një vlerë ngjyre. Kjo mund të jetë një vlerë hex , vlerë RGBA, apo edhe fjalë kyçe me ngjyra . Ndonjë nga këto vlera do të funksiononte, megjithatë, nëse e përdorni fjalën "i zymtë" me këtë pronë, nuk do të bëjë asgjë, sepse, siç përshkruan si kjo fjalë, kjo nuk është një vlerë e njohur në CSS.
Shembulli ynë i dytë i "imazhit të sfondit" kërkon që një rrugë imazhesh të përdoret për të nxjerrë një imazh të vërtetë nga skedarët e faqes suaj. Kjo është vlera / sintaksi që kërkohet.
Të gjitha pronat e CSS kanë vlera që ata presin. Për shembull:
- Border-color pret një vlerë ngjyre
- Madhësia kufitare pret një vlerë sizing, si piksele ose përqindje
- Stilet kufitare presin një nga stilet e rezervuara të përdorura për këtë pronë, si "të ngurta"
Nëse kaloni nëpër listën e pronave CSS, ju do të zbuloni se secili prej tyre ka vlera specifike që ata do të përdorin për të krijuar stilet për të cilat ato janë të destinuara.
Redaktuar nga Jeremy Girard