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