Multimedia&css introduction

  • 139 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
139
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. КАСКАДНИ СТИЛОВИ ДЕФИНИЦИИ CSS И МУЛТИМЕДИЯ - ВЪВЕДЕНИЕ Доц. М. Иванова
  • 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. CSS дефиниции  Дефиницията се представя чрез селектор, чийто стил се определя чрез свойства и стойности  Селекторът свързва даден елемент от уеб документа с неговия стил  Стилът на този елемент се определя чрез списък от свойства и техните стойности  Свойството и стойността се отделят чрез двоеточие Общ вид: селектор { свойство 1: стойност; свойство 2: стойност; ... свойство n: стойност } Пример: h1 { color: red; text-align: center }
  • 4. CSS дефиниции  Връзката между елемент от уеб документ и стил се извършва явно или неявно  Връзката е неявна, когато стил автоматично се приложи към всички елементи от даден вид в целия уеб сайт  Връзката е явна, когато програмистът укаже кой стил за кой елемент или фрагмент от уеб страницата/уеб сайта е предназначен – прилагат се класове, всеки клас трябва да има уникално име и той представлява атрибут на даден елемент.  Явно свързване може да се осъществи и чрез именуван стил. С именувания стил се форматира само един единствен елемент, докато чрез клас могат да се форматират няколко елемента наведнъж. В HTML файла именуваният стил се задава чрез атрибута id към елемента, който ще се оформя. Стойността на атрибута id представлява уникално име на стила.
  • 5. Модел на кутията в CSS  Margin – Освобождава място около border, което място няма фонов цвят, прозрачно е  Border – Мястото за border се оставя около padding и съдържанието на елемента. Това място приема фоновия цвят на кутията  Padding – Освобождава място около съдържанието на елемента. Това място приема фоновия цвят на кутията  Content – Съдържание на кутията, включващо текст, изображение, други елементи Margin Border Padding Content (съдържание на елемента)
  • 6. Модел на кутията в CSS  Общата ширина width на даден HTML елемент се изчислява по следния начин: Обща ширина width = width + padding отляво+ padding отдясно + border отляво + border отдясно + margin отляво + margin отдясно  Общата височина height на даден HTML елемент се изчислява по следния начин: Обща височина height = height + отгоре padding + отдолу padding + отгоре border + отдолу border + отгоре margin + отдолу margin
  • 7. Модел на кутията в CSS  Пример - общата ширина width на даден елемент е зададена да бъде 400px (350px width + 20px отляво и отдясно padding + 10px отляво и отдясно border + 20px отляво и отдясно margin = 400px): width:350px; padding:10px; border:5px solid gray; margin:10px;
  • 8. Модел на кутията в CSS  Пример за задаване на margin отгоре, отдясно, отляво и отдолу (top, right, bottom, left).чрез отделни свойства: margin-top:75px; margin-bottom:90px; margin-right:25px; margin-left:25px;
  • 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. Фон на страница body {background-color:pink;} – задаване на цвят
  • 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. Заобляне на ръбове и сянка audio { margin:40px; border-radius:50px; box-shadow:10px 10px 10px blue; }  border-radius – заобляне на ръбовете  box-shadow  вертикална сянка – положителна стойност – сянката е от дясно  хоризонтална сянка – положителна стойност – сянката е отдолу  замъглен радиус (незадължителна стойност) – по-голяма стойност, по- голямо размазване  радиус на разпространение (незадължителна стойност), положителна стойност – по-голяма сянка  цвят
  • 13. Рамка video { margin-top:50px; border:10px solid green; }
  • 14. Видове рамки
  • 15. Видове рамки http://css3pie.com/demos/border-radius/
  • 16. Прозрачност video { margin:50px; opacity:0.5; }  1.0 – непрозрачен обект  0.0 – прозрачен обект
  • 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. Сянка 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. Оразмеряване на обекта 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. Позициониране video#v1 {-object-position:top left;} – видеото се позиционира, като се закотвя към горния и левия margin video#v2 {-object-position:right center;} video#v3 {-object-position:right bottom;}
  • 21. Перспектива  perspective:1000; - определя разстоянието между равнина z=0 и потребителя, за да придаде перспектива на 3Dобект  всеки 3D обект с z>0 става по-голям, z<0 – по-малък
  • 22. Пространствено завъртане  transform:rotate3d(1,1,0,40deg); - завъртане на 40 градуса в пространството
  • 23. Завъртане video {-webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -o-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -transform:rotate(-5deg);}
  • 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. Събития video:hover – при преминаване на мишката video:focus { opacity:1; } – прозрачността се активира чрез щракване с мишката
  • 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. SVG графика <svg height="200"> <ellipse cx="100" cy="100" rx="100" ry="50" fill="brown" /> </svg>
  • 28. SVG графика <svg> <text x="0" y="100" font-size="50" font- family="Georgia" fill="brown“ stroke="green" stroke- width="1">Проба</text> </svg>