1. 2014 Copyright © 2014 DAVID Holding Company Курс по уеб програмиране Занятие №2 CSS

2. Copyright © 2014 DAVID Holding Company Съдържание Въведение в CSS Селектор, свойство, стойност Идентификация и групиране на селектори Цветове и фон Форматиране на текст, списъци, таблици CSS Box Model Border, margin, padding Позициониране на елементи Псевдокласове и псевдоелементи

3. Copyright © 2014 DAVID Holding Company Въведение в CSS C ascading S tyle S heets Език, който съдържа множество инструменти за стилизиране (инструктира как да се покаже) на HTML Разделя съдържанието на страницата от нейната презентация Дефинира шрифт, размер, широчина, фон.... Подобрява потребителското изживяване в сайта Може да определя различна презентация за различен тип медиа – screen, print, tv... дори braille Всеки браузър има свой-собствен, зададен по подразбиране стилов лист

4. Copyright © 2014 DAVID Holding Company Въведение в CSS Използване на едно и също съдържание с различни стилове за различни цели Външните стилови полета спестяват много работа Значително намаля количеството код в страницата Каскадни, защото децата наследяват родителите Връзката между HTML и CSS става по 3 основни начина – Вградени в елемента на HTML h1 { text-align: center; color: red; }

5. Copyright © 2014 DAVID Holding Company Въведение в CSS Връзката между HTML и CSS става по 3 основни начина – Inline – Стил в самия HTML елемент Page title – Външни – различни страници използват един и същ стил link Import - @import "styles.css"; – Някои по-стари браузъри не разпознават import – Проблеми с Internet Explorer

6. Copyright © 2014 DAVID Holding Company Въведение в CSS IE 6-9 – A sheet may contain up to 4095 rules – A sheet may @import up to 31 sheets – @import nesting supports up to 4 levels deep IE 10 – A sheet may contain up to 65534 rules – A document may use up to 4095 stylesheets – @import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)

7. Copyright © 2014 DAVID Holding Company Селектор, свойство, стойност Селекторът е връзката между HTML документа и стиловия лист и всички типове елементи в HTML са възможни селектори – p, div, nav, span, input… селектори { свойство: стойност; свойство: стойност; свойство: стойност; }

8. Copyright © 2014 DAVID Holding Company Селектор, свойство, стойност CSS селекторите се използват да намерят HTML елементите базирани на тяхно id, classes, тип, атрибут, стойност и тн.. Element селектор– прилага стил на HTML елемент/и strong { color: blue; } Class селектор – прилага стил на елемент/и в HTML със специфичен class атрибут.myclass { color: blue; } Заглавие

9. Copyright © 2014 DAVID Holding Company Селектор, свойство, стойност ID селектор– прилага стил на HTML елемент/и със специфичен ID атрибут #myid { color: blue; } Заглавие

10. Copyright © 2014 DAVID Holding Company Идентификация и групиране на селектори Възможно е да има много елементи с един с един и същ стил Групирането на елементи намалява кода и значително подобрява поддръжката от страна на разработчиците h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }

11. Copyright © 2014 DAVID Holding Company Идентификация и групиране на селектори Възможно е да има много елементи с един с един и същ стил Групирането на елементи намалява кода и значително подобрява поддръжката от страна на разработчиците. h1, h2, p { text-align: center; color: red; }

12. Copyright © 2014 DAVID Holding Company Идентификация и групиране на селектори Комбиниране #navigation p strong { color: red; } Page title Lorem Ipsum is simply dummy text of the prin

13. Copyright © 2014 DAVID Holding Company Идентификация и групиране на селектори Вложени селектори nav p strong { color: red; } Page title Lorem Ipsum is simply dummy text of the prin

14. Copyright © 2014 DAVID Holding Company Идентификация и групиране на селектори Атрибутни селектори – Избира/селектира елементи по техните атрибути a[title] { color: red; text-decoration: none; } Lorem Ipsum is simply dummy text of the print

15. Copyright © 2014 DAVID Holding Company Идентификация и групиране на селектори Атрибутни селектори – Избира/селектира елементи по стойността на техните атрибути input[type=text] { color: red; text-decoration: none; } Lorem Ipsum is simply dummy text of the print Lorem Ipsum is simply dummy text of the print

16. Copyright © 2014 DAVID Holding Company Идентификация и групиране на селектори Атрибутни селектори – Избира/селектира елементи, чиито атрибутни стойности съдържат определена дума a[title*=someword] { color: gray; } Lorem Ipsum is simply dummy text of the print

17. Copyright © 2014 DAVID Holding Company Идентификация и групиране на селектори Избиране/селектиране на всички елементи в даден елемент body * { font-size: 10px; } Lorem Ipsum is simply dummy text of the print

18. Copyright © 2014 DAVID Holding Company Идентификация и групиране на селектори Селектиране на всички елементи с определен клас в даден елемент p >.otherclass { color: green; }

19. Copyright © 2014 DAVID Holding Company Форматиране Мерни единици %percentage ininch cmcentimeter mmmillimeter em1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses exone ex is the x-height of a font (x-height is usually about half the font-size) ptpoint (1 pt is the same as 1/72 inch) pcpica (1 pc is the same as 12 points) pxpixels (a dot on the computer screen)

20. Copyright © 2014 DAVID Holding Company Форматиране Цветове Hex стойностите представляват три двойки двуцифрени шестнадесетични числа започващи със символа ‘#’. ColorColor HEXColor RGB #000000rgb(0,0,0) #FF0000rgb(255,0,0) #00FF00rgb(0,255,0) #0000FFrgb(0,0,255) #FFFF00rgb(255,255,0) #00FFFFrgb(0,255,255) #FF00FFrgb(255,0,255) #C0C0C0rgb(192,192,192) #FFFFFFrgb(255,255,255)

21. Copyright © 2014 DAVID Holding Company Форматиране Добавяне на фон PropertyDescription backgroundSets all the background properties in one declaration background-attachmentSets whether a background image is fixed or scrolls with the rest of the page background-colorSets the background color of an element background-imageSets the background image for an element background-positionSets the starting position of a background image background-repeatSets how a background image will be repeated

22. Copyright © 2014 DAVID Holding Company Форматиране Добавяне на фон body { background-image: url('css/red001.jpg'); background-color: #f4f4f4; background-repeat: no-repeat; background-position: center bottom; background-attachment: scroll; background-size: cover; }

23. Copyright © 2014 DAVID Holding Company Форматиране на текст Поддържа правила за стилизиране на: – Шрифт font-family: Verdana, Geneva, sans-serif; font-size: 10px; font-style: italic; – Цвят color: #930; opacity: 0.6; – Оформление text-decoration: line-through; text-transform: uppercase; letter-spacing: 20px; text-align: center; – http://www.w3schools.com/cssref/default.asp http://www.w3schools.com/cssref/default.asp

24. Copyright © 2014 DAVID Holding Company Форматиране на списъци Apples Bananas Lemons Oranges Apples Bananas Lemons Oranges Apples Bananas Lemons Oranges

25. Copyright © 2014 DAVID Holding Company Форматиране на списъци ul.a { list-style-type: circle; list-style-image: url(css/sqpurple.gif); } ul.b { list-style-type: square; } ul.c { list-style-type: square; list-style-image: none; } ul.b li { background-image: url(css/sqpurple.gif); background-repeat: no-repeat; background-position: 10px 5px; padding-left: 14px; text-indent:20px; }

26. Copyright © 2014 DAVID Holding Company Форматиране на таблици Форматиране на таблица table { width: 500px; border-collapse: collapse; } Атрибутът border-collapse определя вида на рамката table, td, th { border: 1px solid green; } th { background-color: green; color: white; }

27. Copyright © 2014 DAVID Holding Company CSS Box Model CSS box model представя всеки елемент като съвкупност от четири вложени полета

28. Copyright © 2014 DAVID Holding Company CSS Box Model Описание на различните полета: – Margin - Изчиства полето около border. Margin няма цвят на фона и е прозрачен – Border - Поле, което обикаля около padding и съдържание. – Padding - Изчиства полето около съдържанието. Padding се влияе от фона на кутията. – Съдържание - съдържанието на кутията, където се показва текст и картинки

29. Copyright © 2014 DAVID Holding Company CSS Box Model За да задавате правилни ширина и височина на елементите, трябва да знаете как работи box моделът.math { width: 250px; padding: 10px; border: 5px solid gray; margin: 10px; } Калкулиране на ширината и височината на елементите в CSS Box Model Обща ширина = ширина на съдържанието + ляв padding + десен padding + ляв border + десен border + ляв margin + десен margin Обща височина = височината на съдържанието + горен padding + долен padding + горен border + долен border + горен margin + долен margin 250px (width) + 20px (left + right padding) + 10px (left + right border) + 20px (left + right margin) = 300px

30. Copyright © 2014 DAVID Holding Company Border, margin, padding Border - рамка PropertyDescription borderSets all the border properties in one declaration border-bottomSets all the bottom border properties in one declaration border-bottom-colorSets the color of the bottom border border-bottom-styleSets the style of the bottom border border-bottom-widthSets the width of the bottom border border-colorSets the color of the four borders border-leftSets all the left border properties in one declaration border-left-colorSets the color of the left border border-left-styleSets the style of the left border border-left-widthSets the width of the left border border-rightSets all the right border properties in one declaration border-right-colorSets the color of the right border border-right-styleSets the style of the right border border-right-widthSets the width of the right border border-styleSets the style of the four borders border-topSets all the top border properties in one declaration border-top-colorSets the color of the top border border-top-styleSets the style of the top border border-top-widthSets the width of the top border border-widthSets the width of the four borders

31. Copyright © 2014 DAVID Holding Company Border, margin, padding Margin PropertyDescription marginA shorthand property for setting the margin properties in one declaration margin-bottomSets the bottom margin of an element margin-leftSets the left margin of an element margin-rightSets the right margin of an element margin-topSets the top margin of an element

32. Copyright © 2014 DAVID Holding Company Border, margin, padding Padding PropertyDescription paddingA shorthand property for setting all the padding properties in one declaration padding-bottomSets the bottom padding of an element padding-leftSets the left padding of an element padding-rightSets the right padding of an element padding-topSets the top padding of an element

33. Copyright © 2014 DAVID Holding Company Позициониране на елементи Position ValueDescription staticDefault value. Elements render in order, as they appear in the document flow absoluteThe element is positioned relative to its first positioned (not static) ancestor element fixedThe element is positioned relative to the browser window relativeThe element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position initialSets this property to its default value. Read about initialRead about initial inheritInherits this property from its parent element. Read about inheritRead about inherit

34. Copyright © 2014 DAVID Holding Company Позициониране на елементи Свойството float – указва на елемент да се позиционира в ляво или в дясно, позволявайки на другите елементи да „плават“ около него.left { float: left; color: blue; width: 300px; }.right { float: right; color: red; width: 300px; } Изчистването на плаващите елементи става с clear – Стойности на свойството clear : both, left и right

35. Copyright © 2014 DAVID Holding Company Позициониране на елементи Свойствата display и visibility – display – определя как даден елемент да бъде представен – visibility – определя дали даден елемент да се вижда или не – Разликата между двата е значителна !.hidden { visibility: hidden; }.displayhidden { display: none; }

36. Copyright © 2014 DAVID Holding Company Позициониране на елементи Свойството display – block – съдържа padding, border, margin – inline – игнорира height и width – inline-block – добавя height и width Свойството overflow – указва какво ще се случи при препълване на съдържанието – примери: http://css-tricks.com/examples/OverflowExample/http://css-tricks.com/examples/OverflowExample/ Свойството z-index – указва как да се подредят елементите по оста Z

37. Copyright © 2014 DAVID Holding Company Псевдокласове и псевдоелементи – Използват се да добавят ефект към някои от селекторите a:hover { color: #ff00ff; } – Псевдокласове и CSS класове a.blue:hover { color: blue; }

38. Copyright © 2014 DAVID Holding Company Псевдокласове и псевдоелементи p:first-child i { color: blue; } a::before { content: "-"; color: green; } a::after{ content: "-"; }

39. Copyright © 2014 DAVID Holding Company Псевдокласове и псевдоелементи SelectorExampleExample description :linka:linkSelects all unvisited links :visiteda:visitedSelects all visited links :activea:activeSelects the active link :hovera:hoverSelects links on mouse over :focusinput:focusSelects the input element which has focus ::first-letterp::first-letterSelects the first letter of every element ::first-linep::first-lineSelects the first line of every element :first-childp:first-childSelects every elements that is the first child of its parent ::beforep::beforeInsert content before every element ::afterp::afterInsert content after every element :lang(language)p:lang(it)Selects every element with a lang attribute value starting with "it"

40. Copyright © 2014 DAVID Holding Company Въпроси?

41. Copyright © 2014 DAVID Holding Company Благодаря! Тодор Пашов – todos@david.bg todos@david.bg – Skype: todor_pashovtodor_pashov – https://facebook.com/tpashov https://facebook.com/tpashov ДАВИД академия – acad@david.bg acad@david.bg – http://acad.david.bg/ http://acad.david.bg/ – @david_academy @david_academy – https://facebook.com/DavidAcademy https://facebook.com/DavidAcademy