13 трюков для вёрстки сайта. CSS-шпаргалка.

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

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

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

*

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

1
2
3
4
* {
   margin: 0;
   padding: 0;
}
* {
   margin: 0;
   padding: 0;
}

Таким образом мы обнуляем все отступы у элементов, подставляемые браузером по умолчанию. Хорошо это или плохо, решать только вам. Как уже отмечено выше, метод сей безумно стар. Сегодня чаще используют дополнительные стили, именуемые “CSS Reset” – более детализированный перечень, позволяющий отображаться сайду максимально одинаково во всех браузерах.

Установите body font-size 62.5% для более простой конвертации в em

Если вы собираетесь использовать относительную величину (em) для размеров шрифта, используйте следующий код разметки:

1
2
3
4
5
6
body {
font-size: 62.5%; /* теперь 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}
body {
font-size: 62.5%; /* теперь 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

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

Не даём длинной ссылке выходить за границы блока

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

1
2
3
.long-text {
word-wrap: break-word;
}
.long-text {
word-wrap: break-word;
}

функция calc()

Это именно то, о чём мечтали, если не все, то большинство верстальщиков, уж точно. Признаться, с тех пор, как функция появилась, я ни разу не применил её на практике. Но, раньше, помнится, мне её очень не хватало. Что же, мечты сбываются. Осталось дело за малым – начать использовать.

Так что же она делает? Помните, как верстали «резиновый» макет сайта и мечтали задать блоку ширину или отступ в виде 10% + 20px? Возрадуйтесь, теперь это возможно

1
margin-left: calc(10% + 20px);
margin-left: calc(10% + 20px);

Отмечу так же, что внутри функции могут быть уравнения любой сложности.

A + B

Этот селектор называется «примыкающим». С его помощью можно выбрать следующий элемент, относительно текущего. Если вы хотите выбрать первый DIV после заголовка, нужно ввести:

1
2
3
header + div {
   margin-top: 50px;
}
header + div {
   margin-top: 50px;
}

A > B

Этот селектор выберет только прямых потомков в отличие AB, который выберет вложения любого уровня А. Рекомендуется использовать, когда вы работаете с первым уровнем вложения родительского элемента. Например, нам нужно выделять абзацы внутри тега <section>, при этом не затрагивая внешний вид абзацев более глубокого вложения:

1
2
3
4
5
6
7
8
9
<section>
 
Абзац внутри <section></section>
 
        <article>
 
Абзац
        </article>
</section><section></section>
<section>
Абзац внутри <section></section>
		<article>
Абзац
		</article>
</section><section></section>

CSS-разметка будет следующего вида:

1
2
3
4
section > p {
   background: black;
   color: white;
}
section > p {
   background: black;
   color: white;
}

A[href*="example"]

Отличное решение, когда требуется оформить стиль определённых ссылок. Например, чтобы присвоить всем ссылкам, ведущим на facebook, синий цвет, достаточно прописать:

1
2
3
a[href*="facebook"] {
   color: blue;
}
a[href*="facebook"] {
   color: blue;
}

Вариант без * соответствует конкретному URL, который можно использовать для точной ссылки.

A:not (B)

Этот селектор полезен, когда вам нужно выбрать группу элементов, исключив несоответствия, добавленные в (В) . Например, нужно выбрать все блоки, кроме «подвала». Нам пригодится селектор следующего вида:

1
2
3
div:not(.footer) {
   margin-bottom: 40px;
}
div:not(.footer) {
   margin-bottom: 40px;
}

A:first-child / A:last-child

:first-child и :last-child – это псевдоклассы, позволяющие задать стилевое оформление первого и последнего элемента своего родителя. Сильно помогает, когда дело доходит до элементов списка, удаления отступов и границ. Чтобы удалить границу в первом пункте списка и отступ в последнем, вам пригодится следующее решение:

1
2
3
4
5
6
ul li:first-child {
   border: none;
}
ul li:last-child {
   margin-right: 0px;
}     
ul li:first-child {
   border: none;
}
ul li:last-child {
   margin-right: 0px;
}     

A:nth-child (n)

nth-child – простейший способ выбрать конкретный элемент из списка. Например, если вам нужен третий пункт, пригодится такой код:

1
2
3
ul li:nth-child(3) {
   background: #ccc;
}
ul li:nth-child(3) {
   background: #ccc;
}

Помимо числового значения можно применять множество других вариантов. Подробная таблица с примерами здесь.

A:nth-last-child (n)

nth-last-child работает аналогично nth-child, с той лишь разницей, что отсчёт идёт не от первого элемента, а от последнего. Например, если нужно выбрать второй пункт с конца списка, то используйте запись такого вида:

1
2
3
ul li:nth-last-child(2) {
   background: #ccc;
}
ul li:nth-last-child(2) {
   background: #ccc;
}

A:nth-of-type (n)

Селектор во многом похож на nth-child, но с большей конкретикой в действии. Предположим, у нас есть документ со следующей разметкой, а нам нужно выбрать второй параграф:

1
2
3
4
5
6
7
8
<section>
<h1>Words</h1>
 
Little
 
Piggy
    <!-- Нужен этот элемент -->
</section>
<section>
<h1>Words</h1>
Little
Piggy
    <!-- Нужен этот элемент -->
</section>

Целесообразней использовать следующий вариант:

1
p:nth-of-type(2) { color: red; }
p:nth-of-type(2) { color: red; }

Т.к. селектор будет учитывать только параграфы в теге <p>, игнорируя <h1>. В то время, как nth-child посчитает <h1>Words</h1> первым элементом родителя.

A:visited

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

1
2
3
a:visited {
   color: blue;
}
a:visited {
   color: blue;
}

Собственно, на этом пока всё. Надеюсь, моя шпаргалка из серии «с миру по нитке» оказалась вам полезной и вы будете использовать её в работе. Мне нравится собирать разные полезности, вроде таблицы спецсимволов html, в одном месте. Чтобы потом легче было найти нужную информацию.

Думаю, у данной записи есть потенциал обзавестить продолжением. Глядишь, в скором будущем напишу сиквел, как нынче модно стало говорить ;) Ведь тема css-шпаргалок сама по себе бескрайняя.

Оставайтесь на блого-волнах Найкриса Кроули, до новых эфиров :)

Смотрите ещё