четвъртък, 29 февруари 2024 г.

Въведение в езика CSS стилизирани HTML уеб страници


Какво е CSS?
  • CSS е съкратено от Cascading Style Sheets
  • CSS е език, който определя външният вид и подредбата на HTML елементите
  • Той е бил добавен в HTML4, за да улесни стилизирането
  • Използването на външни стилове може да ви спести много работа и време
  • Външните стилове се съхраняват в CSS файлове
Един и същ HTML документ може да бъде представен с различни стилове.
Стиловете разрешават голям проблем със стилизирането на документи
HTML, като цяло, никога не е бил предназначен да съдържа форматиращи тагове. Предназначението му е да определя съдържанието на документа, като:
<h1>Това е заглавие</h1>
<p>Това е параграф.</p>
Когато тагове като <font> и атрибути, определящи цветовете, се включват в спецификацията на HTML 3.2 започва и кошмарът за developer-ите. Създаването на големи сайтове, където шрифтовете и цветовете e трябвало да бъдат добавяни за всяка страница отделно, се превърнало в дълъг и скъп процес. За да се разреши проблема, World Wide Web Consortium (W3C) създават CSS. В HTML 4.0 се дава възможност всяко форматиране, включено в HTML, да се премахне и съхрани в отделен CSS файл. Всички браузъри днес поддържат CSS.
Разполагането на цялата информация за стиловете в един външен файл ни дава и други полезни възможности - дори с промяна само на един (!) стилов файл, ние можем за броени секунди да сменим дизайна на целия сайт. При това никакви други преработки няма да са необходими. Разбира се това е възможно само в случай, че първоначално сайтът е бил проектиран правилно.
Целта на web разработчиците е да премахнат презентацията от HTML кода, оставяйки го чист и разбираем.
Предимствата на това са:

  • По-голяма достъпност на различни видове устройства (браузери)
  • Лесно обновяване на сайта - по добре да актуализраме 1 css файл, отколкото всичките html файлове
  • По-малък размер на кода. Зтова води след себе си по-малкия размер на изходния файл и следователно по-бързото му зареждане.
  • По-малкият размер на кода позволява много по-лесна обработка и обновяване
  • Повече контрол над кода 
CSS спестява много работа!
CSS е език, който определя външният вид и подредбата на HTML елементитеСтиловете обикновенно се съхраняват във външни css файлове, които ви позволяват да смените външният вид на страницата, променяйки само един файл, без да променяте файла със съдържанието на страницата.

Синтаксис на езика – или как да пишем правилно CSS

Всяко CSS правило се състои от селектор и блок за деклариране:













CSS Пример
Всяка декларация завършва задължително със знака ; (точка и запетая). Като блокът за деклариране се огражда в { и } (къдрави скоби)
За да направите CSS кодът по-четим, може да го разделите на редове: