Home

CSS базові поняття

Зміст

  1. Способи підключення стилів CSS
  2. Селектори
  3. Псевдокласи :hover, :focus, :active, :visited
  4. Властивість cursor
  5. Специфічність
  6. Наслідування
  7. COLOR (RGB, RGBA)
  8. CSS-змінні :root
  9. Оформлення тексту
  10. Властивості шрифту
  11. Псевдоелемент HTML <pre> CSS pre::first-letter
  12. Псевдоелемент h1::selection (виділення мишкою)
  13. Шрифти Fonts. Google Fonts
  14. Підключення стороннього шрифта - @font-face{}

Способи підключення стилів CSS

  • Вбудовані стилі

    Цей текст буде синім.

    p/ style="color:blue; font-size:20px;">Цей текст буде синім. /p

  • Вбудована таблиця стилів

  • Зовнішня таблиця стилів

    head link rel="stylesheet" href="./css/styles.css" head

    На одному рівні з index.html створюється папка css, а всередині неї - файл стилів styles.css

    Можна підключити скільки завгодно CSS-файлів, додаючи для кожного тег link

Селектори

  • Селектор елемента

    p { font-size: 24px; }

  • Селектор класу

    В елемента може бути кілька класів, тоді вони записуються через пробіл

    Поповнення рахунку виконано

    Увага, будуть змінені тарифи

    Помилка проведення транзакції

  • Селектор ідентифікатора

    <h4 id="title">Селектор ідентифікатора</h4>

  • Селектор нащадка

    селектор застосовує стилі до дітей і нащадків елемента за будь-якої глибини вкладеності.

  • Селектор дитини

    • Комп'ютери та комплектуючі
      • Процесори
      • Монітори
      • Відеокарти
    • Побутова техніка
      • Холодильники
      • Телевізори
      • Пральні машини

  • Селектор атрибута

    htmlreference.io
    YouTube

Псевдокласи :hover, :focus, :active, :visited

  • Псевдоклас :hover

    Наведи на посилання і вона змінить колір link :hover.

    social-links-2 :hover

  • Псевдоклас :focus

    social-links-3 :focus Натискай TAB

  • Псевдоклас :active

    використовується в основному для посилань і кнопок

    social-links-4 :focus Натискай Btn

  • Псевдоклас :visited

  • Ховер і таблиці

    Приклад ховера в таблиці
    Train number Route Travel time
    433 London - Paris 5 hours
    701 New York - Chicago 7 hours
    258 Oslo - Warsaw 4 hours

Властивість cursor

auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
s-resize
e-resize
w-resize
ns-resize
ew-resize
ne-resize
nw-resize
se-resize
sw-resize
nesw-resize
nwse-resize

Специфічність

rang
  • p = 0 0 0 1
  • article > p = 0 0 0 2
  • .post-title = 0 0 1 0
  • .post > h1 = 0 0 1 1
  • .post > .post-title = 0 0 2 0
  • .post > a.post-link = 0 0 2 1
  • #title = 0 1 0 0
  • p style="color: green;" = 1 0 0 0

Наслідування

COLOR (RGB, RGBA)

background-color yellow

color: rgb(255, 0, 0)

старий колір: rgb(228, 227, 235)

color: rgb(100%, 0%, 0%)

color: #0000ff

Прозорість color: rgba(0, 0, 0, 0.3)

CSS-змінні :root

Оформлення тексту

Властивості шрифту

Псевдоелемент HTML <pre> CSS pre::first-letter

Псевдоелемент h1::selection (виділення мишкою)

                    Wyatt resteth here, that quick could never rest;
                    Whose heavenly gifts increased by disdain,
                    And virtue sank the deeper in his breast;
                    Such profit he by envy could obtain.
                
                    A head where wisdom mysteries did frame,
                    Whose hammers beat still in that lively brain
                    As on a stithy where that some work of fame
                    Was daily wrought, to turn to Britain's gain.

Шрифти Fonts. Google Fonts

Підключення стороннього шрифта - @font-face{}

add google font