Знакомство с 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 {...}

1

Задача

Модуль 1: Web Core, 2 уровень, 10 лекция

Недоступна

Встроенные стили

Встроенные стили

Открыть

1

Задача

Модуль 1: Web Core, 2 уровень, 10 лекция

Недоступна

Внутренние стили

Внутренние стили

Открыть