MASTER-LIVE |
 |
 |
Сокращения в CSS: пишите код компактнееурок 8Краткость - сестра таланта . Это выражение смело можно применять и к CSS . Ведь уменьшая размер CSS - файла, мы увеличиваем скорость загрузки страниц, делаем работу с кодом более удобной и снижаем количество времени на разработку. Да и вообще, если есть возможность сделать что-то быстрее и компактнее, почему бы ей не воспользоваться! Начнем с мелочей: Сокращения шестнадцатеричных кодов цвета Как Вы знаете, каждому цвету соответствует определенный 16-ричный код. Оказывается, если все 6 знаков данного кода одинаковы, то его можно сократить до 3-х знаков. Например: Белый → #FFFFFF → #FFF Думаю суть понятна...
Ноль - он и в Африке ноль Неважно, в каких единицах будет НОЛЬ! От этого его значение не изменится. Например, вместо margin:0px; - лучше написать margin:0; Аналогично и с другими стилевыми правилами.
Если описание класса(или id) включает менее 2-х свойств, то рациональнее записать его в одну строку Например, вместо этого: .test { Лучше написать так: .test {color:#333}
По возможности группируйте стили Если какие либо элементы имеют одинаковые свойства, не обязательно писать стиль для каждого из них. Можно просто объединить их с помощью запятой. Например вместо этого: .test {color:#333} лучше написать так: .test,.test1 {color:#333}
В конце последнего свойства, можно не ставить точку с запятой .test { Обратите внимание, что после свойства text-decoration:underline нет точки с запятой.
В CSS существуют ряд свойств, имеющих как полные, так и сокращенные формы записи. Давайте кратенько по ним пройдемся:
Сокращенное свойство BACKGROUND То что записано в обычной форме BODY { Можно записать одной строчкой: BODY {background: #ffee8c url(smile.png) no-repeat fixed top right } После ключевого слова background , перечисляем через пробел значения свойств. Последовательность особого значения не имеет. Если чего-то не указать, автоматически подставится значение по умолчанию.
Сокращенное свойство BORDER То , что записано в обычной форме h1 { Можно записать одной строчкой h1 {border:30px solid #333} В данном сокращении, важно строго соблюдать порядок свойств. border-width затем через пробел border-style затем border-color . Аналогичным образом действуют сокращения и для border-bottom, border-left, border-top, border-right. Например: h1 {border-left:30px solid #333} Если какое либо свойство не указано, устанавливается значение по умолчанию.
Сокращенное свойство FONT Полная форма p { Сокращенная форма p { font:italic normal bold 30px arial,sans-serif} Как видите, после ключевого слова font , через пробел перечисляются значения свойств в таком порядке: font-style_ font-variant _font-weight_font-size_font-family Если какое либо свойство не указать, установится значение по умолчанию.
Сокращенное свойство LIST-STYLE Полная форма: ul { Сокращенная форма: ul {list-style:square inside url(galka.gif) } Опять же, значения свойств перечисляются через пробел. В данном случае порядок роли не играет.
Сокращения для свойств, имеющих значения право, лево, верх, низ У таких свойств как margin, padding и border имеются уточнения, типа справа(right), слева(left), сверху(top), снизу(bottom)... Например: border-left:10px; означает рамка слева толщиной в 10 пикселей. Либо margin-bottom:20px; означает отступ снизу 20 пикселей. Так вот, если имеются четыре значения для всех сторон, например: border-top:10px; то сократить эту запись можно используя перечисление значений свойств через пробел ПО ЧАСОВОЙ СТРЕЛКЕ. border:10px 15px 10px 15px; Если значения право/лево , либо верх/низ совпадают, то можно еще больше сократить запись: border:10px 15px; В данном случае, первое значение, это величина верх/низ, а второе - лево/право. Если , все значения совпадают, то можно еще более укоротить запись. Например: border:10px; означает рамку со всех сторон, толщиной 10 пикселей. Бесплатный mini-КУРС ВЕРСТКА CSS МЕНЮурок 9Меню играет достаточно важную роль в жизни любого сайта. Оно дает посетителю возможность перемещаться по сайту, просматривать различные его разделы. Меню бывают вертикальные, горизонтальные, выпадающие, многоуровневые и т.п . Существуют различные подходы к верстке CSS меню. Однако наиболее рациональным и правильным, с точки зрения структурированности и компактности исходного кода, считается верстка меню на основе неупорядоченных списков. Именно так делают меню профессиональные верстальщики. Если Вы также хотите разобраться с основными принципами верстки различных типов CSS меню, узнать о тонкостях одинакового отображения в различных браузерах - Вам поможет mini-КУРС ВЕРСТКА CSS МЕНЮ .
Этот видеокурс расчитан на тех, кто хочет научиться верстать меню с нуля и при этом понимать каждую строчку кода. В данном курсе, мы шаг за шагом рассмотрим создание 8 типов меню: 1. Простое вертикальное меню 2. Вертикальное выпадающее 2-х уровневое меню 3. Вертикальное выпадающее 3-х уровневое меню 4. Простое горизонтальное меню 5. Горизонтальное меню с ссылками в виде блоков 6. Горизонтальное меню с ссылками в виде блоков фиксированной ширины 7. Горизонтальное выпадающее 2-х уровневное меню 8. Горизонтальное выпадающее 3-х уровневое меню Также Вашему вниманию будут представлены исходные коды каждого типа меню в двух вариантах (с комментариями и без) . Кто-то может возразить, мол "зачем мне все это знать, если в интернете можно найти массу готовых решений ?" . Мое мнение такое: да, решений в сети полно, однако не разбираясь в верстке, приспособить их под свой сайт будет не очень просто. А если Вы делаете сайт по задумке дизайнера - то здесь уж может не подойти ни одно готовое решение, придется верстать с нуля... В общем, качайте, смотрите, разбирайтесь, критикуйте и если возникнут вопросы - обязательно пишите на мой форум поддержки! |
 |
 |