Css что это: CSS — что это такое? Для чего используется?

Что такое CSS, для чего нужны стили CSS

Оглавление

1. Зачем используется CSS
2. Развитие CSS
3. Структура языка
4. Селекторы
5. Блок объявлений
6. org/ListItem»> Подключение CSS

CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

Зачем используется CSS

Назначение CSS – отделять то, что задает внешний вид страницы, от ее содержания. Если документ создан только с использованием HTML, то в нем определяется не только каждый элемент, но и способ его отображения (цвет, шрифт, положение блока и т. д.). Если же подключены каскадные таблицы стилей, то HTML описывает только очередность объектов. А за все их свойства отвечает CSS. В HTML достаточно прописывать класс, не перечисляя все стили каждый раз.

Такая технология:

• обеспечивает относительно простую и быструю разработку, потому что однажды созданное оформление можно применять ко многим страницам;
• повышает гибкость и удобство редактирования – достаточно внести правку в CSS, чтобы оформление изменилось везде;
• делает код более простым, снижая повторяемость элементов. Его проще читать программистам и поисковым ботам;
• ускоряет время загрузки, потому что CSS может кэшироваться при первом открытии, а в последующих считываются только структура и данные;
• увеличивает количество визуальных решений для представления содержимого;
• обеспечивает возможность легко применять к одному документу разные стили (например, создавать адаптированную версию для мобильных устройств или специальные стили для слабовидящих).

То есть каскадные таблицы служат не только для воплощения дизайна, но и кардинально меняют подход к сайтостроению, упрощая труд разработчиков и обеспечивая гибкость реализации. Вот для чего нужен CSS.

Развитие CSS

Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

Структура языка

CSS можно охарактеризовать простыми словами как набор правил, описывающих, как должен выглядеть элемент.

Правило состоит из селектора и блока объявлений.

css1.png

css1.png

Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег. Класс {свойство: значение;}». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор {свойство: значение;}». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

Блок объявлений

Блок объявлений состоит из пар «свойство: значение» (запись всегда черед двоеточие), размещенных в фигурных скобках. Записи заканчиваются точкой с запятой. CSS нечувствителен к табуляции, пробелам, регистру. Выбор способа записи (столбиком с отступами или просто в строчку) остается на усмотрение разработчика. Если для одного селектора прописаны разные значения для одного свойства, то приоритет отдается нижней записи.

Подключение CSS

CSS можно связать с HTML несколькими способами:

• внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
• добавить тег <style> с атрибутом type=»text/css»;
• подключить внешнюю таблицу стилей: <link rel=»stylesheet» href=»путь до style.css» type=»text/css»/>.

Третий способ является наиболее популярным и рекомендуемым, потому что позволяет в полной мере пользоваться преимуществами разделения формы и содержания, обеспечиваемого с помощью CSS.

что это и для чего нужны стили

CSS (Cascading Style Sheets) – это формальный технический язык, созданный для оптимизированного описания оформления документа, разработанного на базе языков разметки HTML, XHTML и XML. Исходную аббревиатуру можно перевести с английского как «каскадные таблицы стилей».

Язык CSS разработан, чтобы разграничивать то, что формирует визуальный вид страницы, и то, что выполняет исключительно функцию контента. Если документ сгенерирован на HTML, то в ее структуре одновременно определяется каждый элемент и способ его визуализации. Это дает возможность браузеру корректно демонстрировать цвета, шрифты и позиционирование элементов страницы. Если же дополнительно использовать CSS, то в HTML нужно будет только создать описание очередности расположения объектов. Все свойства, необходимые для правильного отображения, обозреватель получит от CSS. Следовательно, каскадные таблицы стилей позволяют просто прописывать общий класс, не дублируя его отдельно для каждой страницы. Эта технология выполняет следующие задачи:

• создает условия для быстрой и простой разработки, так как с помощью CSS можно создать единый формат оформления для базовых страниц, а не прописывать его многократно;
  

• улучшает гибкостью редактирования. Достаточно внести изменения в каскадные таблицы стилей, чтобы внешний вид необходимых страниц сразу изменился;

• оптимизирует программный код путем снижения объема дублируемых элементов. Он легче воспринимается разработчиками и ботами поисковых систем;

• увеличивает скорость загрузки страницы, так как CSS кешируется при первой сессии, а потом подгружается только структура и базовые данные;

• создает условия для простого применения разных визуальных стилей для созданного документа. К примеру, с помощью технологии можно легко внедрить на сайте версии страниц для людей с плохим зрением или разные варианты дизайна для мобильных и десктопных устройств.
  

Разработка технологии CSS кардинально изменила подход к сайтостроению, сделав процесс более гибким и простым. Именно поэтому почти все учебники для начинающих веб-разработчиков начинаются с изучения такого определения, как каскадные таблицы стилей.

Консорциум W3C еще в начале 90-х годов осознал необходимость создания технологии с функционалом CSS. Как результат, уже в 1996 году был одобрен стандарт CSS1, который позволяет задавать параметры цвета, шрифта, отступов и выравниваний. В 1998 году мир увидел второе поколение технологии, которая уже работала с блочной версткой, автоматически генерируемым содержанием, звуковыми таблицами, страничными носителями и указателями. Релиз CSS3 расширил возможности разработчиков, подарив им доступ к такому функционалу, как создание анимации, сглаживание теней и многое другое. На данный момент уже больше 10 лет ведется разработка пакета CSS4, но его самые интересные возможности официально не раскрываются.

Технологию можно определить как совокупность правил описания внешнего оформления документа. Каждое правило формируется из селектора и блока объявлений.

Как работает селектор. Этот элемент правила передает информацию о том, к какому блоку страницы применяются свойства стиля. В его качестве можно использовать любой тег, которому можно задать цвет, размер, позицию и другие параметры форматирования.

Как работает блок объявлений. Этот элемент каскадных таблиц стилей формируется из парной комбинации вида «свойство: значение». Прописывается блок обязательно с двоеточием и фигурными скобками. Технология CSS не отличается чувствительностью к пробелам и регистрам, что значительно упрощает работу разработчика. Специалист может самостоятельно выбрать формат записи: в строчку или в столбик с отступами. Если для одного селектора прописаны разные переменные свойства, то сначала будет применяться нижнее или последнее условие.

Каскадные таблицы стилей и HTML можно объединить следующими методами:

• с использованием атрибута style непосредственно внутри тега;
  

• интегрировать <style> с атрибутом type=»text/css»;

• подключить внешнюю таблицу с помощью строчки <link rel=»stylesheet» href=»директория style.css» type=»text/css»/>.
  

Последний способ считается предпочтительным, так как позволяет пользоваться всеми возможностями технологии.
Теперь вы знаете, что это – CSS и для чего нужен этот язык. Каждый, кто планирует развиваться в направлении веб-разработки, должен хорошо изучить эту технологию, так как она считается базовой.

Что такое CSS? — Изучите веб-разработку

• Обзор: Первые шаги
• Следующий

CSS (каскадные таблицы стилей) позволяет создавать великолепные веб-страницы, но как это работает внутри? В этой статье объясняется, что такое CSS, на простом примере синтаксиса, а также рассматриваются некоторые ключевые термины, касающиеся языка.

В модуле «Введение в HTML» мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы переносятся на новую строку и имеют пробелы между ними. Ссылки окрашены и подчеркнуты, чтобы отличить их от остального текста. То, что вы видите, — это стили браузера по умолчанию — очень простые стили — которые браузер применяет к HTML, чтобы убедиться, что страница будет в основном читабельной, даже если автор страницы не указал явный стиль.

Однако Интернет был бы скучным местом, если бы все веб-сайты выглядели так. Используя CSS, вы можете точно контролировать, как HTML-элементы выглядят в браузере, представляя свою разметку с использованием любого дизайна, который вам нравится.

Чтобы узнать больше о стилях браузера и стилях по умолчанию, посмотрите следующее видео:

Как мы упоминали ранее, CSS — это язык для указания того, как документы представляются пользователям — как они оформляются, размещаются и т. д.

A Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки — HTML является наиболее распространенным языком разметки, но вы также можете встретить другие языки разметки, такие как SVG или XML.

Представление документа пользователю означает преобразование его в форму, пригодную для использования вашей аудиторией. Браузеры, такие как Firefox, Chrome или Edge, предназначены для визуального представления документов, например, на экране компьютера, проекторе или принтере.

Примечание: Браузер иногда называют агентом пользователя, что в основном означает компьютерную программу, представляющую человека внутри компьютерной системы. Браузеры — это основной тип пользовательских агентов, о которых мы думаем, когда говорим о CSS, однако они не единственные. Доступны и другие пользовательские агенты, например те, которые преобразуют документы HTML и CSS в PDF-файлы для печати.

CSS можно использовать для очень простой стилизации текста документа — например, для изменения цвета и размера заголовков и ссылок. Его можно использовать для создания макета — например, превратить один столбец текста в макет с областью основного содержимого и боковой панелью для связанной информации. Его можно даже использовать для таких эффектов, как анимация. Взгляните на ссылки в этом абзаце для конкретных примеров.

CSS — это язык, основанный на правилах — вы определяете правила, указывая группы стилей, которые должны применяться к определенным элементам или группам элементов на вашей веб-странице.

Например, вы можете выбрать, чтобы основной заголовок на вашей странице отображался в виде большого красного текста. В следующем коде показано очень простое правило CSS, позволяющее реализовать описанный выше стиль:

 h2 {
  красный цвет;
  размер шрифта: 5em;
}
 

• В приведенном выше примере правило CSS открывается с помощью селектора. Этот выбирает элемент HTML, который мы собираемся стилизовать. В данном случае мы стилизуем заголовки первого уровня (h2).
• Затем у нас есть набор фигурных скобок { } .
• Внутри фигурных скобок будет одно или несколько объявлений , которые принимают форму пар свойств и значений . Мы указываем свойство ( цвет в приведенном выше примере) перед двоеточием, и мы указываем значение свойства после двоеточия ( красный в этом примере).
• Этот пример содержит два объявления: одно для color и другое для font-size . Каждая пара определяет свойство элемента(ов), которые мы выбираем (в данном случае h2), а затем значение, которое мы хотели бы присвоить этому свойству.

Свойства CSS имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере у нас есть свойство color , которое может принимать различные значения цвета. У нас также есть свойство font-size . Это свойство может принимать различные единицы размера в качестве значения.

Таблица стилей CSS будет содержать множество таких правил, написанных одно за другим.

 ч2 {
  красный цвет;
  размер шрифта: 5em;
}
п {
  черный цвет;
}
 

Вы обнаружите, что некоторые значения вы узнаете быстро, тогда как другие вам придется искать. Страницы отдельных свойств на MDN дают вам быстрый способ поиска свойств и их значений, если вы забыли или хотите узнать, что еще вы можете использовать в качестве значения.

Примечание: Вы можете найти ссылки на все страницы свойств CSS (наряду с другими функциями CSS), перечисленные в справочнике MDN CSS. Кроме того, вы должны привыкнуть к поиску «mdn css-feature-name » в своей любимой поисковой системе всякий раз, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте ввести «mdn color» и «mdn font-size»!

Так как с помощью CSS можно стилизовать очень много вещей, язык разбит на модули . Вы увидите ссылки на эти модули по мере изучения MDN. Многие страницы документации организованы вокруг определенного модуля. Например, вы можете взглянуть на ссылку MDN на модуль «Фон и границы», чтобы узнать, какова его цель, а также свойства и функции, которые он содержит. В этом модуле вы также найдете ссылку на Спецификации , в которых определяется технология (см. также раздел ниже).

На данном этапе вам не нужно слишком беспокоиться о структуре CSS; однако это может упростить поиск информации, если, например, вы знаете, что определенное свойство, вероятно, будет найдено среди других подобных вещей и, следовательно, возможно, находится в той же спецификации.

В качестве конкретного примера давайте вернемся к модулю «Фон и границы» — вы можете подумать, что имеет смысл определить свойства background-color и border-color в этом модуле. И ты будешь прав.

Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями (или «спецификациями»), которые публикуются организациями по стандартизации (такими как W3C, WHATWG, ECMA или Khronos) и точно определить, как должны вести себя эти технологии.

CSS ничем не отличается — он разработан группой внутри W3C, которая называется рабочей группой CSS. Эта группа состоит из представителей производителей браузеров и других компаний, проявляющих интерес к CSS. Есть также другие люди, известные как приглашенные эксперты , которые действуют как независимые голоса; они не связаны с членской организацией.

Новые функции CSS разрабатываются или определяются Рабочей группой CSS — иногда потому, что конкретный браузер заинтересован в наличии некоторых возможностей, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама Рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все очень усердно работают над тем, чтобы никогда не менять что-либо таким образом, чтобы это сломало старые веб-сайты. Веб-сайт, созданный в 2000 году с использованием ограниченного CSS, доступного тогда, должен по-прежнему использоваться в браузере сегодня!

Как новичок в CSS, вы, вероятно, найдете слишком много спецификаций CSS — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понять CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим руководствам. Тем не менее, стоит знать, что эти спецификации существуют, и понимать взаимосвязь между используемым вами CSS, поддержкой браузера (см. ниже) и спецификациями.

После того, как функция CSS была указана, она будет полезна для нас при разработке веб-страниц только в том случае, если один или несколько браузеров реализовали эту функцию. Это означает, что код был написан, чтобы превратить инструкцию в нашем файле CSS во что-то, что можно вывести на экран. Мы рассмотрим этот процесс подробнее в уроке Как работает CSS. Необычно, чтобы все браузеры реализовывали функцию одновременно, поэтому обычно существует промежуток, когда вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине возможность проверки состояния реализации полезна.

Статус поддержки браузера отображается на каждой странице свойств CSS MDN в таблице под названием «Совместимость с браузером». Ознакомьтесь с информацией в этой таблице, чтобы проверить, можно ли использовать недвижимость на вашем веб-сайте. Например, см. таблицу совместимости браузеров для свойства CSS font-family .

В зависимости от ваших требований вы можете использовать таблицу совместимости браузеров, чтобы проверить, как это свойство поддерживается в различных браузерах, или проверить, поддерживает ли ваш конкретный браузер и версия, которую вы используете, или есть какие-либо предостережения, о которых вам следует знать. для используемого браузера и версии.

Вы дочитали статью до конца! Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к разделу «Начало работы с CSS», где вы сможете начать писать CSS самостоятельно.

• Обзор: Первые шаги
• Следующий

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 23 февраля 2023 г. участниками MDN.

Начало работы с CSS — обучение веб-разработке

• Предыдущий
• Обзор: первые шаги
• Следующий

В этой статье мы возьмем простой HTML-документ и применим к нему CSS, попутно изучая некоторые практические аспекты языка.

Предпосылки:	Базовая компьютерная грамотность, установлено базовое программное обеспечение, базовые знания работа с файлами и основы HTML (изучите Введение в HTML.)
Цель:	Чтобы понять основы связывания документа CSS с файлом HTML и уметь выполнять простое форматирование текста с помощью CSS.

Отправной точкой является HTML-документ. Вы можете скопировать приведенный ниже код, если хотите работать на своем компьютере. Сохраните код ниже как index.html в папку на вашем компьютере.

 

  <голова>
    <метакодировка="utf-8" />
    
  
  <тело>
     
Я заголовок первого уровня
 
    <р>
      Это абзац текста. В тексте есть
      элемент span, а также
      ссылка.
    

    <р>
      Это второй абзац. Он содержит элемент выделенный.
    

    <ул>
      
Элемент один
      
Второй пункт
      
Элемент три
    
  

 

Примечание: Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, не беспокойтесь — ниже представлены живые редакторы кода, которые позволят вам написать пример кода прямо здесь, на странице. .

Самое первое, что нам нужно сделать, это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к HTML-документу, с которыми вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее распространенный и полезный способ сделать это — привязать CSS к заголовку вашего документа.

Создайте файл в той же папке, что и HTML-документ, и сохраните его как styles.css . Расширение .css показывает, что это файл CSS.

Чтобы связать styles.css с index.html , добавьте следующую строку где-нибудь внутри HTML-документа:

Этот элемент сообщает браузеру, что у нас есть таблица стилей, используя rel и расположение этой таблицы стилей в качестве значения атрибута href . Вы можете проверить, работает ли CSS, добавив правило в styles. css . С помощью редактора кода добавьте в файл CSS следующее:

 h2 {
  красный цвет;
}
 

Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдет, поздравляем — вы успешно применили CSS к HTML-документу. Если этого не произошло, внимательно проверьте, все ли вы ввели правильно.

Вы можете продолжить работу с styles.css локально или использовать наш интерактивный редактор ниже, чтобы продолжить работу с этим руководством. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, точно так же, как мы сделали с нашим документом выше.

Сделав заголовок красным, мы уже продемонстрировали, что можем ориентироваться и стилизовать элемент HTML. Мы делаем это, ориентируясь на селектор элемента — это селектор, который напрямую соответствует имени элемента HTML. Чтобы настроить таргетинг на все абзацы в документе, вы должны использовать селектор стр . Чтобы сделать все абзацы зелеными, введите:

 p {
  цвет: зеленый;
}
 

Вы можете указать несколько селекторов одновременно, разделив селекторы запятой. Если вы хотите, чтобы все абзацы и все элементы списка были зелеными, ваше правило будет выглядеть так:

 p,
ли {
  цвет: зеленый;
}
 

Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в локальном документе CSS.

Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем видеть, как браузер делает HTML читаемым, добавляя некоторые стили по умолчанию. Заголовки большие и жирные, а в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые они по умолчанию применяют ко всем страницам; без них весь текст слился бы в кучу, и нам пришлось бы стилизовать все с нуля. Все современные браузеры отображают содержимое HTML по умолчанию практически одинаково.

Однако вам часто нужно что-то другое, чем выбор, сделанный браузером. Это можно сделать, выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является

, неупорядоченный список. Он имеет маркеры списка. Если вам не нужны эти пули, вы можете удалить их следующим образом:

 li {
  тип стиля списка: нет;
}
 

Попробуйте добавить это в свой CSS прямо сейчас.

Свойство list-style-type — это хорошее свойство, которое можно посмотреть в MDN, чтобы узнать, какие значения поддерживаются. Взгляните на страницу для list-style-type , и вы найдете интерактивный пример в верхней части страницы, чтобы попробовать различные значения, затем все допустимые значения подробно описаны ниже на странице.

Глядя на эту страницу, вы обнаружите, что в дополнение к удалению маркеров списка вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение в квадрате .

До сих пор мы стилизовали элементы на основе их имен HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. Чтобы выбрать подмножество элементов, не изменяя другие, вы можете добавить класс к своему HTML-элементу и настроить таргетинг на этот класс в своем CSS.

1. В документе HTML добавьте атрибут класса ко второму элементу списка. Теперь ваш список будет выглядеть так:

    <ул>
     
   Первый пункт
     
   Второй пункт
     
   Элемент три
   

 .специальный {
  оранжевый цвет;
  вес шрифта: полужирный;
}
 

Вы можете применить класс special к любому элементу на странице, который должен выглядеть так же, как этот элемент списка. Например, вы можете захотеть, чтобы в абзаце также были оранжевыми и полужирными. Попробуйте добавить к нему class of special , затем перезагрузите свою страницу и посмотрите, что произойдет.

Иногда вы увидите правила с селектором, который перечисляет селектор элемента HTML вместе с классом:

 ли.специальный {
  оранжевый цвет;
  вес шрифта: полужирный;
}
 

Этот синтаксис означает «нацелить любой элемент li , имеющий класс special». Если бы вы сделали это, вы больше не смогли бы применить класс к или другому элементу, добавив к нему класс; вам нужно будет добавить этот элемент в список селекторов:

 li.special,
диапазон.специальный {
  оранжевый цвет;
  вес шрифта: полужирный;
}
 

Как вы можете себе представить, некоторые классы могут применяться ко многим элементам, и вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно взять на себя этот стиль. Поэтому иногда лучше обойти элемент и обратиться к классу, если только вы не знаете, что хотите создать какие-то специальные правила только для одного элемента и, возможно, хотите убедиться, что они не применяются к другим вещам.

Бывают случаи, когда вам нужно, чтобы что-то выглядело по-разному в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут вам помочь, но сейчас мы рассмотрим только пару. В нашем документе есть два элемента — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только элемент , вложенный в элемент

 li em {
  цвет: ребеккапурпл;
}
 

 h2 + p {
  размер шрифта: 200%;
}
 

 а: ссылка {
  цвет: розовый;
}
а: посетил {
  цвет: зеленый;
}
 

 a:hover {
  текстовое оформление: нет;
}
 

 /* выбирает любой , который находится внутри 
, который находится внутри 
 */
артикль p span {
}
/* выбирает любой 
, который идет сразу после 
, который идет сразу после 
 */
h2 + ул + р {
}
 

 body h2 + p .special {
  цвет: желтый;
  цвет фона: черный;
  отступ: 5px;
}