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

Создадим простой пример и для этого предположим, что у нас есть страница, на которой элемент после заголовка h2 всегда должен находиться непосредственно под ним. Самый распространенный пример из практики для этого случая, когда первый параграф, идущий сразу же после заголовка, не имеет пустого пространства (blank line) между собой и этим параграфом.

Решения такого вопроса два.

Первый способ - это воспользоваться смежными селекторами.

Второй способ, представленный на рисунке ниже, это применить отрицательный margin-bottom для h2:

Между заголовком и параграфом нет промежутка

Можно подумать, что у параграфа, который следует сразу за заголовком, отсутствует margin-top, но это не так. Margin-top никуда не пропадал.

Он просто оказался перекрытым заголовком h2, у которого край margin-bottom находится в непосредственной близости от края текста самого заголовка. Параграф и его собственный margin располагаются сразу под ним, а не у нижнего края границы заголовка.

Такой прием полезен на практике в случае, когда необходимо расположить часть контента “на одной линии”. Почему слово на одной линии заключено в кавычки - потому-что контент только визуально располагается на одной линии.

Предположим, у нас есть список (HTML-разметка):

 class="jump">
  class="prev">
   class="ch03.html" href="#">Salaries
 
  class="next">
   class="ch05.html" href="#">Punching the Clock
 

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

Такую задачу можно выполнить обычным способом - через float (прим. переводчика - я бы так и поступил, разбросал оба li по разным углам блока ul через float: left и float: right) для обоих пунктов.

Но можно решить такую задачу другим способом:

Два пункта меню на одной линии

.jump{
 list-style-type: none;
 line-height: 1;
 width: 25em;
 margin: 0 auto;
 padding: .25em 1em;
 border: 1px solid;
}
 .jump .next{
  text-align: right;
  margin-top: -1em;
 }

В этом примере отрицательный margin-top величиной в -1em “поднимает” элемент li.next вверх ровно на высоту строки, установленную нами ранее в правиле line-height: 1.

Прим. переводчика: очень понравилось, о таком способе решения даже не подозревал!

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

Расположение заголовка по центру разделительной линии

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

 class="entry">
 

The Web Stack

...
.entry{
  border-top: 1px solid gray;
 }
 .entry h2{
  width: 80%;
  background-color: #fff;
  border: 1px solid gray;
  margin: -0.67em auto 0;
  text-align: center;
 }

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

HTML-разметка, в которой добавлен еще один элемент - span:

.entry h2{
  margin-top: -0.67em;
  text-align: center;
  border-top: 1px solid gray;
 }
 .entry h2 span{
  background-color: #fff;
  border: 1px solid gray;
  padding: .25em 1em;
 }

Ширина блока заголовка задается его контентом

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

Для этого случая решение с помощью отрицательного margin-top не является самым лучшим. Можно лишь посоветовать убрать верхнюю границу border-top у блока-родителя и сделать для него фоновую заливку белого цвета, также. Это будет не совсем то, что нужно; но все же достаточно хорошее решение.

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”

На этом все.


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

Однако у свойства outline есть существенное отличие, которое приобретает очень важное значение при создании разметки. Свойство outline может быть полезным в процессе создания разметки в качестве удобного средства диагностики.

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

Например, таким образом:

div {outline: 1px solid #ff0000}

Пример CSS-разметки

Вы можете решить, что точно так можно сделать и с помощью свойства border, но в действительности это не так. Причина заключается в том, что границы (border) нарушают разметку. А свойство outline не нарушает ее.

Вот что я имею ввиду: предположим, у вас есть три колонки div‘ов, которые должны располагаться внутри контейнера-родителя div с шириной 960px. (Если вам не нравятся пиксели, то можете применить для этой же цели em, проценты или любую другую единицу измерения).

Для всех трех div‘ов-потомков устанавливаем правила float: left; width: 33.33% и попытаемся визуально обозначить местоположение в разметке каждого из блоков.

Если ко всем трем блокам вы добавите свойство border: 1px solid #ff0000;, то последний из этих трех опустится вниз и расположиться под двумя первыми:

CSS-разметка с помощью border

Это произошло потому, что каждый из трех блоков div имеет ширину 320px; помимо этого справа и слева к каждому блоку добавлена граница толщиной в 1px, что делает ширину блока равной, как минимум, 322px.

Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера - сместить последний блок вниз!

Именно по этой причине свойство border нарушает разметку. Свойство outline, с другой стороны, не нарушает ее. С помощью него вокруг элементов рисуется линия; к примеру, в нашем случае все три блока div со свойством outline: 1px solid #ff0000; разместятся друг рядом с другом внутри блока-родителя.

Не имеет значения, какой толщины вы сделаете outline, блоки div никогда не сдвинуться и не нарушат разметку (это касается не только блока div, а любого элемента страницы). Линии сделают перекрытие друг друга, как показано на рисунке ниже:

CSS-разметка с помощью outlines

Сразу становится ясно преимущество использования outline при создании разметки. Если в процессе ее создания вам кажется, что что-то идет не так, вы легко можете “нарисовать” границы интересующего вас элемента, не опасаясь при этом нарушить разметку.

Другое отличие outline от border заключается в том, что outline “рисуется” обязательно вокруг всего элемента, по всем четырем его сторонам.

Другими словами, вы не можете просто создать левый outline или же правый outline, как вы это обычно делаете при работе с границами border. Может существовать только граница outline вокруг всех четырех сторон элемента, и не может быть по другому.

По этой же причине невозможно изменять цвет, ширину или стиль какой-либо одной из сторон элемента. Если необходимо создать границу outline: 2px dashed yellow, то она будет создана таковой вокруг всех сторон элемента.

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

Свойство outline и border для одного элемента

Если элемент также имеет margin, то эти поля рисуются вокруг границ outline; но при этом outline не изменяют поля margin и не замещают их.

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”


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

Ноутбук ASUS K56CM

Но, как всегда, не обошлось без ложки дегтя. На ASUS K56CM стояла предустановленная Windows 8. Сказать, что я имею какое-либо предубеждение против этой ОС я не могу. В принципе, она совсем неплохая и работать в ней можно абсолютно свободно. Что я попытался сделать в течение первых суток с момента появления нового ноутбука на моем рабочем столе.

Однако чувствовал я себя в этой системе неуютно. С моей личной точки зрения совершенно лишние для Desktop плитки. Зачем-то нужно было попадать курсором в правый нижний угол, чтобы добраться до кнопки выключения и всего лишь остановить машину. В общем и целом можно было сказать - не мое это!

После раздумий и взвешиваний за\против я решил для себя все-же “заморочиться”, но поставить на ASUS K56CM систему Windows 7 вместо Windows 8. Хотя и предвидел некоторые трудности на этом пути, две главные из которых - это BIOS и драйвера под Windows 7. Проблема с BIOS заключается в снятии блокировки на переустановку ОС на этом ноутбуке. Проблема с драйверами - почти не проблема, но также возникли некоторые сложности.

Вход в BIOS ноутбука ASUS K56CM

Неожиданно для себя не смог сразу же войти в BIOS ноутбука, пришлось немного “поволноваться”. Но все оказалось просто.

Вход в BIOS ноутбука ASUS K56CM можно выполнить через клавиши (на выбор):

  • Tab+F2
  • Delete (который на NumPad)

Это два варианта, которые лично у меня сработали. Тут главное, чтобы нажать и держать нажатой клавишу с самого момента запуска ноутбука. Иначе момент “проскочит” и в BIOS не попадем.

Снятие блокировки в BIOS ASUS K56CM

После того, как попали в BIOS, нужно выполнить два действия.

Первым шагом заходим во вкладку Boot и включаем (Enabled) опцию Launch CSM:

Boot - Launch CSM - Enabled

Вторым шагом переходим на вкладку Security и отключаем (Disabled) опцию Secure Boot Control:

Security - Secure Boot Control - Disabled

Сохраняем изменения в BIOS и выходим из него, нажав клавишу F10.

Меню выбора загрузки ASUS K56CM

Когда нужные изменения внесены в BIOS, можно приступать к обычной процедуре установки Windows 7 с диска (я делал инсталляцию с него). Чтобы загрузиться с установочного диска, нужно открыть меню выбора загрузки. Для этого нужно нажать и держать нажатой клавишу Esc. Затем выбираем оптический дисковод и процесс запущен.

Но не стоит забывать одну вещь. Чтобы Windows 7 правильно встала и от Windows 8 не осталось и следа на ноутбуке ASUS K56CM, перед инсталляций необходимо полностью удалить все существующие разделы на жестком диске и создать новые, с соответствующим форматированием.

Делается это с помощью специальных программ для редактирования разделов жесткого диска. Такими программами являются Acronis Disk Director, Gparted и многие другие. Достаточно в поисковой строке Google ввести запрос: “программы редактирования разделов жесткого диска”. Есть платные и бесплатные - все дело вкуса и умения.

Драйвера под Windows 7 на ASUS K56CM

После успешной инсталляции ОС Windows 7 на ноутбук ASUS K56CM насущной задачей стала установка драйверов. Для этого поступил привычным для себя способом - с помощью диска DriverPack Solution 13 r399 Full Final.

Автоматически поставились все драйвера, кроме чипсета под Intel. Перед этим система сделала предупреждение, что драйвера ненадежны! Однако я понадеялся на авось - и ноутбук вылетел с синим экраном смерти при попытке инсталляции этих драйверов.

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

Список этих пакетов (которые не захотели ставиться из-под DriverPack Solution) таков:

  • Chipset_Intel_Win7_64_Z9301020.zip
  • DPTF_Intel_Win7_64_Z6011067.zip
  • IRST_Intel_Win7_64_Z11101006.zip
  • MEI_Intel_Win7_64_Z8101252.zip
  • Rapid_Start_Technology_NonUI_Win7_64_Z1001024.zip

ASUS-ские утилиты-приблуды скачивать и устанавливать не стал. Только систему загромождают. Windows 7 на моем ноутбуке ASUS K56CM до сих пор работает нормально, проблем нет.

На этом все.


Селекторы стандарта CSS3 имеют поистине безграничные возможности для выделения HTML-элементов без создания дополнительной разметки (которая практически всегда применялась в предыдущих версиях CSS).

В этой статье я собираюсь менее чем за 5 минут выполнить стилизацию популярного детского стихотворения “Мерцай, звездочка, мерцай!”, используя CSS3-селекторы.

Кодируем стихотворение

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

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

Разметка

В будущей разметке имеются три основных элемента:

  • заголовок;
  • подзаголовок с информацией об авторе;
  • само стихотворение, собственно.

Twinkle Twinkle Little Star

by Jane Taylor, 1806

Twinkle, twinkle, little star, /> How I wonder what you are! /> Up above the world so high, /> Like a diamond in the sky!

When the blazing sun is gone, /> When he nothing shines upon, /> Then you show your little light, /> Twinkle, twinkle, all the night.

Then the traveller in the dark, /> Thanks you for your tiny spark, /> He could not see which way to go, /> If you did not twinkle so.

In the dark blue sky you keep, /> And often through my curtains peep, /> For you never shut your eye, /> Till the sun is in the sky.

As your bright and tiny spark, /> Lights the traveller in the dark, /> Though I know not what you are, /> Twinkle, twinkle, little star.

Стилизация заголовков

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

body {
 background: #fff;
 color: #111;
 font: 14px Baskerville, "Palatino Linotype", "Times New Roman", Times, serif;
 text-align: center;
}
 div, h1, h2, p {
  margin: 0;
  padding: 0;
 }

Само стихотворение обернем в блок div и разместим его по центру окна браузера, для большей красоты:

#poem {
 margin: auto;
 padding: 20px 0;
 text-align: left;
 width: 390px;
}

Заголовки стихотворения также разместим по центру страницы и уберем полужирное начертание, присвоенное им по умолчанию:

h1, h2 {
  font-weight: normal;
  text-align: center;
 }

Установим размер шрифта для основного заголовка - тега h1; добавим небольшой margin-bottom и такой же line-height (потому что размер шрифта был задан слишком большой; если заголовок окажется достаточно длинным, то между его строками будет большое расстояние):

h1 {
 font-size: 34px;
 line-height: 1.2;
 margin-bottom: 10px;
}

Для заголовка второго уровня h2 с информацией об авторе и дате публикации будет использовать другой, более легкий цвет; меньший размер шрифта; сделаем его курсивным, чтобы он выглядел совсем уж по другому; а также небольшой отступ внизу с помощью margin-bottom:

h2 {
 color: #666;
 font-size: 18px;
 font-style: italic;
 margin-bottom: 30px;
}

Стихотворение

Для основного текста стихотворения добавим интерлиньяж line-height достаточно большого размера для того, чтобы расстояние между строками было большое и такой текст было удобно читать. Также для каждого стиха добавим margin-bottom, чтобы визуально отделить их друг от друга:

p {
 line-height: 1.5;
 margin-bottom: 15px;
}

Волшебные селекторы

А вот теперь начнем развлекаться! Первое - добавим декоративный элемент в начале и в конце информации об авторе. Для этого воспользуемся псевдо-элементами :before и :after в сочетании с CSS-свойством content:

h2:before {
 content: '— ';
}
h2:after {
 content: ' —';
}

Теперь увеличим первую букву стихотворения - так называемая буквица (drop cap). Для этого воспользуемся смежным селектором (+) и псевдо-элементом (:first-child).

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

Мы выделим первую букву каждого параграфа, который следует сразу за заголовком второго уровня h2, который в нашем примере только один:

#poem h2 + p:first-letter {
 float: left;
 font-size: 38px;
 line-height: 1;
 margin: 2px 5px 0 0;
}

Буквицу смещаем влево, так чтобы остальной текст обтекал его вокруг; при увеличении размера шрифта междустрочный интервал line-height уменьшаем, чтобы последующие строки не были сдвинуты вниз; и слегка сместим буквицу внутри текста с помощью margin.

Выделим первую строку каждого параграфа через small-caps и сделаем его более удобочитаемым, добавив немного расстояния между каждой строчкой:

#poem p:first-line {
 font-variant: small-caps;
 letter-spacing: 1px;
}

Для того, чтобы еще как-то выделить стихотворение, добавим к последнему параграфу дополнительное пространство внизу, чтобы отделить его от всего остального контента, который будет идти следом за ним. Для этого воспользуемся псевдо-элементом :last-child, с помощью которого выделим последнего потомка элемента-родителя:

#poem p:last-child {
 margin-bottom: 30px;
 padding-bottom: 30px;
}

Вот стилизация стихотворения и закончена!

Некоторые заметки о поддержке браузерами

Не стоит ожидать, что весь созданный CSS-код будет одинаково работать во всех основных браузерах. Последние версии Safari, Firefox и Opera поддерживают все представленные здесь селекторы. Но Internet Explorer 8 не поддерживает псевдо-элемент :last-child; Internet Explorer 7 не поддерживает псевдо-элементы :last-child, :before и :after; Internet Explorer 6 также не поддерживает псевдо-элемент :first-child, помимо всего прочего.

Заключение

Эта статья является очень общим и кратким руководством, как использовать селекторы CSS3-стандарта для стилизации HTML-элементов без дополнительных классов, идентификаторов или чрезмерно раздутого кода. Селекторы CSS3 не работают в более старых версиях браузеров, таких как Internet Explorer 6, в которых генерируются только основные CSS-свойства (за редким исключением).

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

Примечание переводчика: статья была написано довольно давно - в 2009 году. Что касается поддержки браузерами CSS3-селекторов, то на сегодняшний день изменений не так уже и много. Исключением является факт, что о браузере IE6 можно забыть.

Оригинал статьи - “Styling a Poem with Advanced CSS Selectors”.


Я люблю ту простоту, которую привносят CSS3-селекторы в таблицы стилей. В этой статье приведено краткое описание одного из моих любимых селекторов: псевдо-класса :empty.

Что такое псевдо-класс :empty

Вот краткое описание, взятое из спецификации W3C:

Псевдо-класс :empty относится к элементу, у которого нет потомков.

Звучит просто и понятно, не правда ли? Потому что это действительно так - псевдо-класс :empty применяется к элементам, которые полностью пустые; например, для пустого параграфа:

...

Или же пустые ячейки таблицы:

А вот к такому параграфу псевдо-класс :empty не применим, так как он не является пустым (внутри этого тега есть пробел, который является равноправным символом по сравнению со всеми остальными):

...

Практическое применение :empty

Хорошо, но каким образом может быть полезен этот селектор?

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

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

Разметка будет выглядеть таким образом:

 scope="col" rowspan="2">Some headings
   scope="col" colspan="4">More headings
  scope="col">Great
   scope="col">Brilliant
   scope="col">Genius
   scope="col">Good
  scope="row">Interesting totals
   scope="row">Curious
   scope="row">Awesome
   scope="row">Fabulous
   scope="row">Nice
  
A simple table
155 165 70 140
5 35 50 15
75 90 5
30 20 80
45 40 40

И вот, что я собираюсь добавить в таблицы стилей, для того чтобы отформатировать пустые ячейки таблицы:

tbody td:empty {
 background: #efefef;
}

А вот теперь пустые ячейки таблицы отформатированы по-другому! Мне кажется, что невозможно сделать это более простым способом.

Если вас этот селектор заинтересовал, то скажу, что он поддерживается всеми последними версиями браузеров Firefox, Safari, Chrome и Opera. И возможно, он работает в браузере Internet Explorer 9, наравне с остальными селекторами стандарта CSS3.