Стили. Inline styles
Стили. Inline styles
В этой уроке мы с Вами познакомимся еще с одним глобальным атрибутом style, узнаем что такое каскадные таблицы стилей, что такое CSS стиль и научимся задавать его для HTML элементов.
К этому уроку у вас уже есть четкое понимание, что язык гипертекстовой разметки используется, чтобы описать содержимое веб-страницы. Путешествуя по сети интернет, мы замечаем, что страницы выглядят по разному: цветовая гамма, шрифты, различный междустрочный интервал, фоновые изображения и даже анимация. Не откладывая в дальний ящик сразу хочу Вам объяснить, что на то как эти страницы будут выглядеть, влияют, используемые каскадные таблицы стилей (Cascading Style Sheets - CSS).
В рамках курса HTML мы с Вами поверхностно рассмотрим использование каскадных таблиц стилей, подробно изучить их после этого курса вы можете в разделе курс CSS от команды Coursme.com
Что такое стиль
Стиль устанавливает внешний вид какого-либо элемента страницы, т.е. грубо говоря, это правило, которое сообщает браузеру как форматировать определенный элемент (например, изменить фон или цвет шрифта).
Каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть произведено с использованием глобального атрибута style. Атрибут задает встроенный (inline) CSS стиль для элемента. Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента.
Но в этом уроке мы разберем только инлайн стили (простые ).
Inline Styles
Инлайн-стили предоставляют способ применения стилей непосредственно к HTML-элементам. Это удобно, когда требуется быстро задать стили для конкретного элемента без создания отдельного файла CSS.
Давайте рассмотрим несколько примеров простых инлайн-стилей.
Сначала создадим простой HTML-документ. Откройте ваш текстовый редактор и введите следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Примеры Инлайн-стилей</title>
</head>
<body>
<h1>Инлайн-стили в HTML</h1>
<p>Пример использования инлайн-стилей для изменения цвета текста:</p>
<p style="color: blue;">Этот текст синего цвета.</p>
<p>Пример использования инлайн-стилей для изменения фона:</p>
<p style="background-color: lightgray;">Этот текст на светло-сером фоне.</p>
<p>Пример изменения размера текста:</p>
<p style="font-size: 18px;">Этот текст увеличенный.</p>
</body>
</html>Давайте теперь разбираться по порядку:
- Изменение цвета текста: Используем стиль color для изменения цвета текста внутри элемента <p>. В данном случае, текст будет синего цвета.
- Изменение фона: Используем стиль background-color для изменения цвета фона внутри элемента <p>. Здесь фон будет светло-серым.
- Изменение размера текста: Стиль font-size используется для увеличения размера текста внутри элемента <p>. Размер текста будет 18 пикселей.
Ну а теперь, сохраните файл, откройте его в веб-браузере, и вы увидите, как инлайн-стили непосредственно влияют на внешний вид соответствующих элементов.
Заключение
Использование инлайн-стилей в HTML предоставляет удобный способ быстрого задания стилей для конкретных элементов, хотя в более сложных проектах рекомендуется применять внешние файлы CSS для более системного подхода к стилизации веб-страниц.
Будьте первым