Научете се да кодирате - https://www.w3schools.com/
-
CSS уроци
-
Видео уроци
-
Полезно
<
>
Безплатни онлайн HTML инструменти и ресурси - html-css-js.com/
Безплатни BG онлайн курсове по уеб разработки - W3Schools.bg
Научете се да кодирате!
|
- Добавка в Chrome за генериране на цветове - Colorzilla
- Подобрите уменията си за програмиране - 101 Computing
Тема 14. Визуално оформяне на уеб сайт с използване на CSS
1. CSS - език за описание на стилове
a) същност на CSS
- CSS е съкращение от Cascading Style Sheets (каскадни набори от стилови).
Наборите от стилове са лесни за редактиране и поддържане, което позволява и лесното им приложение към всички HTML страници, а това от своя страна гарантира еднаквия изглед на всички страници в разработвания уеб сайт. Шаблоните могат да се намират във външни файлов и да бъдат прилагани към всички отделни страници в сайта. Това предоставя лесното редактиране, разширяване и поддържане на CSS файла, а по този начин промените ще бъдат отразени във всички страници едновременно.
б) Употреба на CSS.
- вградени стилове (Inline Style) - като използваме style атрибута за конкретен HTML елемент
- вътрешни стилове (Internal Style Sheet) - използваме <style> елемента в <head> секцията, т.е. използва стилове за страницата в самия документ, като по този начин се осъществява цялостно форматиране на съдържанието.
- външни стилове (External Style Sheet) - в този случай CSS кода се отделя във външен файл с разширение *.css, което обуславя и по-лесната му поддръжка.
в) работа с езика Cascading Style Sheets (CSS)
CSS кодът представлява последователност от правила, всяко от които започва със селектори, последвани от блок с дефиниции от свойства и стойности, които им се присвояват.
Примерна структура на едно CSS правило е:
CSS кодът представлява последователност от правила, всяко от които започва със селектори, последвани от блок с дефиниции от свойства и стойности, които им се присвояват.
Примерна структура на едно CSS правило е:
Правилата са каскадни, т.е. приложени към даден елемент, те се разпростират върху всичките му подчинени елементи.
Например:
Например:
- правило за размер на текст, приложено към таблица, ще важи за текста във всичките й клетки, а приложено към елемента <body> - за всички елементи на страницата, които съдържат текст.
2. Видове селектори
а) прости селектори
б) вложени селектори, комбинатори (Combinator selectors)
в) псевдоелементи (Pseudo-elements selectors)
г) псевдокласове (Pseudo-class selectors)
д) селектори на атрибути (Attribute selectors)
|
<!DOCTYPE html>
<html> <head> <style> p { color: red; text-align: center; } </style> </head> <body> <p>Здравей свят!</p> <p>Тези параграфи са стилизирани с CSS.</p> </body> </html> |
3. Вградени стилове (Inline Style)
а) примери
Пример без CSS
|
Пример със CSS - атрибут style
|
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>3дравей</title > </head> <body> <p>Hello CSS</p> <p>Hello again CSS</p> </body> </html> |
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>3дравей</title > </head> <body> <p style="color: red;" >Hello CSS</p> <p>Hello again CSS</p> </body> </html> |
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>3дравей</title > </head> <body> <p style="color: red; font-size: 40px;" >Hello CSS</p> <p>Hello again CSS</p> </body> </html> |
б) наследяване на правила
4. Вътрешни стилове (Internal Style Sheet)
При вътрешните набори от стилове се използва стилове за страницата в самия документ, като по този начин се осъществява цялостно форматиране на съдържанието.
Важно! Помества се в частта head, след тага title.
Важно! Помества се в частта head, след тага title.
Задача 2. Отворете страницата stress.html (от практическото изпитване; изображение - stres.jpg). Използвайки Internal Style Sheet и редактирайте страницата до вида:
При по-детайлна селекция имаме нужда от инструменти, които по-прецизно да избират елементите. За целта ще ни помогнат ID селекторите
Тема 14.1. ID селектор
1. Същност
- ID селекторите ни позволяват да маркираме точно определен елемент по определен начин и само за този елемент да приложим по-различни стилове от останалите
- използва ID атрибут
резултат:
|
Важно! Обърнете внимание на ред 9 и ред 19
Покажете резултата от примера и дискутирайте особеностите!
Подробности вижте във видеото:
|
Тема 14.2. Class селектор
1. Същност на селектори за клас
за да приложим правилото към всички елементи, които са едновременно от зададения вид и клас.
- В CSS можем да групираме множество от елементите посредством техния атрибут клас (class). При използване на класа като селектор правилото ще се приложи към всеки елемент, на който е присвоен този клас. Можем да използваме следния синтаксис:
за да приложим правилото към всички елементи, които са едновременно от зададения вид и клас.
|
Избор на шрифт е важно!
към сайта: CSS Fonts >> |
Тема 14.3. Други селектори
В CSS селекторите са модели, използвани за избор на елемента (елементите), които искате със стил.
Всички селектори разгледайте на сайта W3Schools Online Web Tutorials
Тема 14.4. Външен CSS
CSS кодът се поставя във файл с разширение .css. След това този файл може да се използва във всяка една страница от уеб сайта. Така че стилът ще се намира на едно място и при промяна ще се отразява на всички уеб страници.
В нова HTML страница с име outside_css.html приложете примера:
<!DOCTYPE html> <html> <head> <title>Заглавие на страницата</title> <meta charset=utf-8 /> <link rel=stylesheet type="text/css" href="style.css" /> </head> <body> <p> Hello CSS_1 </p> <p> Hello again CSS_2 </p> <p> Hello again CSS_3 </p> <p>Hello again CSS_4</p> </body> </html> |
Обърнете внимание в секцията <head>, кода:
<link rel=stylesheet type="text/css" href="style.css" />
Какво ще се случи?
<p style="color: #fcf9ff; font-weight: bold;"> Hello CSS_1 </p> |
Тема 15: Визуално оформяне на уеб сайт с използване на CSS (упражнение)
1. Често използвани свойства (CSS Property)
- width - задава дължината на елемента; пример: CSS width property (w3schools.com)
- height - задава височината на елемента; пример: CSS height property (w3schools.com)
- opacity - задава прозрачност на елемента в интервала 0 - 1 или 0% - 100%; пример: CSS opacity property (w3schools.com)
за отстояние на отделни елементи:
- padding - задава разстояние между съдържанието на елемента и неговата рамка;
пример: CSS padding property (w3schools.com)
padding:10px 5px 15px 20px;
|
! правило:
по часовниковата стрелка, като се започва от top |
- margin - задава разстояние между рамката и околните елементи. Форматът на стойностите е като на padding;
пример: Свойство на маржа на CSS (w3schools.com)
- display - определя видимостта на елемента; пример: CSS display property (w3schools.com)
Възможните стойности са:
- none (скрива елемента),
- inline (показва елементите един след друг и игнорира стойностите за размер),
- block (елементът се изобразява като блок, започва на нов ред и заема цялата ширина);
- position - задава начина на позициониране; пример: CSS position property (w3schools.com)
Възможните стойности са:
- static (елементите се показват по реда на срещане в HTML кода),
- absolute (абсолютно - спрямо най-близкия нестатичен родителски елемент),
- relative (относително - спрямо нормалното си разположение),
- fixed (фиксирано - спрямо прозореца на браузъра) и др.
- left, right, top, bottom - задават отместване на елемента съответно отляво, отдясно, отгоре, отдолу при позициониране, различно от статично;
- float (плаване) - позволява даден елемент да се обтича от текст и други inline обекти. Игнорира се за елементите с абсолютна позиция
Възможните стойности са:
- none (не "плава", стойност по подразбиране),
- left (позиционира се най-вляво на родителския елемент, като позволява текстът и другите елементи да го обтекат отдясно),
- right (като left, но вдясно);
- clear - определя от коя страна на елемента не може да има плаващи елементи. Стойности: left (отляво), right (отдясно), both (от двете страни);
- z-index - задава реда на елементите при позициониране - тези с по-малък индекс са под тези с по-голям индекс.
2. Форматиране на текст.
Основни свойства за форматиране на текст:
Основни свойства за форматиране на текст:
- color - цвят на символите в CSS формат;
- text-align - подравняване на текст с възможни стойности: left (ляво), right (дясно), center (центрирано), justify (двустранно);
- font-size - размер на символите;
- font-family - шрифт на текст; пример: CSS font-family property (w3schools.com)
- font-weight - задава "тегло" на текста. Може да приема стойности: normal (нормален текст), bold (удебелен текст), lighter (изтънен текст) и др;
- text-decoration - задава допълнителен ефект на текста.
Възможните му стойности са: underline (подчертава текста с долна черта), none (без ефекти), overline (подчертава текста с горна черта), blink (текстът премигва), line-through (зачертава текста); - text-indent - задава отстъп на първия ред на абзац.
- letter-spacing - променя разредката между символите. Може да бъде normal (без промяна на разредката) или число с мерна единица. Може да приема отрицателни стойности.
- word-spacing - променя разстоянието между думите аналогично на letter-spacing.
- line-height - задава височината на реда (междуредието).
- text-transform - управлява главни и малки букви: none (без промяна, по подразбиране), uppercase (само с главни букви), lowercase (само с малки букви), capitalize (всяка дума започва с главна буква).
3. Форматиране на фон
background-color: #a687c2
- цветът на фона - се задава, като на свойството background-color се присвоява стойност в някой от приложимите формати.
background-color: #a687c2
- За фон на уеб елемент може да се използва и изображение
Пример (!По подразбиране изображението се повтаря вертикално и хоризонтално до запълване на целия елемент)
body {
background-image: url('golova.jpg');
}
body {
background-image: url('golova.jpg');
}
background-image: url('golova.jpg'); background-repeat: no-repeat; background-attachment: fixed; } |
Приема стойности:
|
- свойството background-attachment определя дали фоновото изображение ще е фиксирано спрямо видимата област от страницата (fixed), или ще се движи при превъртване с елемента (scroll).
- свойството background-position определя началната позиция на изображението.
Задават се хоризонтална и вертикална стойност в проценти или мерни единици, или комбинация от служебните думи left, center, right (за хоризонтално позициониране) и top, center, bottom (за вертикално). Ако е посочена само една стойност, другата се приема за center.
background-image: url('golova.jpg');
background-position: left;
}
Задача 3. Отворете архива (zadacha-3.zip) и направете промените в страницата, така, че да изглежда като на снимката >>
|
4. Използване на рамки
border-style - стил на рамката, който има няколко варианта (none, dotted, dashed, solid, double, groove, ridge, inset, outset).
border-width - дебелина на рамката, която се определя в пиксели или друга мерна единица.
- Основни свойства за рамки:
border-style - стил на рамката, който има няколко варианта (none, dotted, dashed, solid, double, groove, ridge, inset, outset).
border-width - дебелина на рамката, която се определя в пиксели или друга мерна единица.
- Изброените свойства могат да се задават като списък от до 4 стойности:border-top-color, border-right-width, border-bottom-style и т.н.
- Много често рамката се задава в съкратен формат:
Изпълнете задача 4. стр. 39 от учебника
Задача 5. Създайте уеб страница Пътни знаци с име на html файла road_signs.html, използвайте указанията в сайта: www.101computing.net/number-plate-in-html-css/
|
5. Добавяне и използване на шрифтове
- добавяне на шрифт
@font-face {
font-family: myFont;
src: url(myfont_file.woff);
}
След това използваме във font-family както обикновено:
Пример:
Р {
font-family: myFont, 'Times New Roman', serif;
}
- уеб услуги за шрифтове - https://fonts.google.com/
-
Условие
-
Резултат
<
>
Създай уеб страница welcomе.html и съответветния стилов файлов - myWelcom.css. За тяхното разработване са необходими файлове, които можете да намерите тук.
- Създаване на файл myWelcome.css, който трябва да съхраните в папка WebSite.
- Създайте страницата Welcome.html и направете връзката между двата файла.
- Изпратете готовата страница на личен чат в Teams.
Текст в страницата:
заглавие: РИСКОВЕ НА РАБОТНОТО МЯСТО
отметки:
бутона да препраща към: https://knizhen-pazar.net/products/books/2161161-riskove-na-rabotnoto-myasto
текст:
Книга: "РИСКОВЕ НА РАБОТНОТО МЯСТО"
с автор: Дянко Иванов, София 2001
Сайтът е създаден с учебна цел, за обучението на ученици в 12 клас "Практикум по уеб дизайн"
заглавие: РИСКОВЕ НА РАБОТНОТО МЯСТО
отметки:
- ЗАПОЗНАВАНЕ НА РАБОТНИЦИТЕ С ВЪЗМОЖНИТЕ РИСКОВЕ
- ПОСЛЕДСТВИЯ ОТ ВЪЗДЕЙСТВИЕТО НА РИСКОВЕТЕ НА РАБОТНОТО МЯСТО
- НАЧИНИ ЗА ОТСТРАНЯВАНЕ НА РИСКОВЕТЕ НА РАБОТНОТО МЯСТО
- ОСИГУРЯВАНЕ НА БЕЗОПАСЕН ТРУД В ЧИСТА РАБОТНА СРЕДА И ОБСТАНОВКА
- ПРЕПОРЪКИ ЗА БЕЗОПАСЕН ТРУД В РАЗЛИЧНИ РАБОТНИ СРЕДИ
бутона да препраща към: https://knizhen-pazar.net/products/books/2161161-riskove-na-rabotnoto-myasto
текст:
Книга: "РИСКОВЕ НА РАБОТНОТО МЯСТО"
с автор: Дянко Иванов, София 2001
Сайтът е създаден с учебна цел, за обучението на ученици в 12 клас "Практикум по уеб дизайн"
Задачата е адаптирана за ученици от 12 клас с профил ИТ
Материалите са взаимствани от сайта http://timetable.swu.bg/lecture/rkraleva/LetenSem/WebDesign/yprWebDesign.html
автор: гл.ас. Радослава Кралева - Югозападен университет "Неофит Рилски"
Материалите са взаимствани от сайта http://timetable.swu.bg/lecture/rkraleva/LetenSem/WebDesign/yprWebDesign.html
автор: гл.ас. Радослава Кралева - Югозападен университет "Неофит Рилски"
Тема 16. Изграждане на уеб страница и уеб сайт по зададен графичен модел.
Работа по проект
Реализацията на даден графичен модел като уеб страница може да се извърши по различни начини и зависи от структурата на графичния модел. Най-универсалният начин се основава на използването на блокове, реализирани най-често с тага <div>
Пример:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* Стилове за нашия елемент div */ div { width: 200px; height: 100px; padding: 20px; border: 2px solid #333; margin: 10px; } </style> <title>Box Model Пример</title> </head> <body> <div> Това е примерен div елемент. </div> </body> </html> |
В този пример:
|
С помощта на стилове лесно може да се зададат различни параметри на тези блокове, като размери, цвят, рамка, подравняване и др. Всеки блок от своя страна може да съдържа други блокове с различни параметри. Нека да разгледаме примерната структура на уеб страница от фиг. 1.
За реализирането на HTML кода блоковете се въвеждат последователно в реда на срещането им от горе надолу и от ляво надясно (1, 2, 3, 4), като блок 2 съдържа блок 3 и 4.
За да подредим блоковете 3 и 4 един до друг, ще използваме CSS, като зададем в стила им свойство "display: inline-block", като на десния блок добавим и свойство "float: right".
- свойство "display: inline-block"- показва елемент като блоков контейнер на вградено ниво. Самият елемент е форматиран като вграден елемент, но можете да приложите стойности за височина и ширина
Последните версии на CSS въвеждат по-лесен и мощен модел за подреждане на съдържанието, наречен Flexbox.
Важно! В CSS правилото към контейнера, в случая блок 2, задаваме свойство "display: flex". По подразбиране вложените блокове 3 и 4 ще се подредят в редица от ляво надясно. Начинът и посоката на разполагане и подравняване на елементите в контейнера може да се управлява с допълнителни CSS свойства.
Важно! В CSS правилото към контейнера, в случая блок 2, задаваме свойство "display: flex". По подразбиране вложените блокове 3 и 4 ще се подредят в редица от ляво надясно. Начинът и посоката на разполагане и подравняване на елементите в контейнера може да се управлява с допълнителни CSS свойства.
Задача 1. Изтеглете и отворете от приложените материали към учебника
|
За изработване на страница можете да използвате CSS шаблони за оформление.
Вие сте свободни да ги променяте, запазвате, споделяте и използвате във всичките си проекти:
CSS Templates - www.w3schools.com/css/css_templates.asp
Вие сте свободни да ги променяте, запазвате, споделяте и използвате във всичките си проекти:
CSS Templates - www.w3schools.com/css/css_templates.asp