Для начала я бы хотел поговорить об использовании свойство

1

outline

, которое на первый взгляд кажется подобным свойству

1

border

.

Однако у свойства

1

outline

1

outline

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

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

div {outline: 1px solid #ff0000}

Вы можете решить, что точно так можно сделать и с помощью свойства

1

border

1

border

1

outline

Вот что я имею ввиду: предположим, у вас есть три колонки

1

div

1

div

1

em

Для всех трех

1

div

1

float: left; width: 33.33%

Если ко всем трем блокам вы добавите свойство

1

border: 1px solid #ff0000;

Это произошло потому, что каждый из трех блоков

1

div

1

1px

1

322px

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

Именно по этой причине свойство

1

border

1

outline

1

div

1

outline: 1px solid #ff0000;

Не имеет значения, какой толщины вы сделаете

1

outline

1

div

1

div

Сразу становится ясно преимущество использования

1

outline

Другое отличие

1

outline

1

border

1

outline

Другими словами, вы не можете просто создать левый

1

outline

1

outline

1

border

1

outline

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

1

outline: 2px dashed yellow

Заметьте, что элемент может одновременно иметь оба свойства

1

border

1

outline

1

outline

1

border

1

outline

1

border

Если элемент также имеет

1

margin

1

outline

1

outline

1

margin

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

Два дня назад на смену моему старенькому ноутбуку Acer Extensa 5620 пришел новый, молодой и современный - ноутбук 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 до сих пор работает нормально, проблем нет.

На этом все.

На работе столкнулся с такой задачей - имеется таблица в Excel, в которой ведется табель выходов рабочих в цеху.

В таблице подсчитывается количество часов, фактически отработанных; часов переработки и часов сверх нормы. Так вот, необходимо сделать так, чтобы производилась автоматическая выборка ячеек таблицы по цвету заливки последних.

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

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

В Excel нет встроенных (готовых) инструментов для выборки подобного рода; можно отбирать ячейки только по одному условию - по значению, находящемуся в них. Поэтому решение задачи получалось только одно - через VBA (пользовательские функции).

Прекрасное и готовое решение моей задачи я нашел на сайте http://www.excel-vba.ru/. Даже не одно, а целых два решения, под разные условия. Ниже привожу последовательность шагов, которые привели меня к успеху.

Сразу скажу, что изображения были сделаны в Excel 2007. В Excel 2010 все несколько по другому, но запутаться невозможно, если что.

Режим “Разработчик” в Excel

Первое, что нужно сделать - заставить Excel работать с пользовательскими функциями. Фактически, мы будем писать сценарий на языке VBA в Excel, но такая возможность по умолчанию отключена в этой программе. Включить ее можно следующим образом.

Переходим в “Пуск - Параметры Excel” и находим в левом списке пункт “Надстройки”:

Выбираем в основном окне строчку “Пакет анализа - VBA” и жмем кнопочку “Перейти” в самом низу окна. Откроется еще одно окошко со списком доступных под Excel расширений (надстроек). Снова выбираем в этом списке “Пакет анализа - VBA” и соглашаемся, что хотим установить его, нажав кнопку “ОК”:

Потребуется установочный диск с Microsoft Office на нем (или же подключение к Интернет) чтобы программа получила необходимые пакеты для инсталляции. Если установка прошла успешно, то в “Ленте” появиться пункт “Разработчик” (Excel 2010). Можно перейти в него через эту панель или же с помощью сочетания клавиш Alt + F11.

Появиться окно, в котором выполняется написание кода на языке VBA, то есть фактически создаются пользовательские функции. Я писать их не буду, так как языка VBA не знаю и знать особого желания нет (все знать невозможно).

Вставка готовых функций в Excel VBA

Но есть готовые решения, которые я вставлю в виде кода с помощью меню “Insert - Module”. Просто берем отсюда код функций и вставляем в свой Excel. Затем сохраняем файл Excel с поддержкой VBA (макросов) и все готово для дальнейшей работы.

Вставленные функции появятся в списке формул таблицы:

Ниже представлен готовый код двух функций на VBA, написанных их автором Дмитрием Щербаковым. Первая функция с именем “CountByInteriorColor” выполняет подсчет количества ячеек по цвету заливки.

Вторая функция с именем “SumByInteriorColor” выполняет выборку ячеек по цвету заливки и суммирует все значения в этих ячейках.

Обе функции имеют одинаковый синтаксис и принимают три входных аргумента, первые два из которых обязательные, а третий - необязательный:

• 1

  rRange

  - диапазон с ячейками для подсчета

• 1	rColorCell

  - ячейка-образец с цветом заливки

• 1

  bSumHide

  -

  1

  ИСТИНА

  или

  1

  1

  учитывает скрытые ячейки;

  1

  ЛОЖЬ

  ,

  1

  0

  или опущен(по умолчанию) - скрытые ячейки не подсчитываются.

Функция подсчета количества ячеек

'---------------------------------------------------------------------------------------
' Procedure : CountByInteriorColor
' Author    : The_Prist(Щербаков Дмитрий)
'             http://www.excel-vba.ru
' Purpose   : Функция подсчета ячеек на основе цвета заливки.
' Аргументы:
'             rRange     - диапазон с ячейками для подсчета.
'             rColorCell - ячейка-образец с цветом заливки.
'             bSumHide   - ИСТИНА или 1 учитывает скрытые ячейки.
'                          ЛОЖЬ, 0 или опущен(по умолчанию) - скрытые ячейки не подсчитываются.
'---------------------------------------------------------------------------------------
Function CountByInteriorColor(rRange As Range, rColorCell As Range, Optional bSumHide As Boolean = False)
  Dim lColor As Long, rCell As Range, lCnt As Long, vVal
  lColor = rColorCell.Interior.Color
  For Each rCell In rRange
      If rCell.Interior.Color = lColor Then
          If rCell.EntireRow.Hidden Or rCell.EntireColumn.Hidden Then
              If bSumHide Then lCnt = lCnt + 1
          Else
              lCnt = lCnt + 1
          End If
      End If
  Next rCell
  CountByInteriorColor = lCnt
End Function

Синтаксис этой функции прост:

=CountByInteriorColor(D8:AG8;$E$65)

Функция подсчета суммы ячеек

'---------------------------------------------------------------------------------------
' Procedure : SumByInteriorColor
' Author    : The_Prist(Щербаков Дмитрий)
'             http://www.excel-vba.ru
' Purpose   : Функция суммирования ячеек на основе цвета заливки.
' Аргументы:
'             rRange     - диапазон с ячейками для суммирования.
'             rColorCell - ячейка-образец с цветом заливки.
'             bSumHide   - ИСТИНА или 1 учитывает скрытые ячейки.
'                          ЛОЖЬ, 0 или опущен(по умолчанию) - скрытые ячейки не суммируются.
'---------------------------------------------------------------------------------------
Function SumByInteriorColor(rRange As Range, rColorCell As Range, Optional bSumHide As Boolean = False)
  Dim lColor As Long, rCell As Range, dblSum As Double, vVal
  lColor = rColorCell.Interior.Color
  For Each rCell In rRange
      If rCell.Interior.Color = lColor Then
          vVal = rCell.Value
          If IsNumeric(vVal) Then
              If rCell.EntireRow.Hidden Or rCell.EntireColumn.Hidden Then
                  If bSumHide Then dblSum = dblSum + vVal
              Else
                  dblSum = dblSum + vVal
              End If
          End If
      End If
  Next rCell
  SumByInteriorColor = dblSum
End Function

Синтаксис этой функции следующий:

=SumByInteriorColor(D8:AG37;E63)

При вставке пользовательской функции “CountByInteriorColor” и “SumByInteriorColor” можно воспользоваться либо “Мастером функций”, либо произвести указание диапазона ячеек и ячейку-критерий вручную.

Описание рабочей формулы

Готовый пример работы функции “CountByInteriorColor” можно посмотреть на рисунке “Табель выходов с зелеными ячейками”. В нем подсчет отработанного времени производится по следующей формуле:

=((Сумма фактически отработанных часов) - (Норма часов выхода за месяц)) + ((Кол-во дней с переработкой)*4)

Фактически эта формула получается такой (смотри строку №13 на рисунке):

=(AH13-AI13) + (CountByInteriorColor(D13:AG13;$E$65)*4)

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

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

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

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

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

1

p

1

br

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

1

<poem>

1

<stanza>

1

<line>

Разметка

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

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

<h1>
  Twinkle Twinkle Little Star
</h1>
<h2>
  by Jane Taylor, 1806
</h2>
<p>
  Twinkle, twinkle, little star,<br />
      How I wonder what you are!<br />
      Up above the world so high,<br />
      Like a diamond in the sky!
</p>
<p>
  When the blazing sun is gone,<br />
      When he nothing shines upon,<br />
      Then you show your little light,<br />
      Twinkle, twinkle, all the night.
</p>
<p>
  Then the traveller in the dark,<br />
      Thanks you for your tiny spark,<br />
      He could not see which way to go,<br />
      If you did not twinkle so.
</p>
<p>
  In the dark blue sky you keep,<br />
      And often through my curtains peep,<br />
      For you never shut your eye,<br />
      Till the sun is in the sky.
</p>
<p>
  As your bright and tiny spark,<br />
      Lights the traveller in the dark,&mdash;<br />
      Though I know not what you are,<br />
      Twinkle, twinkle, little star.
</p>

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

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

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;
  }

Само стихотворение обернем в блок

1

div

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

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

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

Установим размер шрифта для основного заголовка - тега

1

h1

1

margin-bottom

1

line-height

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

Для заголовка второго уровня

1

h2

1

margin-bottom

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

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

Для основного текста стихотворения добавим интерлиньяж

1

line-height

1

margin-bottom

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

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

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

1

:before

1

:after

1

content

h2:before {
  content: '— ';
}

h2:after {
  content: ' —';
}

Теперь увеличим первую букву стихотворения - так называемая буквица (

1

drop cap

1

+

1

:first-child

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

1

div

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

1

h2

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

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

1

line-height

1

margin

Выделим первую строку каждого параграфа через

1

small-caps

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

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

1

:last-child

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

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

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

Не стоит ожидать, что весь созданный CSS-код будет одинаково работать во всех основных браузерах. Последние версии Safari, Firefox и Opera поддерживают все представленные здесь селекторы. Но Internet Explorer 8 не поддерживает псевдо-элемент

1

:last-child

1

:last-child

1

:before

1

:after

1

:first-child

Заключение

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

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

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

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

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

1

:empty

.

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

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

Псевдо-класс

1

:empty

относится к элементу, у которого нет потомков.

Звучит просто и понятно, не правда ли? Потому что это действительно так - псевдо-класс

1

:empty

<p>...</p>

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

<table>
  <tr>
    <td></td>
  </tr>
</table>

А вот к такому параграфу псевдо-класс

1

:empty

<p>...</p>

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

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

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

1

:empty

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

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

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

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

tbody td:empty {
  background: #efefef;
}

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

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