Ближайшие статьи этого учебника будут посвящены глубокому изучению селекторов, благодаря которым вы научитесь выбирать совершенно любой элемент, размещенный в HTML документе.
Основная функция селекторов заключается в том, чтобы контролировать дизайн веб страниц, выбирая элемент, или элементы по определенным критериям и стилизуя их с помощью CSS свойств, которые вы указываете в блоке объявлений (описаний).
Селектор типа
Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (
Результат нашего примера:
Рис. 3б Пример использования селектора типа.
Как вы могли заметить, селектор типа позволяет стилизовать сразу все элементы подобного типа, но что делать если нам необходимо стилизовать какой-то однотипный элемет отлично от других? В этом случае селектор типа нам уже не подойдет и нам придется использовать селектор класса.
Селектор класса
Прошу от Вас максимального внимания, так как селектор класса является одним из самых распространенных и востребованных селекторов CSS, который мы будем постоянно использовать в дальнейшем изучении CSS.
И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:
После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:
Теперь соберем это в одном примере и посмотрим результат:
Результат нашего примера:
Рис. 5 Использование селектора класса.
Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:
Результат нашего примера:
Рис. 6 Пример выделения одного слова с использованием селектора класса.
Обращаю Ваше внимание, что вы можете использовать селекторы класса напрямую к HTML элементам, используя следующий синтаксис:
ID селекторы
Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором. Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:
После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут id со значением нашего идентификатора, но уже без решетки:
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:
Теперь соберем это в одном примере и посмотрим результат:
Результат нашего примера:
Рис. 7а Пример использования id селектора.
В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript.
Групповые селекторы
В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа, селекторы класса, так и рассмотренные нами id селекторы. При перечислении любых селекторов (даже, которые мы будем рассматривать далее в учебнике) необходимо обязательно разделять их запятой, позднее вы поймете почему.
Первым групповым селектором мы указываем, что заголовки
Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.
Рассмотрим следующий пример:
В этом примере мы использовали три групповых селектора:
Результат нашего примера:
Рис. 7б Пример использования групповых селекторов.
Универсальный селектор
Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор).
Давайте рассмотрим пример использования:
В этом примере с использованием универсального селектора мы указали, что все элементы на странице получат определенный цвет текста и будут иметь курсивное начертание шрифта.
Результат нашего примера:
Рис. 7в Пример использования универсального селектора.
Кроме того универсальный селектор может использоваться в качестве селектора потомков и выбирать все элементы, которые находятся внутри другого элемента.
Селекторы потомков будут подробно рассмотрены в следующей статье «Селекторы. Часть 2.».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Практическое задание № 2.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
В прошлых уроках мы познакомились с разметкой элементов с помощью HTML. Многие из этих элементов уже имеют какое-то своё визуальное оформление: параграфы имеют отступы, ссылки выделяются подчёркиванием и цветом, заголовкам устанавливаются другие значения размера шрифта. Обычно этого недостаточно для создания полноценных современных сайтов. Какие-то стили нам просто не подходят, а какие-то элементы мы хотим стилизовать отдельно.
Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.
В этом уроке мы разберём ту часть аббревиатуры, которая относится к таблицам стилей. Что такое каскадность и как это работает вы сможете прочитать в следующем уроке.
Стили CSS
Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмём следующую HTML-разметку:
Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:
Что означает эта таинственная запись выше? Её можно условно разбить на три основные составляющие:
Разберём некоторые свойства, которые помогут вам оформлять текст:
Подключение CSS
Использовать CSS на странице можно с помощью нескольких способов:
Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном
Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом
вместо
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа
Ну и представьте, насколько проще читать вместо
Основные семантические теги HTML
Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег
, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.
Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.
Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами и
Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами и
Значение: побочный, косвенный для страницы контент.
Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.
Типовые ошибки: многие считают, что в может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.
Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта.
Особенности: этих элементов может быть несколько на странице.
Типовые ошибки: использовать только как шапку сайта.
Значение: основное, не повторяющееся на других страницах, содержание страницы.
Особенности: должен быть один на странице, исходя из определения.
Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).
Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
Особенности: этих элементов может быть несколько на странице. Тег не обязан находиться в конце раздела.
Типовые ошибки: использовать только как подвал сайта.
Как разметить страницу с точки зрения семантики
Процесс разметки можно разделить на несколько шагов с разной степенью детализации.
Заголовок всего документа и заголовки смысловых разделов. Теги:
Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.
Сомневаюсь, какие теги использовать
Есть простые правила для выбора нужных тегов.
Получилось найти самый подходящий смысловой тег — использовать его.
Для потоковых контейнеров —
Можете дать имя разделу и вынести этот раздел на другой сайт? —
Можете дать имя разделу, но вынести на другой сайт не можете? —
Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —
Как точно не нужно делать
Не используйте семантические теги для украшательств. Для этого есть CSS.
Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.
Здесь сразу несколько ошибок:
должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом.
использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.
А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.
Поэтому используйте семантические теги по назначению.
Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и курсах HTML Academy. Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена станет ещё приятнее.
Оформление текстовой информации в Web имеет свои определенные особенности. Если вы размещаете на сайте какой-то контент, то, как правило, он должен быть хорошо структурированным — для этого используются заголовки. С их помощью тексты получаются максимально легкими для чтения и восприятия.
Собственно, о них мы сегодня и поговорим — пост использует наработки из этой англоязычной статьи. Там имеется 6 разных вариантов оформления заголовок на любой вкус, я же приведу лишь 5 самых интересных, на мой взгляд. Они могут давать вам идеи и подсказки при реализации своих уникальных стилей. Также советуем глянуть подборку лучших шрифтов Google Fonts для заголовков.
Перед тем как начать пару моментов:
Напоследок во вступлении упоминается такое понятие как «вертикальный ритм» (vertical rhythm). Оно фактически задает все отступы между блоками на странице — будь то заголовки, текстовые параграфы, изображения или даже просто элементы шаблона сайта. Особенно актуально это при использовании необычной типографики. Итак, во всех примерах CSS стилей используется один и тот же «ритм»:
Теперь можно переходить непосредственно к практике.
Пример 1
Начинаем с более-менее простого варианта. Типографика отлично подходит для сайта СМИ, может быть даже какой-то газеты. Особых изысков это решение не предлагает, разве что используется 2 шрифта — Ultra (sans-serif), Orienta (sans-serif). Итоговый CSS код:
Пример 2
Здесь уже чуть более интересная реализация — добавляется фон для заголовка в виде сплошной заливки и картинки. CSS код прописан достаточно грамотно, отступы указаны в процентах дабы при уменьшении изображения текст заголовка не сливался с фоновой картинкой. Используемые шрифты Titillium Web (sans-serif), Muli (sans-serif).
Пример 3
Теперь пример реализации заголовков для сайта с темным дизайном. Для этого был подобран достаточно яркий, контрастный голубой цвет в противовес темно серому фону. Используемые шрифты Hammersmith One (sans-serif), Questrial (sans-serif).
Пример 4
Экспериментируем с фоном — как насчет добавить деревянную текстуру. Шрифты Scada (sans-serif), Carrois Gothic (sans-serif), причем листочек для H2 также реализован через шрифт, а не картинку.
Пример 5
Еще одно интересное и не совсем обычного цветовое решение — возможно, подтолкнет вас к каким-то своим идеям и реализациями. Заголовки, в принципе, не всегда могут иметь жирный большой шрифт — бывают и такие варианты.
Если вы знаете CSS практически досконально, то в оригинальной статье рассказывается как использовать некие pre-processors в стилях дабы сократить объем кода и сделать его проще. Честно говоря, использование функций и подстановку параметров в файле стилей CSS я видел впервые, но код получается весьма наглядным. Также, разумеется, в исходной статье найдете ссылки на исходники и демо версии всех вариантов.
P.S. Тем, кто работает в интернете или только-только начинает статья о том что такое ТИЦ поможет сориентироваться в одном из самых актуальных и обсуждаемых понятий в сети.
Самый хороший пример 4. Остальное плохо подобраны цвета шрифтов. Но всёравно спасибо за инфу, будет полезно для новичков. А вообще нужно не только подбирать цвет и размер тени (эффект вдавлиности), но и подбирать цвет самого шрифта, так как шрифт и его объёмность + фон должны гармонично смотреться и играть между собой.
Vladymyr, тут еще важно как шрифты смотрятся в общем дизайне сайта — тогда может некоторые из них и «заиграют» весьма интересно.
В примере 2 как сделать так, чтобы линия тега h2 обрывалась если есть фото напротив. Пример тут http://clip2net.com/s/jaFF1S
Катя, точный код, увы, вам не подскажу. Было бы просто, если бы для этого h2 был какой-то class, тогда в стилях можно было бы легко прописать для h2.class_name ширину width: 400px. Но если прописывать просто для h2, то все они будут одинаковые даже когда картинки рядом нет. Может попробовать width: 100%, или убрать position: relative.
Огромное спасибо! Очень помогло )
Антон, рассмотреть все варианты нереально:) Реализаций стилей для заголовков может быть множество.
CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?
Так что же такое CSS?
Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)
Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!
Анатомия набора правил CSS
Давайте взглянем на вышеупомянутый CSS немного более подробно:
Вся структура называется набором правил (но зачастую для краткости «правило»). Отметим также имена отдельных частей:
Селектор (Selector) Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор. Объявление (Declaration) Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать. Свойства (Properties) Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, color является свойством для элементов
Обратите внимание на важные части синтаксиса:
Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:
Выбор нескольких элементов
Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:
Разные типы селекторов
Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:
Имя селектора
Что выбирает
Пример
Селектор элемента (иногда называемый селектором тега или типа)
Все HTML-элемент(ы) указанного типа.
p Выбирает
ID селектор
Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.
#my-id Выбирает
или
Селектор класса
Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).
.my-class Выбирает
Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов (en-US).
Шрифты и текст
Примечание: Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.
). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:
Блоки, блоки и ещё раз блоки
Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:
В этом разделе мы также используем:
Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.
Изменение цвета страницы
Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который вы выбрали при планировании вашего сайта.
Разбираемся с телом
Теперь для элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:
Позиционирование и стилизация нашего заголовка главной страницы
Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента
Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.
И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что вы можете придумать.
Центрирование изображения
Примечание: Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путём установки свойства width для элемента меньшего значения (например 400 px; ).
Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.
Заключение
Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.
Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу страницу изучения CSS.
Рис. 3б Пример использования селектора типа.
Рис. 5 Использование селектора класса.
Рис. 6 Пример выделения одного слова с использованием селектора класса.
Рис. 7а Пример использования id селектора.
Рис. 7б Пример использования групповых селекторов.
Рис. 7в Пример использования универсального селектора.
Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!
