Kaip pakeisti žodžio spalvą naudojant "Span tag" ir "CSS"

Naudodami CSS , teksto spalvą galite lengvai nustatyti dokumente. Jei norite, kad jūsų puslapio pastraipos būtų pateikiamos tam tikra spalva, tiesiog nurodykite, kad išoriniame stiliaus lape naršyklė rodys jūsų tekstą pasirinkta spalva. Kas atsitinka tada, kai norite keisti tik vieno žodžio spalvą (ar galbūt tik keletą žodžių) teksto dalyje? Tam jums reikės naudoti vidinį elementą, pvz., Žymą.

Galiausiai pakeičiant vieno žodžio ar mažos grupelės žodį sakinyje paprasta naudoti CSS, o žymės yra tinkamos HTML, todėl nesijaudinkite, kad tai yra kokia nors naikinimo priemonė. Naudodamiesi šiuo metodu, taip pat vengiama naudoti pasenusias žymes ir atributus, pvz., "Šriftą", kuris yra praeities HTML eros produktas.

Šis straipsnis skirtas pradedantiems žiniatinklio kūrėjams, kurie gali būti nauji HTML ir CSS. Tai padės sužinoti, kaip naudoti HTML žymą ir CSS, kad pakeistumėte konkretaus teksto spalvą jūsų puslapiuose. Tai sakant, šio metodo trūkumai yra tokie, kuriuos apimsiu šio straipsnio pabaigoje. Dabar skaitykite toliau, kad sužinotumėte, kaip pakeisti šią teksto spalvą! Tai labai lengva ir turėtų užtrukti apie 2 minutes.

Žingsnis po žingsnio instrukcija

  1. Atidarykite tinklalapį, kurį norite atnaujinti savo mėgstamiausio teksto HTML redaktoriuje. Tai gali būti programa " Adobe Dreamweaver" arba tiesiog teksto redaktorius, pvz., "Notepad", "Notepad ++", "TextEdit" ir kt.
  2. Šiame dokumente raskite žodžius, kuriuos norite rodyti kitokioje puslapio spalvoje. Dėl šios pamokos galite naudoti keletą žodžių, esančių didesnėje teksto dalyje. Šis tekstas bus įtrauktas į thetag porą. Raskite vieną iš dviejų žodžių, kurių spalvą norite redaguoti.
  3. Patalpinkite žymeklį prieš pirmąją raidę žodyje ar žodžių grupėje, į kurią norite pakeisti spalvą. Atminkite, kad jei naudojate " WYSIWYG" redaktorių, pvz., "Dreamweaver", dabar dirbate "kodo rodinyje".
  4. Leiskite apvynioti tekstą, kurio spalva mes norime pakeisti su žyma, įskaitant klasės atributą. Visa pastraipa gali atrodyti taip: šis tekstas yra skirtas sakinyje.
  5. Mes ką tik panaudojome inline elementą, kad šis konkretus tekstas būtų "kabliukas", kurį galime naudoti CSS. Kitas žingsnis - pereiti prie išorinio CSS failo, kad galėtume pridėti naują taisyklę.
  1. Į mūsų CSS failą pridėkime:
    1. .focus-text {
    2. spalva: # F00;
    3. }
    4. The
  2. Ši taisyklė nustatytų, kad vidinis elementas, kuris rodomas raudonai spalva. Jei mes turėjome ankstesnį stilių, kuriame mūsų dokumento tekstas būtų juodas, šis įprastas stilius reikštų, kad teksto teksto sritis susikoncentruoja ir išskiria skirtingą spalvą. Galėtume taip pat pridėti kitų stilių, galbūt paryškindami tekstą arba drąsiai pabrėždami dar daugiau?
  3. Išsaugokite savo puslapį.
  4. Patikrinkite savo mėgstamos žiniatinklio naršyklės puslapį , kad pamatytumėte galiojančius pakeitimus.
  5. Atkreipkite dėmesį, kad be to kai kurie žiniatinklio profesionalai nusprendžia naudoti kitus elementus, pvz., "Tag" poras. Šios žymos buvo būdingos "bold" ir "stalytikai", bet buvo neaktyvios ir pakeistos "and". Žymos vis dar veikia šiuolaikinėse naršyklėse, tačiau daugelis žiniatinklio kūrėjų juos naudoja kaip inline stiliaus kabliukus. Tai nėra blogiausias būdas, bet norint išvengti bet kokių neaktyvių elementų, aš siūlau tvirtinti tokius stiliaus poreikius.

Patarimai ir dalykai, kuriuos reikia stebėti

Nors šis metodas puikiai tinka mažiems stiliaus poreikiams tenkinti, pvz., Jei reikia pakeisti tik vieną nedidelę teksto dalį dokumente, ji gali greitai ištrūkti iš valdymo. Jei pastebėsite, kad jūsų puslapis yra užpildytas linijiniais elementais, kurie visi turi unikalias klases, kurias naudojate savo CSS faile, galite tai padaryti netinkamai. Atminkite, kad daugiau tų žymų, kurios yra jūsų puslapyje, tuo sunkiau tikėtina, kad šis puslapis tęsis. Be to, geras interneto spausdinimas retai turi daugybę spalvų ir tt visame puslapyje!