2. Въведение
За какво служи CSS
Защо е необходимо да се използва CSS
Версии на CSS
• CSS 1 (1996 г.)
• CSS 2 (1998 г.)
• CSS 2.1 (2004 г.)
• CSS 3 (2011 – 2012 г.)
2
3. Къде се разполага
Има 3 начина за вмъкване на CSS код в
една страница :
1. <link rel=“stylesheet” type=“text/css”
href=“style.css”>
2. <style type=“text/css”> … </style>
3. <h1 style=“color:blue”>This is heading </h1>
3
4. Синтаксис / Syntax
body {
color : blue;
}
#head {
font-size : 20px;
}
.main {
color : green;
}
4
6. Oсновни Селектори
.class
#id
element
element, element
element element
*
element + element
[attribute]
[attribute = value]
[attribute~=value/word]
[attribute |= value]
[attribute ^= value]
[attribute $= value]
[attribute *= value]
6
7. Псевдо селектори
Псевдо клас (Pseudo Class) – прихваща
съществуващ елемент в различни негови
състояния.
Псевдо елемент (Pseudo Element) –
прихваща несъществуващ елемент, който
виртуално се създава за нуждите на CSS.
7
9. Ред на псевдо класове
Важно е в какъв ред са изброени псевдо
класовете за хипервръзки
MEMO техника: LoVe Hate
• :link
• :visited
• :hover
• :active
9
12. nth-child(n)
:nth-child(5) петото подред
:nth-child(odd) нечетни
:nth-child(even) четни
an+b
a – cycle, b – counter offset
:nth-child(3n+1) всяко трето, започва от 1
:nth-child(5n+3) всяко пето, започва от 3
12
13. Медийни Типове / Media Types
all
aural *
braile *
embossed *
handheld *
print
projection *
screen
speech
tty *
tv *
всички медии
синтезатор на реч
брайлов монитор
брайлов принтер
мобилно устройство
печат на принтер
мултимедиен проектор
монитор(компютърен екран)
екранен четец
телетайп / терминал
телевизор
13
15. Схема на приоритети
Вграден в браузъра
Дефиниран в страницата
Кардиналност на селектора
Css вграден в страницата
Media Type
!important
style=“” върху елемент
15
16. Предимства на CSS
Отделяне на съдържанието от
презентациите
Широки възможности за преизползване
Намаляване на трафика
Лесно редактиране на много страници
Достъпност
• за хора с увреждания
• за мобилни устройства
16
17. Недостатъци в CSS
Селекторите са еднопосочни
Вертикалният контрол е ограничен
Не могат да се дефинират променливи
Дефинициите не се именуват/реферират
Няма възможност за влагане на дефиниции
17