1 css introduction

HTML & CSS

CSS Introduction

Въведение

• За какво служи CSS

• Защо е необходимо да се използва CSS

• Версии на CSS– CSS 1 – 1996 г.

– CSS 2 – 1998 г.

– CSS 2.1 – 2004 г.

– CSS 3 – 2011 – 2012 г.

Къде се разполага

Default Browser CSS

<link rel="stylesheet" type="text/css" href="/style.css" />

@import url('/style.css'); IE8+

<style type="text/css"> … </style>

<element style=" … " />

Синтаксис / 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;

}

Синтаксис / 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;

}

Синтаксис / SyntaxСелектор / Selector

div#id h1.main span {color: red;height: 24px;

}

Синтаксис / SyntaxДекларация / Declaration


}

Синтаксис / SyntaxСвойство / Property


}

Синтаксис / SyntaxСтойност / Value


}

Основни Селектори

• .class 1

• #id 1

• element 1

• element, element 1

• element element 1

Селектори / 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

Псевдо селектори

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

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

Псевдо класове / Pseudo Classes

• :link 1

• :visited 1

• :hover IE8+ 1

• :active 1

• :focus IE8+ 2

• :lang(language) IE8+ 2

• Важно е в какъв ред са изброени псевдо класовете за хипервръзки

• MEMO техника: LoVe HAte– :link– :visited– :hover– :active

Псевдо елементи / Pseudo Elements

• :first-letter 1

• :first-line 1

• :first-child IE8+ 2

• :before IE8+ 2

• :after IE8+ 2

CSS 3 селектори

• element1~element2 IE8+ 3

• [attribute^=value] IE8+ 3

• [attribute$=value] IE8+ 3

• [attribute*=value] IE8+ 3

• ::selection (::-moz-selection) IE9+ 3

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

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

nth-child(n)• nth-child(5) петото подред• nth-child(odd) нечетни• nth-child(even) четни

an+ba – cycle, b – counter offset

• nth-child(3n+1) всяко трето, започва от 1• nth-child(5n+3) всяко пето, започва от 3

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

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>

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

Кардиналност на селекторите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

Предимства на CSS

• Отделяне на съдържанието от презентацията

• Широки възможности за преизползване

• Намаляване на трафика

• Лесно редактиране на много страници

• Достъпност– за хора с увреждания

– за мобилни устройства

Недостатъци в CSS

• Селекторите са еднопосочни

• Вертикалният контрол е ограничен

• Не могат да се дефинират променливи

• Дефинициите не се именуват/реферират

• Няма възможност за влагане на дефиниции

1 css introduction

Technology