Labs tipogrāfiskais dizains ir svarīga veiksmīgas tīmekļa vietnes daļa. CSS dod jums lielisku kontroli pār teksta izskatu tīmekļa lapās, kuras izveidojat tīmekļa lapas. Tas ietver iespēju mainīt visu izmantoto fontu krāsu.
Fonta krāsas var mainīt, izmantojot ārējo stilu lapu , iekšējo stilu lapu vai arī to var mainīt, izmantojot HTML dokumentā iebūvēto stilu . Labākās prakses diktē, ka jums vajadzētu izmantot ārējo stilu lapu CSS stiliem. Iekšējā stilu lapa, kas ir stils, kas rakstīts tieši dokumenta "galā", parasti tiek izmantota tikai nelielām vienas lapas vietnēm. Būtu jāizvairās no iekšējiem stiliem, jo tie ir līdzīgi vecajiem "fontu" tagiem, kurus mēs atrisinājām pirms daudziem gadiem. Šie inline stili ir ļoti grūti, lai pārvaldītu fonta stilu, jo jums vajadzētu mainīt tos visos ikdienas stilā.
Šajā rakstā jūs uzzināsiet, kā mainīt fonta krāsu, izmantojot ārējo stilu lapu un stilu, kas tiek izmantots rindkopas tagā. Varat izmantot tādu pašu stila īpašību, lai mainītu fonta krāsu jebkurā tagā, kas ieskauj tekstu, ieskaitot tagu
.Stilu pievienošana, lai mainītu fonta krāsu
Šajā piemērā jums vajadzētu būt HTML dokumentam jūsu lapas atzīmēšanai un atsevišķam CSS failam, kas ir pievienots šim dokumentam. HTML dokuments, visticamāk, radīs tajā vairākus elementus. Tas, uz ko mēs attiecas šis pants, ir punkts.
Šeit ir redzams, kā mainīt teksta fontu krāsu tagu tagos, izmantojot ārējo stilu lapu.
Krāsu vērtības var izteikt kā krāsu atslēgvārdus, RGB krāsu numurus vai heksadecimālo krāsu numurus.
- Pievienot punktzīmes tagu stila atribūtu:
- p {}
- Novietojiet krāsu īpašību stilā. Novietojiet kolu pēc šī īpašuma:
- p {krāsa:}
- Pēc tam pievienojiet savu krāsu vērtību pēc īpašuma. Noteikti izbeidziet šo vērtību ar puskolonnu:
- p {krāsa: melna;}
Tagad jūsu lapas rindiņas būs melnas.
Šajā piemērā tiek izmantots krāsu atslēgvārds - "melns". Tas ir viens no veidiem, kā pievienot krāsu CSS, taču tas ir ļoti ierobežojošs. Izmantojot atslēgvārdus "melnais" un "baltais", ir vienkārša, jo šīs divas krāsas ir ļoti specifiskas, bet kas notiek, ja izmantojat tādus atslēgvārdus kā "sarkans", "zils" vai "zaļš"? Tieši kāda būs sarkanā, zilā vai zaļā toni? Jūs nevarat precīzi noteikt, ar kādu atslēgvārdu krāsu to vēlaties. Tāpēc krāsu atslēgvārdu vietā bieži tiek izmantotas heksadecimālās vērtības.
p (krāsa: # 000000; }
Šis CSS stils arī iestatītu jūsu punktu krāsu melnai, jo hex kods no # 000000 ir melns. Jūs pat varētu izmantot stenogrāfi ar šo hex vērtību un uzrakstiet to tikai kā # 000, un jūs saņemtu to pašu.
Kā mēs jau minējām, hex vērtības labi darbojas, ja jums nepieciešama ne tikai melna vai balta krāsa. Šeit ir piemērs:
p {krāsa: # 2f5687; }
Šī heksadecuma vērtība norāda punktus uz zilu krāsu, bet atšķirībā no atslēgvārda "zils" šis heksadecs kods ļauj jums iestatīt ļoti specifisku zilā nokrāsa - iespējams, tas, ko dizaineris izvēlējās, veidojot saskarni šī vietne. Šādā gadījumā krāsa būtu vidēja diapazona, tāpat kā zila.
Visbeidzot, varat arī izmantot RGBA krāsu vērtības fontu krāsām. RGCA tagad tiek atbalstīts visās mūsdienu pārlūkprogrammās, tādēļ jūs varat izmantot šīs vērtības, mazliet uztraucoties, ka tas netiks atbalstīts tīmekļa pārlūkprogrammā, bet jūs varat arī iestatīt vieglu rezerves.
p {krāsa: rgba (47,86,135,1); }
Šī RGBA vērtība ir tāda pati kā iepriekš norādītā slānekļa zilā krāsa. Pirmās 3 vērtības nosaka sarkanās, zaļās un zilās vērtības, un gala numurs ir alfa iestatījums. Tas ir iestatīts uz "1", kas nozīmē "100%", tāpēc šai krāsai nebūtu pārredzamības. Ja jūs iestatāt to ar decimālzīmju skaitli, piemēram .85, tas būtu tulkots uz 85% necaurredzamību un krāsa būtu nedaudz caurspīdīga.
Ja vēlaties izolēt krāsu vērtības, jūs to izdarītu:
p {
krāsa: # 2f5687;
krāsa: rgba (47,86,135,1);
}
Šis sintakse vispirms nosaka heksa kodu. Pēc tam tā tiek pārrakstīta ar RGBA numuru. Tas nozīmē, ka jebkurš vecāks pārlūks, kas neatbalsta RGBA, saņem pirmo vērtību un ignorēs otro. Mūsdienu pārlūkprogrammas izmantotu otro CSS kaskādi.