Знайомство з CSS

11.1 Види стилів

CSS (Cascading Style Sheets) — це мова стилів, що використовується для опису зовнішнього вигляду HTML-документів. CSS дозволяє розробникам розділяти представлення та стилізацію веб-сторінок від їхньої структури.

CSS використовується для завдання стилів HTML-елементів, таких як кольори, шрифти, розміри, відступи тощо. CSS можна застосовувати до елементів кількома способами:

• Вбудовані стилі (Inline Styles)
• Внутрішні стилі (Internal Styles)
• Зовнішні стилі (External Styles)

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

Для кожного HTML-елемента можна вказати власні CSS-стилі за допомогою атрибута style.

Приклад:

    
      <p style="color: blue; font-size: 21px;">Це приклад вбудованого стилю.</p>
    
  

Цей стиль повідомляє браузеру, що текст всередині параграфа потрібно відобразити синім кольором, а розмір шрифту має бути 21 піксель заввишки.

Насправді тут два «стилі»:

• color = blue;
• font-size = 21px;

Просто вони вказані в один рядок і розділені крапкою з комою.

Також ви можете, наприклад, створити чорний прямокутник і написати в ньому текст білим кольором. Виглядати цей код буде ось так:

    
      <div style="padding: 15px; font-size: 21px; min-height:200px; color:white; background-color:black">
        Білий текст на чорному фоні
      </div>
    
  

Цей стиль повідомляє браузеру, що:

1. Елемент div має мати внутрішній відступ у 15 пікселів з усіх боків;
2. Розмір тексту всередині блоку має бути розміром у 21 піксель;
3. Мінімальна висота блоку має бути 200 пікселів;
4. Колір тексту має бути білим;
5. Колір фону має бути чорним.

11.2 Кольори

Детальніше ми розберемо CSS стилі, коли вивчимо HTML. Але щоб було цікавіше, давайте сьогодні розберемося з кольорами. За допомогою CSS можна задати будь-який колір, який може відобразити комп'ютер і навіть більше.

Взагалі кольори в CSS є важливою частиною стилізації веб-сторінок. Вони дозволяють створювати візуально привабливі та інтуїтивно зрозумілі інтерфейси. Існує кілька способів задання кольорів у CSS, кожен з яких має свої особливості та застосування. Розберемо їх детальніше.

1. Імена кольорів (Color Names)

CSS підтримує понад 140 стандартних імен кольорів. Це простий і зрозумілий спосіб задання кольору.

    
      <div style="color: lightblue;">Голубий колір тексту</div>
    
  

Деякі розповсюджені імена кольорів: red, blue, green, black, white, gray, yellow, pink, orange.

2. Шістнадцяткові значення (Hexadecimal Values)

Шістнадцяткові значення задаються з використанням символу #, за яким йдуть шість цифр або букв, що представляють інтенсивність червоного, зеленого та синього кольорів (RRGGBB).

    
      <p>Приклад</p>
    
  

    
      p {
        color: #ff0000; /* червоний */
        background-color: #00ff00; /* зелений */
      }
    
  

Також можна використовувати скорочені шістнадцяткові значення, якщо кожна пара символів однакова:

    
      <p>Приклад</p>
    
  

    
      p {
        color: #f00; /* червоний */
        background-color: #0f0; /* зелений */
      }
    
  

3. RGB (Red, Green, Blue)

RGB-значення дозволяють задавати кольори з використанням десяткових значень від 0 до 255.

    
      <p>Приклад</p>
    
  

    
      p {
        color: rgb(255,0,0); /* червоний */
        background-color: rgb(0,255,0); /* зелений */
      }
    
  

4. RGBA (Red, Green, Blue, Alpha)

RGBA-значення додають четвертий параметр — альфа-канал, який визначає прозорість кольору. Значення альфа-каналу варіюється від 0 (повністю прозорий) до 1 (повністю непрозорий).

    
      <p>Приклад</p>
    
  

    
      p {
        color: rgba(255, 0, 0, 0.5); /* напівпрозорий червоний */
        background-color: rgba(0, 255, 0, 0.5); /* напівпрозорий зелений */
      }
    
  

Приклад використання кольорів

    
      <div>Приклад</div>
    
  

    
      div {
        padding: 20px;
        font-size: 18px;
        color: navy; /* темно-синій колір тексту */
        background-color: #f0f0f0; /* світло-сірий фон */
        border: 2px solid rgb(255, 165, 0); /* оранжева границя */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* тінь із прозорістю */
      }
    
  

11.3 Тег <style>

Якщо у елемента стає забагато стилів, можна винести їх у спеціальний елемент — тег <style>. Його зазвичай розміщують у тегу <head>, і виглядає він ось так:

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>Приклад CSS</title>
          <style>
            body {
              background-color: lightgray;
            }
            p {
              color: blue;
              font-size: 16px;
            }
          </style>
        </head>
        <body>
          <p>Це приклад використання стилів у тегу <style>.</p>
        </body>
      </html>
    
  

Тепер можна не писати довгий рядок стилів для тега <body> всередині його атрибуту style, а перенести їх у тег style. Це дуже зручно.

Те ж саме стосується і тега <p> (параграф). Більше того, стиль, прописаний у тегу <style> у <head>, буде застосовуватися взагалі до всіх параграфів у документі, навіть якщо їх буде декілька тисяч. А все тому, що в тегу <style> стилі описані всередині селекторів.

11.4 Селектори

Селектори — це спосіб вибору елементів HTML, до яких будуть застосовуватись стилі. Існують різні типи селекторів:

Селектор тега:

Застосовує стиль до всіх елементів певного типу. Ви просто вказуєте назву тега і фігурні дужки після нього.

    
      tagname {
        // стилі
      }
    
  

tagname може бути будь-яким: body, image, a, p, … будь-яким

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

Також можна прив'язати стилі не до якогось тега, а просто дати групі стилів певне ім'я. Така група в CSS називається класом. Застосовується такий стиль до всіх елементів з певним класом. Класи задаються атрибутом class в HTML.

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>Приклад CSS</title>
          <style>
            .important {
              font-weight: bold;
            }
          </style>
        </head>
        <body>
          <p class="important">Це важливий текст.</p>
          <p>Це звичайний текст.</p>
        </body>
      </html>
    
  

В прикладі вище жирним буде виділено лише текст першого абзацу, до якого застосували стиль/клас «important». У другого абзацу такого стилю немає.

Перед ім'ям класу ставиться точка, тому що це скорочений запис виду:

    
      tagname.classname {
        color: red;
        font-weight: bold;
      }
    
  

При описі стилів в тегі <style> можна задати його 3 способами:

• tagname {...}
• tagname.classname {...}
• .classname {...}