CSS Cascading Style Sheets Лекција 1: Основи

1. CSSCascading Style SheetsЛекција 1: Основи Предмет: Интернет технологии, вежби Наставник: Доц. Д-р. Иван Краљевски Асистент: Славчо Чунгурски

2. Што може да се направи со CSS? • Модуларно WEB дизајнирање • Може да се смени изгледот на секој елемент на една WEB страна • Овозможува дефинирање на класи на дизајнот (пр. дефиниција на параграф за весник и нормален параграф) CSS: Основи

3. Пример BODY { font-family: “Book Antiqua”, “Times New Roman”, serif; color: #000040; background: #FFFF9F; padding: 1in; } A:LINK { color: #FF00FF; } A:VISITED { color: #808080; } BLOCKQUOTE { margin-left: 1in; margin-right: 1in; } P.double { text-indent: .5in; line-height: 24pt; } CSS: Основи

4. Анатомија на CSS - Еден CSS е составен од множество на правила - Едно правило е составено од селектор со една или повеќе декларации - Декларација е составена од својство со една или повеќе вредности - Својството е разделено од вредноста со знакот : - Секоја декларација завршува со знакот ; - Сите декларации од едно правило се вгнездени во { }, а нивниот редослед не е важен. CSS: Основи

5. Анатомија на CSS Пример за правило: P { text-indent: 2cm; color: black; padding-top: .25in; } CSS: Основи

6. Анатомија на CSS Селектор – кој укажува на кој елемент, класа елементи или на кој ID елементи се применува правилото. Може да биде и од типот P.vesnik или P#123 Пример за правило: P { text-indent: 2cm; color: black; padding-top: .25in; } CSS: Основи

7. Анатомија на CSS Селектор – кој укажува на кој елемент, класа елементи или на кој ID елементи се применува правилото. Може да биде и од типот P.vesnik или P#123 Пример за правило: P { text-indent: 2cm; color: black; padding-top: .25in; } Декларација Својство Вредност CSS: Основи

8. Групирање на својства Во случај кога треба едно исто множество од декларации да се примени врз повеќе елементи, може да се изврши групирање на својствата. Пример: H1 { font-family: Helvetica,Arial,sans-serif; } H2 { font-family: Helvetica,Arial,sans-serif; } H3 { font-family: Helvetica,Arial,sans-serif; } H1, H2, H3 { font-family: Helvetica,Arial,sans-serif; } = CSS: Основи

9. Кратенки за дефинирање на својства Постојат својства, како на пример фонтови, кои дозволуваат кратење на декларацијата. Пример: H3 { font-weight: bold; font-size: 16pt; line-height: 20pt; font-family: “Times New Roman”; font-variant: normal; font-style: italic; } H3 { font: bold 16pt/20pt “Times New Roman” normal italic; } = CSS: Основи

10. Модел за форматирање на CSS CSS користи добра метафора за спецификација на контејнери (вгнездени структури) на една WEB страница: кутија. CSS: Основи

11. Модел за форматирање на CSS - Секој елемент – кутија се наоѓа во друга кутија. - Секое правило применето врз една кутија се применува врз секоја кутија сместена во првата (наследување на правила) Пример: Примената на својство на една табела, значи примена на истото својство врз секоја ќелија од табелата, освен ако ќелијата нема посебна декларација. CSS: Основи

12. Дефиниција на класи Класите овозможуваат избор на правило кое ќе се примени врз некој елемент. Пример: P.prv { font: bold 12pt/14pt “Times New Roman”;} P.vtor { font: normal 12pt/12pt “Times New Roman”;} Примената се врши со: <P class=”prv”>Ova e paragraf od klasa prv</P> <P class=”vtor”> Ova e paragraf od klasa vtor</P> CSS: Основи

13. Псевдо - класи Псевдо-класите овозможуваат форматирање базирано на карактеристики различни од име, атрибути или содржина. Пример (контрола на боја на линкови): A:link; A:visited { color: blue; } A:hover { color: red; } CSS: Основи

14. Дефиниција на идентификатори Идентификаторите се слични на класи, но тие не се поврзани со одредена класа на елементи, туку тие се поврзани со елементи преку името на идентификаторот. Декларацијата на идентификаторите се врши со ставање на знакот # пред името на идентификаторот. Пример: #siroko { letter-spacing: .4em; } Примена на идентификаторот: <H1 id=”siroko”>Ova e siroko zaglavje</H1> <P id=”siroko”>ova e paragraf so sirok tekst.</P> CSS: Основи

15. Коментари Како и во секоја друга програмерска технологија, коментарите се значаен дел од CSS. Коментарите се сместуваат меѓу /* и */ Пример: /* komentar */ CSS: Основи

16. Начини на имплементација на CSS CSS може да се имплементира врз една WEB страница на следните начини: - Преку надворешна CSS датотека - Преку STYLE елементот во заглавјето - Преку директна примена CSS: Основи

17. Начини на имплементација на CSS Преку надворешна CSS датотека: - Сите правила се запишуваат во датотека која има наставка .css - Примената во една WEB страница се врши со вметнување на тагот <LINK href=”<imenadatoteka>” type=”text/css”> во заглавјето од страницата. Пример: <HEAD> <LINK href=”styles/stil.css” type=”text/css”> </HEAD> CSS: Основи

18. Начини на имплементација на CSS Преку STYLE елементот во заглавјето: - Во самото заглавје од HTML документот се дефинира таг <STYLE> и во неговата внатрешност се сместуваат правилата. Пример: <HEAD> <STYLE> BODY { color: black; background: white; padding-left: 1in; padding-right: 1in; } H1 { font: bold 24pt/30pt black; } </STYLE> </HEAD> CSS: Основи

19. Начини на имплементација на CSS Преку директна примена: - Стилот се применува директно во тагот на елементот врз кој се применува Пример: <P style=”text-indent: 1in; color: blue;”>Ovoj paragraf e sin so indentacija od 1 inch.</P> CSS: Основи