CSS (Cascading Style Sheets) се използва за стилизиране на HTML елементи.
Виж!!!
Как да използваме стилове в HTML
Как да добавим стилове в Неподчертан линк
Как да направим неподчертан линк с помощта на стилове.
Линк към външен style sheet
Как да използваме <link> тага, за да добавим външен style sheet.
Стилизиране с помощта на CSS
CSS е представен заедно с HTML4, за да предостави по-добра възможност за стилизиране на документи. CSS може да бъде добавен в документа по следните 3 начина:
- Inline – като използваме style атрибута в самия HTML елемент
- Internal – използваме <style>елемента в <head> секцията
- External – като използваме CSS външен файл
Най-удобния начин е, чрез добавяне на CSS от външен файл. В този урок обаче, ще ви въведем в CSS, като използваме style атрибута. Това се прави с цел да опрости примерите. Също така, за да можете да си поиграете с примерите
Inline Стилизиране
Инлайн стилизирането се използва когато искаме да добавим стил на един конкретен елемент. За да направим това, трябва да използваме style атрибута в отварящия таг на елемента. В този атрибут може да сложим всякакво пропърти от CSS. Долния пример показва как да сменим цвета на текста и левия марджин на параграф (повече за марджин в секцията за CSS):
HTML Пример за Стилизиране – Background Color
Пропъртито background-color дефинира цвета на фона на даден елемент:
HTML Пример за Стилизиране – Font(шрифт), Color(цвят) и Size(размер)
Пропъртитата font-family, color, и font-size дефинират шрифта, цвета и размера на шрифта на текста в даден елемент:
HTML Пример за Стилизиране – Text Alignment(подреждане на текст)
text-align определя хоризонталната подредба на текста (ляво, дясно, по средата):
Стилизиране чрез style таг в head
Стиловете в <head> секцията, се дефинират за конкретната страница чрез <style> таг:
Стилизиране чрез външен Style Sheet
Външното стилизиране е най-добрия и удобен начин, да стилизираме много страници в един файл. Така можем да контролираме вида на целият ни сайт от едно място. Всяка страница трябва да е свързана към .css файла чрез <link> тага:
HTML Тагове за стилизиране
| Таг | Обяснение |
|---|---|
| <style> | Дефинира информация за стиловете в определен документ |
| <link> | Добавя външен CSS файл към документа |