Multimedia&css introduction

328 views
241 views

Published on

Мултимедия и CSS

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
328
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Multimedia&css introduction

  1. 1. КАСКАДНИ СТИЛОВИ ДЕФИНИЦИИ CSS И МУЛТИМЕДИЯ - ВЪВЕДЕНИЕ Доц. М. Иванова
  2. 2. Три начина за прилагане на каскадни стилови дефиниции  Чрез отделен CSS файл <link rel=”stylesheet” href=”name.css” type=”text/css”>  Чрез използване на вътрешни каскадни стилови дефиниции <h2 style=”color:red”> Вътрешни каскадни стилови дефиниции </h2>  Използване на командата <style></style> <style type=”text/css”> h1 {color: red; text-align: center} P {color: blue} </style>
  3. 3. CSS дефиниции  Дефиницията се представя чрез селектор, чийто стил се определя чрез свойства и стойности  Селекторът свързва даден елемент от уеб документа с неговия стил  Стилът на този елемент се определя чрез списък от свойства и техните стойности  Свойството и стойността се отделят чрез двоеточие Общ вид: селектор { свойство 1: стойност; свойство 2: стойност; ... свойство n: стойност } Пример: h1 { color: red; text-align: center }
  4. 4. CSS дефиниции  Връзката между елемент от уеб документ и стил се извършва явно или неявно  Връзката е неявна, когато стил автоматично се приложи към всички елементи от даден вид в целия уеб сайт  Връзката е явна, когато програмистът укаже кой стил за кой елемент или фрагмент от уеб страницата/уеб сайта е предназначен – прилагат се класове, всеки клас трябва да има уникално име и той представлява атрибут на даден елемент.  Явно свързване може да се осъществи и чрез именуван стил. С именувания стил се форматира само един единствен елемент, докато чрез клас могат да се форматират няколко елемента наведнъж. В HTML файла именуваният стил се задава чрез атрибута id към елемента, който ще се оформя. Стойността на атрибута id представлява уникално име на стила.
  5. 5. Модел на кутията в CSS  Margin – Освобождава място около border, което място няма фонов цвят, прозрачно е  Border – Мястото за border се оставя около padding и съдържанието на елемента. Това място приема фоновия цвят на кутията  Padding – Освобождава място около съдържанието на елемента. Това място приема фоновия цвят на кутията  Content – Съдържание на кутията, включващо текст, изображение, други елементи Margin Border Padding Content (съдържание на елемента)
  6. 6. Модел на кутията в CSS  Общата ширина width на даден HTML елемент се изчислява по следния начин: Обща ширина width = width + padding отляво+ padding отдясно + border отляво + border отдясно + margin отляво + margin отдясно  Общата височина height на даден HTML елемент се изчислява по следния начин: Обща височина height = height + отгоре padding + отдолу padding + отгоре border + отдолу border + отгоре margin + отдолу margin
  7. 7. Модел на кутията в CSS  Пример - общата ширина width на даден елемент е зададена да бъде 400px (350px width + 20px отляво и отдясно padding + 10px отляво и отдясно border + 20px отляво и отдясно margin = 400px): width:350px; padding:10px; border:5px solid gray; margin:10px;
  8. 8. Модел на кутията в CSS  Пример за задаване на margin отгоре, отдясно, отляво и отдолу (top, right, bottom, left).чрез отделни свойства: margin-top:75px; margin-bottom:90px; margin-right:25px; margin-left:25px;
  9. 9. Модел на кутията в CSS  Задаване на margin чрез стенографско свойство т.е всички margin-и са определени само чрез едно свойство margin  Ако задаваме margin чрез четири стойности - 25px отгоре, 50px отдясно, 75px отдолу, 100px отляво, то свойството ще има следния вид: margin:25px 50px 75px 100px;  Margin-ът може да се задава и чрез три стойности - 25px отгоре, 50px отдясно и отляво, 75px отдолу: margin:25px 50px 75px;  Задаване на margin чрез две стойности - 25px отгоре и отдолу, 50px отдясно и отляво: margin:25px 50px;  Margin зададен чрез една стойност – всички стойности отгоре, отдолу, одясно и отляво са 25px : margin:25px;
  10. 10. Фон на страница body {background-color:pink;} – задаване на цвят
  11. 11. Изображение – CSS дефиниции – преходен ефект img { width:80px; height:60px; margin:20px;} img:hover { width:280px; height:260px; } – промяна размера на изображението при преминаване на мишката img { -webkit-transition: all 1s ease; (Safari, Chrome – по-стари версии) -moz-transition: all 1s ease; (за Mozilla) -o-transition: all 1s ease; (за Opera) -ms-transition: all 1s ease; (за Internet Explorer) transition: all 1s ease; } all – всички свойства (ширина, височина на обекта) 1s – продължителност на ефекта Ease – времева функция http://css3.bradshawenterprises.com/transitions/
  12. 12. Заобляне на ръбове и сянка audio { margin:40px; border-radius:50px; box-shadow:10px 10px 10px blue; }  border-radius – заобляне на ръбовете  box-shadow  вертикална сянка – положителна стойност – сянката е от дясно  хоризонтална сянка – положителна стойност – сянката е отдолу  замъглен радиус (незадължителна стойност) – по-голяма стойност, по- голямо размазване  радиус на разпространение (незадължителна стойност), положителна стойност – по-голяма сянка  цвят
  13. 13. Рамка video { margin-top:50px; border:10px solid green; }
  14. 14. Видове рамки
  15. 15. Видове рамки http://css3pie.com/demos/border-radius/
  16. 16. Прозрачност video { margin:50px; opacity:0.5; }  1.0 – непрозрачен обект  0.0 – прозрачен обект
  17. 17. Сянка video { margin-bottom:50px; -moz-box-shadow: 10px 10px 5px blue; -webkit-box-shadow: 10px 10px 5px blue; box-shadow: 10px 10px 5px blue; }
  18. 18. Сянка A { -moz-box-shadow: -5px -5px #888; -webkit-box-shadow: -5px -5px #888; box-shadow: -5px -5px #888; } B { -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; } C {-moz-box-shadow: -5px -5px 0 5px #888; -webkit-box-shadow: -5px -5px 0 5px#888; box-shadow: -5px -5px 0 5px #888; } http://www.css3.info/preview/box-shadow/
  19. 19. Оразмеряване на обекта video#v1 { -object-fit:fill; } video#v2 { -object-fit:contain;} video#v3 { -object-fit:cover;} object-fit:fill – при зададена височина и ширина на обекта, той ще се впише в определената му рамка, като се запазва съотношението object-fit:contain – съдържанието на обекта запълва напълно размерите, определени за него, дори и да се наруши съотношението височина-ширина object-fit:cover – обектът запълва изцяло рамката, променя ширината и височината, като запазва вътрешното съотношение object-fit:none – обектът заема присъщите си размери
  20. 20. Позициониране video#v1 {-object-position:top left;} – видеото се позиционира, като се закотвя към горния и левия margin video#v2 {-object-position:right center;} video#v3 {-object-position:right bottom;}
  21. 21. Перспектива  perspective:1000; - определя разстоянието между равнина z=0 и потребителя, за да придаде перспектива на 3Dобект  всеки 3D обект с z>0 става по-голям, z<0 – по-малък
  22. 22. Пространствено завъртане  transform:rotate3d(1,1,0,40deg); - завъртане на 40 градуса в пространството
  23. 23. Завъртане video {-webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -o-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -transform:rotate(-5deg);}
  24. 24. Мащабиране video:hover {-webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5); -transform:scale(1.5);}
  25. 25. Събития video:hover – при преминаване на мишката video:focus { opacity:1; } – прозрачността се активира чрез щракване с мишката
  26. 26. SVG графика <svg height="200"> <circle cx="100" cy="100" r="100" fill="red" /> </svg>  Scalable Vector Graphics (SVG) – двуизмерна векторна графика в XML формат  http://inkscape.org/ - редактор за SVG  http://www.w3schools.com/svg/default.asp
  27. 27. SVG графика <svg height="200"> <ellipse cx="100" cy="100" rx="100" ry="50" fill="brown" /> </svg>
  28. 28. SVG графика <svg> <text x="0" y="100" font-size="50" font- family="Georgia" fill="brown“ stroke="green" stroke- width="1">Проба</text> </svg>

×