Тема: Базовий 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 - відображення курсора

2

Re: Базовий CSS

На місці адміна яб вас забанив... але це сутомоє бачення і не розуміння для чого ви проливаєте цю воду і в котре рекламуєте курси програмування

(список створений на основі курсів Основи Web UI розробки.)

3

Re: Базовий CSS

Key написав:

На місці адміна яб вас забанив... але це сутомоє бачення і не розуміння для чого ви проливаєте цю воду і в котре рекламуєте курси програмування

(список створений на основі курсів Основи Web UI розробки.)

Це всерівно що вирвати сторінку з книжки де пише "література". Я не рекламую курс, а написав де я взяв цю інформацію.
А якщо це посилання якось розрекламує сайт, я навіть буду ради, оскільки таких досить якісних сайтів, де викладають на українській мові, мало. До того ж курс повністю безкоштовний.

Подякували: ostap34PHP, Сергій782