Меню

Първи стъпки в правене на сайтове

Влез Излез

Стилови декларации с CSS

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

Както вече обясних в урока си за първи стъпки в CSS декларациите се състоят от двойки белег-стойност (property – value), разделени с точка и запетая. За разлика от HTML, където с изключение на глобалните атрибути, всеки таг си има отличителни белези, в CSS всички елементи могат да притежават едни и същи белези. С други думи, стиловите характеристики на елементите са еднакви, само стойностите им по подразбиране се различават в някои случаи. Възможно е поради стойността на една характеристика, други да нямат значение за външния вид на елемента, но когато стигнем до там ще ги уточним.

Да започнем с една от най-важните характеристики на елементите – display. Този белег (това property) определя начина на показване на елемента. Двата основни типа display са block и inline. Споменахме за тях във втора част на урока, в който ви представих някои основни HTML тагове. Припомняме, че блоковите елементи по подразбиране заемат цялата широчина, която им е предоставена, а inline елементите просто заграждат част от съдържанието както си върви (няколко думи от текст, картинка, комбинация от тях). По правило не трябва да влагаме block елементи вътре в inline, така че следното е грешно:

<em><h1>Заглавие в курсив</h1></em>

Би трябвало <em> тагът да е вложен в <h1> тага, тъй като по подразбиране <em> е inline елемент, а <h1> е block елемент. Остава въпросът дали не е позволено да ги напишем разменени, ако преди това в стиловете сме декларирали:

em { display: block; }

Така <em> елементът става също блоков, а знаем, че по принцип можем да влагаме block елементи един в друг. Отговорът е НЕ! „Не“, защото стиловете не играят значение за валидиране на HTML. HTML кодът трябва да е валиден при всякакви стилове, а в друг стил може да нямаме декларация, която да указва <em> да се показва като block елемент. По същата логика проблем с валидирането няма да имаме, ако използваме и следния стил:

h1 { display: inline; }
em { display: block; }

В този случай обаче не можем да сме напълно сигурни как браузърите ще покажат съдържанието, тъй като макар и по стилове по подразбиране да имаме inline елемент вложен в block, то по наши стилове имаме обратното, което не е редно.

Освен block и inline има и други стойности за display, но те се срещат много рядко и едва ли някога изобщо ще ви се наложи на вас самите да ги използвате, така че няма да ги коментираме.

Елементите могат да имат също така външно и вътрешно отстояние и рамка (margin – буквално „предел“, аз предпочитам да го превеждам като външно отстояние, padding – буквално уплътнение, аз го наричам вътрешно отстояние, border – рамка). Тези три стила са пряко свързани един с друг и оформят така наречения box model (модел на елементите, наподобяващ кутия). Отвътре навън елементите първо имат широчина и височина на съдържанието си, след това идва вътрешното отстояние, после рамката и тогава външното отстояние. Отстоянията ги наричам вътрешно и външно, именно защото по този начин ясно се вижда разликата в позицията им спрямо рамката. Нещо, което трябва да се има предвид е, че широчината (съответно и височината) на елементите се определя от широчината/височината на съдържанието им плюс вътрешното отстояние и рамката, но не и външното отстояние.

Като заговорихме за широчина и височина е добре да кажем, че можем да ги задаваме широчина използвайки width и height стиловете. Имайте предвид, че тези property-та имат ефект само върху block елементи и ще бъдат игнорирани за inline елементите.

Както казахме, блоковите елементи по подразбиране заемат цялата им предоставена широчина. Използвайки CSS width обаче можем да зададем широчината на два div тага достатъчно малка, че да се събират на един ред. Това обаче няма да се случи, не и ако не вземем и допълнителни мерки. Това е поради факта, че ако един блоков елемент има стил, определящ широчината му да е различна от предоставената му, но свободното място ще бъде автоматично запълнено от margin, който е толкова голям, колкото и оставащото свободно място. Така ако имаме екран с широчина 1280px (често срещана разделителна способност при 17″ монитори, както и някои малко по-стари лаптопи) и div с широчина 640px, ще имаме и margin със стойност 640px. По-конкретно този margin ще бъде от дясната страна на div-а, ако четем отляво надясно. Дори и да опитаме да презапишем този margin, използвайки:

div { margin-right: 100px; }

няма да постигнем нищо, тъй като той автоматично се допълва до пълната широчина на страницата. Ако обаче добавим и margin-left: auto; то тогава дясното външно отстояние ще бъде точно 100px (както сме задали), широчината на елемента ще е 640px (отново както сме задали), а автоматичната стойност на лявото външно отстояние ще го накара да запълни празното пространство отляво с такава стойност, каквато ни е нужна (540px). Ако зададем и лявото и дясното външно отстояние на auto, то тогава и двете ще се изравнят, запазвайки широчината на елемента, и така ще се получи центриран на екрана елемент.

Съществува синтаксис, който ни позволява по-лесно да задаваме стойности за margin, padding и border за всичките четири страни.

div { margin: top right bottom left; }

Задавайки четири стойности за margin (важи и за другите два споменати белега), отделени с интервали, те се приемат за четирите посоки на елемента, вървейки по часовниковата стрелка – горе, дясно, долу и ляво. Възможно е вместо 4 стойности да зададем 3. Пропущайки стойност за лявата страна, тя амтоматично се копира от дясната. По подобен начин можем да пропуснем и третата (за долната страна), която ще се копира от срещуположната (горната). А ако зададем една единствена стойност за margin то тя ще се използва и за чатирите страни.

Нещо важно, за стойностите в CSS, което до сега не съм споменал е, че задължително трябва да се оказват мерните единици. Докато в HTML можем да зададем широчина за някоя картинка като

<img src="image.jpg" width="100" alt="" />

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

Мерните единици в CSS се делят на две големи групи – абсолютни и относителни. Единственият представител на абсолютните стойности са пикселите. Относителните са %, em, ex, pt, pc, inch, cm и mm.

Процентите, казахме, от гледна точка на размери се изчисляват спрямо последния относително позициониран елемент, в който се намира текущия (по подразбиране единствено body тагът е относително позициониран). От гледна точка на шрифт обаче, процентите се изчисляват спрямо шрифта, който даденият елемент е унаследил. Така, че ако за body-то сме задали шрифт 12px, а за абзаците зададем размер на шрифта 120%, то тогава това ще се преизчисли до 14.4px, което се закръгля към 14px, тъй като няма как да имаме 0.4px – това са единствените единици, които не можем да имаме изразени като десетична дроб, тъй като са най-малките и няма как да ги разделим – просто екраните няма как да ги представят. Удобно е за де използва, когато искаме да променим пропорционално размера на целия текст в сайта. Ако всички шрифтове са относително израцени спрямо един основен, то тогава променяйки основния, променяме и останалите.

Емовете (em) са единици, които зависят от шрифта. Един em е равен на толкова пиксели, колкото пиксела е височината на главна буква M от текущия шрифт.

Екзовете (ex), подобно на em-овете зависят от шрифта. Те са равни на височината на малка буква x от текущия шрифт (по принцип са на около половината от em-а).

Точките (pt – point) са равни на 1/72 от инча, което зависи от dpi на монитора (dpi – dots per inch или точки на инч – мобилните устройства имат по-фини пиксели, съответно повече dpi).

Пикасите (pc – picas) са по 12pt.

Инчовете, сантиметрите и милиметрите (in, cm, mm) отново зависят от dpi на текущия монитор.

Мерните единици, които се използват най-често са px, % и em.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax