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

АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ

ABCDEFGHIJKLMNOPQRSTUVWXYZ0-9

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

Для чего используется CSS

По сути, таблица стилей – это файл, где описывается, как будет выглядеть каждый из элементов на странице. В HTML-документе, таким образом, остается только структура странички: сами блоки, их содержимое и расположение. Создать страницу и оформить ее можно и без использования таблиц, прописывая визуальные свойства каждого элемента в его описании. Но, если страниц сотни и тысячи, применять такой метод неудобно: при изменении оформления приходится менять множество документов, вдобавок это загромождает верстку. Поэтому использование CSS считается золотым стандартом оформления сайтов: так получилось благодаря гибкости и многообразию возможностей каскадных таблиц.

Преимущества CSS

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

Как развивалась технология

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

• CSS2. Стандарт расширил технические возможности, дал возможность работать с аудио и страничными носителями (например, при печати документов), включил в себя поддержку блочной структуры и генерируемого содержимого;
• CSS3. Еще более масштабное расширение, находится в разработке до сих пор, поддерживает сглаживание, градиенты, тени и анимацию, для этого не приходится использовать JavaScript;
• CSS4. Находится в разработке, новые модули пока доступны как черновики. Дополняют предыдущие версии новыми расширениями и значениями.

Синтаксис и структура

Файл CSS сводится к набору правил, описанных по определенному синтаксису. Правило состоит из селекторной части и блока объявлений: ими описываются всевозможные элементы страницы. Формат примерно таков: селектор { параметр: значение }.

Селекторы. Указывают, к каким элементам будут применяться те или иные параметры стиля. Пишутся в начале строки, по сути, являются названиями тегов, для которых справедливо правило.

• Можно использовать любой тег, написанный латиницей.
• Если вариантов стиля для одного типа элементов несколько, используются так называемые классы. У одного тега их может быть несколько (применяются все стили, что описаны в таблице). Запись в этом случае выглядит так: тег.Класс { параметр: значение }.
• Есть возможность видоизменить только один конкретный элемент. Это делается с помощью идентификаторов – уникальных имен, которые можно присвоить элементам. Идентификатор будет использоваться как селектор.
• Можно создавать правила, которые применяются к какому угодно тегу, если он входит в тот или иной класс. Строку нужно начать с .Класс без указания тега.

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

Как подключить стили CSS

Элементы CSS можно использовать внутри HTML-документа с помощью тега <style> и атрибута type=»text/css» или за счет атрибута style без указания селектора. Но более распространенный способ – выносить стили в отдельный файл и подключать с помощью такой строчки: <link href=»ссылка на таблицу» rel=»stylesheet»>. Значение аргумента rel показывает, что это CSS-стили.

Другие термины на букву «C»

CAPTCHACMSCookieCopylancerCPACPCCPLCPMCPOCPSCPVCRMCS YazzleCTR, CTB, CTI, VTR

Все термины SEO-Википедии

Теги термина

Находи клиентов. Быстрее!

Работаем по будням с 9:30 до 18:30. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 10:30.

Приложи файл или ТЗ

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

Работаем по будням с 9:30 до 18:30. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 10:30.

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

наверх

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

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

Задачи CSS

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

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

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

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

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

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

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

Путь развития технологии

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

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

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

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

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

Интеграция 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 {
  цвет: ребеккапурпл;
}
 

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

Что-то еще, что вы могли бы попробовать, — это стиль абзаца, когда он идет сразу после заголовка на том же уровне иерархии в HTML. Для этого поставьте + ( соседний родственный комбинатор ) между селекторами.

Попробуйте также добавить это правило в свою таблицу стилей:

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

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

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

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

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

Вы можете изменить вид ссылки, когда пользователь наводит на нее курсор, например, удалив подчеркивание, что достигается следующим правилом:

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

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

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

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

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

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

Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Например:

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

Вы также можете комбинировать несколько типов вместе. Попробуйте добавить в код следующее:

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

Это стилизует любой элемент с классом special , который находится внутри

, который идет сразу после

, который находится внутри . Фу!

В исходном HTML-коде, который мы предоставили, единственный элемент со стилем — <диапазон> .

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

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

В следующем уроке мы рассмотрим структуру CSS.

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

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

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

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

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

This entry was posted in Популярное