С CSS е лесно да зададете цвета на текста в документ. Ако искате части от страницата ви да се изобразяват с определен цвят, просто уточнявате, че във вашия външен стилов лист и браузърът ще ви покаже текста в този избран цвят. Какво се случва тогава, когато искате да промените цвета на само една дума (или може би само няколко думи) в рамките на текста? За тази цел ще трябва да използвате вграден елемент като маркера.
В крайна сметка промяната на цвета на една дума или на малка група думи в едно изречение е лесна с помощта на CSS и етикетите са валидни HTML, така че не се притеснявайте, че това е някакъв вид хак. С този подход също избягвате използването на отхвърлени маркери и атрибути като "шрифт", което е продукт на отминали ера в HTML.
Тази статия е за начинаещи уеб програмисти, които вероятно са нови за HTML и CSS. Това ще ви помогне да научите как да използвате HTML тага и CSS, за да промените цвета на конкретен текст на страниците си. Като се има предвид това, има някои недостатъци на този метод, който ще разгледам в края на тази статия. Засега прочетете, за да научите стъпките за промяна на този цвят на текста! Това е много лесно и трябва да отнеме около 2 минути.
Инструкция стъпка по стъпка
- Отворете уеб страницата, която искате да актуализирате в любимия си текстов HTML редактор. Това може да е програма като Adobe Dreamweaver или просто текстов редактор като Notepad, Notepad ++, TextEdit и др.
- В документа намерете думите, които искате да се показват в различен цвят на страницата. В името на този урок, можете да използвате някои думи, които са в по-голям параграф от текста. Този текст ще се съдържа в двойката тагове. Намерете една от двете думи, чийто цвят искате да редактирате.
- Поставете курсора преди първата буква в думата или групата думи, които искате да промените цвета. Не забравяйте, че ако използвате WYSIWYG редактор като Dreamweaver, сега работите в "кодов изглед".
- Нека обвиваме текста, чийто цвят искаме да променим с маркер, включително атрибут клас. Целият параграф може да изглежда така: Това е текст, който е фокусиран върху изречение.
- Току-що използвахме вграден елемент, за да дадем този конкретен текст "кука", която можем да използваме в CSS. Следващата ни стъпка е да преминете към нашия външен CSS файл, за да добавите ново правило.
- В нашия CSS файл, нека добавим:
- .focus-text {
- цвят: # F00;
- }
- Това правило би определило този вграден елемент, който да показва червения цвят. Ако имахме предходен стил, който постави текстът на документа ни в черно, този инлайн личен стил щеше да доведе до фокусирането върху текста и неговото открояване с различен цвят. Бихме могли да добавим и други стилове към това правило, може би да направим текста курсив или смел, за да го подчертаем още повече?
- Запазете страницата си.
- Тествайте страницата в любимия си уеб браузър, за да видите промените в ефекта.
- Имайте предвид, че в допълнение към някои уеб специалисти избират да използват други елементи като двойките или таговете. Тези етикети бяха използвани за "смели" и "курсивни", но бяха отхвърлени и заменени с и. Маркерите все още работят в съвременните браузъри, но толкова много уеб програмисти ги използват като вградени куки за стилизиране. Това не е най-лошият подход, но ако искате да избегнете всякакви отхвърлени елементи, предлагам да се придържате към етикета за тези видове стил.
Съвети и неща, които да внимавате
Докато този подход работи добре за малки потребности от стилизиране, като например ако трябва да промените само един малък текст в документ, той бързо може да се измъкне от контрол. Ако установите, че страницата ви е покрита с вградени елементи, всички от които имат уникални класове, които използвате във вашия CSS файл, може да го направите погрешно. Не забравяйте, колкото повече от тези етикети са във вашата страница, толкова по-трудно е вероятно ще бъде да поддържате тази страница напред. Освен това добрата уеб типография рядко има толкова много варианти на цвят и т.н. на цялата страница!