понеділок, 20 січня 2020 р.

11 клас Урок 17. Використання зображень у веб-документах

Бібліотеки зображень:

Більше про селектори фону https://www.w3schools.com/css/css_background.asp

Каскадні стилі CSS для фону:
  • Повторення
background-repeat: no-repeat; repeat-x; repeat-y;
  • Позиція
background-position: right top;
  • Вкладення
background-attachment: fixed; scroll;

  • Розмір

background-size: 100% 100%;

Каскадні стилі CSS для зображення:


Рамка
Border: дозволяє створити рамку для зображення можна налаштовувати ширину та колір і стиль рамки за допомогою відповідних параметрів:

  • border-width:...
  • border-color:...
  • border-style:...

Додатково можна налаштовувати ці властивості для кожної сторони:
• top (верхня), 
• left (ліва),
• right (права),
• bottom (нижня). 

Можна прописати всі властивості однією командою

border: 3px solid red;



Відступи

  • padding — внутрішні відступи  між зображенням та рамкою;
  • margin — задає відступи від зображення від усіх чотирьох країв; 

Можна задавати відступ від конкретного краю:

  • margin-top — відступ від верхньої сторони;
  • margin-right — відступ від правого боку;
  • margin-bottom — відступ від нижньої сторони;
  • margin-left — відступ від лівого боку.

Аналогічно можна задавати внутрішні відступи:

  • padding-top, 
  • padding-left, 
  • padding-right, 
  • padding-bottom 

Завдання 

Створіть файл стилю за зразком

Файл заготовка


Д/з Проаналізувати презентацію https://drive.google.com/file/d/1mr9H3q6WZtNnnJNXNK31MkuHO6M1D9xk/view з сайтуhttp://it-science.com.ua/

Немає коментарів:

Дописати коментар