Базовые селекторы CSS

Базовые селекторы CSS

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

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

Мы можем использовать только одну звездочку для обозначения всех элементов:

* {маржа: 0; }

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

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

Выбор имени тега CSS

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

h1 {размер шрифта: 32 пикселей; } h2 {размер шрифта: 24px; } p {размер шрифта: 12 пикселей; }

Согласно приведенному выше примеру:

  • все заголовки H1 будут иметь размер шрифта 32 пикселя.
  • все заголовки H2 — 24px
  • и все абзацы — 12px

Однако установка размера шрифта для абзацев — распространенная ошибка. Если у нас есть список после абзаца (например), его шрифт будет другим. Если мы не предоставили это явно.

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

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

тело {размер шрифта: 12 пикселей; }

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

Селекторы CSS по классам

Эти селекторы используют атрибут class элементов HTML. Синтаксис селектора класса начинается с точки (чтобы отличить его от обычного селектора по имени тега) и продолжается именем класса:

Читать также:  Доступный слайдер 2/2

.красный {цвет: # F00; }

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

p.red {цвет: # F00; }

Таким образом, этот стиль будет действителен для тега p class = "red", но не будет действителен для li class = "red".

Селекторы CSS по идентификатору

Подобно селекторам классов, есть селекторы идентификаторов, которые полагаются на атрибут идентификатора тегов. В отличие от point, как и в классах, в этих селекторах используется резкий (#):

#logo {цвет: # 000; }

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

У нас может быть элемент с идентификатором на одной странице и таким же идентификатором на другой странице:

# логотип {background-image: url (logo.png); img # logo {margin: 5px; }

В этом примере мы устанавливаем фоновое изображение элемента a id = "logo", а для img id = "logo" / мы устанавливаем внешнее расстояние 5 пикселей. Эти два элемента можно найти на двух отдельных страницах..

Имея в виду эти селекторы, теперь вы можете писать много CSS..

Однако игра кардинально меняется, когда мы включаем и

каскадные стили

#content p {цвет: # 000; } #sidebar p {color: # 333; }

Это комбинации селекторов, соответствующие вложенным элементам..

С помощью кода из последнего примера мы устанавливаем:

  • цвет текста абзацев, которые являются внутренними по отношению к элементу с id = "content", должен быть черным.
  • абзацы, которые являются внутренними для элемента с id = "sidebar" — должны быть темно-серыми
Читать также:  Шоу прокрутки (часть 2 JavaScript)

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

Применяйте одни и те же стили к разным селекторам CSS

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

#header h1, #content a.external, #sidebar .widget h3, #footer ul.menu a {color: # 00F; }

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

  • заголовок первого уровня в элементе с id = "header"
  • ссылки с внешним классом в элементе с id = "content"
  • заголовки третьего уровня, расположенные в элементе с class = "widget", которые являются внутренними по отношению к элементу с id = "sidebar"
  • ссылки из ненумерованного списка с классом меню, расположенным в элементе с id = "footer"

Пока все работает даже в Internet Explorer 6.

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

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

[цель] {цвет: # F00; }

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

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

a [target = "_ blank"] {цвет: # F00; }

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

Аналогичным образом мы можем установить:

a [class = "red"] {цвет: # F00; }

что, однако, глупо, поскольку эквивалентно a.red. И он короче и работает в большем количестве браузеров. Мы сказали, что не будем заниматься IE6, но все же вопрос принципиальный. Зачем что-то ломать? Единственный значимый случай, который следует использовать, — это когда мы хотим, чтобы элемент имел только красный класс..

Читать также:  Перегородка происхождение и улучшения

Это также

другие селекторы CSS по атрибуту:

  • [attribute ^ = "start"] — если значение атрибута начинается с "start" (например, "start")
  • [attribute $ = "end"] — если значение атрибута заканчивается на "end" (например, "изменить")
  • [attribute * = "partial"] — если "partial" находится где-то внутри атрибута (например, "lorempartialipsum")

Все три селектора охватывают следующий элемент:

p attribute = "начало-частичный конец" Textp

Атрибут не существует, но мы используем его только в качестве примера.

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

Еще больше селекторов CSS по атрибуту:

Однако, если мы используем [attribute ~ = "end"], то нам нужно, чтобы содержимое атрибута было разделено пробелом. Затем мы снова выберем тот же элемент.

Мы также можем использовать [attribute | = "start"], который будет искать элементы, атрибут attribute которых содержит начало слова, разделенное дефисом. Это снова будет работать в предыдущем случае.

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

p [class ~ = "red"] {цвет: # F00; }

Это глупо, потому что у одного элемента может быть несколько классов. В атрибуте они разделены пробелом: p class = "big red".

Селектор CSS для нескольких классов одного элемента:

.big.red {размер шрифта: 18 пикселей; цвет: # F00; }

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

Следующий пример будет иметь больше смысла:

.большой {размер шрифта: 18 пикселей; } .red {цвет: # F00; } .big.red {font-weight: жирный; }

Вот как:

  • элементы с классом big должны быть крупным шрифтом
  • те, у кого класс красный, должны быть красными
  • и те, которые соответствуют обоим условиям, среди прочего, должны быть утолщены (в соответствии с тем или иным дизайном или другими требованиями)
Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?