HEADINGS AND CSS
Здравейте отново, днес ще говорим за headings. Както споменахме миналата лекция те биват 6 вида и се изобразяват така :
<h1></h1> ; <h2></h2> ; <h3></h3> ; <h4></h4> ; <h5></h5> ; <h6></h6>.
Това значи, че те представляват заглавия, където аналогично заглавието с най-голям шрифт е <h1> , а с най-малък <h6> .
CSS
Съкратено от Cascading Style Sheets е език за описание на стилове - използва се основно за описване на представянето на документ, написан на език за маркиране - HTML.
Реално CSS езика работи посредством селектори, те позволяват да се определя как да изглеждат елементите - цвят, шрифт, размер, фон и др.
** Много важно! - CSS езикът работи в точно определена последователност, за да работи успешно.
В CSS селекторите, за които ще говорим са три на брой. Днес ще изучим всеки един от тях като започнем с :
1. Класови селектори - с помощта на CSS можете да си създадете собствени класове за всеки един отделен елемент. След дефениране на класа, то всички селектори, в които се съдържа този клас, ще показват един и същ ефект. Използва се следният синтаксис :
2. ID селектори - с помощта на този вид селектори могат да се декларират допълнителни елементи , които не са указани в декларираните класове. Отново много важно - те са приоритетни пред всички останали.
селектор.клас { атрибут: стойност; }
3. Контекстуални селектори - комбинация от няколко селектора , като зададеният ефект се илюстрира според подредбата им. Използва се следният синтаксис:
1-ви селектор 2ри селектор .... { атрибут: стойност; }
Важно - Групиране на Селектори -
Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при групирането е :
селектор1, селектор2, селектор3, ... { атрибут: стойност; }
Свойства на стойностите
color - цвят на текста /rgb/
background-color - цвят на фона /rgb/
text-align - подравняване на текст /left;right;center;justify/
font-style - стил на шрифт /normal;italic;oblique/
font-weight - дебелина на текста /normal;lighter;bold;bolder/
font-size - размер на текста /пиксели;проценти;име/
font-family - шрифт /serif;sans-serif;cursive;fantasy;monospace;Arial; Courier;Tahoma/
list-style-type - водещ знак пред ред на списък /decimal;upper-alpha;lower-alpha;upper-roman;lower-roman/
width - ширина на елемент /пиксели;проценти/
height - дължина на елемент /пиксели;проценти/
border - рамка на елемент /solid;dotted;dashed;double;groove/
margin - външното разстояние от всички страни на елемента - биват следните /margin-left;margin-right;margin-top;margin-bottom/
border-collapse - вид рамка на елемент /collapse/
visited/hover/active - атрибути на anchor тага.
float - относително местоположение на елемента /left;right/
clear - забрана за заобикаляне на елементи отляво и отдясно
/left;right;both/
positioning
Два вида позиции съществуват в CSS :
position: relative;
Относителна позиция спрямо статичното местоположение на елемента.
position: absolute;
Определя абсолютното позициониране. Елементът се позиционира по отношение най-близкия си нестатичен предшественик
Въпроси и отговори
ДОМАШНО
Стилнете си първия HTML файл както сметнете, че ще изглежда красиво и подредено. Имате пълна свобода. :)
css-presentation
By Borislav Nikolov
