Несколько примеров работы с CSS: !important и запрет переноса длинных ссылок

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

Выставление приоритета с помощью !important

В CSS приорите отдается тому правилу, которое указано последним. Пример:

a { text-decoration:underline }
...
a { text-decoration:none }

Если вы в файле style.css укажете сначала, что ссылку нужно подчеркивать, а в конце укажете, что подчеркивать не нужно, то главным будет считаться последнее правило — ссылка не будет подчеркнута. Это простой пример. Но бывают и сложные случаи, например, файл style.css, состоящий из тысячи строк, и разобраться в нем не всегда под силу новичку. Если вы хотите, чтобы указанное вами правило было самым главным, независимо от того, в каком месте файла оно находится, используйте метку [codei lang=»css»]!important. Пример:

a { text-decoration:underline; color:#CCC }
...
a { text-decoration:underline !important; color:#FF0000 !important }
...
a { text-decoration:none; color:#AAA }

Приоритетным будет считаться второе правило — ссылка будет подчеркнутой и красного цвета.

Запрет переноса длинных ссылок

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

a { white-space: nowrap }

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

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

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