Како да ја смените бојата на зборот со ознаката Span и CSS

Со CSS , лесно е да се постави бојата на текстот во некој документ. Ако сакате ставовите на вашата страница да бидат прикажани во одредена боја, едноставно наведете дека во вашиот надворешен стилски лист и прелистувачот ќе го прикаже вашиот текст во таа избрана боја. Што се случува тогаш кога сакате да ја промените бојата на само еден збор (или можеби само неколку зборови) во текстот од текстот? За тоа, ќе треба да користите вграден елемент како тагот.

На крајот на краиштата, менувањето на бојата на еден збор или мала група зборови во една реченица е лесно користејќи го CSS, а таговите се валидни HTML, па не грижете се дека ова е некој вид на пробивање. Со овој пристап, исто така, избегнувате користење на застарени ознаки и атрибути како "фонт", кој е производ на минатото HTML ера.

Оваа статија е за почеток веб програмери, кои се најверојатно нови во HTML и CSS. Ќе ви помогне да научите како да ја користите ознаката HTML и CSS за промена на бојата на специфичен текст на вашите страници. Тоа се рече, има некои недостатоци на овој метод, кој јас ќе ги покрие на крајот на овој член. За сега, прочитајте ги за да ги научите чекорите за менување на оваа боја на текст! Многу е лесно и треба да трае околу 2 минути.

Чекор по чекор инструкција

  1. Отворете ја веб-страницата што сакате да ја ажурирате во вашиот омилен HTML уредувач на текст. Ова може да биде програма како Adobe Dreamweaver или едноставен текстуален уредувач како Notepad, Notepad ++, TextEdit итн.
  2. Во документот, лоцирајте ги зборовите што сакате да ги прикажете во друга боја на страницата. Заради ова упатство, користете некои зборови кои се во поголем дел од текстот. Тој текст ќе биде содржан во паркот. Најдете еден од двата зборови чија боја би сакале да ги измените.
  3. Поставете го курсорот пред првата буква во зборот или групата зборови што сакате да ја промените бојата. Запомнете, ако користите WYSIWYG уредник како Dreamweaver, сега работите со "rigid" код.
  4. Оставете го текстот чија боја сакаме да ја смениме со ознака, вклучувајќи атрибут на класа. Целиот став може да изгледа вака: Ова е текст кој се фокусира на една реченица.
  5. Ние само што користевме вграден елемент, на, за да го дадеме конкретниот текст "кука" што можеме да го користиме во CSS. Нашиот следен чекор е да се префрлиме на нашата надворешна CSS-датотека за да додадеме ново правило.
  1. Во нашата CSS-датотека, додадеме:
    1. .focus-text {
    2. боја: # F00;
    3. }
    4. -
  2. Ова правило ќе го постави тој елемент, за да се прикаже во црвена боја. Ако имавме претходен стил кој го намести текстот на нашиот документ во црно, овој втиснат стил би предизвикал распон на текстот да биде фокусиран и издвоен со различна боја. Ние исто така можеме да додадеме други стилови на ова правило, можеби правејќи го текстот курзивно или смело за да го нагласиме уште повеќе?
  3. Зачувај ја твојата страница.
  4. Проверете ја страницата во омилениот веб-прелистувач за да ги видите промените во ефект.
  5. Имајте на ум дека во прилог на некои веб професионалци избираат да користат и други елементи како парови или тагови. Овие ознаки се користат за "задебелени букви" и "курзиви", но беа застарени и заменети со и. Етикетите сеуште работат во современите прелистувачи, сепак, толку многу веб програмери ги користат како втиснати куки. Ова не е најлош пристап, но ако сакате да избегнете заостанати елементи, препорачувам да се држите со тагот за вакви потреби за стил.

Совети и работи за да се внимава

Додека овој пристап функционира добро за потребите за мал стил, ако сакате да промените само еден мал дел од текстот во еден документ, тој брзо може да излезе од контрола. Ако сметате дека вашата страница е оптеретена со вградени елементи, од кои сите имаат уникатни класи што ги користите во вашата CSS-датотека, може да го направите тоа погрешно, запомнете, колку повеќе од овие ознаки кои се наоѓаат на вашата страница, толку потешко најверојатно ќе биде да се одржи таа страница оди напред. Покрај тоа, добра веб типографија ретко има дека многу варијанти на боја, итн низ целата страница!