Nola hitzaren kolorea aldatzea Span Tag eta CSS-rekin

CSS bidez, dokumentuaren testuaren kolorea errazagoa da. Zure orriko paragrafoak kolore jakin batean egin nahi badituzu, zure kanpoko estilo-orrian zehaztu besterik ez duzu eta arakatzaileak testua hautatutako kolorean bistaratuko du. Zer gertatzen da hitz bakar baten kolorea (edo agian gutxienez hitz batzuk) aldatu nahi duzun testu paragrafo batean? Horretarako, etiketa bezala inline elementu bat erabili beharko duzu.

Azken finean, hitz bakar baten edo esaldi baten hitz multzo txiki baten kolorea aldatzea oso erraza da CSS erabiliz, eta etiketak HTML baliagarriak dira, beraz ez ezazu horrelako hack bat kezkatu. Ikuspegi horrekin, zaharkituta dauden etiketak eta atributuak ere erabiltzen dituzu, adibidez, "letra-tipo" bezala, hau da, HTML erako aro baten produktua.

Artikulu hau HTML eta CSS-ri sor litekeen web-garatzaileen hasieran dago. HTML etiketa eta CSS nola erabili ikasteko lagunduko duzu zure orrialdeetan testu zehatzaren kolorea aldatzeko. Hori esanda, metodo honi dagozkion zenbait eragozpen daude, artikulu honen amaieran estaliko ditudanak. Oraingoz, irakurri testu hau kolore aldatzen ikasteko urratsak! Oso erraza da eta 2 minutu inguru beharko lirateke.

Instrukzioaren urratsez urrats

  1. Ireki nahi duzun web orrialdean zure gogoko testu HTML editorean. Hau Adobe Dreamweaver bezalako programa bat izan daiteke edo, besterik gabe, testuen editorea bezalako Notepad, Notepad ++, TextEdit, etab.
  2. Dokumentuan, kokatu orriaren kolore ezberdinetan bistaratu nahi dituzun hitzak. Tutorial honen bidez, testu-zati handiago baten barruan dauden hitz batzuk erabil ditzakezu. Testua barnealdeko bikotea izango da. Bilatu editatu nahi duzun bi hitzetako bat.
  3. Kokatu kurtsorea kolorea aldatu nahi duzun hitzaren edo hitz taldearen lehenengo letra aurretik. Gogoratu, Dreamweaver bezalako WYSIWYG editorea erabiltzen ari bazara, "kodea ikuspegian" ari zara lanean.
  4. Utzi etiketa batekin kolorea aldatu nahi dugun testua, klaseen atributua barne. Paragrafo osoa itxura hau izan daiteke: esaldi batean oinarritzen den testua.
  5. Inline elementu bat erabili dugu, CSS-n erabil dezakezun testu zehatz hori "kako" bat emateko. Hurrengo pausoa gure kanpoko CSS fitxategira jaistea da, arau berri bat gehitzeko.
  1. Gure CSS fitxategian, gehitu:
    1. .focus-text {
    2. kolorea: # F00;
    3. }
  2. Arau honek lerro-elementua, hau da, kolorea gorrian bistaratuko luke. Gure dokumentuaren testua beltzean ezarri dugun aurreko estilo bat baldin badugu, lerro-estilo honek kolore-testuaren gainean kokatuko luke. Beste estilo batzuk arau honi ere gehitu ahal izan diegu, agian testua etzaten ari den edo negatiboa are gehiago azpimarratzea?
  3. Gorde orria.
  4. Probatu zure web arakatzaile gogokoena orrialdea efektuko aldaketak ikusteko.
  5. Kontuan izan, gainera, web-profil batzuek beste elementu batzuk erabiltzen dituzte, adibidez, etiketa bikoteak. Etiketa hauek "lodia" eta "etzana" izan ohi ziren, baina zaharkituta zeuden eta ordeztu eta. Etiketak arakatzaile modernoetan oraindik ere funtzionatzen dute, hala ere, web-garatzaileek hainbeste erabiltzen dute sartutako estekaren hatzekin. Hau ez da hurbilketa okerrena, baina zaharkituta dauden elementu guztiak saihestu nahi badituzu, estetika-behar horrelako etiketak itsastea gomendatzen dut.

Aholkuak eta gauzak zaindu

Hurbilketa hau oso ona da estetika beharretarako, dokumentu baten zati txiki bat besterik ez baduzu aldatu behar, kontrolik gabe azkar atera daiteke. Zure orrialdea elementu inportatuekin biltzen baduzu, zure CSS fitxategian erabiltzen dituzun klaseak bakarrik badituzu, baliteke gaizki egotea. Gogoratu, zure orriko etiketa hauen gehiena gogorragoa da Litekeena da orri hori aurrera egitea. Gainera, web-tipografia onak oso gutxitan koloreen aldaera asko ditu, etab. Orri osoan zehar!