Вводная статья про CSS, из которой Вы познакомитесь с общими понятиями, что такое CSS, для чего он нужен. Кратко познакомимся с его синтаксисом и возможностями. Начнем с определения
1. Определение CSS
CSS (от англ. "Cascading Style Sheets", каскадные таблицы стилей) - список стилей для сайта на html
Что такое стиль? Грубо говоря, стиль это то, как выглядит элемент на сайте. Например, любой текст можно написать размером 10 пикселей, а можно 14 пикселей. Можно написать черным цветом, можно синим. Можно подчеркнуть/наклонить/зачеркнуть и т.п. Все, что связано с форматированим текста делается через CSS.
Но это лишь малая часть из возможностей. За всю визуализацию всех тегов html отвечает CSS. Даже за динамические изменения: выпадающие меню, подсвечивания ссылок при наведении.
Список всех стилей на языке вебмастеров часто называют "таблица стилей CSS".
2. Цели и задачи CSS
- Сделать сайт более красивым (в плане дизайна), сделать дружелюбный интерфейс, да и просто, чтобы сайты хоть как-то отличались друг от друга
- Отделить код html от кода описания стилей и дизайна
3. Синтаксис CSS (селекторы)
Каждое свойство и стиль описывается через "Селекторы". Его синтаксис следующий
Селектор { атрибут : значение ; }
Селектор - это может быть название стиля или тега. В фигурных скобках описываются конкретные правила. Описание происходит всегда по одному стандарту: "название атрибута: значение". Каждое правило должно заканчиваться точкой с запятой.
Например
.название_стиля { атрибут1 : значения1; атрибут2 : значения2; ... };
Существует множество вариантов задания стилей CSS. Давайте разберем самые популярные на примерах.
/*Задание общего стиля */ .global_style { font-size : 12px ; color : red ; } /**/ font.style1 { font-size : 10px ; color : blue ; } /*Задание общего стиля только для тега font */ #global_style2 { font-size : 14px ; color : red ; } h1 { font-size : 19px ; }
Стиль global_style можно использовать для всех тегов в качестве класса. Например,
Стиль style1 можно использовать только для тега , поскольку в определении было указано font.style1 .
Третий вариант задания через решетку (#). Как и в первом случае он определен для всех элементов, но задавать его нужно не через class, а через атрибут id:
В последнем варианте мы просто указали название тега
и прописали ему стиль. Это значит, что теперь все теги
будут наследовать значение этого стиля.
4. Как и где задавать стили CSS
5. В чем плюсы использования CSS
- Легко менять дизайн. Достаточно поменять стиль лишь в одном месте и он изменится на каждой странице сайта
- Это единственный способ изменять дизайн на сайте
- Простой синтаксис языка
6. Проблемы CSS с браузерами
4. Как и где задавать стили CSS
5. В чем плюсы использования CSS
- Легко менять дизайн. Достаточно поменять стиль лишь в одном месте и он изменится на каждой странице сайта
- Это единственный способ изменять дизайн на сайте
- Простой синтаксис языка
6. Проблемы CSS с браузерами
Старые браузеры поддерживают не все возможности CSS. С этим возникают проблемы отображения. Например, эффект, который был задуман для лучшего восприятия контента, может привести к обратному эффекту. Если какое-то свойство не поддерживается, то есть риски наложения блоков, текстов друг на друга и т.п.
Частично эту проблему решают "префиксы". По сути это просто слово стоящее перед аргументом в таблице стилей. Для каждого браузера существует свой префикс.
- -moz- для браузера Firefox
- -webkit- для браузеров Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
- -ms- для браузера Internet Explorer
- -o- для браузера Opera
7. Ответы на часто задаваемы вопросы
7.1. Что такое CSS3
В последнее время часто можно встретить понятие CSS3. По сути это все тот же CSS, но с набором новых аргументов, которые дают дополнительные возможности в плане различных эффектов. Например, свечение текста. Многие браузеры не поддерживают такие свойства, поэтому рекомендуется использовать такие эффекты в минимальных количествах.
7.2. В чём разница между CSS и HTML?
HTML - это каркас вашей страницы (это ссылки, картинки, контент). А в CSS определяется то, как все это будет отображаться для пользователя. Так что HTML и CSS это принципиально разные вещи, но они связаны между собой. Правилом хорошего тона является разделение кодов между собой, чтобы не смешивать их на одной странице.
Как вы помните HTML - это язык разметки, но его создатели так хотели улучшить жизнь сайтостроителей, что добавляли в него
элементы и параметры, отвечающие за внешний вид страницы: теги
,
,
,
Но на какой-то момент код страниц стал таким громоздким и нечитабельным, что стало ясно - этот путь ведет "в никуда". Тогда было принято решение разделить разметку страницы (HTML) и ее визуальное оформление (CSS). В совокупности HTML и CSS позволяют творить чудеса и в этом вы скоро убедитесь.
Что такое CSS
CSS (Cascading Style Sheets) - каскадные таблицы стилей.Стиль
- набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня
(теги
) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой
странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто
параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.
Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...). Набор стилей всех элементов называют таблицей стилей .
Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование , которое определяет приоритет того или иного стиля.
Преимущества CSS
- CSS позволяет значительно сократить размер кода и сделать его читабельным.
- CSS позволяет задавать такие параметры, которые нельзя задать только языком HTML. Например, убрать подчеркивание у ссылок.
- CSS позволяет легко изменять внешний вид страниц. Представьте, вы сделали сайт из 50 страниц, на которых все заголовки синего цвета. Через какое-то время, вы захотели поменять синий цвет на зеленый. Вам придется пройтись по всем 50 страницам и поменять цвет в соответствующем атрибуте. С CSS вам придется сделать это лишь один раз, в таблице стилей.
- С CSS связана так называемая блочная верстка сайта.
Здравствуйте, дорогие читатели блога! Что-то давно я ничего не писал в рубрику о создании сайта. Так вот, в этой статье я расскажу о том, что же такое каскадные таблицы стилей и зачем они вообще нужны . Для начала советую прочесть предыдущие материалы из этой рубрики — и .
Итак, CSS (Cascading Style Sheets) — это язык описания внешнего вида документа, написанного с помощью языка гипертекстовой разметки (HTML). Сегодня CSS используется практически на всех сайтах. Сам язык был разработан Консорциумом Всемирной паутины (о нем можете прочесть статье про теги) и опубликован в конце 1996 года.
Целью создания CSS было разделение описания логической структуры документа (сейчас производится с помощью HTML) от описания его внешнего вида (сейчас производится с помощью CSS). Дело в том, что с развитием компьютерных технологий и интернета, люди старались сделать сайты более функциональными и яркими. Но все параметры внешнего вида представлялись в html тегах прямо в веб-документе.
Например, нам требуется изменить цвет букв в какой-либо части документа. Для этого можно воспользоваться тегом font и атрибутом color. Вот так будет выглядеть текст , которую требуется перекрасить, в html коде:
текст
Вроде и коротко, и не загрязняет код. Но если нам требуется изменить текст как-нибудь еще. Например, изменить и увеличить шрифт. Допустим вот так: пример . Вот так этот пример будет выглядеть в коде:
пример
Код становится больше. А если таких текстов на странице много? И у них есть еще какие-нибудь свойства? Если писать текст каждый раз посредством html тегов, то страница будет выглядеть как минимум не красиво. Вот для этих целей и создали язык CSS .
Помимо того, что CSS значительно упрощает форматирование документа, он еще и код загрязняет меньше и обладает большими возможностями, нежели те же HTML теги. С помощью каскадных таблиц стилей вы сможете изменить цвет документа, настроить его размер, тип, установить фон и многое другое. Именно CSS лежит в основе блочной верстки (построение сайта путем
Правила написания css стилей
А начнем мы с того, что создадим у себя на компьютере файл с расширением.html (советую кинуть его в отдельную папку). Добавим в него какой-нибудь текст. Добавим , заголовок и абзацы. Вот что у нас получилось:
Простой невзрачный текст. В коде получается следующее:
Стандартная страничка в интернете. Но надо ее как-нибудь украсить. Можно, конечно, добавить кучу тегов, но код будет выглядеть довольно мрачно. Мы поступим иначе. В той же папке создайте файл с расширением css, пускай это будет style.css. А теперь немного отвлечемся и я расскажу вам о правилах написания данного файла.
Как уже было сказано ранее, css — язык стилевой разметки, следовательно — у него есть свой синтаксис и особенности. Вообще, весь язык можно разделить на 2 пункта:
- Правила — как должен выглядеть элемент в браузере (в фигурных скобках).
- Селекторы — какой элемент должен так выглядеть (перед фигурной скобкой).
Вот небольшой поясняющий рисунок:
Кстати, рекомендую прочитать статью про . Их не так много, а пользоваться вы будете максимум половиной от этого количества. Если применить эти стили к нашему документу (сделаем чуть позже), то получится, что весь текст в тегах абзаца будет зеленым курсивом нормальной толщины.
Теперь немного о правилах написания правил (тавтология получается). Слово перед двоеточием называется свойством, а после — значением свойства.
- Первое правило — значение всегда отделяется от свойства двоеточием.
- Второе правило — правила всегда разделяются точкой с запятой
Как видите, особо сложного здесь ничего нет, главное не запутаться. Кстати, пробелы роли не играют и то, что написано на скрине выше можно записать в одну строчку.
Как применить css свойства - подключение к html документу
А сейчас разберемся, как можно применить данные свойства к нашему документу. Существует три способа:
- Прописывание свойств прямо в теге — используется атрибут style, который применим к любому html тегу. В атрибуте и прописываем все стили, которые хотим использовать.
- Прописывание стилей в head — в шапке сайта (теги head) прописываем все стили, которые будем использовать, с помощью тега style.
- Подключение отдельного файла — сначала создаем файл со всеми стилями, затем подключаем его к документу с помощью специальных тегов в head.
Итак, реализация первого способа выглядит следующим образом: берем какой-нибудь тег, например тег абзаца, приписываем ему атрибут style, а в значении указываем все необходимые параметры стилей. Вот пример того, как это реализуется на практике:
Классическое оригами
Классическое оригами
Согласитесь, получается довольно громоздко, да и писать в каждом теге подобное не очень удобно, особенно если вам нужно несколько одинаковых элементов.
Второй способ подразумевает нахождение всех стилей в шапке сайта. Для этого нам потребуется тег style. Открываем наш файл и вносим вот такие изменения:
Основные правила тега style — находится между открывающим и закрывающим тегом head, внутри него прописываются все необходимые свойства. Также, для того чтобы браузер не принял стили за html код, необходимо прописать атрибут type со значением text/css. А вот как теперь выглядит страница:
Теперь во всех абзацах (тег
) текст стал зеленым, используется шрифт семейства cursive, а заголовок стал красным. Тег style мы добавили только в шапку сайта, основная часть страницы осталась без изменений . Очень удобный способ, но не лучший.
Самым популярным и оптимальным вариантом будет подключение отдельного стилевого файла. Сделать это можно двумя способами:
Большинство веб-мастеров используют первый вариант подключения файла. Преимущество подключаемого файла стилей, по сравнению с остальными, очевидно — ускорение загрузки сайта и уменьшение нагрузки на хостинг . Ведь браузеру будет достаточно лишь раз загрузить файл стилей, вместо постоянного чтения атрибута style. Да и код менее захламлен получается.
Обратите внимание на то, что и при подключении файла, и написании в тегах, и в шапке сайта правила написания стилей остается неизменным — свойство:значение; . Правда, тегах не нужно писать селектора, но это и так понятно.
На этом пока остановимся — базовые знания получили, Советую файлы не удалять, мы их еще будем использовать в уроках и не один раз.!
CSS расшифровывается, как «каскадные таблицы стилей» (от англ. Cascading Style Sheets). CSS представляет собой совокупность параметров, с помощью которых отображается тот или иной элемент на веб-странице. Эти параметры могут указываться, как в отдельном файле, так и быть прописаны непосредственно в HTML-коде страницы. Например, на нашей веб странице могут быть такие элементы: заголовок статьи, абзацы, цитаты, сноски, картинки, видео ролики, ссылки. Можно задать конкретный стиль отображения — размер, цвет, толщину рамок и др.
При работе с сайтом рекомендуется использовать именно отдельный файл со стилями, а не внедрять код со стилевыми настройками в отдельные страницы. Это заметно сократит время — когда знаешь место нахождения таблицы стилей, всегда можно оперативно найти конкретный стиль и отредактировать. Файл стилей имеет расширение .css , название у него, как правило, style.css .
Подключение CSS файла
Для подключения CSS файла существует несколько способов. Мы расскажем о двух способах, которые наиболее часто используются при создании сайтов:
1. Связывание. Этот способ используется когда необходимо задать стили для всех страниц сайта в одном файле. Данный способ часто используется при создании сайта. Чтобы подключить таблицу стилей используется команда , которую необходимо разместить в теле тега
.Первые два свойства указывают браузеру, что на сайте используется CSS, затем указывается адрес файла со стилями.
2. Встраивание в теги документа. При этом способе стиль для конкретного элемента страницы задается непосредственно в HTML коде. Например:
Здесь мы прописали стили соответственно для контейнеров
Приведем пример таблицы стилей — создадим файл style.css и пропишем стили:
body { font-family: Arial, Verdana, Sans-serif; /* Семейство шрифтов */ font-size: 12pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #000000; /* Цвет основного текста */ } h1 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ }
Здесь мы задали стили для тела страницы
и для заголовка. Также можно задать конкретные стили для любых других элементов страницы веб-сайта.
Теперь подключим нашу таблицу стилей к сайту:
Подключение CSS к сайту Привет, Мир!
Это моя первая страница со стилями CSS
Таким образом, мы разобрались, что такое CSS, зачем данная технология используется, научились подключать стили к сайту. Данный урок является, своего рода, введением в каскадные таблицы стилей. В других уроках мы будем говорить о технологии CSS более детально.
Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.
CSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.
CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.
Некоторые стили поддерживаются не всеми браузерами. Однако можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться.
Возможно, Вам понадобятся также:
По методам добавления стилей в документ различают три вида стилей.
Внутренние стили
Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.
Пример
Абзац с текстом синего цвета
РЕЗУЛЬТАТ:
Абзац с текстом синего цвета
Абзац с текстом красного цвета
Не стоит использовать внутренние стили слишком часто, так как тогда Web-документ оказывается перегружен кодом и его внешний вид трудно изменить.
Глобальные стили
Глобальные стили CSS располагаются в контейнере , расположенном в свою очередь в контейнере ... .
Атрибут type="text/css" , ранее обязательный для тега .........
Серый цвет текста во всех абзацах Web-страницы
РЕЗУЛЬТАТ:
Серый цвет текста во всех абзацах Web-страницы
Серый цвет текста во всех абзацах Web-страницы
Внешние (связанные) стили
Внешние (связанные) стили определяются в отдельном файле с расширением css . Внешние стили позволяют всем страницам сайта выглядеть единообразно.
Для связи с файлом, в котором описаны стили, используется тег , расположенный в контейнере ... .
В этом теге должны быть заданы два атрибута: rel="stylesheet" и href , определяющиЙ адрес файла стилей.
Пример
......... ......... .........Подключение стилей
Правило подключения глобальных и внешних стилей состоит из селектора и объявлений стиля .
Селектор, расположенный в левой части правила, определяет элемент (элементы), для которых установлено правило. Далее, в фигурных скобках перечисляются объявления стиля, разделенные точкой с запятой. Например:
P { text-indent: 30px; font-size: 14px; color: #666; }
Объявление стиля – это пара свойство CSS: значение CSS .
Например: color: red
При внутреннем подключении стиля правило CSS, которое является значением атрибута style , состоит из объявлений стиля, разделенных точкой с запятой. Например:
Селекторы CSS
| Селектор | Описание | Подробнее |
|---|---|---|
| * | Любой элемент | |
| E | Элемент, определенный тегом E | |
| E#myid | Элемент E с идентификатором "myid" | |
| E.myclass | Элемент E класса "myclass" | |
| E | Селектор существования атрибута | |
| E | Селектор равенства атрибута | |
| E | Селектор атрибута со списком значений | Селекторы атрибутов |
| E | Селектор префикса атрибута | |
| E | Селектор суффикса атрибута | |
| E | Селектор подстроки атрибута | |
| E:link | Элемент E – еще не посещенная пользователем ссылка | Динамические псевдоклассы |
| E:visited | Элемент E – уже посещенная пользователем ссылка | Динамические псевдоклассы |
| E:hover | Элемент E при наведении на него указателя мышки | Динамические псевдоклассы |
| E:active | Элемент E, активированный пользователем | Динамические псевдоклассы |
| E:focus | Элемент E в фокусе | Динамические псевдоклассы |
| E:target | Элемент E, который является целью ссылки | Целевой псевдокласс |
| E:lang | Элемент E, написанный на указанном языке | Псевдокласс языка |
| E:enabled | Элемент E – доступный элемент формы | Псевдоклассы состояний |
| E:disabled | Элемент E – недоступный элемент формы | Псевдоклассы состояний |
| E:checked | Элемент E – включенный флажок или переключатель | Псевдоклассы состояний |
| E:indeterminate | Элемент E – неопределенный флажок или переключатель | Псевдоклассы состояний |
| E:root | Элемент E, корень документа | Структурные псевдоклассы |
| E:nth-child(n) | Элемент E, n-й ребенок родительского элемента | Структурные псевдоклассы |
| E:nth-last-child(n) | Элемент E, n-й ребенок родительского элемента, считая с конца | Структурные псевдоклассы |
| E:nth-of-type(n) | n-й элемент типа E | Структурные псевдоклассы |
| E:nth-last-of-type(n) | n-й элемент типа E, считая с конца | Структурные псевдоклассы |
| E:first-child | Элемент E, первый дочерний элемент родителя | Структурные псевдоклассы |
| E:last-child | Элемент E, последний дочерний элемент родителя | Структурные псевдоклассы |
| E:first-of-type | Первый элемент типа E | Структурные псевдоклассы |
| E:last-of-type | Последний элемент типа E | Структурные псевдоклассы |
| E:only-child | Единственный у родителя дочерний элемент | Структурные псевдоклассы |
| E:only-of-type | Единственный у родителя элемент типа E | Структурные псевдоклассы |
| E:empty | Элемент E, не содержащий дочерних элементов | Структурные псевдоклассы |
| E:not(X) | Элемент E, который не соответствует простому селектору X | Псевдокласс отрицания |
| E::first-line | Первая строка элемента E | Псевдоэлементы |
| E::first-letter | Первая буква элемента E | Псевдоэлементы |
| E::before | Содержимое до элемента E | Псевдоэлементы |
| E::after | Содержимое после элемента E | Псевдоэлементы |
| E::selection | Выделение в элементе E | Псевдоэлементы |
| E F | Элемент F, который находится внутри элемента E | |
| E > F | Элемент F, который находится непосредственно внутри элемента E | |
| E + F | Элемент F, который следует сразу после элемента E | |
| E ~ F | Элемент F, который следует после элемента E |
Универсальный селектор
Универсальный селектор соответствует любому элементу html-документа.
Для обозначения универсального селектора применяется символ "звёздочка" (*).
Его используют, если надо установить одинаковый стиль для всех элементов Web-страницы. Например:
* {
margin: 0;
padding: 0;
}
В некоторых случаях символ "звёздочка" (*) может быть опущен:
*.myclass
и .myclass
эквиваленты,
*#myid
и #myid
эквивалентны
Селекторы тегов
В качестве селектора может выступать любой html-тег, для которого определяются правила стилевого оформления. Например:
H1 {color: red; text-align: center;}
Если несколько элементов будут иметь общий стиль, то соответствующие им селекторы можно перечислить в таблице стилей через запятую. Например:
H1, h2, h3, h4 {color: red; text-align: center;}
Селекторы идентификаторов
HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id . Например:
Значение идентификатора должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).
Значения всех атрибутов id в html-документе обязаны быть уникальными. Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным.
В CSS-коде селектор идентификатора обозначается знаком "решетка" (#). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" (#) обычно опускают:
Div#a1 {color: green;}
аналогично
#a1 {color: green;}
Желательно использовать id не для стилевого оформления элемента, а для обращения к нему через скрипты или перехода по ссылке.
Селекторы классов
Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например:
Имя класса должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).
Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе.
В CSS-коде селектор идентификатора обозначается знаком "точка" (.). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" (.) опускают:
I.green {color: #008000;} b.red {color: #f00;} .blue {color: #00f;}
Для тега можно одновременно указать несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяются стили каждого из указанных классов.
Если некоторые из этих классов содержат одинаковые свойства стиля, но с разными значениями, то будут применены значения стиля класса, который в CSS-коде расположен ниже.
Селекторы атрибутов
Существует множество селекторов атрибутов, с помощью которых можно задать стилевое оформление для тега в зависимости от его атрибутов.
h1 {color: #800000;} /* элемент h1, у которого есть атрибут title */
input { border: 1px solid #ссс; padding: 4px 6px; width: 300px; }
a { text-decoration: none; border-bottom: 1px solid #06c; color: #06c; }
span { display: inline-block; background-image: url("/img/icon_sprite.png"); }
a, a { background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; }
{ display: block; float: left; width: 280px; }
Между именем тега и квадратной скобкой ([) не должно быть пробела!
Универсальный селектор, селекторы тегов, идентификаторов, классов и атрибутов, а также псевдоклассы относятся к простым селекторам.
Простые селекторы можно связать в определенные последовательности на основе отношений элементов в дереве Web-документа. Такие конструкции называют комбинаторами.
Контекстные селекторы
Один из самых часто используемых комбираторов – контекстный селектор.
Контекстные селекторы или селекторы потомков определяют несколько элементов, один из которых находится внутри другого. В контекстном селекторе простые селекторы разделены пробелом.
Пример
- Пушкин А.С.
- «Выстрел»
- «Метель»
- «Дубровский»
- Гоголь Н.В.
- «Ревизор»
- «Тарас Бульба»
- «Мертвые души»
- Толстой Л.Н.
- «Война и мир»
- «Анна Каренина»
- «Воскресение»
РЕЗУЛЬТАТ:
- Пушкин А.С.
- «Выстрел»
- «Метель»
- «Дубровский»
- Гоголь Н.В.
- «Ревизор»
- «Тарас Бульба»
- «Мертвые души»
- Толстой Л.Н.
- «Война и мир»
- «Анна Каренина»
- «Воскресение»
Дочерние селекторы
Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" (>).
Пример
- Пушкин А.С.
- «Выстрел»
- «Метель»
- «Дубровский»
- Гоголь Н.В.
- «Ревизор»
- «Тарас Бульба»
- «Мертвые души»
- Толстой Л.Н.
- «Война и мир»
- «Анна Каренина»
- «Воскресение»
РЕЗУЛЬТАТ:
- Пушкин А.С.
- «Выстрел»
- «Метель»
- «Дубровский»
- Гоголь Н.В.
- «Ревизор»
- «Тарас Бульба»
- «Мертвые души»
- Толстой Л.Н.
- «Война и мир»
- «Анна Каренина»
- «Воскресение»
Соседние селекторы
Соседний селектор определяет знак "плюс" (+), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами.
Пример
РЕФЛЕКСОТЕРАПИЯ
РЕЗУЛЬТАТ:
РЕФЛЕКСОТЕРАПИЯ
Смежные селекторы
Смежный селектор определяет знак "тильда" (~), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым (необязательно непосредственно).
Пример
РЕФЛЕКСОТЕРАПИЯ
"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов
Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.
РЕЗУЛЬТАТ:
РЕФЛЕКСОТЕРАПИЯ
"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов
Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.
.
