Mājas lapas vizuālais stils un izkārtojums tiek diktēti ar CSS vai Cascading Style Sheets. Tie ir dokumenti, kas veido tīmekļa lapas HTML atzīmi, nodrošinot tīmekļa pārlūkprogrammām norādījumus par to, kā attēlot lapas, kas iegūtas no šī iezīmējuma. CSS apstrādā lapas izkārtojumu, kā arī krāsu, fona attēlus, tipogrāfiju un vēl daudz vairāk.
Ja skatāties uz CSS failu, jūs redzēsit, ka tāpat kā jebkura iezīmēšanas vai kodēšanas valoda, šiem failiem ir īpaša sintakse. Katra stila lapa sastāv no vairākiem CSS noteikumiem. Šie noteikumi, kad tiek veikti pilnīgi, ir tas, kas stilu vietā.
CSS noteikuma daļas
CSS noteikums sastāv no divām atšķirīgām daļām - atlasītājam un deklarācijai. Atlasītājs nosaka, kas tiek veidots lapā, un deklarācija ir tā, kā tā būtu jāformulē. Piemēram:
p {
krāsa: # 000;
}
Šis ir CSS noteikums. Atlases daļa ir "p", kas ir elementu selektors "punktiem". Tādēļ vietnē izvēlieties VISUS punktus un nodrošiniet tiem ar šo stilu (ja vien nav punktu, kuru mērķauditorija ir vairāk specifiski citos jūsu CSS dokumentā).
Noteikuma daļa, kuras nosaukums ir "krāsa: # 000;" ir tas, kas pazīstams kā deklarācija. Šo deklarāciju veido divi gabali - īpašums un vērtība.
Īpašums ir šīs deklarācijas "krāsainais" gabals. Tas nosaka, kurš selektora aspekts tiks mainīts vizuāli.
Vērtība ir tāda, ko mainīs izvēlētais CSS īpašums. Mūsu piemērā mēs izmantojam hex vērtību # 000, kas ir "CSS" saīsne "melnā".
Tātad, izmantojot šo CSS kārtulu, mūsu lapai ir rindkopas, kas tiek parādītas melnā fonta krāsā.
CSS īpašuma pamati
Kad jūs rakstāt CSS īpašības, jūs nevarat vienkārši izveidot tos, kā jūs uzskatāt par piemērotu. Gadījumos "krāsa" ir faktiskais CSS īpašums, tāpēc to varat izmantot. Šis īpašums ir tas, kas nosaka elementa teksta krāsu. Ja jūs mēģinājāt izmantot "teksta krāsu" vai "fonta krāsu" kā CSS īpašības, tās neizdoties, jo tās nav faktiskās CSS valodas daļas.
Vēl viens piemērs ir īpašums "fona attēls". Šis īpašums nosaka attēlu, ko var izmantot fonam, piemēram:
.logo {
fona attēls: url (/images/company-logo.png);
}
Ja jūs mēģinājāt izmantot "fona attēlu" vai "fona-grafiku" kā īpašumu, tie neizdoties, jo atkal tie nav faktiskie CSS īpašumi.
Daži CSS īpašumi
Ir vairākas CSS īpašības, kuras varat izmantot, lai stilā izveidotu vietni. Daži piemēri ir šādi:
- Robeža (ieskaitot robežu stila, robežas krāsu un platuma robežu)
- Pakaramais (ieskaitot polsterējumu, polsterējumu pa labi, polsterējumu apakšā un polsterējumu pa kreisi)
- Maržas (ieskaitot starpības augšējo, starpības labo, starpības samazinājumu un kreiso peļņu)
- Fontu ģimene
- Fonta izmērs
- Fona krāsa
- Platums
- Augstums
Šīs CSS īpašības ir lieliskas, kuras var izmantot kā piemērus, jo tās visas ir ļoti vienkāršas, un, pat ja jūs nezināt CSS, iespējams, jūs domājat, ko viņi dara, pamatojoties uz viņu vārdiem.
Pastāv arī citas CSS īpašības, ar kurām jūs saskarsieties, bet kuras var nebūt tik acīmredzamas, kā tās darbojas, pamatojoties uz to nosaukumiem:
- Peldēt
- Skaidrs
- Pārplūst
- Teksta pārveidošana
- Z-indekss
Kā jūs iegūsiet dziļāk web dizains, jūs saskaraties (un izmantot) visas šīs īpašības un vairāk!
Properties Need Values
Katru reizi, kad lietojat īpašumu, tam ir jāpiešķir vērtība - un dažas īpašības var pieņemt tikai noteiktas vērtības.
Mūsu pirmajā "krāsu" īpašības piemērā mums jāizmanto krāsu vērtība. Tas varētu būt heksadecas vērtība , RGBA vērtība vai pat krāsu atslēgvārdi . Tomēr jebkura no šīm vērtībām darbosies, ja ar šo īpašumu izmantotu vārdu "drūms", tas nedarītu neko, jo kā aprakstošs kā šis vārds, tā nav atzīta vērtība CSS.
Mūsu otrais "fona-attēla" piemērs prasa attēlu ceļu, lai iegūtu faktisko attēlu no vietnes failiem. Šī ir nepieciešamā vērtība / sintakse.
Visām CSS īpašībām ir vērtības, ko tās sagaida. Piemēram:
- Robežu krāsa paredz krāsu vērtību
- Robeža izmērs sagaida lieluma vērtību, piemēram, pikseļus vai procentus
- Robežu stili sagaida, ka viens no rezervētajiem stiliem, kas tiek izmantoti šim īpašumam, piemēram, "ciets"
Ja izmantojat CSS īpašumu sarakstu, jūs atklāsiet, ka katrai no tām ir īpašas vērtības, kuras tās izmantos, lai izveidotu stilus, kuriem tie ir paredzēti.
Rediģējis Jeremijs Girards