Вопрос Как покрасить часть текста в html/css
- Автор темы Point-
- Дата начала
Точно такой же ответ ты скрыл...
Но есть и другие способы поинтереснее
Но есть и другие способы поинтереснее
ну так... Селекторами работай
CSS Selectors Example
h2::after { content: " Hello "; color: red; }
Hello, World!
Основные типы селекторов CSS
Селекторы по тегу (элементу)
Выбирают все элементы указанного типа.
Пример: p { color: blue; } — применяет стиль ко всем элементам (параграфам).
Селекторы по классу
Выбирают элементы с определённым атрибутом class.
Пример: .button { background-color: red; } — применяет стиль ко всем элементам с классом button.
Классы обозначаются точкой (.) перед именем класса.
Селекторы по идентификатору (ID)
Выбирают элемент с определённым атрибутом id. ID должен быть уникальным для каждой страницы.
Пример: #header { font-size: 24px; } — применяет стиль к элементу с ID header.
Идентификаторы обозначаются символом решётки (#) перед именем ID.
Универсальные селекторы
Выбирают все элементы.
Пример: * { margin: 0; padding: 0; } — сбрасывает отступы и поля для всех элементов на странице.
Обозначаются звёздочкой (*).
Селекторы атрибутов
Выбирают элементы с определёнными атрибутами или значениями атрибутов.
Пример: input[type="text"] { border: 1px solid #000; } — применяет стиль ко всем текстовым полям ввода.
Обозначаются квадратными скобками ([]) вокруг атрибута.
Комбинированные селекторы
Групповые селекторы
Позволяют применять один и тот же стиль к нескольким селекторам.
Пример: h1, h2, h3 { color: green; } — применяет зелёный цвет ко всем заголовкам h1, h2 и h3.
Дочерние селекторы
Выбирают элементы, которые являются дочерними для другого элемента.
Пример: div > p { color: red; } — применяет красный цвет ко всем , которые являются непосредственными дочерними элементами .
Комбинированные селекторы (смежные)
Выбирают элементы, которые непосредственно следуют за указанным элементом.
Пример: h1 + p { margin-top: 0; } — применяет стиль к абзацам , которые следуют непосредственно за заголовком .
Потомковые селекторы
Выбирают элементы, которые являются потомками указанного элемента.
Пример: div p { color: blue; } — применяет синий цвет ко всем , которые являются потомками .
Псевдоклассы и псевдоэлементы
Псевдоклассы
Выбирают элементы на основе их состояния или их положения в DOM.
Пример: a:hover { color: red; } — применяет красный цвет к ссылкам при наведении курсора мыши.
Пример: li:first-child { font-weight: bold; } — применяет жирный шрифт к первому элементу списка.
Псевдоэлементы
Выбирают и стилизуют части элементов.
Пример: p::first-line { font-size: 20px; } — изменяет размер шрифта для первой строки каждого абзаца.
Пример: p::before { content: "Note: "; color: red; } — добавляет текст перед содержимым каждого абзаца.
CSS Selectors Example
h2::after { content: " Hello "; color: red; }
Hello, World!
Основные типы селекторов CSS
Селекторы по тегу (элементу)
Выбирают все элементы указанного типа.
Пример: p { color: blue; } — применяет стиль ко всем элементам (параграфам).
Селекторы по классу
Выбирают элементы с определённым атрибутом class.
Пример: .button { background-color: red; } — применяет стиль ко всем элементам с классом button.
Классы обозначаются точкой (.) перед именем класса.
Селекторы по идентификатору (ID)
Выбирают элемент с определённым атрибутом id. ID должен быть уникальным для каждой страницы.
Пример: #header { font-size: 24px; } — применяет стиль к элементу с ID header.
Идентификаторы обозначаются символом решётки (#) перед именем ID.
Универсальные селекторы
Выбирают все элементы.
Пример: * { margin: 0; padding: 0; } — сбрасывает отступы и поля для всех элементов на странице.
Обозначаются звёздочкой (*).
Селекторы атрибутов
Выбирают элементы с определёнными атрибутами или значениями атрибутов.
Пример: input[type="text"] { border: 1px solid #000; } — применяет стиль ко всем текстовым полям ввода.
Обозначаются квадратными скобками ([]) вокруг атрибута.
Комбинированные селекторы
Групповые селекторы
Позволяют применять один и тот же стиль к нескольким селекторам.
Пример: h1, h2, h3 { color: green; } — применяет зелёный цвет ко всем заголовкам h1, h2 и h3.
Дочерние селекторы
Выбирают элементы, которые являются дочерними для другого элемента.
Пример: div > p { color: red; } — применяет красный цвет ко всем , которые являются непосредственными дочерними элементами .
Комбинированные селекторы (смежные)
Выбирают элементы, которые непосредственно следуют за указанным элементом.
Пример: h1 + p { margin-top: 0; } — применяет стиль к абзацам , которые следуют непосредственно за заголовком .
Потомковые селекторы
Выбирают элементы, которые являются потомками указанного элемента.
Пример: div p { color: blue; } — применяет синий цвет ко всем , которые являются потомками .
Псевдоклассы и псевдоэлементы
Псевдоклассы
Выбирают элементы на основе их состояния или их положения в DOM.
Пример: a:hover { color: red; } — применяет красный цвет к ссылкам при наведении курсора мыши.
Пример: li:first-child { font-weight: bold; } — применяет жирный шрифт к первому элементу списка.
Псевдоэлементы
Выбирают и стилизуют части элементов.
Пример: p::first-line { font-size: 20px; } — изменяет размер шрифта для первой строки каждого абзаца.
Пример: p::before { content: "Note: "; color: red; } — добавляет текст перед содержимым каждого абзаца.