HTML & CSS CSS Introduction

1. HTML & CSS
CSS Introduction

2. Въведение
• За какво служи CSS
• Защо е необходимо да се използва CSS
• Версии на CSS
– CSS 1 – 1996 г.
– CSS 2 – 1998 г.
– CSS 2.1 – 2004 г.
– CSS 3 – 2011 – 2012 г.

3. Къде се разполага
Default Browser CSS
<link rel="stylesheet" type="text/css" href="/style.css" />
@import url('/style.css'); IE8+
<style type="text/css"> … </style>
<element style=" … " />

4. Синтаксис / Syntax
Набор / Set
div#id h1.main {
color: red;
height: 24px;
}
body p {
font-size: 14px;
line-height: 24px;
}
span a:link {
color: red;
height: 24px;
}

5. Синтаксис / Syntax
Дефиниция / Definition
div#id h1.main {
color: red;
height: 24px;
}
body p {
font-size: 14px;
line-height: 24px;
}
span a:link {
color: red;
height: 24px;
}

6. Синтаксис / Syntax
Селектор / Selector
div#id h1.main span {
color: red;
height: 24px;
}

7. Синтаксис / Syntax
Декларация / Declaration
div#id h1.main span {
color: red;
height: 24px;
}

8. Синтаксис / Syntax
Свойство / Property
div#id h1.main span {
color: red;
height: 24px;
}

9. Синтаксис / Syntax
Стойност / Value
div#id h1.main span {
color: red;
height: 24px;
}

10. Основни Селектори
• .class 1
• #id 1
• element 1
• element, element 1
• element element 1

11. Селектори / Selectors
• * 2
• element>element IE8+ 2
• element+element IE8+ 2
• [attribute] IE8+ 2
• [attribute=value] IE8+ 2
• [attribute~=value] IE8+ 2
• [attribute|=value] IE8+ 2

12. Псевдо селектори
• Псевдо клас (Pseudo Class) – прихваща
съществуващ елемент, в различни негови
състояния
• Псевдо елемент (Pseudo Element) –
прихваща несъществуващ елемент, който
виртуално се създава за нуждите на CSS

13. Псевдо класове / Pseudo Classes
• :link 1
• :visited 1
• :hover IE8+ 1
• :active 1
• :focus IE8+ 2
• :lang(language) IE8+ 2

14. • Важно е в какъв ред са изброени псевдо
класовете за хипервръзки
• MEMO техника: LoVe HAte
– :link
– :visited
– :hover
– :active

15. Псевдо елементи / Pseudo Elements
• :first-letter 1
• :first-line 1
• :first-child IE8+ 2
• :before IE8+ 2
• :after IE8+ 2

16. CSS 3 селектори
• element1~element2 IE8+ 3
• [attribute^=value] IE8+ 3
• [attribute$=value] IE8+ 3
• [attribute*=value] IE8+ 3
• ::selection (::-moz-selection) IE9+ 3

17. CSS 3 псевдо класове
• :last-child IE9+ 3
• :root IE9+ 3
• :empty IE9+ 3
• :target IE9+ 3
• :enabled IE9+ 3
• :disabled IE9+ 3
• :checked 3
• :not(selector) IE9+ 3

18. CSS 3 псевдо класове
• :first-of-type IE9+ 3
• :last-of-type IE9+ 3
• :only-of-type IE9+ 3
• :only-child IE9+ 3
• :nth-child(n) IE9+ 3
• :nth-last-child(n) IE9+ 3
• :nth-of-type(n) IE9+ 3
• :nth-last-of-type(n) IE9+ 3

19. 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

20. Media Types
• all всички медии
• aural синтезатор на реч
• braille брайлов монитор
• embossed брайлов принтер
• handheld мобилно устройство
• print печат на принтер
• projection мултимедиен проектор
• screen монитор (компютърен екран)
• tty телетайп / терминал
• tv телевизор

21. Media Types Syntax
<link rel="stylesheet" type="text/css"
href="/style.css" media=" … " />
@media … { … }
@import url('/style.css') … ; IE8+
<style type="text/css“ media=" … "> … </style>

22. Схема на приоритети
• Вграден в браузъра
• Наследен от родителя
• Дефиниран в страницата
• По-късната дефиниция
• Кардиналност на селектора
• Дефиниран от потребителя
• Media Type
• !important
• style=""

23. Кардиналност на селекторите
selector !important style="" #id .class Element
li 0 X 0 0 1
ul li a 0 X 0 0 3
.price 0 X 0 1 0
span.price 0 X 0 1 1
li:first-line 0 X 0 0 2
#main 0 X 1 0 0
div#main 0 X 1 0 1
div#main span.price 0 X 1 1 2
style="color: red;" 0 1 X X X
li { left: 0 !important; } 1 X 0 0 1
style="left: 0 !important;" 1 1 X X X

24. Предимства на CSS
• Отделяне на съдържанието от презентацията
• Широки възможности за преизползване
• Намаляване на трафика
• Лесно редактиране на много страници
• Достъпност
– за хора с увреждания
– за мобилни устройства

25. Недостатъци в CSS
• Селекторите са еднопосочни
• Вертикалният контрол е ограничен
• Не могат да се дефинират променливи
• Дефинициите не се именуват/реферират
• Няма възможност за влагане на дефиниции