Как сбросить стиль ссылки css

Сброс стилей CSS

Данная тема весьма актуальна для тех кто хочет верстать, верстает и собирается верстать сайты дальше.

Вообще сброс каскадных таблиц CSS используется, чтобы обеспечить корректное отображение структурных элементов HTML страницы в различных браузарех в соответствии с общепринятыми стандартами W3C. А так как каждый браузер имеет дефолтные стили для каждого элемента, то сброс стилей помагает обеспечить кроссбраузерность и кроссплатформеность разрабатываемого продукта (сайта, блога, форума).

Пока существуют такие варианты правил сброса стилей CSS:

  • которые использую я (зарекомендовали себя временем )
  • проект Normalize от Николаса Галахера и Джонатана Нила

Сброс стилей CSS от меня

Заключение

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

Евгений, я последнее время сбросом Мейера пользуюсь, так без напряга)

Пользовался выше перечисленными методами, пока не начал верстать под различные cms. Пришлось писать самому, кстати теперь такой же reset.css, как и у вас)

Евгений, они не мешают) а просто не нужны, если табами прокликивать то при попадании на инпут в нем будет находиться курсор и часто не предусматриваются такие штуки и просто убираешь обводку на автомате

JAH, имеешь ввиду фокус в браузерах Chrome и Safari? Так, а чем они мешают?

Евгений, согласен можно убрать, но помнить про фокусировку на инпутах

А вот обводку я бы не убирал. Потому что это неправильно по Web Accessibility. Как люди с ограничеными способностями, которые передвигаются с помощью клавиатуры, будут видеть где они сейчас?

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

Знакомьтесь с моим новым jQuery плагином Formcheck.js для проверки полей формы. Можно легко проверить поле на заполненность, правильность ввода телефона, правильность ввода email и проверить отмечены ли обязательные чекбоксы, все бесплатно — все

Здравствуйте, дорогие читатели! Я как всегда с сюрпризом) В этой статье я покажу Вам, как можно сделать поле для ввода телефона, но не простое а золотое, с маскировкой и проверкой. Что такое маскировка поля? Наверняка Вы уже сталкивались с такой

Сегодня поделюсь с Вами моим скриптом, который я использую для простой проверки полей форм на заполненность перед отправкой их на сервер, с помощью jQuery (скрипт может проверять сразу несколько форм на странице)

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

Хочу поделиться с Вами HTML разметкой секции head, которую я использую для верстки сайтов

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

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

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

Responsive design = отзывчивый дизайн = аксиома. Минимальная история развития веб дизайна: его путь от фиксированного до жидкого и до отзывчивого (реагирующего, адаптивного, responsive) дизайна

Варианты стилизации ссылок в CSS

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

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

Со ссылками работают самые разнообразные свойства: color , background , border , border-radius , text-decoration , padding и т. д. Мы покажем наиболее распространенные варианты оформления ссылок, после чего вы можете подумать, каким образом их дополнить либо изменить.

Подчеркивание ссылок

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

Стандартный стиль ссылки в браузереСтандартный стиль ссылки <a> в браузере

Чтобы отменить дефолтный подчеркнутый стиль у ссылок, потребуется задать значение none для уже знакомого нам свойства text-decoration :

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

Подчеркивание ссылок при наведении

Один из распространенных стилей для ссылки — подчеркивание при наведении курсора. В этом варианте ссылку в исходном состоянии необходимо визуально выделить, а для состояния :hover добавить соответствующее свойство. Пример:

Ссылка подчеркнута, когда наведен курсор

Подчеркивание с помощью border

Стандартное свойство text-decoration не поддается особой стилизации, поэтому веб-разработчики часто используют в качестве альтернативы свойство border . Управлять внешним видом границы гораздо легче: ей можно задать цвет, толщину, стиль полосы. Пример:

Подчеркивание ссылки с помощью рамкиСоздание подчеркивания с помощью свойства border-bottom

Согласитесь, такой вариант выглядит веселее с точки зрения возможностей. Не забывайте, что с помощью псевдокласса :hover можно изменить вид границы (и не только) при наведении курсора. А если при этом еще и задействовать CSS-анимацию, то из обычной ссылки может получиться настоящее произведение искусства! Убедитесь в этом сами, взглянув на несколько оригинальных способов выделения ссылок в CSS.

Ссылка с фоном

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

Как обозначить ссылки, которые открываются в новом окне/вкладке? Для этого поведения даже существует привычная иконка. Но добавлять ее через тег <img> будет не очень хорошим тоном. Желательно, чтобы иконка открытия в новом окне появлялась автоматически, если у ссылки есть соответствующий HTML-атрибут target="_blank" . Здесь нам на помощь придет селектор атрибутов:

Ссылка с фоновым рисунком background-imageСсылка с иконкой открытия в новом окне

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

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

Ссылка-кнопка

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

Несколько примеров (чтобы просмотреть код CSS для каждого примера, кликните по изображению):

Код CSS для данного примера:

Код CSS для данного примера:

В этих примерах определены стили как для обычного состояния ссылки-кнопки, так и для состояний :hover (наведение) и :active (нажатие/удержание). Как видите, CSS позволяет имитировать внешний вид настоящей кнопки до мельчайших деталей.

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

Современный сброс стилей CSS

Современный сброс стилей CSS

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

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

Сброс разумных настроек по умолчанию

Мне до сих пор нравится делать сброс, так что я долго и усердно, годами ковырялся, как одержимый в Code golf (прим. это когда побеждает самый короткий и действенный подход в программировании ) стиле на этом направлении. Я всё объясню, что в этом коде где и как, но сначала посмотрите на него целиком:

Ну, а теперь разбираемся

Начинаем мы с box-sizing . Тут я простым и элегантным движением сразу же сбрасываю все элементы и псевдоэлементы на box-sizing: border-box .

Кто-то считает, что псевдоэлементы должны наследовать параметры блочной модели, но я считаю это глупым. Если вы хотите использовать другое значение для box-sizing , то просто укажите его — ну это то, как я делаю, в любом случае. Я написал про box-sizing больше в CSS From Scratch.

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

Но хотя, я упомяну ситуацию со списками. Тут я выбрал только те списки, у которых есть атрибут class , так как если я буду использовать чистый <ul> или <ol> , то я хочу, чтобы он выглядел реально как список. Тут главное не переусердствовать, охватив всё, как в предыдущем моменте, что удалит все отступы.

Идем дальше: стили для body . Тут у меня всё просто. Очень полезно указать для body занять весь viewport , даже когда он пуст, делаю я это, выставляя min-height на 100vh . Ещё мне нравится плавный скролл к анкорам, так что тут я выставлю scroll-behavior: smooth .

Ещё, я выставил только два текстовых стиля. line-height на 1.5 , потому что по-дефолту стоит 1.2 , чего откровенно недостаточно в плане доступности и читабельности текста. Так же я выставил text-rendering на optimizeSpeed . Используя optimizeLegibility вы делаете ваш текст приятнее на вид, но можете столкнуться с серьёзными проблемами производительности, такими как задержки в 30 секунд при загрузке, так что я его стараюсь избегать. Хотя, я иногда добавляю его для секций с микротекстом.

Как и с отступами, я сбрасываю стилизацию списков только у элементов, у которых указан class .

Для ссылок без указания класса, я выставлю text-decoration-skip-ink: auto , так что подчеркивание будет рендериться куда читабельнее. Вообще, это можно было бы выставить всем ссылкам, но у меня возникло несколько конфликтов, так что я оставил так, как написано выше.

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

Мне очень нравится этот трюк в CSS и я наконец-то осмелился добавить его в сброс. Так называемый “lobotomized owl selector” выбирает прямых потомков article и добавляет им сверху внешний отступ в 1em . Это указывает понятную периодичность в потоке контента у article . Вообще, на самом деле, я использую удобную штуку с .flow , сейчас уже почти в каждом проекте. Вы можете больше прочитать про это на 24 Ways. Да и вообще, мне так кажется, что это сейчас мой самый используемый CSS.

Ещё одна вещь, которую я наконец то решился выставить по дефолту это font: inherit для инпутов, которые, проще говоря, делают то, что и должны делать. Хватит уже этого мелкого (mono, в некоторых случаях) текста!

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

Заключение

Вот и всё, вот он маленький и сброс для стилей, который делает жизнь куда проще. Если он вам приходится по вкусу, то смело можете его брать на вооружение! Берите его на GitHub или в NPM.

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

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