Встроенный CSS
Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 6 из 76.
Встроенный CSS (Inline CSS) — это метод добавления CSS-стилей непосредственно к HTML-элементу с помощью атрибута style. Этот подход позволяет применять уникальные стили к отдельным элементам без необходимости использования внешних или внутренних таблиц стилей. Встроенные стили полезны для быстрого внесения специфических изменений стиля в один элемент.
Вот базовый синтаксис для использования встроенного (inline) CSS:
<element style="property: value;"></element><element>: HTML-элемент, который вы хотите стилизовать.style: Атрибут, который содержит CSS-объявления.
property: CSS-свойство, которое вы хотите установить (например, color, font-size).value: Значение, которое вы хотите установить для этого свойства (например, blue, 16px).
Например:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>В этом примере элемент параграфа имеет встроенные стили (inline styles), которые устанавливают синий цвет текста и размер шрифта 16 пикселей. Эти стили будут применены только к этому конкретному элементу параграфа.
Задание
ЛегкоВам дан HTML-документ с элементом абзаца. Используйте встроенный CSS (inline CSS), чтобы стилизовать абзац со следующими свойствами:
- Установите цвет текста на "red".
- Установите размер шрифта на "18px".
Посмотрите пример в уроке для справки!
Шпаргалка
Используйте атрибут style для применения CSS непосредственно к HTML-элементам:
<element style="property: value;"></element>Пример с несколькими свойствами:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Styling with CSS
4Основы работы с текстом
Цвет текстаСемейство шрифтовРазмер шрифтаНасыщенность шрифтаВыравнивание текстаОформление текстаПовторение: Задача №1Повторение: Задача №2
11Методы верстки
Блочные и строчные элементыОсновы позиционированияОтносительное позиционированиеАбсолютное позиционированиеФиксированное позиционированиеОсновы Z-IndexИтоговое испытание14Финальные испытания
Расположение элементовСписок фильмовСвадебное приглашениеВсплывающее уведомление