Тема: Базовий CSS
Я створив список деяких базових можливостей CSS, можливо вам буде цікаво (якщо ви новачок)
(список створений на основі курсів Основи Web UI розробки.)
Створення селекторів
http://www.w3schools.com/cssref/css_selectors.asp - CSS Selector Reference (селектори)
http://oleksandr-myronchuk.blogspot.com … -post.html - важливість селекторів (пріоритети)
Створення блоків, розбиття сайту наблоки
http://www.w3schools.com/html/html5_sem … ements.asp - семантичні елементи HTML
http://www.w3schools.com/css/css3_flexbox.asp - Flexbox, надає:
Вирівнювання row, column, реверсне вирівнювання
Горизонтальне вирівнювання - justify-content - на початок, в кінець, центр, між простором, поза простором
Вертикальне вирівнювання - align-items - розтягування, на початок, в кінець, центр, базовий рівень
Переношення елементів (обтікання) - flex-wrap - не переносити, переносити, реверсне перенесення
Модифікація поведінки flex-wrap властивості - розтягування, на початок, в кінець, центр, між простором, поза простором
Самовирівнювання - align-self
Довжина елементу - flex
Простір навколо вмісту
http://www.w3schools.com/css/css_margin.asp - Margins - за межами границь
http://www.w3schools.com/css/css_padding.asp - Padding - всередині границь
Margins і Padding мають властивості для кожної сторони границі:
-top
-right
-bottom
-left
Обтікання
http://www.w3schools.com/cssref/pr_class_float.asp - float - вирівнювання елемента до якоїсь сторони (за замовчуванням, ліва сторона, права сторона)
http://www.w3schools.com/cssref/pr_class_clear.asp - clear - забороняє "плавати" (вирівнюватися) елементу (за замовчуванням, ліва сторона, права сторона, обидві)
http://www.w3schools.com/cssref/pr_pos_overflow.asp - overflow - що робити коли вміст переповнює елемент (показати, приховати, додати полосу прокрутки, авто, початкові налаштування)
http://www.w3schools.com/cssref/css3_pr_overflow-x.asp - overflow-x - для лівого і правого краю
http://www.w3schools.com/cssref/css3_pr_overflow-y.asp - overflow-y - для верхнього і нижнього краю
Межі, налаштування візуального вигляду меж
http://www.w3schools.com/css/css_border.asp - Borders - дозволяє:
border - встановлює всі властивості межі в одному оголошенні
border-bottom/top/left/right - задає нижню/верхню/ліву/праву межу
border-bottom/top/left/right-color - задає колір нижньої/верхньої/лівої/правої межі
border-bottom/top/left/right-style - задає стиль нижньої/верхньої/лівої/правої межі
border-bottom/top/left/right-width - задає ширину нижньої/верхньої/лівої/правої межі
border-color - задає колір межі
border-radius - задає радіус (заокругленість) всім межам
border-style - задає стиль межі
border-width - задає ширину межі
Позиціонування
http://www.w3schools.com/css/css_positioning.asp - існують такі позиціонування:
static (статичні) - звичайний (природний) порядок розташування відповідно до порядку додавання елементу в сторінку
inherit (успадковане) - дочірній елемент успадковує позиціонування батьківського елементу
fixed (фіксоване) - фіксований елемент (не піддається скролінгу сторінки)
relative (відносний) - розташовуються відносно власної позиції, але залишає свій образ (не дозволяє зайняти своє "старе" місце)
absolute (абсолютна) - видаляє елемент із загального потоку документа (навколишні елементи його ігнорують)
top - верх
bottom - низ
left - ліво
right - право
---***---
http://www.w3schools.com/cssref/pr_dim_width.asp - width - ширина елементу
http://www.w3schools.com/cssref/pr_dim_height.asp - height - висота елементу
http://www.w3schools.com/cssref/pr_pos_z-index.asp - z-index - додає глибину елементу (чим більше значення тим "вище" розташовується елемент по Z глибині)
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp - box-sizing - повідомляє браузеру чи включати межі в розмір елементу (тільки контент, межі і контент, за замовчуванням)
Шрифти
http://www.w3schools.com/css/css_font.asp - шрифти можна налаштувати:
font-family - сімейство шрифтів, назва шрифту
font-size - задає розмір шрифту тексту
font-style - задає стиль шрифту для тексту
font-variant - задає (small-caps) малі прописні шрифт
font-weight - задає вагу шрифту
Текст
http://www.w3schools.com/css/css_text.asp - текст можна налаштувати:
color - колір
direction - напрямок (з ліва на право, з права на ліво)
letter-spacing - відстань між літерами
line-height - висота рядка
text-align - горизонтальне вирівнювання тексту (ліво, центр, право)
text-decoration - проводить лінію (підкреслення, перекреслення, надкреслення)
text-indent - відступ першого рядка в текстовому блоці (абзац)
text-shadow - тіньовий ефект (тінь)
text-transform - капіталізація тексту (прописні букви, малі букви, перша буква велика в кожному слові)
text-overflow - переповнене вміст (дозволяє додати три крапки якщо текст переповнює елемент)
unicode-bidi - використовується разом з direction властивостями, перевертає текст, для підтримки кілька мов у одному документі
vertical-align - вертикальне вирівнювання елемента (тексту)
white-space - вказує, як пробіли всередині елемента обробляється (normal|nowrap|pre|pre-line|pre-wrap|initial|inherit)
word-spacing - збільшує або зменшує пробіл між словами в тексті
Курсор
http://www.w3schools.com/cssref/pr_class_cursor.asp - cursor - відображення курсора