Sjónræna stíl og útlit vefsvæðis er ráðist af CSS eða Cascading Style Sheets. Þetta eru skjöl sem mynda HTML markup á vefsíðu og veita vefur flettitæki leiðbeiningar um hvernig á að birta þær síður sem eru afleiðing af því marki. CSS sér um skipulag síðu, svo og lit, bakgrunnsmynd, leturfræði og svo margt fleira.
Ef þú horfir á CSS skrá, muntu sjá það eins og hvaða merkja eða kóða tungumál, þessar skrár hafa sérstakt setningafræði til þeirra. Hver stíll lak inniheldur úr CSS reglum. Þessar reglur, þegar þær eru teknar að fullu, eru þær sem stilla síðuna.
Hlutar CSS reglunnar
CSS reglan er gerð úr tveimur mismunandi hlutum - val og yfirlýsingu. Valið ákvarðar hvað er stíll á síðu og yfirlýsingin er hvernig hún ætti að vera stíll. Til dæmis:
p {
litur: # 000;
}
Þetta er CSS regla. Valhlutinn er "p", sem er þáttur val fyrir "málsgreinar". Það myndi því velja ALLE málsgreinar á vefsvæðinu og gefa þeim þessa stíl (nema það séu málsgreinar sem miða við nákvæmari stíl annars staðar í CSS skjalinu þínu).
Sá hluti reglunnar sem segir "litur: # 000;" er það sem kallast yfirlýsingin. Þessi yfirlýsing samanstendur af tveimur stykki - eign og verðmæti.
Eignin er "liturinn" hluti þessa yfirlýsingar. Það ræður hvaða þætti valið verður breytt sjónrænt.
Verðmæti er það sem valið CSS eign verður breytt í. Í dæmi okkar eru við að nota hex gildi # 000, sem er CSS stytting fyrir "svartur".
Þannig að nota þessa CSS reglu, okkar síðu myndi hafa málsgreinar birtist í letur lit svart.
CSS eignaratriði
Þegar þú skrifar CSS eiginleika, getur þú ekki einfaldlega búið til þau eins og þér líður vel. Fyrir dæmi, "litur" er raunverulegur CSS eign, svo þú getur notað það. Þessi eign er það sem ákvarðar textalit þáttarins. Ef þú reyndir að nota "texta-lit" eða "leturgerð" sem CSS eiginleika þá myndi það mistakast vegna þess að þau eru ekki raunveruleg hlutar CSS tungumálsins.
Annað dæmi er eignin "bakgrunnsmynd". Þessi eign setur mynd sem hægt er að nota fyrir bakgrunn, eins og þetta:
.logo {
bakgrunnsmynd: url (/images/company-logo.png);
}
Ef þú reyndir að nota "bakgrunnsmynd" eða "bakgrunnsmynd" sem eign, myndu þeir mistakast af því að enn og aftur eru þetta ekki raunverulegar CSS eiginleikar.
Sumir CSS Properties
There ert a tala af CSS eiginleika sem þú getur notað til að stilla síðuna. Nokkur dæmi eru:
- Border (þ.mt landamæri-stíl, landamæri-litur og landamæri-breidd)
- Padding (þ.mt padding-top, padding-hægri, padding-botn og padding-vinstri)
- Margmiðlar (þar með talin framlegð, framlegð-hægri, framlegð-botn og framlegð-vinstri)
- Font-fjölskylda
- Leturstærð
- Bakgrunns litur
- Breidd
- Hæð
Þessar CSS eiginleikar eru frábærir til að nota sem dæmi, vegna þess að þau eru öll mjög einföld og, jafnvel þótt þú þekkir ekki CSS, getur þú sennilega giska á hvað þeir gera miðað við nöfn þeirra.
Það eru aðrar CSS eignir sem þú munt lenda í sem og það má ekki vera eins augljóst hvernig þeir vinna eftir nöfnum þeirra:
- Fljóta
- Hreinsa
- Yfirflæði
- Texti-umbreyta
- Z-vísitala
Eins og þú færð dýpra inn í vefhönnun, verður þú að lenda (og nota) allar þessar eignir og fleira!
Eiginleikar þurfa gildi
Í hvert skipti sem þú notar eign þarftu að gefa það gildi - og ákveðnar eignir geta aðeins samþykkt ákveðnar gildi.
Í fyrsta fordæmi okkar á "lit" eigninni þurfum við að nota litaval. Þetta gæti verið hex gildi , RGBA gildi eða jafnvel lit leitarorð . Einhver þessara gilda myndi vinna þó að þú hafir notað orðið "myrkur" með þessari eign, það myndi ekki gera neitt vegna þess að það er ekki þekkt gildi í CSS eins og lýsandi sem það kann að vera.
Annað dæmi okkar um "bakgrunnsmynd" krefst þess að myndslóð sé notuð til að sækja raunverulegt mynd úr skrár síðunnar. Þetta er gildi / setningafræði sem þarf.
Allar CSS eignir hafa gildi sem þeir búast við. Til dæmis:
- Border-lit ráð fyrir lit gildi
- Border-stærð ráð fyrir límvatn, eins og punktar eða prósentur
- Border stíll ráð fyrir einn af áskilnum stílum sem notuð eru fyrir þessa eign, eins og "solid"
Ef þú ferð í gegnum lista yfir CSS eiginleika verður þú að uppgötva að hver þeirra hefur ákveðin gildi sem þeir munu nota til að búa til þær stíll sem þau eru ætluð fyrir.
Breytt af Jeremy Girard