|
Ципихович Эндрю 1485 / 459 / 52 Регистрация: 10.04.2009 Сообщений: 7,892 |
||||
|
1 |
||||
Пробелы между ссылками как поставить?12.10.2012, 23:08. Показов 45621. Ответов 13 Метки нет (Все метки)
Здравствуйте, я пробовал ставить
0 |
|
632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632 |
|
|
12.10.2012, 23:38 |
2 |
|
padding,margin
0 |
|
Ципихович Эндрю 1485 / 459 / 52 Регистрация: 10.04.2009 Сообщений: 7,892 |
||||
|
12.10.2012, 23:42 [ТС] |
3 |
|||
|
напишу покороче, куда padding,margin ставить
0 |
|
StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370 |
||||
|
13.10.2012, 00:02 |
4 |
|||
1 |
|
632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632 |
|
|
13.10.2012, 00:03 |
5 |
|
ну это уже перебор.
0 |
|
O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681 |
|
|
13.10.2012, 00:22 |
6 |
|
пробелы символами — это не кошерно ( хотел по другому объснить, но форум не читает символы utf-8)
1 |
|
1485 / 459 / 52 Регистрация: 10.04.2009 Сообщений: 7,892 |
|
|
13.10.2012, 00:23 [ТС] |
7 |
|
**▲* не очень
a {margin: 0 20px;} это ж у всех, а мне надо три ссылки вряд, то есть два пробела
0 |
|
StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370 |
||||||||
|
13.10.2012, 00:30 |
8 |
|||||||
1 |
|
conformist O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681 |
||||||||||||
|
13.10.2012, 00:32 |
9 |
|||||||||||
|
так
это для всех ссылок. если нужно для определенных ссылок — заключите их в блок див, к примеру div и получите то, что нужно:
1 |
|
1485 / 459 / 52 Регистрация: 10.04.2009 Сообщений: 7,892 |
|
|
13.10.2012, 01:01 [ТС] |
10 |
|
в обоих последних вариантах от StopSmell и от conformist текст ссылок отсутствует
0 |
|
O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681 |
|
|
13.10.2012, 01:07 |
11 |
|
то есть как? можно код и скрин?
0 |
|
Ципихович Эндрю 1485 / 459 / 52 Регистрация: 10.04.2009 Сообщений: 7,892 |
||||||||
|
13.10.2012, 01:15 [ТС] |
12 |
|||||||
|
скрин не могу Для тех кто не знает как скачивать файлы с интернета — пользуйтесь браузером Opera вот код
Добавлено через 1 минуту
0 |
|
O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681 |
|
|
13.10.2012, 01:28 |
13 |
|
что то не пойму — все работает, отступы появляются Миниатюры
0 |
|
1485 / 459 / 52 Регистрация: 10.04.2009 Сообщений: 7,892 |
|
|
13.10.2012, 14:14 [ТС] |
14 |
|
и как сказал
conformist видимо проблема в подключённом файле джавы и что делать?
0 |
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «How to Understand and Work With CSS Margins».
CSS имеет дурную привычку вести себя не так, как ожидается. И одна из вещей, которые больше всего сбивают людей с толку, это внешние отступы (margin). Кажется, что здесь все должно быть довольно просто, но эти отступы способны приводить к очень странным проблемам.
Для людей, лишь начинающих работать с CSS, свойство margin легко становится одной из вещей, заставляющих думать, что «это идиотский, бессмысленный язык!».
Я ежедневно сталкиваюсь с подобным, как в классе, где мои ученики пытаются разобраться в проблемах с отступами, так и в разделе комментариев на моем YouTube-канале.
Внешние отступы это в определенном смысле модель всего CSS. CSS кажется настолько простым с его парами «свойство: значение», но по мере того как вы углубляетесь в него, вы начинаете понимать, что все гораздо сложнее.
Отступы тоже кажутся простой вещью. Вы добавляете какой-нибудь margin и таким образом добавляете пустое пространство вокруг элемента. Но внезапно этот код начинает вести себя немного по-разному в разных ситуациях. Или вот, скажем, добавляете вы свойство margin-top элементу-потомку, а в результате родительский элемент ползет вниз.
В этой статье я надеюсь пролить свет на некоторые вопросы работы margin-ов. Мы рассмотрим несколько распространенных проблем, возникающих при применении этого свойства, а также простые решения этих проблем.
Что такое margin?
Прежде чем двинуться дальше, я хотел бы удостовериться, что все мы знаем, что из себя представляют эти самые margin-ы!
Я предположу, что все знают, что внешние отступы это часть блочной модели. В этой модели margin это то, что находится снаружи, т. е., идет после контента, внутреннего отступа (padding) и границы (border).
MDN очень хорошо объясняет, что такое margin:
«Margin это самый внешний слой, окружающий контент, padding и border. Это пустое пространство между блоком, к которому margin относится, и другими элементами. Размер этого пространства контролируется свойством margin и его значениями».
Другими словами, это пустое пространство, которое можно использовать для создания отступов между блоками в макете.
Стили браузера (user-agent stylesheets)
Браузеры по умолчанию имеют удивительно большое количество CSS, т. н. user-agent stylesheets. Именно благодаря этим стилям элемент <h1> будет отображаться крупнее, чем <h2>, даже если в нашем документе никакого CSS не будет. И именно этим стилям мы обязаны тем, что у элемента <body> есть свойство margin, которое нам приходится постоянно удалять.
Эти стили имеют большое значение, но при этом их наличие приводит к одной из самых больших проблем в использовании внешних отступов. Дело в том, что по умолчанию не все наши элементы имеют нулевые margin-ы, и, как мы вскоре узнаем, это приводит к разнообразным и странным проблемам.
Списки, цитаты, абзацы и заголовки — все они имеют внешние отступы (и у других элементов отступы тоже есть). И хотя порой это доставляет лишь небольшие неудобства, установленный по умолчанию margin абзацев и заголовков — одна из основных причин проблем с блоками.
По умолчанию для левого и правого внешнего отступа текстового элемента установлено нулевое значение, а вот для margin-top и margin-bottom — нет.
Я часто говорю людям, что эти дефолтные значения сверху и снизу, если брать грубо, такие же, как font-size элемента. Это верно для абзацев, а также заголовков от <h3> до <h6>. Для <h1> это 0.67em, а для <h2> — 0.83em.
Все вышесказанное означает, что между нашими элементами на странице существует пустое пространство, даже если явно мы отступов не задавали.
К дефолтным значениям мы еще вернемся.
Схлопывание внешних отступов
Схлопывание отступов часто бывает причиной головной боли.
Когда у двух элементов есть вертикальные внешние отступы, соприкасающиеся друг с другом, они комбинируются в единый отступ.
Это само по себе странное поведение, но добавьте к этому еще и тот факт, что речь идет исключительно о вертикальных отступах (верхнем и нижнем). Это часто путает и раздражает людей.
Увидеть все это в действии можно на следующем примере:
Чтобы проиллюстрировать происходящее, в нашем примере класс .links добавлен к последнему абзацу (<p содержит в себе две ссылки.
Когда люди делают что-то подобное, они ожидают, что отступ между средним абзацем и ссылками будет равен 80px (40px + 40px), но в итоге оказывается, что он равен 40px. Два внешних отступа соприкасаются, а потому комбинируются в один отступ (схлопываются).
Чтобы эффект стал еще заметнее, давайте установим значение margin-bottom элемента <p> в 100px:
Опять же, два отступа не просто складываются, они схлопываются в один отступ шириной в 100px.
И это хорошо
В подобных случаях, на самом деле, схлопывание это положительный момент. Если у вас несколько элементов с разными внешними отступами, нет необходимости складывать их, чтобы понять, насколько широким будет расстояние между элементами. Мы можем рассчитывать на тот факт, что всегда побеждает больший отступ.
Мы часто даже не задумываемся над этим, ведь эта особенность всегда работает именно таким образом.
Но хорошо это не всегда
Но схлопывание отступов приводит к путанице, когда margin-top первого потомка внутри элемента схлопывается с родительским margin-top.
Давайте еще раз посмотрим на наш скриншот:
Между верхом зоны просмотра и черным блоком есть пробел. И это не из-за body (потому что пробел гораздо больше отступа в 8px, который обычно бывает у body).
Угадайте, откуда появился этот отступ?
На самом деле это отступ элемента <h1> вверху черного блока.
Помните, я говорил, что стили браузера способны приводить к странным проблемам?
Чтобы пояснить, что конкретно здесь происходит, давайте зададим существенно больший margin-top заголовку h1.
Я постоянно вижу, как люди пытаются опустить заголовок внутри его родителя. Но вместо ожидаемого поведения мы получаем гигантский отступ сверху всего блока!
Это происходит потому, что margin-top заголовка <h1> схлопывается с margin-top родительского элемента.
В этом случае ничто не разделяет верх элемента-потомка и элемента-родителя. Поэтому, когда мы добавляем margin-top элементу-потомку, он соприкасается с родительским margin-top. А как мы уже знаем, соприкасающиеся внешние отступы комбинируются в один отступ.
Таким образом, когда мы задаем margin элементу-потомку, он применяется к родительскому элементу.
Вот почему люди ненавидят CSS.
Аналогично, в приведенном выше коде мы задали всем абзацам margin-bottom. Этот отступ у элементов p.link соприкасается с margin-bottom элемента .card, а значит, отступы комбинируются, и margin влияет не на ссылки, а на элемент .card.
Хотя в настоящее время это не приводит ни к каким проблемам на созданном нами сайте, они могут возникнуть в будущем, когда мы решим добавить другие элементы на страницу.
Дело в использовании margin не по назначению
Если мне нужно пространство между элементом .card и потомками внутри него, мне, прежде всего, вообще не стоит использовать margin.
Новички часто путают margin и padding. У меня есть правило на этот случай. Если вам нужно пустое пространство, используйте margin. Если вам нужно больше фона, используйте padding.
В нашем случае мы хотим, чтобы у элемента .card было больше фона. Поэтому нам не следует добавлять margin для потомка. Вместо этого нам нужно добавить padding для самого элемента .card.
На картинке хорошо видно, где padding, а где margin. У заголовка <h1> сверху по-прежнему есть margin, но он больше не сливается с отступом .card, потому что в качестве буфера добавлен padding. Это не дает внешним отступам .card и <h1> соприкоснуться.
Поскольку padding дает достаточное расстояние между абзацами <p> и заголовками <h1>, мы можем удалить добавленные ранее внешние отступы.
Внешние отступы схлопываются не всегда
В схлопывании внешних отступов есть исключения. Прямые потомки родителей grid и flex не имеют схлопывающихся отступов.
Но есть возможность это обойти — и мы возвращаемся к стилям браузера, а которых уже говорили ранее.
Есть простой способ вообще забыть о схлопывании внешних отступов
Прежде всего, напомню о своем правиле выбора между внешним и внутренним отступом:
- Если вам нужно пустое пространство, используйте margin.
- Если вам нужно больше фона, используйте padding.
Это правило в большинстве случаев поможет вам избежать проблем. Но давайте добавим еще одно правило (оно даже еще полезнее):
- Старайтесь вообще не использовать margin-top, за исключением случаев, когда это действительно необходимо.
Это правило немного конфликтует со стилями браузера, которые устанавливают margin-top и margin-bottom целому ряду элементов. Вот поэтому я часто делаю так:
Это устраняет большое количество проблем, связанных с самовольным схлопыванием внешних отступов, а также с различиями в макете, когда где-то используется flex или grid, а где-то — нет.
(Примечание: если вы проверите код на freeCodeCamp, вы увидите, что они тоже поступают подобным образом!)
Это не идеальное решение, кроме того, я часто использую маленький margin-top для отдельных подзаголовков в определенных ситуациях. Но я делаю это намеренно, а не просто позволяю стилям браузера вести себя непредсказуемым образом.
Как сделать отступ между ссылками в css
В программном обеспечении для обработки текстов вы можете добавить в документ множество интервалов или вкладок, а интервал будет отображаться в отображении содержимого документа. Это не относится к HTML или страницам. Таким образом, изучение того, как белое пространство действительно обрабатывается браузерами, очень важно.
У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.
Синтаксис CSS padding и margin
Синтаксис, который используется для единичного объявления свойства CSS margin:
Этот код задает отступы во всех направлениях: сверху, снизу, слева и справа. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:
10px — отступ сверху;
20px — отступ справа;
30px — отступ снизу;
40px — отступ слева.
Также можно установить margin left HTML и другие направления отдельно:
Примечание: Можно использовать для определения отступа px, pts, cm и т.д.
Синтаксис свойства CSS padding
Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.
Единичное объявление с одним значением:
Для каждого направления одиночным объявлением:
Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.
Для каждого направления в отдельности:
Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent разные значения аргументов, мы можем изменять величину отступа текста:
На мой взгляд, этот способ задания отступа для текста, является самым оптимальным, но, тем не менее, рассмотрим еще один способ задания отступа, с использованием изображений.
В программном обеспечении для обработки текстов три основных символа пробела — это пробел, табуляция и возврат каретки. Каждый из них действует определенным образом, но в HTML браузеры делают их практически одинаковыми. Если вы размещаете одно место или 100 пробелов в своей разметке HTML или смешиваете свое расстояние с вкладками и возвратами каретки, все они будут сведены к одному пространству, когда страница будет отображаться браузером. В терминологии дизайна это называется крахом пробела.
Почему кто-то использует вкладки
Как правило, когда люди используют вкладки в текстовом документе, они используют их для макета или для перевода текста в определенное место или на определенное расстояние от другого элемента. В дизайне вы не можете использовать эти вышеупомянутые пробельные символы для достижения этих визуальных стилей или потребностей макета. В веб дизайне использование дополнительных символов пробела в коде будет просто для удобства чтения этого кода.
Веб дизайнеры и разработчики часто используют вкладки для кода отступа, чтобы они могли видеть, какие элементы являются дочерними элементами других элементов, но эти отступы не влияют на визуальный макет самой страницы. Для необходимых визуальных изменений макета вам нужно будет перейти к CSS (каскадные таблицы стилей).
Видео обзор по теме HTML отступ текста
Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px, а для заголовка второго уровня отступ сверху 20px и снизу 10px, а для всех параграфов зададим отступ сверху 10px.
h2 margin-top: 24px;
margin-bottom: 12px;
>
Использование CSS для создания вкладок и интервалов HTML
Сегодня сайты построены с разделением структуры и стиля. Структура страницы обрабатывается HTML, а стиль продиктован CSS. Это означает, что для создания интервала или достижения определенного макета вам следует обратиться к CSS и не пытаться просто добавить символы интервала к HTML коду.
Если вы пытаетесь использовать вкладки для создания столбцов текста, вместо этого вы можете использовать элементы, которые расположены с CSS, чтобы получить макет столбца. Это позиционирование может быть выполнено с помощью поплавков CSS, абсолютного и относительного позиционирования или новых методов компоновки CSS, таких, как Flexbox или CSS.
Если данные, которые вы выкладываете, являются табличными данными, вы можете использовать таблицы для выравнивания этих данных по своему усмотрению. Таблицы часто получают плохой рэп в веб-дизайн, потому что в течение стольких лет они злоупотребляли как чистые макеты, но таблицы по-прежнему отлично подходят, если ваш контент содержит вышеупомянутые табличные данные.
Поля, отступы и текст-отступ
Наиболее распространенные способы создания интервала с CSS — это использование одного из следующих стилей CSS:
Например, вы можете отложить первую строку абзаца, как вкладку со следующим CSS, где обратите внимание, что это предполагает, что ваш абзац имеет атрибут класса «first», прикрепленный к нему.
Этот абзац теперь будет иметь отступ в 5 символов
Вы также можете использовать свойства margin или padding в CSS, чтобы добавить интервал в верхнюю, нижнюю, левую или правую (или комбинации этих сторон) элемента. В конечном счете, вы можете достичь любого расстояния, необходимого для перехода к CSS.
Перемещение текста более одного места без CSS
Если вы хотите, чтобы ваш текст был перемещен более чем на один пробег от предыдущего элемента, вы можете использовать неразрывное пространство. Чтобы использовать неразрывное пространство, вы просто добавляете столько раз, сколько вам нужно, в своей разметке HTML.
Например, если вы хотите переместить свое слово на пять пробелов, вы можете добавить следующее перед словом.
В оформлении веб-страниц это встречается не так часто, но все же встречается и для того чтобы закрыть эту потребность вам нужно знать лишь одно свойство text-indent: 10%; которое я применю к следующему абзацу при помощи этого кода:
CSS урок 10. Отступ и граница элемента CSS
Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.
Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:
Внешние отступы
Внешние отступы в CSS задаются при помощи свойства margin , которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента. 
Свойство:
- margin-bottom (нижний отступ)
- margin-left (отступ слева)
- margin-right (отступ справа)
- margin-top (верхний отступ)
Значения:
- auto
- величина: px или em
- %
Краткая запись:
margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;
Пример:
</style></head> <body> <div> Агния Барто — стихи <p> Я на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> .
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Внутренние отступы
Внутренние отступы в css создаются при помощи свойства padding , которое устанавливает значение полей от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Свойства:
- padding-bottom (нижний отступ)
- padding-left (отступ слева)
- padding-right (отступ справа)
- padding-top (верхний отступ)
Значения:
- auto
- величина: px или em
- %
Краткая запись:
padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;
Пример:
</style></head> <body> <p> Я на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> .
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Граница элемента (рамка)
Граница элемента в CSS устанавливается при помощи свойства border .
border-style (стиль границы)
Значения:
- none (без границы)
- dotted (из точек)
- dashed (пунктирная)
- solid (сплошная)
- double (двойная)
- groove (трехмерная)
- ridge (трехмерная)
- inset (трехмерная с тенью)
- outset (трехмерная с тенью)
Пример:
border-width (ширина границы)
Значения:
- thin (тонкая)
- medium (средняя)
- thick (толстая)
- значение
Пример:
</style></head> <body> <p на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> <p надо парту открывать,<br/> Не знала я сначала,<br/> И я не знала, как вставать,<br/> Чтоб парта не стучала.<br/> </p>
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.
border-color (цвет границы)
Значения:
- red (цвет)
- rgb(255,0,0) (в системе rgb)
- #ff0000 (в шестнадцатиричной системе)
- transparent (прозрачная)
Результат:
Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?
Краткая запись:
border:border-width border-style border-color; border: 1px solid #000;
Внешние границы (outline)
Внешние границы в CSS создаются при помощи свойства outline , одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. В отличие от линии, задаваемой через border , свойство outline не влияет на положение блока и его ширину.
outline-color (цвет)
Значения:
- red (цвет)
- rgb(255,0,0) (в системе rgb)
- #ff0000 (в шестнадцатеричной системе)
- invert (инвертированный, противоположный)
outline-width (ширина)
Значения:
- thin (тонкая)
- medium (средняя)
- thick (толстая)
- значение
outline-style (стиль границы)
Значения:
- none (без границы)
- dotted (из точек)
- dashed (пунктирная)
- solid (сплошная)
- double (двойная)
- groove (трехмерная)
- ridge (трехмерная)
- inset (трехмерная с тенью)
- outset (трехмерная с тенью)
Краткая запись:
outline:outline-color outline-style outline-width; outline: #0f0 solid thick;
Некоторые приемы с границей
Рамка вокруг изображения
Пример:
Результат:
Двойная рамка с использованием CSS
Пример:
Результат:
Путь осилит идущий,
И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.
-
Offline
yan21
Недавно здесь
- Регистрация:
- 10.11.2008
- Сообщения:
- 8
- Симпатии:
- 0
- Пол:
- Мужской
Помогите плиз! Ушёл человек который занимался сайтом. Руководство дало задачу внести кое какие изменения в сайт. Я внёс. Но произошли изменения которые я не знаю как исправить. А именно:
как увеличить расстояние между ссылками, если они идут списком? Спасибо! -
Offline
Fanamura
Доброта
- Регистрация:
- 12.03.2007
- Сообщения:
- 5 094
- Симпатии:
- 158
- Пол:
- Мужской
yan21,
в css шаблона:
a:link{
line-heigth:20px;
}
значение 20px меняем на нужное -
Offline
-=phenix=-
Недавно здесь
- Регистрация:
- 01.09.2008
- Сообщения:
- 64
- Симпатии:
- 2
- Пол:
- Мужской
Хммм. я бы использовал padding и margin Как стандарты для отступов. И применял бы их к li части, или в комплексе a {display:block;}
Точнее сказал бы если бы видел верстку. -
Offline
_voland_
Местный
=> Cпециалист <=- Регистрация:
- 12.04.2008
- Сообщения:
- 2 171
- Симпатии:
- 102
- Пол:
- Мужской
Лучше line-height — с IE проблем меньше
-
Offline
-=phenix=-
Недавно здесь
- Регистрация:
- 01.09.2008
- Сообщения:
- 64
- Симпатии:
- 2
- Пол:
- Мужской
Спорить не буду… для ИЕ вообще приходится корпеть отдельно … Просто line-height я юзаю для других дел, и вот почему не рекосендую его.
Например — вот цсс
#header h2 { width:350px; height:200px; float:left; background:url(../images/bg/bg_meridian.gif) no-repeat; line-height:9999px; overflow:hidden;}
А вот код
<div id=»header»>
<h2>Meridian.co.ua- туристическая компания. Незабываемый отдых. Карпаты, Крым.</h2>
</div>Так вот — есть в шаблоне у парня указаны абсолютные размеры — то использование line-height уберет (или порежит) ссылку.
Да- и потом — покажи те мне как сделать так padding: 3px 20px 2px 1em; то есть по разному отсутпы прописать с разных старон -
Offline
yan21
Недавно здесь
- Регистрация:
- 10.11.2008
- Сообщения:
- 8
- Симпатии:
- 0
- Пол:
- Мужской
Добрый день! В редакторе HTML-кода нашел
<ul> <li><a href=»http://www.сайт.ru/index.php?option=com_content&task=view&id=33&Itemid=69#1″>стол</a></li><li><a href=»http://www.сайт.ru/index.php?option=com_content&task=view&id=33&Itemid=69#2″>стул</a> </li><li><a href=»http://www.сайт.ru/index.php?option=com_content&task=view&id=33&Itemid=69#3″>кровать</a> </li><li><a href=»http://www.сайт.ru/index.php?option=com_content&task=view&id=33&Itemid=69#4″>ортопедические матрасы</a> </li><li><a href=»http://www.сайт.ru/index.php?option=com_content&task=view&id=33&Itemid=69#6″>кресло</a> </li><li><a href=»http://www.сайт.ru/index.php?option=com_content&task=view&id=33&Itemid=69#7″>дом</a> </li><li><a href=»http://www.сайт.ru/index.php?option=com_content&task=view&id=33&Itemid=69#9″>квартира</a> </li><li><a href=»http://www.сайт.ru/index.php?option=com_content&task=view&id=33&Itemid=69#8″>и др</a> </li><li><a href=»http://www.сайт.ru/index.php?option=com_content&task=view&id=33&Itemid=69#5″>и др</a> </li></ul>
Подскажите где я должен прописать?
Если не в редакторе то где именно в css? -
Offline
Fanamura
Доброта
- Регистрация:
- 12.03.2007
- Сообщения:
- 5 094
- Симпатии:
- 158
- Пол:
- Мужской
yan21, в css:
ul li{
line-heigth:20px;
}
Поделиться этой страницей
Опубликовано: 12.05.2011 Последняя правка: 08.12.2015
На этой странице вы найдете примеры по изменению HTML-ссылок при помощи CSS, который позволяет их делать ссылками-блоками, ссылками-иконками, без подчеркивания, с закругленными углами, изменять между ними расстояние и многое другое. В дальнейшем на основе этих примеров можно создавать различные варианты навигационных меню для сайта.
Прежде чем вы начнете изучение примеров, хочу сделать небольшое пояснение. Во всех примерах, для большей наглядности, будет использован псевдокласс CSS :hover, который применяется для изменения стилей ссылок при наведении на них курсора мыши. Надо сказать, что подобная практика является обычным явлением и в той или иной степени применяется практически на всех сайтах интернета.
Ссылки без подчеркивания и с подчеркиванием
В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.
Пример HTML и CSS: как убрать и добавить подчеркивание у ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Подчеркивание у ссылок</title>
<style type="text/css">
a { color: green } /* цвет ссылок */
.one, .two { text-decoration: none } /* убираем подчеркивание у первых двух ссылок */
.two:hover { text-decoration: underline } /* добавляем его ко второй при наведении */
.three:hover { text-decoration: none } /* убираем подчеркивание у третьей ссылки при наведении */
</style>
</head>
<body>
<div>
<a class="one" href="#">Ссылка 1</a>
<a class="two" href="#">Ссылка 2</a>
<a class="three" href="#">Ссылка 3</a>
</div>
</body>
</html>Результат примера
Описание примера
- По умолчанию все популярные браузеры добавляют к ссылкам подчеркивание, которое регулируется свойством CSS text-decoration. То есть по умолчанию это свойство, для ссылок, имеет значение underline. Используя эти знания, мы и изменяем подчеркивание у ссылок в их разных состояниях.
Изменение стиля подчеркивания ссылок и расстояния от подчеркивания до текста
Изначально подчеркивание у ссылок — это сплошная тонкая линия, почти вплотную прижатая к тексту. И в большинстве случаев такого варианта вполне достаточно. Однако иногда дизайн требует, чтобы ссылки подчеркивались не сплошной, а, например, пунктирной линией, или чтобы расстояние от подчеркивания до ссылок было больше стандартного, или само подчеркивание было более жирным. А иногда нужно сделать вообще какое-нибудь экзотическое подчеркивание, например волнистой или разноцветной линией. Все эти варианты и будут рассмотрены в данном примере.
Пример HTML и CSS: пунктирное подчеркивание ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Создание пунктирного подчеркивания у ссылок</title>
<style type="text/css">
body { background: #fff; }
a {
color: #00f; /* цвет ссылок */
text-decoration: none; /* убираем стандартное подчеркивание */
}
.one {
border-bottom: 2px #f00 dashed; /* стили рамки для первой ссылки */
zoom:1; /* для IE6 и IE7 */
}
.one:hover { border-color: #fff; } /* цвет рамки при наведении на первую ссылку */
.two {
border-bottom: 2px #00f solid; /* стили рамки второй ссылки */
padding-bottom: 3px; /* добавляем нижний внутренний отступ */
zoom:1; /* для IE6 и IE7 */
}
.two:hover { border-color: #fff; } /* цвет рамки при наведении на вторую ссылку */
.three {
background: url('images/under.png') 0 100% repeat-x; /* фон третьей ссылки */
padding-bottom: 1px; /* нижний отступ */
}
.three:hover { background: none; } /* убираем фон */
</style>
</head>
<body>
<div>
<a class="one" href="#">Ссылка 1</a>
<a class="two" href="#">Ссылка 2</a>
<a class="three" href="#">Ссылка 3</a>
</div>
</body>
</html>Результат примера
Описание примера
- Сначала убираем стандартное подчеркивание у всех ссылок, так как будем использовать нестандартные методы. Затем первой ссылке добавляем нижнюю границу рамки с помощь свойства CSS border-bottom, причем делаем ее пунктирной (dashed). Это и будет наше подчеркивание. Чтобы при наведении на ссылку подчеркивание убиралось — используем псевдокласс и делаем фон рамки таким же, как и фон страницы, то есть просто скрываем ее. По идее, здесь было бы лучше вообще сделать фон рамки прозрачным (transparent), но IE6 неправильно понимает это значение.
- Со второй ссылкой проделываем то же, что и с первой, но только рисуем сплошную линию. Чтобы увеличить расстояние от текста до подчеркивания — задаем ссылке небольшой нижний отступ с помощью свойства CSS padding-bottom.
- У нашей третьей ссылки подчеркивание разноцветное, поэтому его мы будем добавлять с помощью фонового изображения. Используем для этого небольшую картинку, которую подключаем через CSS background. Позиционируем фон в нижнюю часть ссылки (0 100%) и разрешаем ему дублироваться только по горизонтали (repeat-x). Подчеркивание готово, но прилегает слишком близко к тексту, чтобы это исправить — добавляем ссылке маленький отступ снизу. Теперь все.
- В старичках IE6 и IE7 могут возникнуть проблемы с отображением подчеркивания у первой и второй ссылки. Для исправления добавляем свойство zoom:1, которое включает т.н. layout. Это свойство невалидно и его понимают только эти браузеры, поэтому лучше подключить его условными комментариями.
Ссылки-блоки
Очень часто для создания меню требуется сделать не просто текстовые ссылки, а ссылки-блоки, у которых активной областью будет как сам текст, так и определенная зона вокруг него.
Пример HTML и CSS: делаем ссылки-блоки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Создание ссылок-блоков</title>
<style type="text/css">
a {
display: block; /* делаем ссылки блоками */
width: 180px; /* ширина ссылок */
color: #fff; /* цвет текста */
background: #900; /* фон */
text-decoration: none; /* убираем подчеркивание */
text-align: center; /* текст по центру */
border: 2px #000 solid; /* стили рамки вокруг ссылок */
margin: 5px 0; /* внешние поля */
padding: 5px; /* внутренние отступы */
}
a:hover {
background: #c33; /* фон ссылки под курсором */
}
</style>
</head>
<body>
<div>
<a href="#">Ссылка-блок 1</a>
<a href="#">Ссылка-блок 2</a>
</div>
</body>
</html>Результат примера
Описание примера
- Для создания ссылок-блоков используем свойство CSS display:block, которое превращает их в блочные элементы, создающие до и после себя перевод строки. Если переводы строк не нужны — можно заменить значение на inline-block.
- Так как ссылки теперь у нас являются блоками, то если необходимо, мы можем изменять у них ширину (CSS width) или высоту (CSS height).
- В этом примере высоту ссылок мы вообще не указываем, а просто задаем им внутренние отступы (CSS padding), которые и расширяют блоки.
Ссылки с рамками под курсором мыши
В этом примере мы сделаем ссылки с рамками, которые будут у них появляться в момент наведения курсора мыши. В общем-то, в этом нет ничего сложного, но есть один маленький нюанс.
Пример HTML и CSS: делаем ссылки с рамками при наведении курсора мыши
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Ссылки с рамками под курсором мыши</title>
<style type="text/css">
body { background: #fff; } /* фон страницы */
a {
display: inline-block; /* преобразование ссылок во встроенные блоки */
color: #333; /* цвет ссылок */
font-weight: bold; /* жирность шрифта */
text-decoration: none; /* отмена подчеркивания */
border: 3px #fff solid; /* стили рамки */
padding: 5px 10px; /* внутренние отступы */
}
a:hover {
border: 3px #f00 solid; /* стили рамки ссылок под курсором мыши */
}
</style>
</head>
<body>
<div>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</div>
</body>
</html>Результат примера
Описание примера
- Все очень просто — с помощью свойства CSS border добавляем ссылкам под курсором нужную рамку. Однако, внимание, точно такую же рамку мы добавляем и обычным ссылкам, вот только цвет ее делаем такой же, как фон страницы. То есть попросту скрываем рамку до поры до времени. Это делается для того, чтобы при наведении курсора мыши, ссылки не начали «прыгать» из-за отрисовки рамки.
Вместо того чтобы делать цвет рамок под фон страницы, ему можно было бы присвоить значение transparent и сделать прозрачным, но, как я уже говорил, IE6 неправильно его обрабатывает.
Трехмерные ссылки
В этом примере мы сделаем трехмерные ссылки, которые будут походить на кнопки. Точнее ссылки будут не трехмерные, а псевдотрехмерные, конечно.
Пример HTML и CSS: создание трехмерных ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Трехмерные ссылки</title>
<style type="text/css">
a {
display: inline-block; /* изменяем ссылки на встроенные блоки */
color: #c0c0c0; /* цвет текста ссылок */
background: #06f; /* цвет фона */
font-weight: bold; /* жирный текст */
text-decoration: none; /* отмена подчеркивания */
border: 2px solid; /* толщина и стиль рамок */
border-color: #ccc #333 #333 #ccc; /* цвет границ рамок */
padding: 10px 5px; /* внутренние отступы */
}
a:hover {
color: #acacac; /* цвет ссылок под курсором мыши */
background: #0052eb; /* фон */
border-color: #333 #ccc #ccc #333; /* цвет границ рамок */
position: relative; /* относительное позиционирование */
top: -1px; /* смещение вверх на 1px */
}
</style>
</head>
<body>
<div>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
</div>
</body>
</html>Результат примера
Описание примера
- С помощью свойства CSS border добавляем ссылкам рамки, а с помощью border-color — задаем им цвет. При этом для левой и верхней границы указываем светлый оттенок цвета, а для нижней и правой — темный. Именно благодаря такому распределению цветов мы и получаем ссылки, которые похожи на трехмерные кнопки.
- Чтобы при наведении курсора мыши казалось, что кнопки нажимаются — инвертируем у ссылок с псевдоклассом :hover цвета рамок. Для дополнительного эффекта нажатия, задаем относительное позиционирование (CSS position:relative) и делаем однопиксельное смещение вверх (CSS top:-1px).
- Ну и чтобы все совсем было красиво — задаем ссылкам под курсором цвет текста и фона немного темнее, чем у обычных. Готово.
Ссылки с иконками
В этом примере мы сделаем ссылки с иконками, которые будут содержать не только изображения этих иконок, но и текст под ними. Однако в дальнейшем вы легко сможете их изменить и оставить, например, только иконки.
Перед началом работ подготовим несколько изображений иконок, причем в двух комплектах — для обычных ссылок и ссылок под курсором мыши. Второй комплект должен внешне отличаться от первого, у нас оно выражается в цветовой палитре.
Пример HTML и CSS: делаем ссылки с иконками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Создание ссылок с иконками</title>
<style type="text/css">
.links {
display: inline-block; /* ссылки становятся встроенными блоками */
min-width: 40px; /* минимальная ширина ссылок */
width: auto !important; /* если нужна поддержка IE6 */
width: 40px; /* если нужна поддержка IE6 */
color: #666; /* цвет текста ссылок */
font-weight: bold; /* жирность шрифта */
text-decoration: none; /* отмена подчеркивания */
text-align: center; /* центровка текста */
padding: 50px 5px 5px; /* внутренние отступы ссылок */
}
.links:hover {
color: #c00; /* цвет текста ссылок под курсором */
}
.image {background: url(images/image.png) 50% 0 no-repeat;} /* иконка картинок */
.image:hover {background: url(images/image_hover.png) 50% 0 no-repeat;} /* иконка картинок при наведении мыши */
.audio {background: url(images/audio.png) 50% 0 no-repeat;}
.audio:hover {background: url(images/audio_hover.png) 50% 0 no-repeat;}
.video {background: url(images/video.png) 50% 0 no-repeat;}
.video:hover {background: url(images/video_hover.png) 50% 0 no-repeat;}
</style>
<body>
<div>
<a class="links image" href="#">Картинки</a>
<a class="links audio" href="#">Аудио</a>
<a class="links video" href="#">Видео</a>
</div>
</body>
</html>Результат примера
Описание примера
- Ради сокращения кода, задействуем в ссылках два класса — «links» (с общими свойствами) и «image», «audio», «video» (персональные для каждой ссылки). Этот момент подробно описан в классах справочника CSS.
- Наши иконки имеют размер 50×50 пикселей и будут присутствовать у ссылок в качестве фона (CSS background), который мы расположим по центру вверху (50% 0) и запретим ему размножаться (no-repeat).
- Добавляем ссылкам внутренние отступы (CSS padding), чтобы текст в ссылках не прилегал к краям. При этом верхний отступ делаем равным высоте иконок, чтобы текст не накладывался на них, ведь иконки у нас — это фон.
- Если текста в ссылках будет очень мало, то изображения иконок обрежутся по бокам. Чтобы этого не произошло, задаем ссылкам такую минимальную ширину (CSS min-width), чтобы она как минимум была равна ширине иконок. В нашем случае надо получить минимальную ширину в 50px, однако мы задаем 40px, так как еще 10px добавится благодаря боковым отступам.
- Чтобы минимальная ширина сработала — преобразуем ссылки во встроенные блоки (CSS display:inline-block).
IE6 придется немного «пролечить»:
- IE6 не понимает свойство для установки минимальной ширины, но зато он интерпретирует свойство CSS width именно, как минимальную ширину. Поэтому применяем для него простой хак, который исправит данную проблему.
Если вам нужны ссылки вообще без текста, а только с иконками, то можно поступить так. Убрать у ссылок все внутренние отступы и минимальную ширину. Задать им явную ширину и высоту равную размеру иконок.
Закругленные углы ссылок
В данном примере мы закруглим углы у ссылок с помощь одного из способов закругления углов, описанном в соседнем подразделе. Вариант с применением CSS 3 рассматривать не будем, так как там все очень просто, а лучше сделаем закругления с использованием изображений.
Для этого сначала вырежем несколько заготовок картинок в двух комплектах — для обычных ссылок и ссылок под курсором. У нас оно будут отличаться наличием/отсутствием тени у изображений.
Пример HTML и CSS: ссылки с закругленными углами
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Закругления у ссылок</title>
<style type="text/css">
.links {
display: inline-block; /* делаем ссылки встроенными блоками */
position: relative; /* относительное позиционирование */
height: 28px; /* высота ссылок */
color: #330; /* цвет текста */
text-align: center; /* текст по центру */
text-decoration: none; /* отмена подчеркивания */
font: bold 16px Arial, sans-serif; /* стили шрифта */
background: #c00 url('images/center.png') 0 0 repeat-x; /* фон ссылок */
padding: 7px 34px; /* внутренние отступы */
}
.links:hover {
background: url('images/center_hover.png'); /* фон ссылки под курсором мыши */
}
.links:before, .links:after {
width: 34px; /* ширина псевдоэлементов */
height: 42px; /* высота */
font-size: 0; /* обнуление шрифта */
overflow: hidden; /* обрезка лишнего */
position: absolute; /* абсолютное позиционирование */
top: 0; /* нулевое смещение сверху */
}
.links:before {
content: url('images/left_bok.png'); /* изображение левого бока */
left: 0; /* нулевое смещение слева */
}
.links:hover:before {
content: url('images/left_bok_hover.png'); /* изображение левого бока под курсором мыши */
}
.links:after {
content: url('images/right_bok.png'); /* изображение правого бока */
right: 0; /* нулевое смещение справа */
}
.links:hover:after {
content: url('images/right_bok_hover.png'); /* изображение правого бока под курсором мыши */
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.links {
z-index: expression(
runtimeStyle.zIndex = 1,
innerHTML = '<span class="left_bok"></span>'
+
innerHTML + '<span class="right_bok"></span>'
);
}
.left_bok, .right_bok {
width: 34px;
height: 42px;
font-size: 0;
overflow: hidden;
position: absolute;
top: 0;
}
.left_bok {
background: url(images/left_bok.png) 0 0 no-repeat;
left: 0;
}
.links:hover .left_bok {
background: url(images/left_bok_hover.png) 0 0 no-repeat;
}
.right_bok {
background: url(images/right_bok.png) 0 0 no-repeat;
right: 0;
margin-left: 100%; /* для IE6 */
left: -34px; /* для IE6 */
}
.links:hover .right_bok {
background: url(images/right_bok_hover.png) 0 0 no-repeat;
}
</style>
<![endif]-->
<body>
<div>
<a class="links" href="#">Ссылка 1</a>
<a class="links" href="#">Ссылка 2</a>
</div>
</body>
</html>Результат примера
Описание примера
Останавливаться на самой технологии закругления не будем, если необходимо, то прочитаете о ней в соответствующем разделе сайта.
- Используя свойство CSS display:inline-block делаем ссылки встроенными блоками. В частности, это необходимо для того, чтобы мы могли указать ссылкам точную высоту, соответствующую высоте изображений.
- Убираем подчеркивание и выравниваем текст по центру (CSS text-align:center). Вообще, в нашем случае центровать текст не обязательно, так как ссылки подстраиваются под размер текста в них и ему просто некуда выравниваться. Но вот если потребуется увеличить ширину ссылок (например, до 150px), то такое выравнивание будет как нельзя кстати.
- Чтобы изменить внешний вид ссылок, когда они находятся под курсором мыши — добавляем в стили дополнительные селекторы с псевдоклассом CSS :hover, в которых указываем наши части изображений, но без тени.
Для IE6 и IE7 подключаем дополнительные стили с помощью условных комментариев, но сам CSS-код немного изменяем и делаем его отличным от того, который используется в способах закругления углов:
- Суть изменения состоит в том, что с помощью expression мы интегрируем внутрь ссылок все те же два тега <SPAN>, но только без атрибутов style содержащих стили. Вместо этого мы добавляем тегам классы «left_bok» и «right_bok», а стили для них выносим и пишем ниже. Эти стили практически полностью такие же, как и в основном коде CSS, но только здесь все картинки идут в качестве фона тегов.
Закругленные углы ссылок (вариант два)
Рассмотрим еще один пример закругления углов ссылок, но уже с использованием четырех отдельных изображений-уголков.
Пример HTML и CSS: ссылки с закругленными углами (второй вариант)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Создание закруглений у ссылок</title>
<style type="text/css">
.links {
display: inline-block; /* делаем ссылки встроенными блоками */
color: #000; /* цвет текста в ссылках */
text-decoration: none; /* отменяем подчеркивание */
text-align: center; /* текст в ссылках по центру */
border: 2px #f0c solid; /* стили рамки */
padding: 7px; /* внутренние отступы */
position: relative; /* относительное позиционирование */
}
.links:hover {
color: #fff; /* цвет текста при наведении курсора мыши */
background: #f0c; /* фон при наведении */
}
.links:before, .links:after {
text-align: left; /* содержимое псевдоэлементов выравниваем слева */
height: 11px; /* высота блоков-уголков */
font-size: 0; /* обнуление шрифта (для старых браузеров) */
overflow: hidden; /* обрезание лишнего (для старых браузеров) */
position: absolute; /* абсолютное позиционирование */
right: -2px; /* смещение вправо */
left: -2px; /* смещение влево */
}
.links:before {
content: url('images/corn_lt.png'); /* изображение левого верхнего угла */
background: url('images/corn_rt.png') 100% 0 no-repeat; /* правый верхний угол в виде фона */
top: -2px; /* смещение вверх */
}
.links:after {
content: url('images/corn_lb.png'); /* изображение левого нижнего угла */
background: url('images/corn_rb.png') 100% 0 no-repeat; /* правый нижний угол в виде фона */
bottom: -2px; /* смещение вниз */
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.links {
zoom: 1;
z-index: expression(
runtimeStyle.zIndex = 1,
innerHTML =
'<span style="width: 11px;height: 11px;position: absolute;font-size: 0;background: url(images/corn_lt.png) no-repeat;left: -2px;top: -2px;"></span>' +
'<span style="width: 11px;height: 11px;position: absolute;font-size: 0;background: url(images/corn_lb.png) no-repeat;left: -2px;bottom: -2px;"></span>' +
'<span style="width: 11px;height: 11px;position: absolute;font-size: 0;background: url(images/corn_rt.png) no-repeat;right: -2px;top: -2px;margin-left: 100%;left: -9px;"></span>' +
'<span style="width: 11px;height: 11px;position: absolute;font-size: 0;background: url(images/corn_rb.png) no-repeat;right: -2px;bottom: -2px;margin-left: 100%;left: -9px;"></span>'
+ innerHTML);
}
</style>
<![endif]-->
<body>
<div>
<a class="links" href="#">Ссылка 1</a>
<a class="links" href="#">Ссылка 2</a>
</div>
</body>
</html>Результат примера
Описание примера
Здесь тоже не будем говорить о самом закруглении, обозначим только отличительные моменты.
- С помощь свойства CSS display:inline-blok преобразуем ссылки во встроенные блоки. Затем убираем у них подчеркивание, добавляем рамку и выравниваем текст по центру.
- Так как псевдоэлементы, с помощь которых мы закругляем углы, находятся внутри ссылок, то их содержимое тоже выравнивается по центру, а, следовательно, уголки-картинки, добавленные свойством CSS content, не ставятся по углам, как нам надо. Чтобы это исправить, добавляем им text-align:left, возвращая значение, которое браузеры используют по умолчанию.