Курс молодого бойца: must-knows и основные ошибки в верстке.

Kate Kalashnikova

Не торопитесь начинать

➔ Ознакомьтесь с требованиями проекта

➔ Внимательно посмотрите на дизайн всех страниц

➔ Найдите схожие элементы (блоки, шрифты, формы)

Вы - команда!

Choose basic theme

@font-face

★ http://www.fontsquirrel.com/★ http://www.font-face-generator.com/★ http://convertfonts.com/

Основные ошибки

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

2. Line-heights: обрезанные буквы3. Links and buttons hover effects4. Floats: “схлапывание” родительского элемента5. Забыли про элемент вообще6. Разметка файлов 7. Свойства с приставками -o-, -moz-, -webkit-

Выбор селекторов

Links and buttons

Wrong!

Right!

Sprites

An image sprite is a collection of images put into a single image.

floats

Clearfix

Общие правила оформления css файла:- Всегда используйте для отступа два пробела. - Всегда пишите в нижнем регистре. - По возможности поясняйте свой код, где это необходимо.- Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно. - Избегайте использования информации о версии браузеров, или CSS “хаков”— сначала попробуйте другие способы.- Используйте пробелы после двоеточий в объявлениях.- Начинайте каждый селектор или объявление с новой строки.

Cross browser Quality Assurance

Нормальные браузеры // Inline blocksdiv {

*display: inline;*zoom: 1;

}

// Horizontally and vertically centered element.div1 {

position: relative;}.div2 {

*position: absolute;*top: 50%;*left: 50%;

}.div3 {

*position: relative;*top: -50%;*left: -50%;

}

IE7 // Inline blocksdiv {

display: inline-block;}

// Horizontally and vertically centered element.div1 {

display: table;}.div2 {

display: table-cell;text-align: center;vertical-align: middle;

}

Logged-in Logged-out

https://docs.google.com/spreadsheet/ccc?key=0AnOBnENtFCXWdGlzaVk3N2RwT0FhSnJ2b2owMVJYclE&usp=drive_web#gid=0

Testing table