CSS. Погружение
Этот раздел будет полезен начинающим верстальщикам, и тем, кто захочет сделать чуть больше, нежели вывод окна сообщения по клику.
О форматирование
Нет, я не властен над собой, и таки приведу в качестве примера CSS форматирование, которое я использую:
/*header*/ hgroup {
margin-bottom: 16px; font-weight: 400;
}
hgroup h1 { color: #999;
}
hgroup h2 {
font-size: 1.4em; margin-top: 0;
}
/*/header*/
Почему это хорошо:
такой CSS легко читается
есть идентификатор начала и конца блока (можно быстро найти необходимую часть даже в очень большом CSS файле используя поиск по метке *header)
подобное форматирование явно указывает на вложенность элементов
и можно легко проследить наследование свойств
Яне настаиваю на своём варианте, но хотелось, чтобы вы приняли на вооружение один из многих стандартов форматирования, и всегда следовали ему.
Именование классов и идентификаторов
Я уже затрагивал эту тему, когда рассказывал о релевантности HTML, так вот – имена классов могут быть «b-service-list__column b-service-list__column_right» и это будет круто, и «must be» – но лишь в рамках действительно больших проектов, и собственно чего я распинаюсь, дам ссылки – информации из них хватит еще на одну книгу ;)
13
—Клуб «Блок, Элемент, Модификатор»
[http://clubs.ya.ru/bem/]
—«Что такое БЭМ»
[http://bem.github.com/bem-method/pages/beginning/beginning.ru.html]
Обязательно изучите – полезно для расширения кругозора, и прокачки скилов
О цветах
В WEB используется цветовая модель RGB, следовательно, красный цвет можно записать не только как red, но и ещё несколькими способами:
p { color: red }
p { color: #ff0000 }
p { color: #f00 } /* сокращенная запись, экономит 3 байта */
p{ color: rgb(255, 0, 0) }
Споявлением CSS3, указывая цвет, мы также можем задать значение α-канала, т.е. прозрачность:
p{ color: rgba(255, 0, 0, 1) } /* обычный текст */
p { color: rgba(255, 0, 0, 0.5) } /* полупрозрачный текст */
Ещё одна примочка CSS3 – это возможность использования цветовой модели HSL (hue saturation lightness – тон, насыщенность и светлота) и HSLA (HSL + α-канал):
p |
{ |
color: |
hsl( 0, |
100%, |
50%) |
} |
/* |
красный |
*/ |
p |
{ |
color: |
hsl(120, |
100%, |
50%) |
} |
/* |
зелёный |
*/ |
p { color: hsl(240, 100%, 50%) } /* синий */
p { color: hsla(0, 100%, 50%, 0.5) } /* полупрозрачный красный */
Для перевода из HSL в RGB существует простой алгоритм, но пока не стоит им себя грузить
Да кто этим HSL пользуется? Не морочьте себе голову.
14
Блочные и строчные элементы
Опять я буду ссылаться на чей-то учебник – на этот раз от Ивана Сагалаева - http://softwaremaniacs.org/blog/category/primer/, и пусть вас не смущают даты написания статей – они повествуют об основах и актуальность они не потеряют ещё очень долго
Возможно, вы ещё не знаете, но HTML теги делятся на блочные (block) и строчные (inline). Блочными элементами называют те, которые отображаются как прямоугольник, они занимают всю доступную ширину и их высота определяется содержимым. Блочные теги по умолчанию начинаются и заканчиваются новой строкой — это <div>, <h1> и собратья, <p> и другие.
Если хотите, чтобы ваш HTML оставался валидным, следите за тем, чтобы блочные элементы не располагались внутри строчных элементов. Внутри строчных тегов может быть либо текст, либо другие строчные элементы.
Одна из самых часто встречаемых ошибок, это оборачивание заголовка в ссылку: <a href="#"><h1>Название статьи</h1></a>, не допускайте подобные промахи Хотя если мы ориентируемся на HTML5 – то тег <a> теперь может быть блочным элементом, и приведённый пример будет валидным. Ага, вот такой я не последовательный.
По теме:
—«Inline Elements List and What’s New in HTML5»
[http://www.tutorialchip.com/tutorials/inline-elements-list-whats-new-in-html5/]
—«HTML5 Block Level Elements: Complete List» [http://www.tutorialchip.com/tutorials/html5-block-level-elements-complete-list/]
—«Раскладка в CSS: поток»
[http://softwaremaniacs.org/blog/2005/08/27/css-layout-flow/]
15
О размерах блочных элементов
Ещё хотел отдельно остановиться на вычислении ширины и высоты блочных элементов,
ведь тут есть один нюанс, по умолчанию, высота и ширина элементов считается без учёта толщины границ и внутренних отступов, т.е. как-то так:
Эта блочная модель называется content-box, и вот в CSS3 появилась возможность изменять блочную модель, указывая атрибут box-sizing. Отлично, теперь мы можем выбирать между двумя значениями content-box и border-box, первый я уже описал, а вот второй вычисляет высоту и ширину включая внутренние отступы и толщину границ:
Такая блочная модель была свойственна IE6 в «quirks mode»
16