Програмиране в среда Интернет
Начало
Увод
Съдържание
Въведение в Интернет
HTML
CSS
JavaScript
Perl
Полезни връзки
Речник на термините
HTML - CSS
Каскадни стилове. Достъп до каскадни
стилове във WEB документ. Основни елементи
на каскадните стилове.
Може би сте забелязали, че в материала досега доста често се споменаваха каскадни стилове (CSS - Cascading Style Sheets). Това е защото каскадните стилове позволяват в много по-добра степен контрол върху елементите на страницата, като добавят и нови възможности за форматиране на страницата. Пример за това може да е и страницата, която четете. Менютата отляво и отдясно са изцяло направени с каскадни стилове. Ако се използваше чист HTML за постигането на този ефект трябва да се използват таблици, което би я усложнило значително. Друг положителен ефект от използването на какскадни стилове е този, че ако се наложи да се промени дадено форматиране е достатъчно да се промени само на едно място, а именно файла съдържащ каскадния стил. Как става вграждането на каскадни стилове? Начините са три: първият е написването им директно в тялото на документа чрез атрибута STYLE="..."; вторият е написването им в заглавната част на документа, чрез тага <STYLE>...</STYLE>; тритият начин е написването им в отделен файл и указване пътя към този файл в заглавната част на документа чрез тага <LINK>. Ето пример демонстриращ и трите начина :
Вграждане в таг:
<IMG STYLE="padding-left:5px" SRC="demo.jpg">
Описване в заглавната част:
<STYLE>
<!--
H1 {color: blue}
-->
</STYLE>
Връзка към външен файл с CSS:
<LINK REL="stylesheet" HREF="styles.css" TYPE="text/css">
В първия случай прилагането на стила ще се ограничи само върху дадения елемет. Във втория случай стилът ще се приложи върху всички тагове <H1>, които ще имат син цвят. Подобно е положението и при третата форма на деклариране, с тази разлика, че стиловете се пишат в отделен файл и прилагането им върху поече документи е улеснено. Възможно и смесването на няколко метода за вграждане. Друга особенност е групирането. То се прави с цел намаляване размера на файла и представлява групиране на няколко елемента към един стил или/и няколко стила към един елемент :
Пример за групиране на няколко елемента:
H1, H2, H3 { font-family: helvetica }
Пример за групиране на няколко стила:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Друго важно свойство на стиловете е наследяването. То се изразява в способноста на един стил да прилага своите свойства върху всички тагове, които са затворени между тага, който прилага стила :
<H1>Наследяване <EM>на</EM> стил</H1>
В този случай стила на H1 ща бъде приложен и върху тага EM (освен ако той няма свой собствен стил). Трябва да се има впредвид, че някои свойства не се наследяват. Такова например е свойството 'background'. HTML 2 добавя атрибут за прилагане на стилове: атрибута CLASS. За да може да се използва този атрибут е необходимо с описанието на каскадния стил да са дефинирани класове. Това става по следния начин :
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
<!--
H1.pastoral { color: #00FF00 }
.blue {color: blue}
-->
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="pastoral">Зелени</H1>
<DIV CLASS="blue">Синьо</DIV>
</BODY>
</HTML>
Първият клас може да се прилага само върху тага H1, а втория - върху всеки един таг. Дръг начин за прилагането на стил е използването на атрибута ID="...",който има гарантира уникална стойност в документа :
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Широк текст</P>
В този случай селектора на тага P съвпада с първия селектор, но не и с втория. Когато искаме дадено свойство за определен таг, да има действие само в определени случаи може да се използва следния синтксис:
H1 EM { color: red }
Тук текста поставен между EM
ще е червен само ако ЕМ е вътрешен на тага
H1.
Следва да бъдат обяснени основните свойства,
които могат да се използват в CSS1. Трябва да се има впредвид, че CSS
е разширен до версия 2, която добавя възможност за промяна на свойствата
на допълнителни елементи в страниците, като елементите на формите например..
За тези, които се интересуват оригиналната документация може да бъде намерена
на адрес http://www.w3.org/TR/REC-CSS2/css2.zip
.
Следват най-често използваните свойства :
'font-family' - дефинира шрифта. Може да се прилага върху всички елементи и не се наследява. Стойност може да име на шрифт или семейство от шрифтове. Ако името на шрифта включва интервали, то трябва да се загради в кавички. Фамилиите шрифтове са : serif (Times), sans-serif (Helvetica, Arial), cursive (Zapf-Chancery), fantasy (Western), monospace (Courier).
BODY { font-family: "new century schoolbook", serif }
'font-style' - дефинира стил на шрифта. Прилага се върху всички елементи и се наследява. Възможните стойности са :normal, italic, oblique.
H3 { font-style: italic }
'font-variant' - това свойство променя
буквите, така че изглеждат като големи букви, но с по-малък размер. Стойностите
са : normal и small-caps. Може да се прилага на всички елементи и се наследява.
'font-weight' - дефинира дебелината
на шрифта. Възможни стойности са :normal, bold, bolder, lighter, 100,
200, ..., 900.Може да се прилага на всички елементи и се наследява.
'font-size' - дефинира големина на
шрифта. Възможно е прилагането на абсолютен размер (xx-small, x-small,
small, medium, large, x-large, xx-large), относителен размер спрямо големината
по подразбиране (larger, smaller). Друг начин е дефинирането директно
с големина в пиксели(px),проценти(%) и размер(pt). Освен това големоната
може да се задава и спрямо външния елемент чрез em и ex.
'font' - обединява в себе си всичките
предишни свойства. Ето пример :
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
Този пример
демонстрира използването на тези свойства.
Следващите свойства променят цветовете и фона на
страницата:
'color' - променя цвета на текста на
елемента от страницата върху който е приложен.
'background-color' - променя цвета
на фона на елемента. Това свойство не се наследява.
'background-image' - дефинира
изображение, което да служи за фон. Стойноста е URL към изображението.
Това свойство не се наследява.
'background-repeat' - дефира начина
по който да се повтаря изображението поставено като фон. Възможните стойности
са : repeat (изобржението се повтаря по вертикала и хоризонтала), repeat-x
(само по хоризонтала), repeat-y (само по вертикала), no-repeat (изображението
не се повтаря). Не се наследява. Има смисъл само ако е дефинирано изображение
като фон.
'background-attachment' - дефинира
начина по който изображението се държи при скролиране. възможните стойности
са : scroll (изображението се скролира), fixed (при скролиране изображението
не променя положението си). Не се наследява. Има смисъл само ако е дефинирано
изображение като фон.
'background' - обединява в себе си
всички горни свойства.
Следват свойствата определящи това как ще изглежда
даден текст:
'word-spacing' - дефинира разстоянието
между отделните думи. Стойноста може да е в пиксели(px), сантиметри(cm)
и др. По подразбиране стойноста е normal.
'letter-spacing' - дефинира разстоянието
между отделните букви. Стойноста може да е в пиксели(px), сантиметри(cm)
и др. По подразбиране стойноста е normal.
'text-decoration' - задава допълнителна
декорация към текста. Стойности може да са :none (без декорация) , underline
(подчертаване), overline (надчертаване), line-through (зачертаване), blink
(мигащ текст).
'vertical-align' - задава вертикалното
подравняване на текста. Възможните стойности са :baseline (, sub, super,
top, text-top, middle, bottom, text-bottom.
'text-transform' - променя големината
на буквите. Възможни стойности са : capitalize (прави главна първата буква),
uppercase (прави главни всички букви), lowercase (прави малки всички букви),
none.
'text-align' - дефинира подравняването
на текста. Възможни стойности са : left, right, center, justify.
'text-indent' - дефинира отместването
на текста. Възможните стойности в пиксели, проценти и др.
Ето пример за използването
на тези свойства.
Следващите свойства се отнасят към обвивките, които
ограждат всеки един елемент. Например следното :
Това е външната обвивка.
Това е вътрешната обвивка.
Това отново е външната обвивка.
представлява две обвивки, от които външната е с жълт цвят ( поне е близък
до него) и с шрифт monospace, а вътрешната обвивка е с червен цвят и шрифт
sans-serif. Свойствата, които ще разгледаме сега се отнасят за параметрите
на тези обвивки :
'margin-top' , 'margin-right', 'margin-bottom',
'margin-left' - дефинират полета съответно отгоре, отдясно,
отдолу и отляво спрямо другите елементи на страницата. Възможните стойности
са auto, пиксели, проценти и др. Тези свойства не се наследяват.
'margin' - обединява всичките горни
свойства. Установяването на някаква стойност е равносилно на установяването
на всички тях с една и съща стойност.
'padding-top', 'padding-right', 'padding-bottom',
'padding-left', 'padding' - има същото действие и стойности,
но влияе върху разстоянията между границата на обвивката и елементите
вътре в нея.
'border-top-width', 'border-right-width', 'border-bottom-width',
'border-left-width', 'border-width' - определят дебелината
на границата на обвивката (черната линия около менюто на страницата).
Валидни стойности са : thin (тънка), medium (средна), thick (плътна),
както и директното задаване в пиксели.
'border-color' - дефинира цвят на границата.
'border-style' - дефинира стил на границата.
Валидни стойности са: none (няма граница), dotted (границата е съставена
от точки), dashed (границата е съставена от тирета), solid (границата
е плътна линия), double (границата е двойна линия), groove (3D жлеб),
ridge (3D гребен), inset (3D прилив), outset (3D отлив).
'border-top', 'border-right', 'border-bottom',
'border-left', 'border' - тези свойства директно задават дебелината,
стила и цвета на границата съответно за горната, дясната, долната, лявата
и всички заедно. Ето и пример :
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Ето пример за използването
на тези свойства.
Това са основните и най-често използвани свойства. Всяко
от тях може да се задава чрез няколко вида мерни единици. Най-често използвана
от тях е пикселите (например 10px). Тя принадлежи към т.нар. относителни
единици. Това е така защто пикселите се отнасят към общите пиксели на
страницата, които зависят от резолюцията на екрана на потребителя. Други
релативни единици са em и ex, които се отнасят към големината на шрифта.
Друг тип единици са абсолютните. Към тях се отнасят сантиметрите (cm),
милиметрите (mm), инчовете (in) и пунктовете (pt). Отделна група са процентните
единици. Те могат да са с положителен и отрицателин знак и се отнасят
винаги относително към другите елементи на страницата.