Kā mainīt vietnes teksta krāsu, izmantojot CSS

Vietnes kontrole ir svarīgs tīmekļa dizaina elements. Ideālā pasaulē jums vajadzētu būt iespējai mainīt visus savas vietnes dizaina aspektus, neradot kompromisus attiecībā uz gatavo produktu.

Protams, tīmekļa vietnes bieži vien var būt spītīgas. Ne vienmēr ir iespējams sasniegt vēlamos rezultātus, neiedziļinoties CSS pasaulē. Apskatīsim, kā savā vietnē varat mainīt teksta krāsu, izmantojot CSS, lai sniegtu priekšstatu par to, kā ar CSS palīdzību sasniegt vairāk.

Vietnes teksta krāsas maiņa, izmantojot CSS

CSS ir rūpīgi izstrādāts, lai nodrošinātu, ka tas dod dizaineriem varu pār viņu vietņu projektiem. Jūsu vietnē ir neticami viegli mainīt teksta krāsu, izmantojot CSS; lai to izdarītu, jums ir nepieciešams tikai viens noteikums.

krāsa: zila;

Protams, CSS noteikumi paši par sevi nedarbojas ļoti labi. Tie ir jāsavieno pārī ar elementu klasēm, ID un identifikatoriem, lai nodrošinātu, ka tīmekļa pārlūkprogrammas zina, uz ko attiecas stils. Jūs varat redzēt piemērus, kā šis noteikums tiek lietots kopā ar virsrakstu H1, rindkopu P un pogu.

h1 {krāsa: zila; }
p {krāsa: sarkana; }
poga {krāsa: sarkana; }

Tam vajadzētu sniegt jums pamata izpratni par to, kas jādara, lai mainītu vietnes teksta krāsu, izmantojot CSS. Parasti tas prasa vairāk, it īpaši, ja vēlaties savai vietnei piešķirt atšķirīgu tekstu.

Saistīts: CSS kastes modelis izskaidrots ar piemēriem

Pareizās CSS klases atrašana

Pirms varat mainīt konkrēto tekstu savā vietnē, jums jāzina, kā to identificēt savā CSS. Lielākajai daļai tīmekļa pārlūkprogrammu ir rīku kopums, kas paredzēts izstrādātājiem, un iespējams, ka jūsu izmantotajā ir kaut kas, ko sauc par Inspektors. To var izmantot, lai ielūkotos HTML un citā kodā, kas veido vietni.

Inspektora atvēršana

Inspektora atvēršana katrā tirgū esošajā pārlūkprogrammā ir atšķirīga. Tālāk ir aprakstītas dažas populārākās pārlūkprogrammas, lai sniegtu jums priekšstatu:

• Google Chrome: CTRL + Shift + C vai Izvēlnes punkti > Vairāk rīku > Izstrādātāja rīki
• Microsoft Edge: CTRL + Shift + C vai Izvēlnes punkti > Vairāk rīku > Izstrādātāja rīki
• Mozilla Firefox: CTRL + Shift + C vai Izvēlnes punkti > Vairāk rīku > Tīmekļa izstrādātāju rīki
• Apple Safari: Preferences > Papildu > Rādīt izvēlnes Izstrādāt izvēlni un tad Attīstīt > Rādīt tīmekļa inspektoru

Pareiza CSS teksta stila atrašana

Tas var būt mulsinoši, pirmo reizi pārlūkprogrammā atverot inspektoru. Būs daudz lietu, kuras jūs, iespējams, nesapratīsit, taču pagaidām par to nav jāuztraucas. Jums vienkārši jāatrod tā teksta stila nosaukums, kuru mēģināt mainīt.

Piemēram, mēs atradīsim un mainīsim CSS teksta stilu, kas tiek izmantots galvenajai galvenei sadaļā MakeUseOf programmēšana. Šo procesu var sākt, pārbaudot maināmo elementu.

• Google Chrome: Noklikšķiniet ar peles labo pogu > Pārbaudīt
• Microsoft Edge: Noklikšķiniet ar peles labo pogu > Pārbaudīt
• Mozilla Firefox: Noklikšķiniet ar peles labo pogu > Pārbaudīt vai Q
• Apple Safari: Noklikšķiniet ar peles labo pogu > Pārbaudiet elementu

To darot, jūsu vietnes konsole/inspektora logs koncentrēsies uz elementu, kuru mēģināt mainīt. Pārlūkprogrammā Chrome, Safari, Edge un Firefox jums vajadzētu redzēt sadaļu ar nosaukumu Stili kas satur visu pārbaudāmā elementa CSS kodu.

Jums vajadzētu arī redzēt, ka jūsu HTML elements ir iezīmēts blakus esošajā rūtī. To var izmantot, lai noskaidrotu maināmā elementa klasi vai ID. Mūsu gadījumā mēs aplūkojam galveno H1 virsrakstu mūsu lapā, un tas pieder klasei ar nosaukumu .listing-title.

Šajā brīdī varat pārbaudīt CSS teksta stilu, ko pievienosit savai vietnei. Vietnes konsoles CSS stila sadaļas augšējo daļu var izmantot, lai piemērotu noteikumus konkrētajam jūsu atlasītajam elementam. Tomēr, protams, tas nav pastāvīgs.

Saistīts: Kā izveidot atsaucīgu navigācijas joslu, izmantojot HTML un CSS

Jaunā CSS pievienošana

Tagad ir pienācis laiks savai vietnei pievienot jauno CSS. Tas, kā jūs to darīsit, būs atkarīgs no jūsu izmantotās vietnes platformas veida, ar tādām opcijām kā Shopify ir nepieciešami paplašinājumi, lai jūs varētu pievienot CSS, nemainot failus.

Tomēr, pievienojot savu CSS kodu, jums jāpārliecinās, vai tas ir pareizs. Teksta stila CSS noteikumu izmantošana nav pārāk grūta, taču var būt nomākta, ja nevarat izdomāt, kā mainīt teksta krāsu. Piemēram, šis ir kods, kas mums jāpievieno mūsu vietnei.

.listing-title {
krāsa: zila;
}

Ko darīt, ja jūsu teksta krāsa nemainās?

Kad esat rediģējis savu CSS failu, jums vajadzētu būt iespējai redzēt veiktās izmaiņas, tiklīdz atsvaidzināt savu lapu. Tomēr tas ne vienmēr ir tik vienkārši kā šis. CSS var būt sarežģītāka, nekā cilvēki gaida, un šajā posmā jums, iespējams, būs jādara vairāk.

• Kešatmiņas iztukšošana: Vietnes bieži izmanto kešatmiņu, lai samazinātu ielādes laiku. Jūsu kešatmiņa var neļaut redzēt vietnes izmaiņas, un, veicot izmaiņas CSS, tā ir jāiztukšo.
• Augstāka stila lapā: CSS ielādē stilus secīgi, un tas nozīmē, ka pirmie noteikumi jūsu stilu lapā būs tie, kas tiks parādīti jūsu vietnē. Pārvietošanās stili var būt labs veids, kā piešķirt tiem prioritāti pār citiem stiliem.
• Svarīgu tagu izmantošana: Šī nākamā iespēja netiek uzskatīta par labāko praksi, un tā ir vislabāk piemērota, ja jums nav citas izvēles. Jūs varat pievienot svarīgu atzīmi saviem CSS teksta stiliem, lai piešķirtu tiem prioritāti pār visiem citiem stiliem, un to var redzēt tālāk:

.listing-title {
krāsa: zila! svarīgi;
}

Cits teksta stila CSS jautri

CSS ir neticami spēcīgs rīks, kas nodrošina piekļuvi dažādām iespējām, strādājot ar tekstu un citiem vietnes elementiem. Tas neaprobežojas tikai ar CSS teksta krāsu, un jūs varat veikt slodzes ar savu tekstu, izvēloties nedaudz apgūt CSS. Tālāk varat atrast dažus pamata CSS teksta stila noteikumus:

• Fonta izmērs: Tas maina teksta lielumu jūsu vietnē, piemēram, fonta lielums: 12 pikseļi;
• Fonta svars: Svars attiecas uz fonta biezumu, treknrakstā-liels svars un plāns teksts-mazs, piemēram, fonta svars: 400;
• Teksta līdzināšana: Tas maina teksta līdzinājumu, ar kuru strādājat, piemēram, text-align: right;
• Teksta ēna: Tas ļauj tekstam pievienot ēnu ar dažādiem atribūtiem, piemēram, teksta ēna: 2 pikseļi 2 pikseļi 3 pikseļi melni;
• Teksta pārveidošana: Tas maina teksta reģistru, ar kuru strādājat, piemēram, teksta pārveidošana: lielie burti;
• Teksta dekorēšana: Tas ļauj tekstam pievienot pasvītrojumus, domuzīmes un citus rotājumus, piemēram, teksta dekorēšana: pasvītrojums;

Tas ir tikai saskrāpēt to, ko jūs varat darīt ar teksta stiliem CSS. Tīmeklī ir daudz ceļvežu, kas var jums palīdzēt šajā procesā, un vienmēr ir laba ideja veikt dažus pētījumus, kad sākat darbu.

Saistīts: Kā mainīt vietnes tekstu, izmantojot CSS fontu saimes īpašumu

Uzziniet vairāk nekā CSS teksta krāsa

Prakse, eksperimenti un izmēģinājumi un kļūdas ir labākie veidi, kā apgūt tādu rīku kā CSS. Stila lapas var šķist biedējošas, kad sākat ar tām strādāt, taču ar tām ir neticami viegli strādāt, kad esat pavadījis kādu laiku kopā ar tām.

10 vienkārši CSS koda piemēri, kurus varat iemācīties 10 minūtēs

Vai nepieciešama palīdzība saistībā ar CSS? Vispirms izmēģiniet šos pamata CSS koda piemērus, pēc tam izmantojiet tos savām tīmekļa lapām.

Lasīt Tālāk

Par autoru