Paano Baguhin ang Kulay ng isang Salita Gamit ang Span Tag at CSS

Sa CSS , madali itong itakda ang kulay ng teksto sa isang dokumento. Kung nais mong i-render ang mga talata sa iyong pahina sa isang partikular na kulay, ituturo mo lamang na sa iyong panlabas na style sheet at ipapakita ng browser ang iyong teksto sa napiling kulay. Ano ang mangyayari pagkatapos na nais mong baguhin ang kulay ng isang salita (o marahil lamang ng ilang mga salita) sa loob ng isang talata ng teksto? Para sa na, kakailanganin mong gamitin ang isang inline na elemento tulad ng tag.

Sa huli, ang pagbabago ng kulay ng isang salita o isang maliit na pangkat ng mga salita sa loob ng isang pangungusap ay madaling gamit ang CSS, at ang mga tag ay may wastong HTML, kaya huwag mag-alala tungkol sa pagiging ilang uri ng hack. Sa pamamagitan ng ganitong paraan, maiiwasan mo rin ang paggamit ng mga hindi na ginagamit na mga tag at mga katangian tulad ng "font", na isang produkto ng isang nakalipas na panahon ng HTML.

Ang artikulong ito ay para sa pagsisimula ng mga web developer na malamang na bago sa HTML at CSS. Matutulungan ka nitong matutunan kung paano gamitin ang HTML tag at CSS upang baguhin ang kulay ng partikular na teksto sa iyong mga pahina. Iyon ay sinabi, mayroong ilang mga drawbacks sa paraan na ito, na kung saan ako ay sumasakop sa dulo ng artikulong ito. Para sa ngayon, basahin sa upang matutunan ang mga hakbang sa pagbabago ng kulay ng teksto na ito! Napakadali at dapat tumagal ng mga 2 minuto.

Hakbang Sa pamamagitan ng Pagtuturo ng Hakbang

  1. Buksan ang web page na gusto mong i-update sa iyong paboritong text editor ng HTML. Ito ay maaaring isang programa tulad ng Adobe Dreamweaver o isang simpleng editor ng teksto tulad ng Notepad, Notepad ++, TextEdit, atbp.
  2. Sa dokumento, hanapin ang mga salitang nais mong maipakita sa ibang kulay sa pahina. Para sa kapakanan ng tutorial na ito, hinahayaan kang gumamit ng ilang mga salita na nasa loob ng mas malaking talata ng teksto. Ang tekstong iyon ay makikita sa loob ng pares ngtag. Hanapin ang isa sa dalawang salita na kulay na gusto mong i-edit.
  3. Ilagay ang iyong cursor bago ang unang titik sa salita o pangkat ng mga salita na nais mong baguhin ang kulay. Tandaan, kung gumagamit ka ng WYSIWYG na editor tulad ng Dreamweaver, nagtatrabaho ka ngayon sa rigth na "code view".
  4. I-wrap ang teksto na ang kulay na gusto mong baguhin sa isang tag, kabilang ang isang katangian ng klase. Ang buong talata ay maaaring magmukhang ganito: Ito ang teksto na nakatuon sa isang pangungusap.
  5. Ginamit lamang namin ang isang inline na elemento, ang, upang bigyan ang partikular na tekstong "hook" na magagamit natin sa CSS. Ang aming susunod na hakbang ay upang lumipat sa aming panlabas na CSS file upang magdagdag ng isang bagong panuntunan.
  1. Sa aming CSS file, idagdag natin ang:
    1. .focus-text {
    2. kulay: # F00;
    3. }
    4. Gg
  2. Ang panuntunang ito ay itatakda na ang inline elemento, ang, upang ipakita sa kulay pula. Kung mayroon kaming isang nakaraang estilo na itinakda ang teksto ng aming dokumento sa itim, ang inline na estilo na ito ay magiging sanhi ng span text na nakatuon sa at tumayo sa iba't ibang kulay. Maaari din naming magdagdag ng iba pang mga estilo sa panuntunang ito, marahil ay ginagawa ang mga italics ng teksto o naka-bold upang bigyang-diin ito kahit na higit pa?
  3. I-save ang iyong pahina.
  4. Subukan ang pahina sa iyong paboritong web browser upang makita ang mga pagbabago sa epekto.
  5. Tandaan na bilang karagdagan sa, ang ilang mga propesyonal sa web ay pipili na gumamit ng ibang mga elemento tulad ng mga tag ng tag o tag. Ang mga tag na ito ay ginagamit para sa partikular na "bold" at "italics", ngunit hindi na ginagamit at pinalitan ng at. Gayunpaman, gumagana ang mga tag sa mga modernong browser, gayunpaman, napakaraming mga web developer ang gumagamit nito bilang mga inline na mga hook sa estilo. Hindi ito ang pinakamaliit na diskarte, ngunit kung nais mong iwasan ang anumang mga hindi na ginagamit na elemento, iminumungkahi ko na malagkit ang tag para sa mga ganitong uri ng mga pangangailangan sa istilo.

Mga Tip at Mga Bagay na Dapat Panoorin Para sa

Habang ang pamamaraan na ito ay gumagana nang maayos para sa mga maliliit na pangangailangan sa estilo, tulad ng kung kailangan mong baguhin lamang ang isang maliit na piraso ng teksto sa isang dokumento, maaari itong mabilis na mawalan ng kontrol. Kung nalaman mo na ang iyong pahina ay littered sa mga elemento ng inline, lahat ay may mga natatanging klase na ginagamit mo sa iyong CSS file, maaari mong gawin itong mali, Tandaan, ang higit pa sa mga tag na nasa iyong pahina, mas mahirap ito ay malamang na mapanatili ang pag-forward ng pahinang iyon. Bukod pa rito, ang magandang palalimbagan sa web ay bihira na maraming mga variant ng kulay, atbp sa buong pahina!