Kaip pakeisti savo svetainės teksto spalvą naudojant CSS

Svetainės valdymas yra svarbus interneto dizaino elementas. Idealiame pasaulyje turėtumėte turėti galimybę pakeisti visus savo svetainės dizaino aspektus, nekeldami kompromisų dėl gatavo produkto.

Žinoma, svetainės dažnai gali būti užsispyrusios. Ne visada įmanoma pasiekti norimų rezultatų, nesigilinant į CSS pasaulį. Pažvelkime, kaip galite pakeisti teksto spalvą naudodami CSS savo svetainėje, kad suprastumėte, kaip galite pasiekti daugiau naudodami CSS galią.

Svetainės teksto spalvos keitimas naudojant CSS

CSS buvo kruopščiai sukurta siekiant užtikrinti, kad ji suteiktų dizaineriams galią valdyti savo svetainės projektus. Neįtikėtinai lengva pakeisti teksto spalvą naudojant CSS savo svetainėje; jums reikia tik vienos taisyklės.

spalva: mėlyna;

Žinoma, CSS taisyklės pačios savaime neveikia. Turite suporuoti juos su elementų klasėmis, ID ir identifikatoriais, kad žiniatinklio naršyklės žinotų, kam taikomas stilius. Šios taisyklės pavyzdžius galite naudoti su H1 antrašte, P pastraipa ir mygtuku žemiau.

h1 {spalva: mėlyna; }
p {spalva: raudona; }
mygtukas {spalva: raudona; }

Tai turėtų suteikti jums pagrindinį supratimą apie tai, ką reikia padaryti norint pakeisti svetainės teksto spalvą naudojant CSS. Paprastai tai užtrunka daugiau, ypač jei norite skirtingoms svetainės tekstams suteikti skirtingų spalvų.

Susijęs: CSS dėžės modelis paaiškinamas pavyzdžiais

Raskite tinkamą CSS klasę

Kad galėtumėte pakeisti konkretų svetainės tekstą, turite žinoti, kaip jį identifikuoti savo CSS. Dauguma žiniatinklio naršyklių turi įrankių rinkinį, skirtą padėti kūrėjams, ir tikėtina, kad jūsų naudojama programa vadinama Inspektorius. Tai gali būti naudojama norint pažvelgti į HTML ir kitą kodą, kuris sukuria svetainę.

Inspektoriaus atidarymas

Inspektoriaus atidarymas yra skirtingas kiekvienoje rinkoje esančioje naršyklėje. Toliau apžvelgėme keletą populiariausių naršyklių, kad galėtume pradėti:

• „Google Chrome“: CTRL + „Shift“ + C. arba Meniu taškai > Daugiau įrankių > Kurejo irankiai
• „Microsoft Edge“: CTRL + „Shift“ + C. arba Meniu taškai > Daugiau įrankių > Kurejo irankiai
• Mozilla Firefox: CTRL + „Shift“ + C. arba Meniu taškai > Daugiau įrankių > Žiniatinklio kūrėjo įrankiai
• „Apple Safari“: Nuostatos > Išplėstinė > Rodyti meniu „Kurti“ meniu juostoje ir tada Vystyti > Rodyti žiniatinklio inspektorių

Tinkamo CSS teksto stiliaus paieška

Tai gali būti painu, kai pirmą kartą atidarote inspektorių savo naršyklėje. Bus daug dalykų, kurių galbūt nesuprasite, tačiau kol kas dėl to nerimauti nereikia. Jums tereikia rasti teksto, kurį bandote pakeisti, stiliaus pavadinimą.

Pavyzdžiui, mes surasime ir pakeisime CSS teksto stilių, naudojamą pagrindinei „MakeUseOf“ programavimo skyriaus antraštei. Šį procesą galite pradėti apžiūrėję elementą, kurį reikia pakeisti.

• „Google Chrome“: Dešiniuoju pelės mygtuku spustelėkite > Patikrinkite
• „Microsoft Edge“: Dešiniuoju pelės mygtuku spustelėkite > Patikrinkite
• Mozilla Firefox: Dešiniuoju pelės mygtuku spustelėkite > Patikrinkite arba Q
• „Apple Safari“: Dešiniuoju pelės mygtuku spustelėkite > Tikrinti elementą

Tai padarius jūsų svetainės konsolė/inspektoriaus langas sutelks dėmesį į elementą, kurį bandote pakeisti. „Chrome“, „Safari“, „Edge“ ir „Firefox“ turėtumėte pamatyti skyrių, pažymėtą Stiliai kuriame yra visas tikrinamo elemento CSS kodas.

Taip pat turėtumėte matyti savo HTML elementą paryškintą šalia esančioje srityje. Tai gali būti naudojama norint išsiaiškinti keičiamo elemento klasę ar ID. Mūsų atveju mes žiūrime į pagrindinę H1 antraštę mūsų puslapyje, ir tai priklauso klasei, pavadintai .listing-title.

Šiuo metu galite išbandyti CSS teksto stilių, kurį pridėsite prie savo svetainės. Viršutinė svetainės konsolės CSS stiliaus skilties dalis gali būti naudojama taisyklėms taikyti konkrečiam elementui, pagal kurį taikote. Žinoma, tai nėra amžina.

Susijęs: Kaip sukurti reaguojančią naršymo juostą naudojant HTML ir CSS

Naujo CSS pridėjimas

Dabar atėjo laikas pridėti naują CSS prie savo svetainės. Tai, kaip tai darysite, priklausys nuo naudojamos svetainės platformos tipo, o tokios parinktys kaip „Shopify“ reikalauja plėtinių, leidžiančių pridėti CSS nekeičiant failų.

Kad ir kaip pridėtumėte savo CSS kodą, turite įsitikinti, kad jis teisingas. Naudoti teksto stiliaus CSS taisykles nėra per sunku, tačiau tai gali būti varginanti, kai negalite suprasti, kaip pakeisti teksto spalvą. Pavyzdžiui, tai yra kodas, kurį turėtume pridėti prie savo svetainės.

.listing-title {
spalva: mėlyna;
}

Ką daryti, jei jūsų teksto spalva nesikeičia?

Redagavę CSS failą, turėtumėte matyti pakeitimus, kuriuos atlikote, kai tik atnaujinate puslapį. Vis dėlto tai ne visada taip paprasta. CSS gali būti sudėtingesnis, nei žmonės tikisi, ir jums gali tekti nuveikti daugiau šiame etape.

• Talpyklos ištuštinimas: Svetainės dažnai naudoja talpyklą, kad sumažintų įkėlimo laiką. Jūsų talpykla gali neleisti jums matyti svetainės pakeitimų, todėl, atlikdami CSS pakeitimus, turite ją ištuštinti.
• Aukščiau stiliaus lape: CSS įkelia stilius iš eilės, o tai reiškia, kad pirmosios jūsų stiliaus lapo taisyklės bus tos, kurios rodomos jūsų svetainėje. Judantys stiliai gali būti geras būdas suteikti jiems pirmenybę prieš kitus stilius.
• Naudojant svarbias žymes: Ši kita parinktis nelaikoma geriausia praktika ir yra geriausia, kai neturite kito pasirinkimo. Galite pridėti svarbią žymą prie savo CSS teksto stilių, kad suteiktumėte jiems pirmenybę prieš visus kitus stilius, ir tai galima pamatyti toliau:

.listing-title {
spalva: mėlyna! svarbu;
}

Kito teksto stiliaus CSS linksmybės

CSS yra neįtikėtinai galingas įrankis, suteikiantis prieigą prie daugybės skirtingų parinkčių, kai dirbate su tekstu ir kitais svetainės elementais. Tai neapsiriboja tik CSS teksto spalva, o jūs galite įkelti daug teksto, kai pasirinksite šiek tiek išmokti CSS. Žemiau rasite keletą pagrindinių CSS teksto stiliaus taisyklių:

• Šrifto dydis: Tai pakeičia jūsų svetainės teksto dydį, pvz., Šrifto dydis: 12 taškų;
• Šrifto svoris: Svoris reiškia šrifto storį, paryškintas yra didelis, o plonas tekstas mažas, pvz., Šrifto svoris: 400;
• Teksto lygiavimas: Tai pakeičia teksto, su kuriuo dirbate, lygiavimą, pvz., Text-align: right;
• Teksto šešėlis: Tai leidžia prie teksto pridėti šešėlį su įvairiais atributais, pvz., Text-shadow: 2px 2px 3px black;
• Teksto transformavimas: Tai pakeičia teksto, su kuriuo dirbate, didžiosios ir mažosios raidės, pvz., Tekstas transformuoti: didžiosios raidės;
• Teksto dekoravimas: Tai leidžia prie teksto pridėti pabraukimų, brūkšnelių ir kitų dekoracijų, pvz., Teksto dekoravimas: pabraukimas;

Tai tik subraižo tai, ką galite padaryti naudodami CSS teksto stilius. Žiniatinklyje yra daugybė vadovų, kurie gali padėti jums atlikti šį procesą, ir visada gera idėja atlikti tam tikrus tyrimus.

Susijęs: Kaip pakeisti savo svetainės tekstą naudojant CSS šriftų šeimos ypatybę

Sužinokite daugiau nei CSS teksto spalva

Praktika, eksperimentai ir bandymai bei klaidos yra geriausi būdai, kaip išmokti tokio įrankio kaip CSS. Stiliaus lapai gali atrodyti bauginantys, kai pirmą kartą pradedate su jais dirbti, tačiau su jais praleisti šiek tiek laiko yra nepaprastai lengva.

10 paprastų CSS kodo pavyzdžių, kuriuos galite išmokti per 10 minučių

Reikia pagalbos dėl CSS? Pirmiausia išbandykite šiuos pagrindinius CSS kodų pavyzdžius, tada pritaikykite juos savo tinklalapiuose.

Skaityti toliau

Apie autorių