1:09 AM Урок №2 Прилагане на CSS (Чрез елемента style) | |
В предишния урок разгледахме същността на CSS и използвахме първият от трите метода на прилагане на CSS към нашата уеб страница. Видяхме, че прилагането на CSS чрез атрибута style не е най-ефикасния начин за стилизиране на уеб страница. За щастие има други два метода, които до голяма степен намалят времето на работа и увеличават продуктивността. Това значи, че с по-кратък код ще постигнем по-добри резултати. Метода, който ще разгледаме в този урок е прилагане на CSS чрез xHTML елемента <style>. Начини на задаване на CSS
В следващата част от урока ще разгледаме вторият от трите метода – чрез елемента <style> в раздела <head> на html документа. В края на урока ще се постарая да посоча плюсовете и минусите при използването на този метод. Чрез елемента <style> в раздела <head> на html документаТози вид стил се нарича Internal Style sheet (вътрешен стил). Най-често се използва, когато искаме конкретна страница от нашия уеб сайт да бъде с уникален стил. Начина, по който дефинираме този вътрешен за страницата стил е като използваме елемента <style> в секцията <head> на нашата уеб страница. Структура на style елемента Преди да разгледаме един пример, нека се запознаем със структурата на style елемента. Този елемент идва под формата на двойка тагове – отварящ и затварящ. В отварящия таг (<style>) трябва да поставим един задължителен атрибут и това е type. Атрибута type служи за идентифициране на съдържанието между отварящия <style> и затварящия </style> таг. За сега стойността, която type може да приеме е само една – text/css. Визуално, всичко това може да бъде представено така:
Кода между отварящия <style> и затварящия </style> таг се третира от браузъра като CSS. Остава да обясня още едно нещо преди да приложим всичко в нагледен пример. Как да избера елемента, който искам да стилизирам?При прилагането на стил чрез атрибута style видяхме, че е възможно да променим визията на даден xHTML елемент като директно въведем желаните CSS декларации. При този метод обаче не е така. Тук, ако директно въведем CSS декларациите нищо няма да се промени, защото браузъра няма как да разбере върху кой точно елемент да ги приложи. Затова при този метод, и при използването на външен Style sheet, CSS придобива малко по различна структура от тази разгледана в урока “Урок№1”.
Като цяло, можем да разделим структурата на 3 части:
Надявам се, че всичко до тук ви е ясно. Сега нека приложим цялата тази теория в един пример. Стъпка 1 : Ще създадем нова уеб страница като използваме Strict Doctype. Също така ще добавим едно h2 заглавие и един текстов параграф.
След като запазим документа и го отворим с браузър, страницата ще изглежда по следния начин:
В <head> раздела на документа, веднага след <title> постави новият елемент <style>.
Стъпка 3 : Първо ще променим цвета на заглавието. Между отварящия <style> и затварящия </style> таг въведи следния код:
Прилагане на CSS чрез елемента styleВ предишния урок разгледахме същността на CSS и използвахме първият от трите метода на прилагане на CSS към нашата уеб страница. Видяхме, че прилагането на CSS чрез атрибута style не е най-ефикасния начин за стилизиране на уеб страница. За щастие има други два метода, които до голяма степен намалят времето на работа и увеличават продуктивността. Това значи, че с по-кратък код ще постигнем по-добри резултати. Метода, който ще разгледаме в този урок е прилагане на CSS чрез xHTML елемента <style>. Нека си припомним, кои са трите начина на задаване на CSS. Начини на задаване на CSS
В следващата част от урока ще разгледаме вторият от трите метода – чрез елемента <style> в раздела <head> на html документа. В края на урока ще се постарая да посоча плюсовете и минусите при използването на този метод. Чрез елемента <style> в раздела <head> на html документаТози вид стил се нарича Internal Style sheet (вътрешен стил). Най-често се използва, когато искаме конкретна страница от нашия уеб сайт да бъде с уникален стил. Начина, по който дефинираме този вътрешен за страницата стил е като използваме елемента <style> в секцията <head> на нашата уеб страница. Структура на style елемента Преди да разгледаме един пример, нека се запознаем със структурата на style елемента. Този елемент идва под формата на двойка тагове – отварящ и затварящ. В отварящия таг (<style>) трябва да поставим един задължителен атрибут и това е type. Атрибута type служи за идентифициране на съдържанието между отварящия <style> и затварящия </style> таг. За сега стойността, която type може да приеме е само една – text/css. Визуално, всичко това може да бъде представено така:
Кода между отварящия <style> и затварящия </style> таг се третира от браузъра като CSS. Остава да обясня още едно нещо преди да приложим всичко в нагледен пример. Как да избера елемента, който искам да стилизирам?При прилагането на стил чрез атрибута style видяхме, че е възможно да променим визията на даден xHTML елемент като директно въведем желаните CSS декларации. При този метод обаче не е така. Тук, ако директно въведем CSS декларациите нищо няма да се промени, защото браузъра няма как да разбере върху кой точно елемент да ги приложи. Затова при този метод, и при използването на външен Style sheet, CSS придобива малко по различна структура от тази разгледана в “Урок№1”.
Като цяло, можем да разделим структурата на 3 части:
Надявам се, че всичко до тук ти е ясно. Сега нека приложим цялата тази теория в един пример. Стъпка 1Ще създадем нова уеб страница като използваме Strict Doctype. Също така ще добавим едно h2 заглавие и един текстов параграф.
След като запазим документа и го отворим с браузър, страницата ще изглежда по следния начин:
Стъпка 2По подразбиране цвета на заглавието и текста е черен. За да упражним наученото до сега нека сменим цвета на заглавието на оранжев. Също така нека наблегнем на думата “Internal Style sheet” като я удебелим и също ѝ променим цвета на оранжев. В <head> раздела на документа, веднага след <title> постави новият елемент <style>.
Стъпка 3Първо ще променим цвета на заглавието. Между отварящия <style> и затварящия </style> таг въведи следния код:
Запази промените и виж страницата в браузър: Цвета на заглавието се промени успешно. В този случай h2 е селектор т.е. избираме (селектираме) всички h2 заглавия, които се намират в конкретната страница. Ако сега добавиш още едно h2 заглавие след текста, то неговия цвят също ще бъде променен. Пробвай. Всички декларации, които са между { и } ще бъдат приложени върху селектора. В случая имаме само една. Стъпка 4Сега нека удебелим и променим цвета на текста “Internal Style sheet”, намиращ се в параграфа. В урока “Разлики между block и inline елементи” научихте, че инлайн елемента strong служи за удебеляване на шрифта. Нека го приложим. Променете кода по следния начин:
Ако сега запазите промените и отворите страницата в браузър ще видите, че текста “Internal Style sheet” е удебелен, но цвета си остана черен. С помоща на CSS можем да го променим без никакви проблеми. След CSS кода, който имаме до сега, добави следното: (Веднага след определящия за h2 код)
Запазете и вижте резултата в браузъра.
Страхотно. Освен, че текста е удебелен, успяхме и да променим цвета му. В този случай strong играе ролята на селектор. Както и преди, така и тук кода между { и } ще се приложи върху всички strong елементи намиращи се в страницата независимо от техния брой. Пробвай да оградиш още 1-2 думи със strong, за да видиш как работи. Общото между двата стила е, че използвахме HTML елементи като селектори. Всеки HTML елемент, който се намира в <body> може да бъде използван като селектор в CSS. Единственото, което трябва да запомниш е, че когато използваш HTML елемент като селектор не трябва да добавяш символите < и >, а директно пишеш името на елемента. Друго много важно нещо е, че когато използваш даден HTML елемент като селектор, браузъра ще приложи CSS стил върху всеки елемент от този вид. ХитринкаТук искам да ви споделя една хитринка. Надявам се, че забелязахте общото между CSS кода, който прилагаме върху h2 заглавието и кода, който прилагаме върху strong. Да, точно така, той е един и същ. В случаите, когато използвате един и същи код, за да стилизираш няколко различни елемента (2 или повече) можеш да използваш един трик, който ще намали излишното дублиране на код. При такива обстоятелства можеш да приложиш един и същи код върху няколко селектора като ги обединиш на един ред и ги отделиш със запетайка. Ето как става това:
Уау. Ако проверите резултата в браузър ще видите, че страницата изглежда по абсолютно същия начин, но всъщност намалихме кода наполовина. Това, което казваме на браузъра е “Намери всяко h2 и strong на страницата и приложи върху тях кода между { и }”. Надявам се, че урока до сега ви е ясен и лесен за следване. Ако имате съмнения и въпроси, споделете ги в коментарите след урока. ОбобщениеРазгледахме втория метод за прилагане на CSS в нашата страница. Този се различава коренно от първия и според мен е много по-ефективен. Нека разгледаме предимствата и недостатъците му. Предимства
Недостатъци
Аз лично предпочитам да използвам този метод пред метода с прилагането на style атрибута. Разгледахме страшно много неща в този урок. Всичко това е част от основите за работа с CSS. В следващия урок ще научим как да използваме CSS чрез външен файл (External Style sheet). Надявам се, че всичко до тук ви е ясно. Ако имате въпроси и коментари, не се притеснявайте да ги споделите в коментарите след урока. | |
|
| |
Стъпка 2 : По подразбиране цвета на заглавието и текста е черен. За да упражним наученото до сега нека сменим цвета на заглавието на оранжев. Също така нека наблегнем на думата “Internal Style sheet” като я удебелим и също ѝ променим цвета на оранжев.
Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
| Всички коментари: 0 | |
