Home » 2014 » Октомври » 2 » Урок №1 CSS Основа
1:14 AM
Урок №1 CSS Основа

Какво представлява CSS?

CSS идва от съкращението Cascading Style Sheets и предтавлява отделен език, който ни помага да променяме външния вид на нашата xHTML страница. Възуално връзката между HTML и CSS може да бъде представена така:

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

Забележка : Искам да отбележа, че CSS ни позволява да стилизираме елементите, които се намират в <body>. Елементите, които се намират в <head> не могат да бъдат стилизирани, защото CSS няма достъп до тях, а и те са невидими за потребителя.

 

Начини на задаване на CSS

Генерално, начините на задаване на CSS са три:

  1. Чрез атрибута style в отварящия таг на даден елемент;
  2. Чрез елемента <style> в раздела <head> на html документа;
  3. Чрез външен Style sheet.

В следващата част от урока ще разгледаме първият от трите метода – чрез използване на атрибута style. Също така в края на урока ще се постарая да посоча плюсовете и минусите при използването на този метод.

Чрез атрибута style в отварящия таг на даден елемент

Този вид стил се нарича инлайн (inline), защото се прилага върху конкретен елемент чрез използването на style атрибута в отварящия таг.

Това е първият и може би най-лесният метод за прилагане на CSS към даден елемент. Лесен е, защото задаваме стила в самия елемент. Така не се налага да помним нито вида на елемента, нито структурата на html документа. Всичко което трябва да направим е да използваме атрибута style.

Забележка : Атрибута style е незадължителен. Използването му е по избор. Това което style атрибута всъщност прави е да казва на браузъра “Третирай всичко между кавичките като CSS стил и го приложи на избрания елемент”.

 Ако всичко до тук е ясно, нека разгледаме един пример.

Стъпка 1 : Нека създадем нова уеб страница като използваме Strict Doctype. Също така нека добавим едно h1 заглавие и един текстов параграф. Кода би изглеждал ето така:

 

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html;
  6.             charset=utf-8" />
  7.         <title>PC-Tools Guides - Guides</title>
  8.     </head>
  9.     <body>
  10.         <h1>PC-Tools Guides</h1>
  11.         <p>PC-Tools CSS Section introduce you the CSS Section where you can learn the basics and how to use them.</p>
  12.     </body>
  13. </html>

 

След като запазим документа и го отворим в браузър, страницата ще изглежда по следния начин: 

Стъпка 2 : По подразбиране цвета на текста на h1 заглавието и на параграфа е черен. Нека го променим.

Заглавието се отличава значително от останалата част на страницата, но ние искаме цвета на текста да бъде оранжев. За да постигнем този ефект е необходимо да използваме атрибута style в отварящия h1 таг.

След това определяме свойството, което искаме да променим (в случая цвета), а като стойност на това свойство въвеждаме избраният цвят.

Променете кода на отварящия h1 таг по следния начин:


 

 

  1. <h1 style="color:#dd7319;">PC-Tools Guides</h1>

 

 Стъпка 3 : Запазете промените и отворете страницата с браузър. Резултата трябва да е следния:

Уау. Страхотно! По същия начин можеш да промениш цвета на текстовия параграф.

Но какво всъщност стана? Как работи всичко това? Има няколко важни неща, които трябва да запомните! Нека видим кои са те.

Структура на атрибута style

Всяка част от структурата изпълнява определено значение. Следва описание на всеки един от тези елементи:

  1. Кавичките определят границите на style атрибута. Всичко, което е между тези кавички се третира от браузъра като CSS и се прилага върху дадения елемент;
  2. Общото наименование на двойката свойство:стойност се нарича декларация. Първата част от структурата на декларацията се нарича свойство (на английски property). Свойството е стила, който искаме да променим. Цвят, шрифт, разстояние между редовете и буквите, разстояние между елементите, ширина и височина, всичко това (и много други) са свойства на даден елемент. В този случай свойството, което съм използвал е color;
  3. Знака : определя края на свойството. Това което следва е стойността на избраното свойство;
  4. Втората част от декларацията се нарича стойност (на английски value). Самата дума ни подсказва,че това е стойността на свойството. Тук възможностите са различни като всяко свойство има точно определени стойности, които може да приема. Стойности, които не се поддържат от свойството се игнорират. В нашия случай за стойност на color съм използвал специален цвят, който е образуван от шестнадесетичен цветови код (на аглийски hexadecimal color). Повече за тези цветове ще научим в някой от бъдещите уроци. Като стойност на color можем да използваме и някои от често срещаните английски думи за цвят като red, green, orange, blue и т.н. Ако имаш желание пробвай някои от тях.
  5. Зкана ; определя края на декларацията. Атрибута style ни позволява да използваме няколко декларации наведнъж, като всяка следваща трябва да бъде разделена от предходната, посредством този знак. Например, ако искаме освен цвета да променим и размера на заглавието h1, кода ще придобие следния вид:

 

 

  1. <h1 style="color:#dd7319; font-size:20px;">
  2. PC-Tools Guides</h1>

 

 

По този начин можем да “навържем” колкото искаме декларации, въпреки че прекалено многото в един момент ще ни затруднят при намирането на евентуални грешки в кода.

Обобщение

Разгледахме първият от трите начина за прилагане на CSS в нашата уеб страница. Подробно видяхме и структурата на CSS декларациите. Сега остава да изброя кои са (според мен) предимствата и недостатъците на този метод. Ето ги и тях:

Предимства

  • Добавянето на стил върху текущия елемент е изключително лесно. Всичко, което трябва да направиш е да използваш допълнителния атрибут style;
  • Атрибута style може да се използва във всеки един от елементите намиращи се в <body> на нашата уеб страница (дори и на самия <body> таг);
  • Не е необходимо да се създава отделен файл (както при използването на външен CSS документ). Стила се въвежда директно в самия елемент.
  • Този метод е с най-висок преоритет, когато трябва да се определи кой стил да се приложи върху даден елемент. Преоритизирането при прилагане на стилове в CSS е от голямо значение, затова тази тема ще я разгледаме в отделен урок.

Недостатъци

  • Ако искаш да приложиш един и същи стил на няколко елемента, трябва да добавиш style атрибута на всеки от тях. Например имаш 5 заглавия от h2 ниво и искаш всички те да изглеждат еднакво. В такъв случай трябва да приложиш един и същи стил на всяко заглавие по отделно;
  • Много повече работа при поддръжката на кода. Ако разгледаме отново горния пример, ще забележим, че за да променим цвета на заглавието от черен на син, трябва да редактираме кода на 5 различни места. Представи си, че заглавията са повече. Тогава работата се увеличава значително;
  • Този вид стил не може да се прилага върху няколко html документа наведнъж.
  • Използването на прекалено много декларации увеличава възможността за допускане на грешка. Също така кода става труден за четене.
  • Миксиране на структурата на страницата със стила ѝ. Както знаем от уроците по HTML, xHTML елементите се използват, за да оформят структурата на уеб страницата. Сега знаем, че CSS се използва за промяна на външния вид (стила). Смесването на двете се приема като лоша практика. Разделянето на визуалната част от структурата е това, към което трябва винаги да се стремим.

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

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

В следващия урок ще разгледаме втория метод за прилагане на CSS - Чрез елемента <style> в раздела <head> на html документа;

Надяваме се, че всичко до тук ви е ясно. Ако имате въпроси и коментари, не се притеснявайте да ги споделите в коментарите на урока.

Категория: CSS | Преглеждания: 789 | Довавено от: knif3r | Оценка: 5.0 | Гласували :4 | Tags: CSS, №1, урок, osnova, основа, yrok

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
Всички коментари: 0
Log in:
avatar
За нас
Полезно
Помощни секции
Социални Мрежи

PC-Tools.inc | Copyright © 2014-2015
DMCA.com Protection Status Mozilla Firefox+4.0 Chrome+13.2 Opera+5.6 IE+7.9 Safari+2.0