Как сделать ссылки строчно блочными в css

Строчно-блочные элементы

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

Рис. 3.28. Галерея фотографий

Если для формирования секций использовать тег <div> , как блочный элемент он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задать цвет фона всей секции и установить её размеры. Наиболее популярное решение в подобных случаях это использование свойства float , которое будет рассмотрено в следующем разделе. Пока же остановлюсь на строчно-блочных элементах, которые сочетают преимущества строчных и блочных элементов.

В HTML нет тега, который относится к строчно-блочным элементам, его можно определить, задав элементу свойство display со значением inline-block .

Характеристики этих элементов следующие.

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

Чтобы создать галерею, представленную на рис. 3.28 для тега <div> следует задать значение display как inline-block , а внутрь него добавить изображение и подпись через тег <p> (пример 3.18).

Пример 3.18. Использование display

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Поскольку все фотографии имеют одинаковый размер, ширина блока задана явно и равна 150px, но высота не указывается, поэтому при длинной подписи к рисунку высота секций будет различаться (рис. 3.29).

Разная высота секций

Рис. 3.29. Разная высота секций

Это не является проблемой, поскольку в любом случае секции будут выводиться упорядоченно рядами, несмотря на разную высоту. При этом можно изменить вид выравнивания через vertical-align , добавив это свойство к классу photo . Если указать значение top , то поменяется отображение секций (рис. 3.30).

Выравнивание по верхнему краю

Рис. 3.30. Выравнивание по верхнему краю

Основной проблемой выступает браузер IE до версии 7.0 включительно. Этот браузер применяет значение inline-block только для строчных элементов и с блочными элементами работает некорректно. Чтобы убедить этот браузер правильно отображать наш пример, необходимо вместо inline-block использовать значение inline и установить свойство hasLayout . Добавление inline разрушит макет в остальных браузерах, поэтому правильным решением будет воспользоваться условными комментариями (пример 3.19).

Пример 3.19. Стиль для IE

Конструкция [if lte IE 7] означает применить указанный код для браузера IE версии 7.0 и ниже. Остальные браузеры воспринимают её как комментарий и игнорируют. Что касается свойства zoom , оно нестандартное и предназначено для установки свойства hasLayout , напрямую которое задавать нельзя.

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

Пример 3.20. Каталог товаров

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.31.

Каталог товаров

Рис. 3.31. Каталог товаров

Чтобы не задавать каждому тегу <div> , которых может быть довольно много, свой класс, в примере введён <div> с идентификатором catalog и стиль применяется к тегам внутри него.

Особенности строчно-блочных элементов в CSS

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

Вы пока знаете только один такой тег: img . Картинки, однако, не раскрывают все особенности этой модели, поэтому работу таких элементов посмотрим на примере тегов span , сменив им блочную модель, задав свойству display значение inline-block .

Ширина и высота строчно-блочного элемента

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

Ширина строчно-блочного элемента

Если у строчно-блочного элемента не задана ширина, то он его ширина сформируется содержимым, подобно строчным элементам:

Высота строчно-блочного элемента

Если у строчно-блочного элемента не задана высота, то его высота сформируется содержимым, подобно строчным элементам:

Несколько строчно-блочных элементов рядом

Если расположить несколько строчно-блочных элементов рядом, то они выстроятся в ряд, подобно строчным элементам:

Стили ссылок. Псевдоклассы

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

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

Как сделать ссылку блочной

Обойти это правило очень легко. Любой строчный элемент можно сделать блочным с помощью CSS.

После этого со ссылкой вида

можно обращаться как с блочным элементом.

href — обязательный атрибут. Если мы хотим чтобы ссылка никуда не вела, используем url #/ .При указании в качестве url # без слэша, будет осуществлен переход к началу страницы.

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

Рассмотрим особенности отображения гиперссылок браузером (у разных браузеров возможны варианты):

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

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

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

Но что делать с изменением цвета при клике на ссылку, или после посещения?

Браузеры способны изменять внешний вид содержимого тега в зависимости от состояния. Управлять этими изменениями можно с помощью псевдоклассов
a:псевдокласс

Различают 4 специальных состояния гиперссылок.

  1. a:link — не выбранная пользователем, непосещенная гиперссылка
  2. a:visited — ссылка, посещенная ранее
  3. a:hover — выбранная ссылка, на которую наведен указатель курсора
  4. a:active — выбранная ссылка, в настоящий момент обрабатываемая браузером
    (при нажатии на кнопку мыши)
  5. a:focus — ссылка, получившая фокус
Как сделать ссылку кнопкой

Пример оформления ссылки: Кнопка

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

Внимание специфичность!

Почему иногда псевдоклассы не работают?

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

"LoVe & HAte" — любовь и ненависть (Link, Visited, Hover, Active). Придерживайтесь указанного порядка, и все будет хорошо.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *