Skip to content

Latest commit

 

History

History
534 lines (369 loc) · 24.1 KB

Lab_02.md

File metadata and controls

534 lines (369 loc) · 24.1 KB

Стили CSS

  1. Оформить созданные HTML-страницы с применением связанных таблиц стилей.
  2. Записать стили, обращаясь к элементам страницы по имени тега, класса и идентификатора.
  3. Научиться применять стили при помощи псевдоклассов и псевдоэлементов.

Введение в CSS

Технология описания внешнего вида документа. Стандарт визуального представления данных.

Стиль - совокупность правил, определяющих способ отображения.

Таблица стилей - совокупность стилей, применяемых к документу.

Каскадирование - порядок применения различных стилей (в т.ч. наследование).

Преимущества

  1. Разграничение кода и оформления. HTML-документ содержит только теги логического форматирования, контент. CSS-документ задает стили для оформления HTML-документа.
  2. Разное оформление для разных устройств. Стили позволяют отформатировать страницу для отображения на разных устройствах (монитор, принтер, смартфон, планшет).
  3. Расширенные по сравнению с HTML способы оформления элементов.
  4. Ускорение загрузки сайта. Стили редко изменяются, поэтому при хранении стилей в отдельном файле, они кэшируется и при повторном обращении к ним извлекается из кэша браузера.
  5. Единое стилевое оформление множества документов. Множество HTML-документов используют одни и те же стили.
  6. Централизованное хранение. Удобно править стиль в одном месте, при этом оформление элементов автоматически меняется на всех страницах, которые связаны с указанным файлом стилей.

Способы добавления стилей на страницу

Связанные стили

Стили располагаются в отдельном файле с расширением *.css и связываются с HTML-документом при помощи тега <LINK>. Данный тег помещается в контейнер <head>.

Пример:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стили</title>
        <link rel="stylesheet" href="style.css"> <!-- подключение стилевого файла -->
    </head>
    <body>
    <h1>Заголовок</h1>
        <p>Текст</p>
    </body>
</html>

Аттрибутом href тега <link> задаёт путь к CSS-файлу.

Таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

Внедрённые стили

Свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Внедрённые стили</title>
        <style>
            H1 {
                font-size: 120%;
                font-family: Verdana, Arial, Helvetica, sans-serif;
                color: #333366;
            }
        </style>
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

Встраиваемые стили

Встроенный стиль применяется для одиночного тега используемого на текущей веб-странице.

Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Внутренние стили</title>
    </head>
    <body>
        <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>
    </body>
</html>

Синтаксис CSS

Общий способ записи имеет следующий вид:

селектор { свойство: значение; }

Селектор - элемент документа, к которому будут применены стили.

Например:

body { background: #CCCCCC; }

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции.

Если в стилевом файле указаны несколько селекторов с одинаковым именем, то применяется стиль оформления, соответствующий стилю последнего сетектора.

В качестве селекторов могут выступать:

  1. Имена HTML тегов
  2. Классы .class
  3. Идентификаторы #id
  4. Аттрибуты [attr="value"]

Селекторы тегов

В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д.

Например:

P {
    text-align: justify; /* Выравнивание по ширине */
    color: green; /* Зеленый цвет текста */
   }

Классы

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега.

Общий вид:

тег.класс { свойство1: значение; свойство2: значение; ... }

Пример:

P { /* Обычный абзац */
    text-align: justify; /* Выравнивание текста по ширине */
}
P.cite { /* Абзац с классом cite */
    color: navy; /* Цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
}

Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class="Имя класса". Например:

<p class="cite">Здесь текст абзаца, отформатированный с учетом стиля класса <b>cite</b></p>

Можно использовать классы и без указания тега. Синтаксис в этом случае будет следующий:

.класс { свойство1: значение; свойство2: значение; ... }

При такой записи класс можно применять к любому тегу.

К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Например:

<p class="cite bold">Это текст абзаца, отформатированный с учетом стилей <b>cite</b> и <b>bold</b> одновременно</p>

Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.

В стилях также допускается использовать запись вида .style1.style2, где style1 и style2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы style1 и style2.

Идентификаторы

Идентификатор определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис применения идентификатора следующий. При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора.

#идентификатор { свойство1: значение; свойство2: значение; }

Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется атрибут id, значением которого выступает имя идентификатора

<div id="help">Этому контейнеру присвоен уникальный идентификатор <b>help</b></div>

Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий. Вначале указывается имя тега, затем без пробелов символ решётки и название идентификатора:

тег#идентификатор { свойство1: значение; свойство2: значение; }

Селекторы атрибутов

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты.

Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.

[атрибут] { свойство1: значение; }
селектор[атрибут] { свойство1: значение; }

Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут.

Второй способ - атрибут со значением Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута. Синтаксис применения следующий.

[атрибут="значение"] { свойство1: значение; }
селектор[атрибут="значение"] { свойство1: значение; }

Пример

Поле для ввода e-mail адреса подсвечивается красной рамкой при некорректно введенном адресе.

<input type="email">
input[type="email"]:invalid {
  border-color: red;
}

Псевдокласс :invalid находит поле ввода <input>, которое не прошло валидацию в соответствии с типом поля.

Приоритет селекторов

Идентификаторы являются более приоритетными, чем классы.

Например, контейнер div имеет аттрибуты класс и идентификатор:

#id_red  { color: red; }
.class_blue { color: blue; }
<div class="class_blue" id="id_red">Этот текст будет красным</div>

Группировка селекторов

Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают в группе.

Например, задать стиль для класса class2, когда он находится внутри класса class1:

.class1 { color: blue; }
.class1 .class2 { color: red; }
<div class="class1">
    <span>Text1</span>
</div>
<div class="class1">
    <span class="class2">Text2</span>
</div>

Имена классов в данном случае разделяются пробелами.

В данном примере Text1 будет написан голубым цветом, а текст Text2 - красным.

Таким образом можно одновременно установить стиль для отдельного класса (class1), а также для класса (class2), который находится внутри другого (class1).

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.

селектор1 + селектор2 { свойство1: значение; }

При такой записи стиль применяется к Селектору 2, только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

Дочерние селекторы

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента.

Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий.

селектор1 > селектор2 { свойство1: значение; }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора же допустим любой уровень вложенности.

Универсальный селектор

Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.

Для обозначения универсального селектора применяется символ звёздочки (*) и в общем случае синтаксис будет следующий.

* { свойство1: значение; }

Псевдоклассы

Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя. Например, гиперссылка, которая меняет свой цвет при наведении на неё курсора мыши. То есть, псевдоклассы могут быть использованы для стилизации элемента на основе его состояния.

Синтаксис применения псевдоклассов следующий.

селектор:псевдокласс { свойство1: значение; }

Например, для гиперссылки:

   A:link {
    color: #036; /* Цвет непосещенных ссылок */
   }
   A:visited {
    color: #606; /* Цвет посещенных ссылок */
   }
   A:hover {
    color: #f00; /* Цвет ссылок при наведении на них курсора мыши */
   }
   A:active {
    color: #ff0; /* Цвет активных ссылок */
   }

Псевдоэлементы

Псевдоэлемент в CSS - это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента.

Синтаксис использования псевдоэлементов следующий:

селектор::псевдоэлемент { свойство1: значение; }

Примечание: Как правило, следует использовать двойное двоеточие (::) вместо одинарного (:). В этом состоит различие между псевдоклассами и псевдоэлементами. Однако, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.

Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца:

p::first-line {
  color: blue;
  text-transform: uppercase;
}

::after

Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, которое определяет содержимое для вставки.

/* Добавить стрелки после ссылок */
a::after {
  content: "→";
}

::before

По своему действию ::before аналогичен псевдоэлементу ::after, но вставляет контент до содержимого элемента.

/* Добавить сердце перед ссылками */
a::before {
  content: "♥";
}

Другие псевдоэлементы

::cue, ::first-letter, ::first-line, ::selection, ::slotted, ::backdrop, ::placeholder, ::marker, ::spelling-error, ::grammar-error .

Единицы измерения

Есть два типа единиц измерения:

  1. Относительные (определяют размер элемента относительно значения другого размера)
  2. Абсолютные (не зависят от устройства вывода)

Относительные единицы

Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. Изменяемое значение зависит от размера шрифта текущего элемента (он устанавливается через стилевое свойство font-size).

Единица Описание
em Высота шрифта текущего элемента
ex Высота символа x
px Пиксел
% Процент

1em равен размеру шрифта, заданного в браузере по умолчанию.

ex определяется как высота символа x в нижнем регистре.

Размер пиксела px зависит от разрешения устройства и его технических характеристик.

Абсолютные единицы

Применяются реже, чем относительные и, как правило, при работе с текстом.

Единица Описание
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)

Самой распространенной единицей является пункт pt, который используется для указания размера шрифта.

Пиши CSS кратко

Шрифт

font: 1em/1.5em bold italic serif;

Вместо:

font-size: 1em;
font-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;

Фон страницы

background: #fff url(image.gif) no-repeat top left;

Вместо:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position:top left;

Списки

list-style: disc outside url(image.gif);

Вместо:

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif);

Рамка

border: 1px black solid;

Вместо:

border-width: 1px;
border-color: black;
border-style: solid;

Margin & padding

4 разных значения

margin: 2px 1px 3px 4px (top, right, bottom, left);

Вместо:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;

3 разных значения

margin: 5px 1px 3px (top, right and left, bottom);

Вместо:

margin-top: 5px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 1px;

Ссылки

  1. Самоучитель CSS
  2. Валидация CSS