Променете цвета на думата с етикет SPAN в CSS

Можете да посочите цветове на шрифта, размери и други параметри във външен CSS лист със стилове. Ако искате да промените цвета на само една дума или фраза, обаче, най-лесният и прост начин е да използвате маркера вграден. Вграденият CSS е точно по начина, по който звучи: Той се добавя в HTML на страницата, а не във външна таблица със стилове.

Избягвайте да използвате етикета, който е остарял.

Ето как да промените цвета на думата с помощта на маркера:

  1. Използвайки предпочитания от вас текстов или HTML редактор в режим на изглед на код, поставете курсора преди първата буква на думата или групата думи, които искате да оцветите.

  2. Нека увием текста, чийто цвят искаме да променим, с етикет, включително атрибут на клас. Целият абзац може да изглежда така: Това е текст, върху който е съсредоточено изречение.

  3. Дайте на този специфичен текст „кука“, която можем да използваме в CSS. Следващата ни стъпка е да преминем към външния ни CSS файл, за да добавим ново правило.

    В нашия CSS файл, нека добавим:

    instagram viewer

    .focus-text {

     цвят: # F00;

    }

    Това правило ще зададе този вграден елемент, да се показва в червения цвят. Ако имахме предишен стил, който задаваше черния текст на нашия документ, този вграден стил щеше да доведе до фокусиране върху обхватния текст и да се откроява с различния цвят. Можем да добавим и други стилове към това правило, може би да направим текста курсив или получер, за да го подчертаем още повече?

  4. Запазете страницата си.

    Тествайте страницата в любимия си уеб браузър, за да видите промените в сила.

    Имайте предвид, че в допълнение към, някои професионалисти в мрежата избират да използват и други елементи като двойките или тагове. Тези етикети бяха по-конкретно за получер шрифт и курсив, но бяха оттеглени и заменени с и. Етикетите все още работят в съвременните браузъри, така че много уеб разработчици ги използват като вградени куки за оформяне. Това не е най-лошият подход, но ако искате да избегнете остарели елементи, препоръчваме да се придържате към маркера за тези видове нужди от стил.

Съвети и неща, за които трябва да внимавате

Въпреки че този подход работи добре за малки нужди от стил, ако трябва да промените само едно малко парче текст в документ, той може бързо да излезе извън контрол. Ако установите, че страницата ви е пълна с вградени елементи, всички от които имат уникални класове, които използвате във вашия CSS файл, можете да правете го погрешно, не забравяйте, че колкото повече от тези маркери са на вашата страница, толкова по-трудно е да поддържате тази страница напред. Освен това добрата уеб типография рядко има толкова много цветови варианти и т.н. по цялата страница.