Тест CSS: линк
Уроци за самообучение:
Уроци CSS EN - линк
Уроци CSS от Khan Academy - линк
Тестове за упражнение:
Тест за упражнение CSS EN - линк
CSS е съкращение от Cascading Style Sheets и представлява отделен език, съдържащ множество "инструменти", с които може да се влияе на външния вид на HTML страниците.
Предимства:
В много случаи е по-добре даден елемент от HTML страница да бъде създаден с помощта на CSS, отколкото чрез ползване на добре познатите HTML тагове.
Най-голямото улеснение, което предлага CSS е свързано с контрола на голям набор HTML документи, като контролирането на външния вид на страниците става чрез промяна на единствен файл - CSS файла, без да е нужно да се променя HTML кода във всяка една от HTML страниците.
CSS може да се приложи по 3 начина:
|
Вътрешен - Internal Style Sheet |
Правила за създаване на CSS структура:
Видове селектори:
|
Селектор по име на HTML елемент:
|
Свойства(properties) на шрифтовете:
|
CSS properties:
|
Задача 1:
В Google документ с име Properties_CSS избройте свойствата и техните стойности за форматиране на текст.
Например:
шрифт, размер на текста, цвят, ефект сянка на текста и други. Дайте примери с конкретен код.
За целта използвайте сайта: https://www.w3schools.com/css/css_font.asp
Задача 2:
Копирайте рецептите със снимките в папка Recepti_CSS_1
Променете стила на рецептите:
- фон на страницата: цвят: #F8ECE0
- името на рецептата: h1, цвят: лилав
- продукти и начин на приготвяне: h2; цвят: тъмнолилав, italic
- текстът на списък с продуктите: italic
Задача 3:
Направете упражненията от раздел CSS Fonts и CSS Text на сайта.
Class и ID в CSS линк
Задача 4:
Копирайте рецептите със снимките в папка Recepti_div.
Създайте външен стил с име style.css, който да приложите към страниците, така, че да изглеждат като на снимката: rcepta_css.png
Задача 5:
Копирайте рецептите със снимките в папка Recepta_menu.
Създайте уеб страница с име index_recepta.html, която да изглежда така: index_recepta.png За целта направете стил с име style.css, който да приложите към страницата. Текст към задачата: линк
Задача 6:
Условието на задачата: линк
Видео Display Flex
Задача 7:
Задачи 1, 2 на страница 40 от учебника по ИТ Уеб дизайн Модул 3.
Задача 8 (задачата е от учебника по ИТ Уеб дизайн - Модул 3 ИК "Домино"):
Създайте уеб страница с име museum.html, която да изглежда така: musei.png
Задача 9:
Създайте уеб страница, която да изглежда така: blocks_nhg1.jpg
Текст и снимка: линк
Задача 10:
Създайте уеб страница, която да изглежда така: blocks_nhg_gotov.jpg
Текст и снимка: линк
Задача 11 (задачата е от учебника по ИТ Уеб дизайн - Модул 3 ИК "Домино"):
Създайте уеб страница с име style-home.html, която да изглежда така: style.png
Текст: style_text.docx
Снимки: style_snimki.rar
Задача 12: Създайте уеб страница с име med.html, която да изглежда така: www.webstarmax.com/proekti-portfolio.html
Задача 13: Създайте уеб страница постер с име wanted-poster.html, използвайте указанията в сайта: https://www.101computing.net/wanted-poster-css-task/
Задача 14: Създайте уеб страница Калкулатор с с име на html файла calculator.html, използвайте указанията в сайта: https://www.101computing.net/digicode-css-challenge/ Създайте ваш собствен дизайн на калкулатор.
Задача 15: Създайте уеб страница Рамки с име на html файла frames_pic.html, използвайте указанията в сайта: www.101computing.net/html-using-css-with-pictures/
Създайте уеб страница Ефекти с име на html файла effects_pic.html
Transform Property - www.w3schools.com/cssref/css3_pr_transform.asp,
www.w3schools.com/cssref/tryit.php?filename=trycss3_image_gallery
Задача 15_1: Създайте уеб страница Полароид, която да изглежда така: gotov_file.jpg
Задача 16: Създайте уеб страница Снимки с име на html файла pictures_transform.html. Модел на страницата: snimki_transform.png
Може да използвате снимки на ваше любимо място с подходящ текст под снимката.
Задача 17: Създайте уеб страница Програма с име на html файла timetable.html, използвайте указанията в сайта: https://www.101computing.net/my-timetable-in-html-css/ Създайте ваш собствен дизайн на програмата - променете цветовата схема, шрифтове.
Задача 18: Създайте уеб страница Пътни знаци с име на html файла road_signs.html, използвайте указанията в сайта: www.101computing.net/number-plate-in-html-css/
Безплатни Google шрифтове: fonts.google.com/
Тест CSS - линк
Полезни връзки:
|
|
Полезни връзки:
|