CSS = Стили и цвета
CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.
CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.
CSS можно добавлять к элементам HTML тремя способами:
- Встроенный — с помощью атрибута Style в элементах HTML
- Internal -с помощью <style> элемента в <head> разделе
- Внешний — с помощью внешнего CSS-файла
Наиболее распространенным способом добавления CSS является сохранение стилей в отдельных CSS-файлах. Однако, здесь мы будем использовать встроенный и внутренний стиль, потому что это легче продемонстрировать, и проще для вас, чтобы попробовать его самостоятельно.
Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.
Встроенный CSS
Встроенный CSS используется для применения уникального стиля к одному элементу HTML.
Встроенный CSS использует атрибут style элемента HTML.
В этом примере устанавливается цвет текста элемента <h1> синим цветом:
Пример
Внутренняя CSS
Внутренний CSS используется для определения стиля для одной HTML-страницы.
Внутренняя таблица CSS определена в разделе <head> HTML-страницы в элементе <style> :
Пример
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Внешние CSS
Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.
С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!
Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе <head> страницы HTML:
Пример
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.
Вот как выглядит "styles.css":
Шрифты CSS
Свойство CSS color определяет используемый цвет текста.
Свойство CSS font-family определяет используемый шрифт.
Свойство CSS font-size определяет размер текста, который будет использоваться.
Пример
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Граница CSS
Свойство CSS border определяет границу вокруг элемента HTML:
Пример
CSS заполнение
Свойство CSS padding определяет отступ (пробел) между текстом и границей:
Пример
CSS маржа
Свойство CSS margin определяет поле (пробел) за пределами границы:
Пример
Атрибут ID
Чтобы определить конкретный стиль для одного специального элемента, добавьте атрибут id к элементу:
then define a style for the element with the specific id:
Пример
Примечание: Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор ID используется для выбора одного уникального элемента!
Атрибут class
Чтобы определить стиль для специального типа элементов, добавьте атрибут class к элементу:
Затем определите стиль для элементов с определенным классом:
Пример
Внешние ссылки
Внешние таблицы стилей можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.
В этом примере используется полный URL-адрес для связывания с таблицей стилей:
Пример
Этот пример связывается с таблицей стилей, расположенной в папке HTML на текущем веб-узле:
Пример
Этот пример связывается с таблицей стилей, расположенной в той же папке, что и текущая страница:
Примере
Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.
CSS = Стили и цвета
Стилизация HTML с помощью CSS. Каскадные таблицы стилей
CSS расшифровывается как Cascading Style Sheets — Каскадная таблица стилей.
CSS описывает, как элементы HTML должны отображаться на экране, бумаге или других носителях..
CSS экономит много времени. Он может контролировать макет нескольких веб-страниц одновременно.
CSS можно добавить к элементам HTML тремя способами:
- Inline (встроенный или строчный) — используя атрибут style в элементах HTML
- Internal (внутренний) — используя элемент <style> в разделе <head>
- External (внешний) — с помощью внешнего файла CSS
Самый распространенный способ добавить CSS — это сохранить стили в отдельных файлах CSS. Тем не менее, здесь мы будем использовать встроенный и внутренний стиль, потому что это легче продемонстрировать, и вам будет проще попробовать самим.
Совет: Вы можете узнать больше про CSS в CSS Учебнике на этом сайте.
Inline CSS — Встроенный (строчный) стиль
Встроенный CSS используется для применения уникального стиля к одному HTML элементу.
Встроенный CSS использует атрибут style элемента HTML.
Этот пример устанавливает цвет текста элемента <h1> в синий:
Пример
Internal CSS — Внутренний стиль
Внутренний CSS используется для определения стиля отдельной HTML страницы.
Внутренний CSS указывается в разделе <head> HTML страницы с помощью элемента <style> :
Пример
External CSS — Внешний стиль
Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.
С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив лишь один файл!
Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на неё в разделе <head> HTML страницы:
Пример
Внешнюю таблицу стилей также, как и HTML-код, можно написать в любом редакторе кода. Файл не должен содержать HTML-код и должен быть сохранен с расширением .css.
Вот как выглядит файл "styles.css":
Примечание: Подробнее о редакторах кода вы можете прочитать в разделе HTML Редакторы на нашем сайте W3Schools на русском.
CSS Шрифты
CSS свойство color определяет цвет текста, который будет использоваться.
CSS свойство font-family определяет семейство шрифта, который будет использоваться.
CSS свойство font-size определяет размер текста, который будет использоваться.
Пример
CSS Border — Граница
CSS свойство border определяет границу вокруг HTML элемента:
Пример
CSS Padding — Внутренний отступ
CSS свойство padding определяет отступ (пробел) между текстом и границей:
Пример
CSS Margin — Внешний отступ
CSS свойство margin определяет пространство (пробел) за пределами границы (внешний отступ):
Пример
Атрибут идентификатора — id
Чтобы указать конкретный стиль для одного определённого элемента, добавьте атрибут id к элементу:
Затем укажите стиль для элемента с определенным id:
Пример
Идентификатор id указывается в css с помощью символа # (диез, решётка) и название идентификатора.
Примечание: Идентификатор (id) элемента должен быть уникальным на странице, поэтому селектор идентификаторов используется для выбора одного уникального элемента!
Атрибут класса — class
Чтобы указать стиль для определённых типов элементов, добавьте атрибут class к элементу:
затем укажите стиль для элементов с определенным классом:
Пример
Класс class указывается в css с помощью символа . (точка) и название класса.
Внешние таблицы стилей
На внешние таблицы стилей можно ссылаться по полному URL или по пути относительно текущей веб-страницы.
В этом примере используется полный URL-адрес для ссылки на таблицу стилей:
Пример
Этот пример ссылается на таблицу стилей, расположенную в папке html на текущем веб-сайте:
Пример
Этот пример ссылается на таблицу стилей, расположенную в той же папке, что и текущая страница:
Пример
Вы можете прочитать больше о путях к файлам в разделе HTML Пути к файлам.
Резюме раздела
- Используйте HTML атрибут style для встроенного стиля
- Используйте HTML элемент <style> для определения внутреннего CSS
- Используйте HTML элемент <link> для ссылки на внешний файл CSS
- Используйте HTML <head> элемент, чтобы хранить элементы <style> и <link>
- Используйте CSS свойство color для установки цвета текста
- Используйте CSS свойство font-family для установки семейства шрифтов текста
- Используйте CSS свойство font-size для установки размера текста
- Используйте CSS свойство border для установки границ
- Используйте CSS свойство padding для установки отступа внутри границ
- Используйте CSS свойство margin для установки отступа за пределами границ
HTML Упражнения
HTML Теги стиля
| Тег | Описание |
|---|---|
| <style> | Определяет информацию о стиле для документа HTML |
| <link> | Определяет ссылку между документом и внешним ресурсом |
Для получения полного списка всех доступных тегов HTML, посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
Как структурирован CSS
Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.
| Необходимые знания: | Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSS |
|---|---|
| Задача: | Подробно узнать основные синтаксические структуры CSS. |
Применение CSS к вашему HTML
Первое, что мы рассмотрим, это три метода применения CSS к документу.
Внешняя таблица стилей
В статье Начало работы с CSS мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространённый и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.
Внешняя таблица стилей — это когда у вас есть CSS отдельным файлом с расширением .css , и ссылка на него из HTML-элемента <link> :
Файл CSS может выглядеть следующим образом:
Атрибут href элемента <link> должен ссылаться на файл в файловой системе.
В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:
Внутренняя таблица стилей
Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента <style> , содержащейся внутри HTML <head> .
Таким образом, HTML будет выглядеть вот так:
Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.
Встроенные стили
Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style :
Пожалуйста, не делайте этого! Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.
Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.
Игра с CSS в этой статье
Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:
Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <body> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.
Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.
Читайте дальше и получайте удовольствие!
Селекторы
Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.
Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:
Примечание: вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.
Спецификация
Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:
А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special . Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?
В языке CSS есть правила, которые определяют, какое правило «выиграет» в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p , но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.
А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.
Попрактикуйтесь сами — добавьте два правила для параграфа p < . >в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.
Понимание каскадов, или правил, улучшается с практикой. В статье Каскад и наследование я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.
Свойства и значения
Если говорить в общем, CSS строится на двух его составляющих:
Свойства
Определяют, какую характеристику вы желаете изменить (например, font-size , width , background-color ).
Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.
На изображении внизу выделены свойство и его значение. Здесь свойство — color , а его значение — blue .
Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.
Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h1 , другое для селектора p . Правило для h1 выделено.
Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием ( : ).
Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код:
- font-size
- width
- background-color
- color (en-US)
- border
Предупреждение: Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.
Предупреждение: Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color ; британский вариант colour не будет работать.
Функции
Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc() . Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:
В результате получим это:
Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!
В следующем примере будут различные значения для свойства <transform> rotate() .
Результат этого кода будет:
Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:
- transform
- background-image , в частности со значениями градиента
- color (en-US),в частности со значениями rgb/rgba/hsl/hsla
@правила
До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского «at-rules»). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import :
Чаще других встречается @rules под названием @media : оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).
Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink . Однако после мы добавили правило @media , которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.
Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.
Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.
Стенография
Некоторые свойства вроде font , background , padding , border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.
CSS :: Подключение к html-документу
Для того, чтобы правила CSS могли быть применены к требуемым элементам html -документа, сперва необходимо связать их с этим документом и, в частности, с самим элементом. В процессе изучения языка HTML мы уже касались этого вопроса при изучении элементов «style» и «link», а также атрибутов style, class и id. Теперь же повторим все еще раз и в одном месте, но сперва рассмотрим подробнее понятие таблицы стилей.
– это свод правил CSS , собранных в одном месте. Если таблица стилей находится в отдельном файле, который обычно имеет расширение .css , то этот файл называют , а в случае нахождения таблицы внутри элемента «style», ее называют . Имеется возможность указывать свойства CSS в качестве значения атрибута style конкретного элемента разметки, в этом случае говорят о .
Виды таблиц стилей CSS и
способы их подключения к html-странице
Подключение таблиц стилей к «html» -документу показано в примере №1 .
Пример №1. Подключение таблиц стилей CSS к html-документу
Внешняя таблица стилей представляет собой обычный текстовый файл, в котором перечисляются все необходимые правила CSS . Для того чтобы подключить ее к требуемому html -документу, следует указать путь к файлу в качестве значения атрибута href служебного элемента «link». Также можно воспользоваться правилом @import, которое должно располагаться внутри контейнера «style» или во внешней таблице стилей. Оно служит для импорта содержимого css -файла, указанного в значении данного свойства, в текущую таблицу стилей. Путь к файлу, содержащему внешнюю таблицу стилей, в этом случае указывается в формате @import url(«path»); (кавычки разрешается опускать) или же просто в кавычках после имени свойства: @import «path»; . При этом все правило, как и положено, должно заканчиваться точкой с запятой ; (см. пример №1 ). После подключения к документу, внешняя таблица стилей становится доступна в пределах всего документа.
Что касается внутренних таблиц стилей, то разрешается использовать несколько элементов «style» для их размещения, но не стоит забывать, что сами элементы «style» являются служебными и должны располагаться в пределах заголовка документа «head». Внутренние таблицы стилей доступны только в пределах данного документа.
Стоит отдельно отметить, что внутри элемента «style» действует синтаксис CSS , поэтому применение тегов и комментариев HTML в этой части документа не допустимо.
Также не рекомендуется частое использование встроенных стилей, хотя такая возможность и предусмотрена в HTML , т.к. при этом ухудшается читабельность кода, а также усложняется поиск и правка самих стилей. Кроме того, вместо них вполне можно воспользоваться атрибутами class или id, расположив необходимое правило CSS в таблице стилей.