Hvernig á að breyta lit af orði með spólumerkinu og CSS

Með CSS er auðvelt að stilla lit á texta í skjali. Ef þú vilt að málsgreinar á síðunni þinni séu sýndar í ákveðinni lit, tilgreinduðu einfaldlega það í ytri stíll lakanum þínum og vafrinn mun birta texta þína í þeim lit sem valinn er. Hvað gerist þegar þú vilt breyta litinni á einu orði (eða bara nokkrar orð) innan textaritunar? Fyrir það þarftu að nota innbyggða frumefni eins og merkið.

Að lokum er auðvelt að nota lit á einu orði eða lítinn hóp af orðum innan setningar með því að nota CSS og merkin eru gild HTML, svo ekki hafa áhyggjur af því að þetta sé einhvers konar hakk. Með þessari aðferð, forðastu einnig að nota úrfelldar merkingar og eiginleika eins og "letur", sem er vara af svikum HTML tímum.

Þessi grein er fyrir upphaf vefhönnuða sem eru líklega ný fyrir HTML og CSS. Það mun hjálpa þér að læra hvernig á að nota HTML merkið og CSS til að breyta lit tiltekinna texta á síðum þínum. Það að segja, það eru nokkur galli við þessa aðferð, sem ég mun ná í lok þessa grein. Fyrir nú, lestu áfram til að læra skrefin til að breyta þessum litum texta! Það er mjög auðvelt og ætti að taka um 2 mínútur.

Skref fyrir skref kennslu

  1. Opnaðu vefsíðu sem þú vilt uppfæra í HTML textaritlinum þínum. Þetta gæti verið forrit eins og Adobe Dreamweaver eða einfaldlega textaritill eins og Minnisblokk, Notepad ++, TextEdit, o.fl.
  2. Í skjalinu skaltu finna þau orð sem þú vilt birtast í öðru lit á síðunni. Vegna þessa einkatími leyfum við að nota nokkur orð sem eru innan stærri textaritunar. Þessi texti verður að finna innan thetag pair. Finndu eitt af tveimur orðum sem þú vilt breyta litinni.
  3. Settu bendilinn fyrir fyrstu stafinn í orði eða hópi orða sem þú vilt breyta lit. Mundu að ef þú ert að nota WYSIWYG ritstjóri eins og Dreamweaver, þá ertu að vinna í "kóða útsýni" rigth núna.
  4. Láttu vefja textann sem við viljum breyta með merki, þar með talið kennitölu. Allt málsgreinin kann að líta svona út: Þetta er texti sem er lögð áhersla á í setningu.
  5. Við höfum bara notað inline frumefni, the, til að gefa þessi tiltekna texta "krók" sem við getum notað í CSS. Næsta skref okkar er að hoppa til okkar utanaðkomandi CSS skrá til að bæta við nýrri reglu.
  1. Í CSS skrá okkar, við skulum bæta við:
    1. .fókus-texti {
    2. litur: # F00;
    3. }
    4. To
  2. Þessi regla myndi setja þessi inline þáttur, sem, til að birta í rauðum lit. Ef við höfðum fyrri stíl sem setti textann af skjalinu okkar í svört, myndi þessi inline stíl valda því að span texta sé lögð áhersla á og standa út með mismunandi lit. Við gætum líka bætt við öðrum stílum við þessa reglu, kannski gerir texta skáletrað eða feitletrað til að leggja áherslu á það enn meira?
  3. Vista síðuna þína.
  4. Prófaðu síðuna í uppáhalds vafranum þínum til að sjá breytingarnar sem eiga sér stað.
  5. Athugaðu að til viðbótar við suma vefur sérfræðinga veljið að nota aðrar þættir eins og eða pörunum. Þessar merkingar voru oftast fyrir "djörf" og "skáletrað" sérstaklega, en voru úr gildi og skipt út fyrir og. Merkin virka enn í nútíma vafra, en svo margir vefur verktaki nota þá sem inline stíll krókar. Þetta er ekki versta nálgunin, en ef þú vilt koma í veg fyrir nokkrar vantar þætti, þá mæli ég með því að klípa merkið fyrir þessar tegundir stílþarfa.

Ábendingar og hlutir til að fylgjast með

Þó að þessi nálgun virkar fínt fyrir lítil stílþörf, eins og ef þú þarft að breyta aðeins einu litlu stykki af texta í skjali, getur það fljótt orðið úr böndunum. Ef þú kemst að því að vefsíðan þín sé fyllt með inline þætti, sem öll hafa einstaka flokka sem þú notar í CSS skránum þínum, gætir þú verið að gera það rangt, Mundu að fleiri af þessum merkjum sem eru á síðunni þinni, því erfiðara er líklegt að vera að halda þessari síðu áfram. Að auki hefur góður vefur leturfræði sjaldan það mörg afbrigði af litum osfrv. Á síðunni!