Упражнение 5 - CSS (Cascading Style Sheets).


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

CSS стилове могат да се записват по няколко начина:

  • вградени в рамките на един HTML елемент,
  • групирани в стилов блок в Head секцията на уеб страницата,
  • или импортирани от отделен стилов файл (style sheet).

Ако стиловете са създадени в отделен файл със стилове, множество Web страници могат да се свържат с описаните стилове, като по този начин се придаде общ изглед на целия уеб сайт.


Дефиниране на CSS стилови правила в стилови блокове.

Всяко CSS стилово правило има две основни части - селектор (например h1) и декларация (като color:red). Декларацията включва свойство (color) и стойността му (red). Синтаксисът е както следва:

Selector { property : value ; property2 : value2}

Едно просто CSS правило, което центрира и задава червен цвят на всеки текст съдържащ се в <h1> </ h1> таговете може да се запише по следния начин:

h1 {text-align:center; color:red;}

CSS правилата се дефинират в style блок в head елемента на уеб страницата. Следващият примерен код дефинира и прилага CSS правило за всички h1 елементи на страницата:



На тази уеб страница, всеки текст, който се намира между <h1> </ h1> тагове ще бъде изобразен центриран и червен. Така няма нужда всеки път да се задават атрибутите за всеки отделен <h1> таг, който се среща в документа.


Свързване на HTML елементи с CSS клас

Могат да се задават стилове, които се прилага към тагове с определено име, като например h1. За да се създадат различни стилове за един и същи елементи, или един и същи стил за различни елементи, се създават CSS класове. Класът дефинира стиловете по същия начин, като на стила се дава име. За да се приложи стила към даден елемент, трябва да се укажете името на стила като стойност на свойството class на тага. Следва пример на клас с име head2:

.head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic;}

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

<div class="head2">

Това, което прави head2 клас е точката (.) пред името. head2 може да се направи клас само за h1 като се дефинира по следния начин:

h1.head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic;}

Външен CSS

Външен style sheet е текстов файл с разширение .css, който съдържа само стилови правила. Свързването в уеб страницата може да стане чрез link елемент, както е показано в следния примерен код.

<link rel="stylesheet" type="text/css" href="Mystyles.css" />

Този link елемент прилага стиловете от външния style sheet Mystyles.css.

Стил правилата, описани във външния style sheet се пишат по същия начин, но без <style> </style> тага. Вижте примера:

h1 { text-align:center; color:red; }
.head2 { font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic; }

Към един външен style sheet могат да се свържат няколко страници HTML. Style sheet служат за разделяне на правилата за форматиране от съдържанието, като правят по-лесно редактирането им.


Задача

  • Създайте нова уеб страница, чрез File -> New -> Web Site (C# language).
  • Добавете нов файл за стиловете, чрез Add New Item и от Visual Studio installed templates, изберете Style Sheet.
  • В менюто се появява раздел Styles, чрез който можете да управлявате своите правила през диалогов прозорец. Друг начин да ги пишете е направо в текстовия файл, който се е отворил.
  • При ползване на диалоговия прозорец Add Style Rule имате избор от 3 варианта:
    • Element – Дефинират се правила за елемент с определено име на тага. Например ако се избере елементът h2 и се дефинират цвят за фон и фонт на текста, те ще се приложат за всички h2 елементи от уеб страницата.
    • Class name – Дефинират се правила за CSS клас. Например ако се дефинира .txtIndent клас, чийто правила могат да се приложат за текст в параграф: <p class="txtIndent">
    • Element ID – Дефинира правило за елемент с точно определено ID. Например, може да се дефинира стил за #txtPop за определяне на позицията на само един div елемент.
  • За да се опишат правилата позиционирайте курсора между скобите на стила, който искате да коригирате ( { … } ) и от менюто Styles изберете Build Style.
  • В диалоговия прозорец Style Builder, изберете предпочитаните стилови атрибути.
  • За да се свърже една уеб страница с готовите стилове има 2 начина:
    • В Design view на страницата провлачете от Solution Explorer style sheet файла и го пуснете някъде на страницата.
    • В Source view на страницата провлачете от Solution Explorer style sheet файла и го пуснете между <head></head> таговете.
  • Резултатът е добавеният линк елемент:
    <link href="MyStyles.css" rel="stylesheet" type="text/css" />
  • Направете 2 класа (left и right) за форматиране на div тагове, така че да представляват два различни контейнера намиращи се на един ред на отстояние 20 пиксела един от друг. Сложете различни ширини и фонове. Добавете съответните елементи в страницата ви.
  • Добавете контрол по избор и му дайте определено ID. За него направете стил и го приложете.

Върни се в началото

Designed by инж. Антония Ташева