CSS. Базови знания за нуждите на Wordpress
Най-важното, което трябва да запомните от този урок
Дори с базови познания по CSS можете да направите значителни визуални промени във вашия сайт. Не е нужно да сте експерт, за да прилагате прости стилове и да подобрите външния вид на страниците си. Основните CSS правила позволяват центриране, промяна на шрифтове, форматиране на текст и добавяне на цветове.
Задача стъпка по стъпка за практикуване на CSS в Wordpress 5
Следвайте тези стъпки, за да приложите базови CSS промени към HTML страница или блок в Wordpress 5:
- Създайте или редактирайте страница и изберете къде искате да вмъкнете HTML код.
- Добавете контейнер с
<div>таг веднага след отварящия<body>или вътре в желания блок. - Задайте стила на този
<div>директно чрез атрибутаstyle, например:html <div style="width: 600px; margin: 0 auto; font-family: Verdana; text-align: justify; line-height: 1.5;"> - За да направите определени думи bold, italic или underline, използвайте съответно таговете
<b>,<i>,<u>. - За стил на отделна част от текста, използвайте
<span style="background-color: yellow;">Вашият текст</span>. - За да създадете линк към външна страница, използвайте таг
<a href="URL" target="_blank">Текст на линка</a>(target="_blank" отваря нов прозорец). - Запишете и презаредете страницата, за да видите промените.
Как да приложите тези стъпки в Wordpress 6 (най-новата версия през 2024)
Интерфейсът на Wordpress 6 е сходен, но има подобрения в редактора (Gutenberg). Можете да използвате Custom HTML блокове и частта за „Персонализирана CSS“ в темата:
- В редактора на страници/публикации кликнете "+" и изберете "Custom HTML" ("Персонализиран HTML").
- Поставете HTML и инлайн CSS стилове, както е показано по-горе, в този блок.
- Ако искате да добавите CSS към цялата тема, изберете "Appearance" ("Външен вид") → "Customize" ("Персонализиране") → "Additional CSS" ("Допълнителни CSS"). Там можете да добавите глобални стилове.
- Всички класове и тагове работят по същия начин, но имате възможност да визуализирате измененията в реално време.
- За създаване на линкове и стилизиране на текст използвайте същите HTML и CSS синтаксис.
Разлики с версия 5: - В новия редактор "Custom HTML" блокове се вмъкват по-лесно. - Интерфейсът за "Additional CSS" е по-интуитивен и показва визуализация. - Повече готови блокове позволяват визуални промени без код, но работата с HTML/CSS остава същата в основата си.
Най-често използвани тагове и CSS свойства от урока
<div>— Контейнер за групиране на елементи и прилагане на стил.<span>— За стилизиране на отделни части от текст.<b>— Прави текста удебелен (bold).<i>— Прави текста наклонен (italic).<u>— Подчертава текста (underline).style— Атрибут за добавяне на CSS директно в таг.width— Задава ширина: напр.600px.margin: auto— Центрира елемента.font-family— Избира шрифт, напр.Verdana.text-align: justify— Подравнява текста от двете страни.line-height— Увеличава междуредието.background-color— Променя цвета на фона.<a href="..." target="_blank">— Добавя връзка, която се отваря в нов прозорец.
Допълнителни полезни материали за CSS
Бърз справочник по основни CSS свойства в Aula.bg
Научаването и използването на базов HTML и CSS ще ви помогне да сте по-гъвкави в създаването на уеб сайтове с Wordpress. Те обаче не са задължителни, когато използвате Wordpress и научаването им е по желание.
