КАСКАДНИ СТИЛОВИ ДЕФИНИЦИИ 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; }

Видове рамки

Видове рамки

http://css3pie.com/demos/border-radius/

Прозрачност

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>