Как да промените цвета на текста на уебсайта си с CSS

Наличието на контрол над вашия уебсайт е важен елемент от уеб дизайна. В един идеален свят трябва да можете да промените всеки аспект от дизайна на вашия сайт, без да се налага да правите компромиси с крайния продукт.

Разбира се, уебсайтовете често могат да бъдат упорити. Не винаги е възможно да постигнете желаните резултати, без да задълбавате в света на CSS. Нека да разгледаме как можете да промените цвета на текста с CSS на вашия уебсайт, за да ви дадем представа как можете да постигнете повече със силата на CSS.

Промяна на цвета на текста на уебсайта с CSS

CSS е внимателно проектиран, за да гарантира, че дава на дизайнерите власт над техните уебсайт проекти. Невероятно лесно е да промените цвета на текста с CSS на вашия уебсайт; трябва само едно правило, за да го направите.

цвят: син;

Разбира се, обаче, CSS правилата не работят много добре сами по себе си. Трябва да ги сдвоите с класове елементи, идентификатори и идентификатори, за да сте сигурни, че уеб браузърите знаят за какво се отнася стилът. Можете да видите примери за това правило, използвано с заглавие H1, параграф P и бутон по -долу.

h1 {цвят: син; }
p {цвят: червен; }
бутон {цвят: червен; }

Това би трябвало да ви даде основно разбиране за това какво трябва да направите, за да промените цвета на текста на вашия уебсайт с CSS. Обикновено отнема повече от това, особено ако искате да придадете различни цветове на различния текст на уебсайта си.

Свързани: Моделът на CSS кутия, обяснен с примери

Намиране на правилния CSS клас

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

Отваряне на инспектора

Отварянето на инспектора е различно във всеки от браузърите на пазара. Покрихме няколко от най -популярните браузъри по -долу, за да ви дадем начало:

• Google Chrome: CTRL + Shift + C или Точки на менюто > Още инструменти > Инструменти за разработчици
• Microsoft Edge: CTRL + Shift + C или Точки на менюто > Още инструменти > Инструменти за разработчици
• Mozilla Firefox: CTRL + Shift + C или Точки на менюто > Още инструменти > Инструменти за уеб разработчици
• Apple Safari: Предпочитания > Разширено > Показване на менюто Develop в лентата с менюта и тогава Развивайте се > Показване на уеб инспектора

Намиране на правилния CSS текст стил

Може да бъде объркващо, когато за първи път отворите Инспектора в браузъра си. Ще има много неща, които може да не разбирате, но засега не е нужно да се притеснявате за това. Просто трябва да намерите името на стила на текста, който се опитвате да промените.

Като пример ще намерим и променим CSS текстовия стил, използван за главното заглавие в секцията MakeUseOf Programming. Можете да започнете този процес, като инспектирате елемента, който трябва да бъде променен.

• Google Chrome: Кликнете с десния бутон > Проверете
• Microsoft Edge: Кликнете с десния бутон > Проверете
• Mozilla Firefox: Кликнете с десния бутон > Проверете или В
• Apple Safari: Кликнете с десния бутон > Инспектирай елемента

Това ще накара прозореца на конзолата/инспектора на вашия уебсайт да се съсредоточи върху елемента, който се опитвате да промените. В Chrome, Safari, Edge и Firefox трябва да видите раздел с етикет Стилове който съдържа целия CSS код за елемента, който проверявате.

Също така трябва да видите вашия HTML елемент подчертан в панел до това. Това може да се използва за определяне на класа или идентификатора на елемента, който променяте. В нашия случай разглеждаме основното заглавие H1 на нашата страница и това принадлежи на клас, наречен .listing-title.

На този етап можете да тествате CSS текстовия стил, който ще добавите към вашия уебсайт. Горната част на секцията за стил на CSS в конзолата на уебсайта може да се използва за прилагане на правила към конкретния елемент, към който сте насочили. Разбира се, това обаче не е постоянно.

Свързани: Как да създадете адаптивна лента за навигация с помощта на HTML и CSS

Добавяне на вашия нов CSS

Време е да добавите новия си CSS към уебсайта си. Начинът, по който правите това, ще зависи от типа платформа на уебсайта, който използвате, като опции като Shopify изискват разширения, които да ви позволят да добавяте CSS, без да променяте файловете си.

Както и да добавите своя CSS код, трябва да се уверите, че е правилен. Използването на CSS правила в стил текст не е твърде трудно, но може да бъде разочароващо, когато не можете да разберете как да промените цвета на текста. За нашия пример това е кодът, който трябва да добавим към нашия уебсайт.

.listing-title {
цвят: син;
}

Ами ако цветът на текста ви не се промени?

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

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

.listing-title {
цвят: син! важно;
}

Друг стил на текст CSS Fun

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

• Размер на шрифта: Това променя размера на текста на вашия уебсайт, напр. Размер на шрифта: 12px;
• Тегло на шрифта: Теглото се отнася до дебелината на шрифта, като удебеленото е с голямо тегло, а тънкият текст е нисък, например, теглото на шрифта: 400;
• Подравняване на текста: Това променя подравняването на текста, с който работите, например text-align: right;
• Текст-сянка: Това ви позволява да добавите сянка към текста си с набор от атрибути, например текстова сянка: 2px 2px 3px черно;
• Текстово преобразуване: Това променя регистъра на текста, с който работите, например, преобразуване на текст: главни букви;
• Текстова декорация: Това ви позволява да добавяте подчертавания, тирета и други декорации към текста, например, text-decoration: underline;

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

Свързани: Как да промените текста на уебсайта си със свойството семейство шрифтове на CSS

Научете повече от цвета на текста на CSS

Практиката, експериментите и опитите и грешките са най -добрите начини да научите инструмент като CSS. Стиловите таблици могат да изглеждат обезсърчаващи, когато започнете да работите с тях, но с тях е изключително лесно да работите, след като сте прекарали известно време с тях.

10 прости примера за CSS код, които можете да научите за 10 минути

Нуждаете се от помощ с CSS? Опитайте тези основни примери за CSS код, за да започнете, след което ги приложите към собствените си уеб страници.

Прочетете Напред

За автора