Kā nomainīt teksta krāsu ar Span tagu un CSS

Ar CSS ir viegli iestatīt teksta krāsu dokumentā. Ja vēlaties, lai jūsu lapas rindiņas tiktu krāsotas noteiktā krāsā, jūs vienkārši norādiet, ka jūsu ārējā stila lapā un pārlūkā tiks parādīts jūsu teksts šajā izvēlētajā krāsā. Kas notiek tad, kad vēlaties mainīt tikai viena vārda krāsu (vai varbūt tikai dažus vārdus) teksta rindiņā? Lai to izdarītu, jums būs jāizmanto iebūvēts elements, piemēram, tags.

Visbeidzot, vienkārša vārda vai nelielas vārdu grupas krāsas maiņa teikumā ir vienkārša, izmantojot CSS, un tagi ir derīgi HTML, tādēļ neuztraucieties par to, ka tas ir kaut kāds satricinājums. Izmantojot šo pieeju, jūs arī izvairieties no novecojušo tagu un atribūtu, piemēram, "fontu", kas ir pagājušā HTML laikmeta produkts, izmantošana.

Šis raksts ir paredzēts tīmekļa izstrādātāju sākšanai, kuri, visticamāk, ir jauni HTML un CSS. Tas palīdzēs jums uzzināt, kā izmantot HTML tagu un CSS, lai mainītu konkrētā teksta krāsu jūsu lapās. Ņemot to vērā, šajā metodē ir daži trūkumi, kurus es aplūkošu šā panta beigās. Tagad lasiet tālāk, lai uzzinātu, kā mainīt šo teksta krāsu! Tas ir ļoti viegli un vajadzētu aizņemt apmēram 2 minūtes.

Soli pa solim instrukcija

  1. Atveriet Web lapu, kuru vēlaties atjaunināt savā iecienītajā teksta HTML redaktorā. Tas varētu būt tāda programma kā Adobe Dreamweaver vai vienkārši teksta redaktors, piemēram, Notepad, Notepad ++, TextEdit uc
  2. Dokumentā atrodiet vārdus, kurus vēlaties parādīt citā lapas krāsā. Šīs apmācības nolūkā ļauj izmantot dažus vārdus, kas atrodas lielākā teksta rindiņā. Šis teksts tiks ievietots tagu pāros. Atrodiet vienu no diviem vārdiem, kuru krāsu vēlaties rediģēt.
  3. Novietojiet kursoru pirms vārda vai vārdu grupas, kurā vēlaties mainīt krāsu, pirmo burtu. Atcerieties, ja jūs izmantojat WYSIWYG redaktoru, piemēram, Dreamweaver, tagad jūs strādājat ar "kodu skatu".
  4. Ļaujiet iesaiņot tekstu, kura krāsu mēs vēlamies mainīt ar tagu, tostarp klases atribūtu. Viss punkts var izskatīties šādi: Šis ir teksts, kas ir vērsts uz teikumu.
  5. Mēs tikko izmantojām inline elementu, to, ka šis konkrētais teksts ir "āķis", ko mēs varam izmantot CSS. Mūsu nākamais solis ir pāriet uz mūsu ārējo CSS failu, lai pievienotu jaunu noteikumu.
  1. Mūsu CSS failā pievienosim:
    1. .focus-text {
    2. krāsa: # F00;
    3. }
    4. The
  2. Šis noteikums noteiks, ka inline elements, kas parādās sarkanā krāsā. Ja mums būtu iepriekšējais stils, kas mūsu dokumenta tekstu iestrādātu melnā krāsā, šis vienkāršais stils ļaus koncentrēt tekstu un izceļot to ar atšķirīgu krāsu. Šim noteikumam varam pievienot arī citus stilus, iespējams, padarot tekstu kursīvu vai treknrakstā, lai vēl vairāk uzsvērtu to.
  3. Saglabājiet savu lapu.
  4. Pārbaudiet lapu savā iecienītākajā tīmekļa pārlūkprogrammā, lai redzētu spēkā esošās izmaiņas.
  5. Ņemiet vērā, ka papildus dažiem tīmekļa profesionāļiem ir jāizvēlas izmantot citus elementus, piemēram, tagus vai pārus. Šos tagus parasti izmantoja treknrakstā un slīprakstā, bet tie tika novecināti un aizstāti ar. Tagi joprojām darbojas mūsdienu pārlūkprogrammās, tomēr tik daudz tīmekļa izstrādātāju tos izmanto kā inline stila āķi. Šī nav sliktākā pieeja, bet, ja jūs vēlaties izvairīties no jebkādiem novecojušiem elementiem, es iesaku uzlīmēties ar tagu šīm stilu vajadzībām.

Padomi un lietas, kas jāuzmanās

Lai gan šī pieeja labi darbojas nelielu stilu vajadzībām, piemēram, ja dokumentā ir jāmaina tikai viens neliels teksta gabals, tas var ātri izkļūt no kontroles. Ja konstatējat, ka jūsu lapa ir ievietota elementos ar iebūvētiem elementiem, no kuriem visi ir unikālas klases, kuras jūs izmantojat savā CSS failā, jūs, iespējams, darāt to nepareizi, atcerieties, ka vairāk no šiem tagiem, kas atrodas jūsu lapā, jo grūtāk iespējams, saglabās šo lapu tālāk. Turklāt, laba tīmekļa tipogrāfija reti piedāvā daudzus krāsu variantus utt visā lapā!