Css3 — HEADER объеденяется с другими элементами


Содержание

Размещение элемента над другими элементами

31.03.2014, 20:46

Меню накрывается другими элементами и самопроизвольные стили
Сама шапка: Выглядит все о’кей, но при скроллинге вниз начинаются подводные камни. .

Выпадающий календарь не видно под другими элементами, как сделать, чтобы он был сверху?
Что нужно сделать, чтобы календарь был поверх всех элементов? Может быть что-то нужно добавить в.

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

Размещение элемента в купленном шаблоне ИМ
Здравствуйте. Купили шаблон для интернет-магазина. Слегка его переделал, насколько хватило.

Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.

Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.

Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д.

По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.

Можно, например, типичную запись:

Самый сайт

переписать по-новому так:

Самый сайт

И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.

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

header, footer, nav, article

Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.

Тэг nav

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

Тэг aside

aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).

Тэг section

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

Тэг article

article — служит для разбивки страницы на отдельные статьи.

Оба тэга section и article обладают рядом интересных особенностей.

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

Кроме того, тэг section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:

Тэг hgroup

hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.

Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3. На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей. Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup:

Самый сайт

Здесь описание Самого сайта

UPD 24.02.2020: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.

Тэг main

main — представляет собой основное содержимое документа, или иначе — основной контент. Отличие этого тэга от старого доброго body в том, что body включает ВСЕ содержимое страницы, тогда как main — основное, то есть уникальное.

Верстальщики сайтов и раньше использовали для выделения блока с основным контентом тэг div с идентификатором типа main или content. Видимо создатели HTML5 решили поддержать это дело и придумали такой вот новый тэг main.

В силу того, что он должен содержать только уникальный контент, сюда не входят ни шапка сайта, ни сайдбар(ы), ни подвал, ни вообще что-либо повторяющееся на сайте. Сказано — уникальный, значит уникальный!

Тэг main не является структурным тэгом и никак не влияет на разметку страницы!

Он также не может входить в состав других структурных тэгов: article, aside, footer, header или nav в силу своей уникальности.

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

Практика: делаем адаптивную посадочную страницу

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

Загрузка файлов

Для дальнейшей работы вам понадобится скачать файлы урока. В архиве вы найдете файл index.html — откройте его в любимом редакторе кода и ознакомьтесь с HTML-разметкой, которую мы заранее написали для вас.

Введение

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

  • normalize.css — файл для сброса стандартных стилей браузера (мы подробно рассказывали о нем в одном из уроков первой части учебника);
  • шрифт Raleway от Google Fonts;
  • иконочный шрифт FontAwesome;
  • style.css — файл, куда вы будете записывать все стили для лендинга.

Тело документа разделено на секции — шапка сайта (header) с навигацией (nav), большой блок на всю ширину (jumbotron), блок сервисов (services), записи блога (blog) и подвал сайта (footer). Каждая секция содержит соответствующий контент.

Макет страницы выглядит следующим образом:

Так должен выглядеть окончательный результат работы. Просмотрите файл index.html в браузере — пока что он выглядит не очень интересно, но совсем скоро вы это исправите собственноручно. Поехали!

Таблица стилей

Откройте файл style.css из папки «css». Вы увидите, что документ структурирован с помощью комментариев — для удобства мы разделили его на части в соответствии со структурой HTML-страницы. Записывайте каждый стиль в соответствующий раздел: стили для шапки сайта помещайте под комментарием /* Header */ , стили для блога — под комментарием /* Blog */ , базовые стили и стили для повторяющихся элементов страницы — под комментарием /* General */ и т. д.

Приступаем к работе

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

Основные стили CSS

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

Начнем с основного текста на сайте. Согласно дизайну макета, основной (и единственный) шрифт на странице — это Raleway, а все параграфы

должны иметь размер шрифта 14 пикселей, цвет #999 и высоту строки 1.6. Запишем эти данные в нашу таблицу стилей, в раздел General:

Двигаемся дальше: нужны стили для заголовков. У нас есть один заголовок

, а также несколько заголовков

. Согласно макету, заголовок h1 имеет размер шрифта 40 пикселей и белый цвет. Остальные заголовки имеют цвет #282828 . Размер шрифта для заголовков второго уровня — 28 пикселей, а для h3 — 26 пикселей.

Помимо текста у нас есть еще несколько повторяющихся элементов. Например, класс .container — это блок, с ограниченной шириной в который помещается контент. Ширина нашего контента должна занимать 90% экрана, но при этом контейнер не должен растягиваться шире, чем 960 пикселей. Здесь нам пригодится недавно рассмотренное свойство max-width . Кроме того, этот контейнер должен размещаться по центру страницы, для чего мы воспользуемся свойством margin .

Следующие повторяющиеся элементы — блок с классом .brand и навигационное меню. Эти элементы присутствуют в хедере и футере. Они не будут выглядеть абсолютно идентично, однако часть стилей для них будут общими.

Итак, оба элемента .brand будут иметь одинаковый размер шрифта:

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

Уберем из навигации стандартное подчеркивание ссылок:

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

CSS для шапки сайта

Наш хедер будет иметь белый фон и отступ сверху в размере 30 пикселей. Запишем это в таблицу стилей:

Блок с названием проекта будет прилеплен к левой стороне контейнера, иметь цвет #59abe3 и отступ внизу в 30 пикселей:

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

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

Обновите страницу в браузере для просмотра изменений.

CSS для блока Jumbotron

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

Фоновое изображение вы найдете в папке «img». По правде говоря, мы немного забегаем вперед, поскольку тему о фоновых изображениях мы будем разбирать уже в следующем разделе. Но сейчас вы можете просто скопировать следующий CSS-код, посмотреть результат и попробовать самостоятельно понять, что и как в нем работает:

Мы добавим еще несколько строк к стилю джамботрона — для создания вертикальных отступов по 80 пикселей и установки минимальной высоты в 250 пикселей, для выравнивания внутреннего содержимого по центру блока, а также для сброса обтекания, которое было задано навигационному меню:

Стиль для заголовка джамботрона мы добавили ранее, поэтому сразу перейдем к созданию яркой кнопки, расположенной под ним. Если быть точнее, это обычная ссылка с классом .button , но ведь CSS позволяет нам творить чудеса!

Текст кнопки будет белым и без подчеркивания, шрифт — жирный 18 пикселей, верхний margin — 40 пикселей, а цвет фона — #22a7f0 . Чтобы это больше было похоже на кнопку, необходимо добавить отступы с четырех сторон — в нашем случае по 20 пикселей вертикально и по 30 пикселей горизонтально. Также мы округлим углы элемента с помощью уже известного нам свойства border-radius :

CSS для блока Services

Данная секция будет включать в себя три блока, расположенных в один ряд. В этом нам снова поможет свойство float . Все блоки будут иметь одинаковую ширину, указанную в процентах, и в сумме они займут всю ширину контейнера. Разделив число 100 на 3, получаем 33,333333. Именно его мы записываем в стиль для класса .service . Дополнительно зададим каждому блоку внутренние отступы в размере 15 пикселей и внешние вертикальные отступы в 30 и 50 пикселей:

Сейчас вы можете обновить страницу и увидеть, как третий блок съехал вниз. Догадаетесь, почему так произошло? Вспомните урок, где мы разбирали, как браузер вычисляет размеры элемента и что делает свойство box-sizing. Мы добавили нашим блокам свойство padding , и сумма их ширин превысила ширину контейнера, поэтому один из них не помещается в ряд. Добавьте к стилю элемента .service свойство box-sizing со значением border-box , после чего обновите страницу в браузере. Вы увидите, что теперь все блоки выстроились так, как надо.

Идем дальше. Добавим стили для самого блока .services — сделаем верхний отступ в 50 пикселей и центрируем всё текстовое содержимое:

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

Обновите страницу в браузере и полюбуйтесь результатом. Нам осталось написать стиль для двух последних блоков.

CSS для блока Blog

Прежде всего необходимо отменить обтекание для блока .blog . Он будет иметь вертикальные внутренние отступы в 50 пикселей, а также легкий серый фон, в соответствии с макетом:

Выровняем заголовок этого блока по центру:

Каждому блоку с классом .post присвоим внутренний отступ в 30 пикселей сверху и поведение строчно-блочного элемента:

Для миниатюр постов зададим обтекание и внешний отступ 30 пикселей с правой стороны:

После чего дополните стиль элементов .post строкой clear:both , благодаря которой каждый блок будет отображаться корректно и не съезжать.


CSS для футера

Для основного блока подвала понадобится сбросить обтекание, задать вертикальные отступы в 50 пикселей, выравнивание текста по центру и темно-серый фон:

Установим цвет текста для элемента .brand (как уже упоминалось, он будет отличаться от стиля, применяемого к элементу .brand в шапке сайта):

Для пунктов меню в футере зададим отступы и цвет ссылок:

Обратите внимание: чтобы свойство text-align:center , примененное к тегу , повлияло на блок с меню, необходимо сделать его строчно-блочным:

И, наконец, напишем небольшой стиль для последнего элемента — .copyright :

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

Проверка адаптивности

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

Первое, что бросается в глаза — это три блока .service , каждый из которых имеет ширину 33,333333% от ширины контейнера. На узких экранах текст в этих блоках становится трудночитаемым.

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

Итак, наши блоки начинают выглядеть плохо на экранах шириной менее 576 пикселей (в основном, это телефоны в портретной ориентации). Запишем специальный стиль для данной ширины (поместите эту запись в самый низ таблицы стилей):

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

Продолжаем проверять нашу верстку на адаптивность. Отчетливо видно, что на маленькие экраны нормально не помещаются блоки .post . Миниатюра поста чересчур большая для небольшого экрана и следующий за ней текст некрасиво обтекает ее. Исправим это следующим стилем (просто добавьте код к уже созданному медиазапросу):

Цукерберг рекомендует:  Квадрат отражённый

Напоследок добавим еще пару строк кода, которые помогут всем изображениям на странице стать адаптивными. Внимание: этот стиль добавляем в раздел General!

Завершение

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

Следующая часть данного учебника будет полностью посвящена работе с графикой. Мы расскажем о многих полезных вещах, в том числе о фоновых изображениях, градиентах и создании фотогалерей. Приглашаем вас к прочтению!

Следующий урок: CSS для тега img.

Селекторы CSS

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

В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.

Настройка

Для примера нам нужен только один HTML-файл и таблица стилей CSS . Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:

Теперь создадим в той же папке файл styles.css . Это все, что понадобится для изучения CSS селекторов .

Селекторы классов

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

  • Указанный атрибут класса в элементе HTML ;
  • Соответствующий селектор классов CSS .

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

Теперь стилизуем абзац

в файле CSS с помощью следующего кода:

Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:

Конвенция имен классов

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

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

Более полезные div

Атрибут class применяется не только к элементам

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

Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div . Добавьте следующий код в файл styles.css :

Конечно, для этого нам нужен соответствующий атрибут класса. Измените

Данный код позволяет использовать стили и для других элементов, а не только для кнопок.

Дивы контейнеров

Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в

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

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

Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы

Повторное использование стилей классов

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

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

Изменение стилей классов

Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу . Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:

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

Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action ( обязательно добавьте этот код после правила .button ):

Порядок имеет значение

Хочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки:

  • Это добавление нового объявления по сравнению с исходным правилом .button — font-style ;
  • Переопределение существующего в классе .button стиля — background-color .

Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button , применялось бы это правило, и кнопка осталась бы синей.

Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются « одинаково », а приоритет определяется исключительно порядком размещения правил в файле styles.css .

Другими словами, следующие элементы эквивалентны:

Селектор потомков

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

Чтобы изменить этот элемент , можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS . То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент в абзаце .synopsis со следующими стилями:

Добавление этого правила в файл styles.css задаст отображение вертикальными ( римскими ) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац

. При этом остальных элементов , размещенных на странице это изменение не коснется:

Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы внутри заголовков:

Не переусердствуйте

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

Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML :

Если захотите применить эти стили к заголовку

, который не был обернут в тег

Псевдоклассы для ссылок

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

Основные стили ссылок

В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:

  • :link — ссылка, по которой пользователь еще не переходил;
  • :visited — ссылка, по которой пользователь переходил раньше;
  • :hover — ссылка, на которую пользователь навел курсор мыши;
  • :active — ссылка, нажатая мышью (или пальцем).

Рассмотрим эти псевдоклассы, добавив следующие правила в CSS ( также обратите внимание на то, что мы используем для обозначения цветов ключевые слова , а не шестнадцатеричные коды ):

Состояние visited hover

Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited , когда мы изменим атрибут href на URL-адрес , который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.

Добавьте это правило ниже предыдущего фрагмента кода:

Данный код создает специальный стиль для состояния при наведении курсора мыши на посещенные ранее ссылки. Наведя курсор на не посещенную ранее ссылку, мы увидим, что она « перекрашивается » в аквамариновый цвет. А при наведении курсора на посещенную ссылку она становится оранжевой. Фантастика! Но это ломает наш стиль a:active из-за некоторых внутренних аспектов CSS , о которых вы никогда не захотите читать. Когда вы нажмете на ссылку, она больше не будет становиться красной.

Состояние visited active

Можно исправить это с помощью CSS псевдоселектора a:visited:active . Добавьте следующий код в конец таблицы стилей. Обратите внимание, что, как и в случае с классом .call-to-action , порядок, в котором правила определяются в файле styles.css , имеет значение:

Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.

Псевдоклассы для кнопок

Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button . Это позволит создавать кнопки, которые ведут куда-то.

Элемент ссылки, а не элемент div

Сначала нужно изменить кнопки, чтобы они стали элементами , а не просто элементами

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

Нам нужно снова сделать этот элемент блочным и удалить часть стилей ссылок по умолчанию.

Стили кнопок

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


Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.

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

Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу , и вы превратите его в интерактивную кнопку.

Другая кнопка

Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более « специфичен », чем текущее правило .call-to-action , поэтому он имеет приоритет.

Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим ( убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS ):

Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов , поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.

Псевдоклассы для структуры

Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов , которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

Например, мы могли бы использовать :last-of-type , чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

Это позволяет не затрагивать первые два элемента

на странице, не добавляя для последнего абзаца новый атрибут класса:

Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis . Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом

. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов

Предостережения

Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент

в каждом элементе контейнера.

У нас есть один общий

Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент

здесь также будет соответствовать p:first-of-type , потому что область применения псевдокласса ограничена родительским элементом.

Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый

Различные разработчики придерживаются разных « школ ». Некоторым нравится семантическая природа псевдоклассов, в то время как другие доводят до крайности применение различных подробных атрибутов класса для каждого HTML-элемента .

Селекторы идентификаторов

CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.

Вместо атрибута class для любого элемента HTML , используется атрибут id . Попробуйте добавить идентификатор ко второй кнопке:

Соответствующий селектор CSS должен начинаться с символа хэша ( # ). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки:

Проблема в том, что если мы захотим задать этот стиль и для другой кнопки, то нужно присвоить ей еще один уникальный атрибут id . Довольно скоро наш CSS начнет выглядеть довольно « грязно »:

По этой причине использовать CSS селекторы идентификаторов обычно не рекомендуется. Вместо этого используйте селекторы классов.

Фрагменты URL-адресов

Атрибуты id должны быть уникальными, поскольку на них указывают « фрагменты URL-адресов ». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса :

Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код. Обратите внимание, что можно полностью опустить URL-адрес , если он указывает на другой раздел той же веб-страницы:

Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS . Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов , так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес , то сломаете свой сайт.

Специфичность CSS

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

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

Если вы добавите следующий код после существующих правил .call-to-action , он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:

Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action :

CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция « порядок имеет значение » работает только тогда, когда все правила имеют одинаковую специфичность:

Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:

Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием « BEM ». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

Заключение

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

Данная публикация представляет собой перевод статьи « css selectors » , подготовленной дружной командой проекта Интернет-технологии.ру

Лаконичный и современный основной раздел сайта с использованием CSS3

7 сентября 2015 | Опубликовано в css | Нет комментариев »

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

Вот демонстрация работы и исходный код:

Скачайте пример, и приступим к работе.

Шаг 1. Код HTML

Сначала добавим основной раздел со всеми упомянутыми элементами:

index.html

Как видите, все довольно просто. В основном разделе всего два столбца и один элемент подвала страницы. В каждом разделе находятся разные блоки. По умолчанию, если нужно создать блок, используйте для этого класс block, а если нужно изменить внешний вид блока, используйте другое название класса, например, block_a, block_b или block_c. Так можно задать блокам, в частности, разные цвета. Еще можно использовать заголовки и подписи в блоках, в нашем случае элементы h3 классов head или foot. И также можно настраивать стили заголовков и подписей с помощью таких классов, как head_a, head_b, head_c, foot_a, foot_b и foot_c. В конце находится стандартная форма обратной связи.

Шаг 2. Код CSS

css/main.css

Теперь приступим к наиболее важной части — заданию стилей. Для начала зададим основные стили макета для столбцов:

Вот стили для разных блоков:

И, наконец, зададим стили форме обратной связи:

Если хотите поместить что-то в подвал сайта, можно использовать следующие стили:

Заключение

Это все. Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Andrew Prikaznov

Урок 2. DIV and UL

Всем привет!
Сегодня будем знакомиться с такими понятиями, как: div — блоки, блочная и табличная верстка, и что такое список ul.

Начнём с того, что такое блочная верстка и какие бывают верстки? Верстки в основном делятся на две категории: бывают табличные и блочные верстки, не редко их совмещают, для удобства и прочих нужд.

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

И так блочная верстка

Чем она отличается от табличной? Лично для меня — кодом в документе.
Если же писать таблицей, то это довольно сложный и громоздкий код.
Более ясны и понятны дела обстоят с блочной версткой. Давайте попробуем разобраться на примере нашего сайта.
Вот наш сайт — белый лист, кстати тоже является блоком. Даже взять наше
тело body, что мы прописывали в первом уроке, это тоже блок, и у него будут свои
блоки, такие, как вы могли видеть на многих сайтах.
Вообще существуют основные блоки сайта:
— это шапка сайта;
— навигация;
— контент сайта;
— и подвал;

Так же внутри этого каждого блока будут свои маленькие блоки, например, блок с аватаркой, этот отдельно взятый блок будет намного приятнее, и удобнее обрабатывать стилями CSS, как и все блоки нашего документа, все документы HTML.
Давайте сразу откроем наш сайт index.html.
Хочу сказать, мы сразу параллельно будем проходить стили CSS и все это будет в одном документе. Сначала я показываю HTML и дальше уже в уроках по CSS объясняю обработку сайта.
Переходите на ссылку по урокам CSS, если кто еще не изучал этот язык. В первом же уроке мы проходили тег link, он помогает нам соединиться со стилями, которые располагаются в отдельном файле.
Но не об этом, это вы можете посмотреть в курсе уроков CSS.
Но, а мы продолжаем.
Див — блок, пишется он так: div, вот собственно это и есть наш блок.

Я тут, подумал и решил, что сегодня мы изучим один из атрибутов HTML.

Атрибут class

Внутри тега после слова div пишем слово class, через пробел, это и будет его атрибут class задается для того, чтобы связаться с этим блоком.

Прописываем >Далее создаем еще пару блоков.

Что лучше — общий всё-в-одном style.css или несколько файлов .css?

Несколько файлов удобней, но не снизит ли это скорость загрузки и рендеринга страниц?

  • Вопрос задан более двух лет назад
  • 2884 просмотра

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

Но даже сейчас лучше разделить стили блочной разметки от украшательств и грузить их раздельно. Подключать media queries CSS, не в CSS а в HTML отдельными файлами, указанием атрибута media:

А ещё лучше, подключать с каждой страницей только те стили, которые на ней используются :)

Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:

  • Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
  • Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
  • Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
  • Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент. У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.

Хорошие и плохие CSS-практики для начинающих

С появлением CSS3 мы получили возможность управлять медиа-выражениями, лучше работать с фоновыми изображениями и даже создавать анимации, которые быстрее загружаются на вашем веб-сайте. Эти особенности сделали жизнь каждого веб-дизайнера и разработчика гораздо проще.

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

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

Плохие CSS-практики

Много раз использовать одно и то же правило

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

Примечание переводчика: спорный вопрос. Не стоит налегать на классы. Не заражайтесь классянкой .

Например, вместо того чтобы повторять правило color: blue для каждого тега и ID:

Используйте для этих целей класс:

Использовать одинаковый >Когда пишете CSS, присваивайте ID только одному элементу в HTML. Для нескольких элементов используйте атрибут класса.


Прим. переводчика: Проще говоря ID должен быть уникальным.

Вы должны написать:

Когда уместно правило !important

Правило !important было создано во второй половине 90-х чтобы помочь веб-дизайнерам и разработчикам переопределять существующие стили. !important преобладает над всеми предыдущими стилями как бы говорит браузеру: “Я главнее, забудь обо всем другом CSS и используй меня!”. Используя его от собственной лени, вы рискуете заработать головную боль позже. Ваш код будет труднее поддерживать.

В представленном выше примере тексту в header назначен красный цвет. Исключением будет header с классом intro и с >специфичности селектора.

Если вы используете !important, то добавляйте его на уровне свойства, а не на уровне селектора. Это означает что свойство color имеет более высокий приоритет, чем размер шрифта. Свойство color более важное чем тот же color в правиле header#capture.

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

Частое использование правила !important является плохой практикой поскольку вносит беспорядок в один из основных механизмов CSS — специфичность (на русском, но лучше на английском).

Использование неэффективных CSS-селекторов

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

Этого можно избежать, если не использовать ID в селекторе, поскольку он имеет высокую специфичность.

Например посмотрите на эти длинные селекторы:

Мы можем укоротить их до двух или трех уровней глубины:

Использовать тонны веб-шрифтов

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

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

Оптимизация шрифта и способ его загрузки могут влиять на размеры страницы и время отрисовки текста.

Рекомендуется использовать один или два (точно не больше трех) веб-шрифтов на вашем сайте и пользоваться значениями по умолчанию браузеров для оптимизации вашего сайта.

Использование встроенных (инлайн) стилей

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

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

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

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

Хорошие CSS-практики

Теперь, когда мы закончили говорить о плохих приемах написания CSS, можем рассмотреть несколько хороших.

Используйте в CSS структуру контента

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

За основу можете взять указанный ниже код:

Сделайте CSS “читабельным”

“Читабельность” кода означает, что вы создаете чистые во всех отношениях наборы правил. Когда ваш CSS легко читать, то его проще и поддерживать в дальнейшем. Вы быстро можете найти каждое правило.

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

2. Стандартный вид

Прим. переводчика: как верно было замечено в комментариях, при большем количестве свойств вариант в одну строку становится не жизнеспособным. Используйте только второй вариант!

Отделите стили jQuery-плагинов

Если вы используете плагины jQuery, то вам стоит поместить стили для них в отдельный css-файл и назвать его легким и запоминающимся именем, например, JS-plugin.css. Это поможет вам поддерживать порядок среди вашего CSS, и вы вспомните добрым словом этот совет, когда вам потребуется изменить или добавить стили для плагинов.

Файл сброса стилей

Файл сброса стилей (или “Reset CSS”) представляет из себя краткий набор правил CSS, который сбрасывает основные стили html-разметки. Использование файла сброса уменьшает разницу отображения в разных браузерах и позволяет получить общий внешний вид.

MeyerWeb самый популярный и широко используемый файл сброса стилей, хотя наряду с ним популярен и normalize.css от Nicolas Gallagher. Это современные файл сброса, полностью соответствующие HTML5. Вы можете подключить отдельный файл со сбросом стилей на вашу страницу или скопировать всю таблицу в файл с вашими стилями.

CSS3 анимация в последнюю очередь

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

Комбинируйте элементы

Если несколько элементов в таблице имеют одинаковые правила стилей, то вы легко можете объединить их, а не переписывать код снова и снова.

Например, h1, h2 и h3 элементы имеют одинаковое правило font-family и цвет текста.

Используйте краткие записи свойств

Краткие записи (шорткаты) позволяют одновременно установить значения для несколько свойств CSS. Шорткаты сокращают ваш код и увеличивают читаемость.

Например, вместо того чтобы использовать margin-top, margin-bottom, margin-left и margin-right вы можете просто использовать одну строку.

Всегда комментируйте

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

Вендорные префиксы

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

Цель вендорных префиксов — избежать неверного исполнения кода.

В CSS следующие префиксы:

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

Посмотрите на код ниже.

Примечание переводчика: Для автоматической расстановки префиксов у нужных свойств воспользуйтесь Autoprefixer-online .

Сжатие CSS

Другой способ написания эффективного CSS — это уменьшение размера файла с использованием таких инструментов, как CSS compressor или Minify CSS. Помогите браузерам сократить время загрузки. Эти инструменты удалят пробелы, переносы строк, а так же повторяющиеся стили.

Чаще используйте HEX-цвета

Есть несколько мнений и аргументаций в интернете, когда речь заходит о выборе между HEX-цветами и цветами по их названию. Различные браузеры могут быть не в состоянии определить, что значат некоторые названия цветов. Значения HEX имеет палитру цветов, содержащую 16 777 216 оттенков, в то время как HTML и CSS имеет в своем арсенале всего 140. Там нет названий для всех 16 миллионов 24-разрядных цветов, поэтому HEX — лучший выбор, когда вы определяетесь с цветовыми вариациями.

Ознакомьтесь со спецификацией CSS Color Module Level 3 для получения дополнительной информации.

Валидация

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

Что дальше?

После обсуждения хороших и плохих CSS-практик настало ваше время — идите и применяйте полученные знания.

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

Что думаете? Какие плохие или хорошие практики вызывают у вас вопросы? Пожалуйста, оставляйте комментарии.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Селекторы CSS – точечное применение свойств CSS к элементам страницы (тегам) | Оптимизация HTML за счёт использования селекторов

Здравствуйте дорогие подписчики и не менее дорогие гости Site on! Надеюсь, вам были интересны предыдущие статьи раздела HTML + CSS, потому как сегодня скучать точно не придётся, ведь мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

На что стоит обратить внимание:

  • Классы и идентификаторы можно присваивать любым (всем) тегам.
  • Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
  • Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
  • Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
  • Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

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

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

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

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

Родственный селектор

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

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

Универсальный селектор

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

Псевдо-классы

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):


Естественно можно комбинировать селекторы как захотим, например:

Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

Псевдо-класс :lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

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

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Смежные селекторы

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

Обобщённые смежные селекторы

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

Селекторы атрибутов

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

CSS 3 псевдо-классы

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

:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

Управление полями, формами, переключателями и флажками в CSS

:enabled — применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

:disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа переключатели (radio) и флажки (checkbox), когда они находятся во включённом положении.

Псевдо-элементы

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

:before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

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

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

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

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

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

Основы CSS — Руководство для самых маленьких

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

Часть 1. Основы CSS

Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

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

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

Подключить как внешний CSS файл к документу. Для этого достаточно прописать тег
в теге . Это наиболее распространенный способ подключения таблиц стилей к документу, когда внешнее оформление страниц выносится в отдельный внешний CSS файл.

Прописать стили в самом документе, используя тег

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.

Правила объявлений настолько просты, что их можно описать в одном предложении. Сначала пишется селектор, который выбирает конкретный элемент на странице, после фигурных скобок пишутся свойства со значениями после двоеточия, а сами свойства отделяются друг от друга точкой с запятой. Это всё.

Просто, не правда ли?

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

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

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

  1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
    Пример использования !important:
  2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
  3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
  4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
  5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
    В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:

И т.д. по логической цепочке.

И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

  1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
  2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

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