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

       
 
Видео 1856
 
 
 
Фото 315
 
 
 
Мобильные устройства 2109
 
 





 
Компьютеры и орг.техника 4296
 
 
 
Бытовая техника 731
 
 

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

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

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

Как сделать такой строчно-блочный список с помощью css?

Как можно сделать такой строчно-блочный список, как на фото:

Отслеживать
16k 9 9 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков
задан 6 янв 2017 в 16:10
Никита Пименов Никита Пименов
21 2 2 бронзовых знака
display: inline-block;
6 янв 2017 в 16:15
@Elena, пробовал, не получается, текст списка заходят друг под друга и маркеры пропадают
6 янв 2017 в 16:17
Данный вопрос следует закрыть, потому что вопрос-картинка бесполезен для базы знаний.
7 янв 2017 в 23:06

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Это можно осуществить с помощью flexbox:

body ul < display: flex; margin: 0; padding: 0; list-style: none; width: 500px; flex-wrap: wrap; >ul > li < display: block; width: 250px; height: 100px; >ul > li > .header < display: flex; text-transform: uppercase; align-items: center; font-size: 20px; margin-bottom: 20px; color: #073361; >ul > li > .header:before < content: ''; display: inline-block; width:12px; height: 12px; margin-right: 20px; background-color: #41b7c3; >ul > li > .text < display:block; padding-left: 34px; color: #22578f; >/* #41b7c3 */

Отслеживать
ответ дан 6 янв 2017 в 16:31
16k 9 9 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков
огромное спасибо
6 янв 2017 в 16:34

ul < list-style: square; font-size: 20px; >li < color: #42B6C3; >.hd < color: #3A5775; text-transform: uppercase; >.cn

Поскольку народ испугался таблиц из ужасных баек фронэндеров я заменил её на div. Хотя если подумать таблицы это основополагающий элемент в электронных документах.

ul < list-style: square; font-size: 20px; >li < color: #42B6C3; >.hd < color: #3A5775; text-transform: uppercase; >.cn < color: #7B90AB >.ux

Отслеживать
ответ дан 6 янв 2017 в 16:32
10k 16 16 золотых знаков 54 54 серебряных знака 119 119 бронзовых знаков
Конечно пример рабочий, но он какой-то странный )
6 янв 2017 в 16:34

@УткаУчитсяУму а флексбох это экспериментальная технология. мне кажется два дива в элемент списка сувать не правильно. ну css огромный ко всему )

6 янв 2017 в 16:37
@perfect, почему не правильно? Это займёт меньше места в CSS
6 янв 2017 в 16:38

flexbox во всех современных браузерах поддерживается нормально, самый хороший на текущий момент ответ дала @Elena в комментариях. А Вы мешаете структуру с внешним видом. Ну серьезно, этот ответ был морально устаревшим лет пять назад. Работать то работает, но верстай вы так в нормальном проекте - никто с вами разговаривать не будет.

Открываем блочную модель

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

В процессе мы обсудим тему, известную как блочная модель и как она работает с HTML и CSS. Мы также рассмотрим несколько новых свойств CSS и используем некоторые значения размеров, о которых рассказывали в уроке 3. Давайте начнём.

Как отображаются элементы?

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

display

Как именно отображаются элементы — как блочные или строчные или как-то ещё, определяется свойством display . Каждый элемент содержит значение свойства display по умолчанию, но как и с любым другим значением свойств, это значение может быть переписано. Есть немало значений для свойства display , но наиболее распространённые это block , inline , inline-block и none .

Мы можем изменить значение свойства display элемента, выбрав этот элемент в CSS и задав новое значение свойства display . Значение block сделает этот элемент блочным.

Значение inline сделает этот элемент строчным.

Самое интересное это значение inline-block . Его использование позволит элементу вести себя как блочный, включая все свойства блочной модели (которые мы вскоре рассмотрим). Однако, элемент будет отображаться на строке с другими элементами, а не будет начинаться с новой строки по умолчанию.

Демонстрация inline-block

Пространство между строчно-блочными элементами

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

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

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

Что такое блочная модель?

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

Это стоит повторить: Каждый элемент на странице представляет собой прямоугольный блок.

Рис. 4.01. Когда мы смотрим на каждый элемент по отдельности, то можем увидеть, что все они прямоугольны, независимо от их представленных форм

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

Работа с блочной моделью

Каждый элемент представляет собой прямоугольный блок и есть несколько свойств, которые устанавливают размер этого блока. Внутренность блока определяется шириной и высотой элемента, который может быть задан свойством display , содержимым элемента или свойствами width и height . padding и затем border расширяют размеры блока наружу от ширины и высоты элемента. Наконец, любой указанный margin идёт за пределами рамки.

Каждая часть блочной модели соответствует свойству CSS: width , height , padding , border и margin .

Взглянем на эти свойства внутри некоторого кода:

В соответствии с блочной моделью общая ширина элемента может быть рассчитана по следующей формуле:

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

Для сравнения, в соответствии с блочной моделью общая высота элемента может быть рассчитана по следующей формуле:

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Рис. 4.02. Блочная модель включает базовую высоту и ширину плюс padding, border и margin

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

Ширина: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px Высота: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

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

Пока многие из этих свойств не несут большого смысла и это нормально. Для уточнения давайте поближе посмотрим на все эти свойства width , height , padding , border и margin , которые формируют блочную модель.

width и height

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

width

По умолчанию ширина элемента основана на значении display . У блочных элементов ширина по умолчанию 100% и занимает всё доступное горизонтальное пространство. Строчные и строчно-блочные элементы расширяются и сжимаются горизонтально для размещения их содержимого. Строчные элементы не могут иметь фиксированный размер, таким образом, ширина и высота относятся только к не строчным элементам. Чтобы задать определённую ширину для не строчных элементов, используйте свойство width :

height

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

Размеры строчно-блочных элементов

Пожалуйста, помните, что строчные элементы не принимают свойства width и height и любые их значения. Блочные и строчно-блочные элементы, однако, принимают свойства width и height и соответствующие им значения.

margin и padding

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

margin

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

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

padding

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

Свойство padding в отличие от margin работает вертикально для строчных элементов. Вертикальный padding может сливаться со строкой выше или ниже данного элемента, но будет отображаться.

margin и padding для строчных элементов

Строчные элементы ведут себя немного по-другому, чем блочные и строчно-блочные элементы, когда дело доходит до отступов и полей. Для строчных элементов margin работает только горизонтально — слева и справа от элементов. padding работает на всех четырёх сторонах строчных элементов, однако вертикальные поля сверху и снизу могут выходить за пределы строки выше и ниже элемента.

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

Установка margin и padding

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

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

Чтобы установить одно значение для верхней и нижней стороны, а другое значение для левой и правой стороны элемента, укажите два значения: вначале сверху и снизу, затем слева и справа. Здесь для мы задаём отступы 10 пикселей сверху и снизу и 20 пикселей слева и справа:

Чтобы установить уникальные значения для всех четырёх сторон элемента, укажите эти значения в следующем порядке: сверху, справа, снизу и слева, двигаясь по часовой стрелке. Здесь мы задаём для отступы 10 пикселей сверху, 20 пикселей справа, 0 пикселей снизу и 15 пикселей слева.

Использование свойства margin или padding с любым числом значений считается сокращением. В обычной записи мы можем установить значение только для одной стороны используя уникальные свойства. После имени каждого из свойств ( margin или padding в данном случае) идёт дефис и сторона блока, к которой должно применяться значение: top, right, bottom или left. Например, свойство padding-left принимает только одно значение и установит левое поле для этого элемента, свойство margin-top принимает только одно значение и установит верхний отступ для этого элемента.

Когда мы хотим определить только одно значение margin или padding , то лучше использовать обычную запись. Это сохраняет наш код наглядным и помогает избежать путаницы по пути вниз. Например, вы действительно хотите установить margin в 0 сверху, справа и слева элемента или же на самом деле хотите установить margin снизу в 10 пикселей? Использование обычной записи для свойств и значений помогает нам это делать осмысленно. С другой стороны, когда имеешь дело с тремя или более значениями, сокращение невероятно полезно.

Цвет отступов и полей

Свойства margin и padding полностью прозрачны и не принимают какие-либо цветовые значения. Но будучи прозрачными они показывают цвет фона связанных элементов. Для margin мы видим цвет фона родительского элемента, а для padding видим цвет фона элемента, к которому применяется padding.

Границы

Границы располагаются между отступами и полями, создавая рамку вокруг элемента. Для свойства border требуется три значения: ширина, стиль и цвет. Сокращённая запись для border задаётся этом же порядке — ширина, стиль, цвет. В обычной записи эти три значения могут быть разбиты по свойствам border-width , border-style и border-color . Обычная запись полезна для изменения или переписывания отдельного значения границы.

Ширина и цвет границ могут быть определены с помощью обычных единиц размера и цвета CSS, как описано в уроке 3.

У границ может быть различный внешний вид. Наиболее распространённые значения solid , double , dashed , dotted и none , но есть и несколько других на выбор.

Вот код для сплошной серой границы толщиной 6 пикселей для всех четырёх сторон :

Демонстрация border

Границы для отдельных сторон

Как и со свойствами margin и padding границы могут быть размещены на одной стороне элемента за раз при желании. Это требует новых свойств: border-top , border-right , border-bottom и border-left . Значения для этих свойств такие же, как и для border : ширина, стиль и цвет. При желании можно сделать так, чтобы граница появлялась только внизу элемента:

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

Такое довольно специфичное свойство границы включают в себя ряд разделённых дефисом слов, начинающихся с border, затем идёт выбранная сторона — top, right, bottom или left, а затем width, style или color, в зависимости от желаемого свойства.

Радиус границы

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

Свойство border-radius принимает единицы размера, в том числе проценты и пиксели, которые определяют радиус скругления углов элемента. Единственное значение закругляет все четыре угла элемента в равной степени; два значения закругляют левый верхний/правый нижний и правый верхний/левый нижний углы в таком порядке; четыре значения закругляют левый верхний, правый верхний, правый нижний и левый нижний углы в таком порядке.

При рассмотрении порядка, когда несколько значений применяются к свойству border-radius (заодно к margin и padding ), помните, что они идут по часовой стрелке, начиная с левого верхнего угла элемента.

Демонстрация border-radius

Свойство border-radius также может быть разбито на ряд свойств, которые позволяют нам изменить радиусы отдельных углов элемента. Эти свойства начинается с border, продолжаются с положения угла по вертикали (top или bottom) и горизонтали (left или right) и завершаются radius. Например, для изменения правого верхнего угла может быть использовано свойство border-top-right-radius .

Размеры блока

До сих пор блочная модель была аддитивной. Если вы установили для width 400 пикселей, затем добавили 20 пикселей padding и border 10 пикселей на каждой стороне, фактическая полная ширина элемента становится 460 пикселей. Помните, мы должны сложить значения свойств width , padding и border вместе, чтобы получить реальную полную ширину элемента.

Блочная модель, однако, может быть изменена, чтобы вычисления происходили иначе. CSS3 ввёл свойство box-sizing , которое позволяет нам точно менять, как блочная модель работает и как вычисляются размеры элемента. Это свойство принимает три основных значения — content-box , padding-box и border-box , каждое из которых оказывает несколько разное влияние на вычисление размера блока.

content-box

Значение content-box является значением по умолчанию, оставляя блочную модель в качестве аддитивной. Если мы не используем свойство box-sizing , то это будет значением по умолчанию для всех элементов. Размер элемента начинается со свойств width и height , далее к ним добавляются значения свойств padding , border или margin .

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

Что означают все эти дефисы и буквы в свойстве box-sizing?

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

Вендорные префиксы можно увидеть для свойств и значений, всё зависит от спецификации CSS. Здесь они показаны для свойства box-sizing. Разработчики браузеров были свободны в выборе, когда использовать префикс, а когда нет. Таким образом, одни свойства и значения требуют префиксы для некоторых браузеров, а другие нет.

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

Для справки, наиболее распространённые префиксы изложены здесь:

• Mozilla Firefox: -moz-
• Microsoft Internet Explorer: -ms-
• Webkit (Google Chrome и Apple Safari): -webkit-

padding-box

Значение padding-box изменяет блочную модель путём включения всех значений свойства padding внутри width и height элемента. При использовании значения padding-box , если у элемент width равно 400 пикселей и padding 20 пикселей вокруг всех сторон, фактическая ширина останется 400 пикселей. При увеличении padding на любое значение, размер содержимого внутри элемента сжимается пропорционально.

Если мы добавим border или margin , эти значения будут добавлены к свойствам width или height для вычисления полного размера блока. Например, если мы добавим border 10 пикселей и padding 20 пикселей вокруг всех сторон элемента, у которого width 400 пикселей, фактическая полная ширина будет 420 пикселей.

border-box

Наконец, значение border-box изменяет блочную модель так, чтобы любые значения свойств border или padding включались внутри width и height элемента. При использовании значения border-box , если для элемента указаны width 400 пикселей, padding 20 пикселей и border 10 пикселей вокруг всех сторон, фактическая ширина останется 400 пикселей.

Если мы добавим margin , эти значения должны учитываться для расчёта полного размера блока. Независимо от того, какое значение свойства box-sizing применяется, любые значения margin не будут добавляться в вычисления полного размера элемента.

Рис. 4.03. Различные значения box-sizing позволяют по разному вычислять ширину элемента и блока целиком

Выбор размера блока

Вообще говоря, лучшее значение box-sizing для применения — это border-box . Это значение намного упрощает нам математику. Если мы хотим, чтобы весь элемент был 400 пикселей в ширину, он останется 400 пикселей в ширину, независимо от того, какие значения padding или border мы к нему добавляем.

Кроме того, мы можем легко смешивать значения длины. Скажем, мы хотим, чтобы наш блок занимал 40% в ширину. Добавление padding 20 пикселей и border 10 пикселей для всех сторон элемента не сложно и мы по-прежнему можем гарантировать, что фактическая ширина нашего блока останется 40%, несмотря на использование пикселей в другом месте.

Единственный недостаток свойства box-sizing в том, что как часть спецификации CSS3 она не поддерживается во всех браузерах, особенно не хватает поддержки в старых версиях. К счастью, это становится всё менее и менее актуальным, поскольку выходят новые версии. Скорее всего, мы можем безопасно использовать свойство box-sizing , но если вы заметили какие-то проблемы, стоит посмотреть с каким браузером они связаны.

Инструменты разработчика

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

Чтобы увидеть Инструменты разработчика в Google Chrome, откройте меню, выберите «Дополнительные инструменты», а затем «Инструменты разработчика». После этого откроется панель в нижней части окна браузера, которая предлагает несколько инструментов для проверки нашего кода.

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

После выбора элемента мы увидим несколько вкладок в правой части панели «Elements» в инструментах разработчика. Выбор вкладки «Computed» покажет нам подробную блочную модель для нашего выбранного элемента.

Поиграйте с инструментами разработчика, будь они в Google Chrome, Mozilla Firefox, Apple Safari или других браузерах; можно многое узнать просматривая наш код. Я вообще оставляю панель инструментов всегда открытыми при написании HTML и CSS. И также часто проверяю код других сайтов, чтобы увидеть, как они сделаны.

Рис. 4.04. Инструменты разработчика Google Chrome, которые помогают нам проверять HTML и CSS на любой странице

Блочная модель является одной из самых запутанных частей при изучении HTML и CSS. Она также является одной из самых мощных частей HTML и CSS и как только мы это освоим, практически всё остальное, вроде позиционирования содержимого, пойдёт довольно легко.

На практике

Давайте перепрыгнем обратно к нашему сайту Styles Conference к центральной части страницы и добавим ещё немного содержимого.

Начнём настройку размера нашего блока с версии border-box , которая упростит установку размеров всех наших элементов. В нашем файле main.css, чуть ниже сброса, добавим комментарий, чтобы определить код для создания нашей сетки и макета сайта. Мы положим всё это ниже сброса, чтобы они шли в правильном порядке в каскаде. Отсюда мы можем использовать универсальный селектор *, наряду с универсальными псевдоэлементами *:before и *:after для выбора всех мыслимых элементов и изменения box-sizing на border-box . Помните, что мы собираемся включить вендорные префиксы для свойства box-sizing , так как это относительно новое свойство.

/* ======================================== Сетка ======================================== */ *, *:before, *:after

.container

 на странице, по одному на героя нашего раздела (раздел, который представляет нашу конференцию) и одному для раздела тизеров.

 на каждой странице элементом с классом container .

/* ======================================== Типографика ======================================== */ h1, h3, h4, h5, p

Теперь создадим некоторые стили для этих классов в нашем CSS. Ниже нашего набора правил типографики сделаем новый раздел для кнопок. Для начала добавим класс btn и применим некоторые общие стили, которые будут для всех кнопок. Мы хотим, чтобы у всех кнопок был border-radius 5 пикселей. Кнопки должны отображаться как inline-block, поэтому мы можем добавить поля со всех четырёх сторон без проблем и уберём все margin.

/* ======================================== Кнопки ======================================== */ .btn

Мы также хотим включить стили, характерные для этой кнопки, которые делаем с помощью класса btn-alt . Сюда добавим однопиксельную рамку серого цвета, padding 10 пикселей сверху и снизу и padding 30 пикселей слева и справа от кнопки.

.btn-alt

Далее мы хотим создать новый раздел в файле CSS для стилей главной страницы и как только будем готовы, станем использовать класс hero, чтобы установить padding для всех четырёх сторон элемента

/* ======================================== Главная страница ======================================== */ .hero

Наш сайт начинает складываться воедино, особенно главная страница.

Рис. 4.05. Главная страница Styles Conference постепенно принимает форму после нескольких обновлений

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

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

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

На первом этапе данного упражнения мы представили универсальный селектор. В CSS звёздочка (*) это универсальный селектор, который выбирает каждый элемент. Вместо перечисления всех отдельных элементов мы можем использовать звёздочку для выбора всех элементов.

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

Резюме

Возьмите пирожок и погладьте себя по голове. Я подожду.

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

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

• Как отображаются разные элементы.
• Что такое блочная модель и почему она так важна.
• Как изменить размер элементов с учётом высоты и ширины.
• Как добавить к элементам margin, padding и border.
• Как изменить размер элементов и влияние блочной модели.

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

Ресурсы и ссылки

• The CSS Box Model via CSS-Tricks
• HTML Borders via Quackit.com

См. также

• border
• box-sizing
• display
• display в CSS
• height
• margin
• margin в CSS
• padding
• width
• Абсолютное позиционирование
• Блочные элементы
• Вкладки на CSS
• Выравнивание с помощью флексбоксов
• Высота и ширина в CSS
• Добавление треугольника
• Использование в вёрстке
• Колесо для сокращённых свойств
• Описание float
• Отзывчивый веб-дизайн
• Оформление ссылок
• Повёрнутые рамки
• Поток
• Примеры использования float
• Размеры
• Размеры блока
• Рамка вокруг изображений
• Свойства текста в CSS
• Свойство border
• Свойство margin
• Создание флексбоксов
• Спойлер
• Стилизация элементов MathML
• Строчно-блочные элементы
• Строчные элементы
• Схлопывающиеся margin

Стилизация ссылок

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

Давайте посмотрим на некоторые ссылки

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

Состояния ссылок

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

• Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link .
• Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited .
• Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
• Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя HTMLElement.focus() (en-US)) — стилизуется используя псевдокласс :focus .
• Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

Стили по умолчанию

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

p>a href="https://mozilla.org">A link to the Mozilla homepagea>p> 

p  font-size: 2rem; text-align: center; > 

Вы заметите несколько вещей при изучении стилей по умолчанию:

• Ссылки подчёркнуты.
• Не посещённые ссылки синие.
• Посещённые ссылки фиолетовые
• Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
• Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7 , прежде чем это будет работать).
• Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).

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

• Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
• Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.

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

• color (en-US) для цвета текста.
• cursor для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
• outline для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.

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

Стилизация некоторых ссылок

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

Чтобы начать, мы выпишем наши пустые наборы правил:

a  > a:link  > a:visited  > a:focus  > a:hover  > a:active  > 

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под "наведением" (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

body  width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; > p  line-height: 1.4; > a  outline: none; text-decoration: none; padding: 2px 1px 0; > a:link  color: #265301; > a:visited  color: #437a16; > a:focus  border-bottom: 1px solid; background: #bae498; > a:hover  border-bottom: 1px solid; background: #cdfeaa; > a:active  background: #265301; color: #cdfeaa; > 

Также мы дадим некий пример HTML к которому применяется CSS:

p> There are several browsers available, such as a href="https://www.mozilla.org/en-US/firefox/">Mozilla Firefoxa>, a href="https://www.google.com/chrome/index.html">Google Chromea>, and a href="https://www.microsoft.com/en-us/windows/microsoft-edge" >Microsoft Edgea >. p> 

Объединение этих двух даёт нам такой результат:

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

• Первые два правила не так интересны в этом обсуждении.
• Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
• Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
• Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
  • Нижнее подчёркивание создано используя border-bottom , а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как "р" и "у").
  • Значение border-bottom установлено на 1px solid , без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.

  Активное изучение: Стилизуйте ссылки самостоятельно

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

  Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.

  div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> h2>HTML Inputh2> textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> p>There are several browsers available, such as a href="https://www.mozilla.org/en-US/firefox/">Mozilla Firefoxa>, a href="https://www.google.com/chrome/index.html">Google Chromea>, and a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edgea>.p>textarea > h2>CSS Inputh2> textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> a < >a:link < >a:visited < >a:focus < >a:hover < >a:active < >textarea > h2>Outputh2> div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">div> div class="controls"> input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;" /> input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;" /> div> div> 

  var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var solution = document.getElementById("solution"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput()  output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; > reset.addEventListener("click", function ()  htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); >); solution.addEventListener("click", function ()  htmlInput.value = htmlCode; cssInput.value = "p \n\na \n\na:link \n\na:visited \n\na:focus \n\na:hover \n\na:active "; drawOutput(); >); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); 

  Добавление иконок в ссылки

  Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

  Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:

  p> For more information on the weather, visit our a href="weather.html">weather pagea>, look at a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipediaa>, or check out a href="http://www.extremescience.com/weather.htm" >weather on Extreme Sciencea >. p> 

  body  width: 300px; margin: 0 auto; font-family: sans-serif; > p  line-height: 1.4; > a  outline: none; text-decoration: none; padding: 2px 1px 0; > a:link  color: blue; > a:visited  color: purple; > a:focus, a:hover  border-bottom: 1px solid; > a:active  color: red; > a[href*="http"]  background: url("external-link-52.png") no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; > 

  Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

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

  Наконец, мы задаём некоторый padding-right для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.

  И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*="http"] выбирает элементы , но только если они имеют атрибут href со значением содержащим "http" где-то внутри него.

  Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

  Примечание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном (en-US) ; это объяснено в других местах

  Стилизация ссылок в виде кнопок

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

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

  Для начала HTML:

  ul> li>a href="#">Homea>li> li>a href="#">Pizzaa>li> li>a href="#">Musica>li> li>a href="#">Wombatsa>li> li>a href="#">Finlanda>li> ul> 

  А теперь наш CSS:

  body, html  margin: 0; font-family: sans-serif; > ul  padding: 0; width: 100%; > li  display: inline; > a  outline: none; text-decoration: none; display: inline-block; width: 19.5%; margin-right: 0.625%; text-align: center; line-height: 3; color: black; > li:last-child a  margin-right: 0; > a:link, a:visited, a:focus  background: yellow; > a:hover  background: orange; > a:active  background: red; color: white; > 

  Что даёт нам следующий результат:

  Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

  • Наше второе правило удаляет заданный по умолчанию padding у элемента и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае ).
  • Элементы по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
  • четвёртое правило — которое стилизует элемент — самое сложное; давайте пройдёмся по нему шаг за шагом:
    • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline — мы не хотим, чтоб они портили нам вид.
    • Далее мы устанавливаем display на inline-block — элементы являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block , мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
    • Теперь только изменение размера! Мы хотим заполнить всю ширину элемента , оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет
      и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний в списке и удаляет его margin. Сделано!
      • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

      Примечание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

      Заключение

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

      Похожие публикации:

      1. Даны два отрезка и концы которых вычислите
      2. Для чего нужна модель clip
      3. Докажите что функция f x является
      4. Как сканировать на принтере samsung scx 4300