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