topleft topright

Главное меню

Главная
Карта сайта
Все статьи
MySQL
Компоненты
Мамботы
Настройка сервера
Поисковые системы, продвижение сайтов, SEO
Програмирование для Joomla
Языки программирования
Языки разметки
Photoshop
Контакты

Програмирование Joomla

Полезные решения
Joomla API

Программирование

Ajax
Регулярные выражения
CSS
DHTML
RSS
XML

Photoshop

Кисти для Photoshop
Исходники Photoshop
Уроки Photoshop

Наши работы

Сайты на Joomla
Решения на Joomla
Дизайны сайтов

Услуги

Разработка сайтов
Дополнительные услуги
Раскрутка сайтов
 

70 идей экспертов для улучшения CSS кода

 Печать E-mail
(0 голосов)

Работа с CSS не всегда проста. Конечно, все зависит от опыта и навыков, но иногда CSS кодинг может превращаться в кошмар. Лучший способ упростить код это полезные, но не очень известные свойства и атрибуты которые можно использовать для создания семантически корректной разметки. Мы обратили свой взгляд на наиболее интересные и полезные техники CSS кодинга и перечислили их в этой статье. Также мы включили некоторые базовые техники, используемые многими в каждом проекте, но которые трудно найти, когда они нужны.

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

Мы хотим сказать спасибо всем разработчикам, которые делятся своими идеями, техниками, методами, знаниями и опытом с их читателями.

 

1.1 Кодинг: Начинаем

  • Когда дизайн готов, начните с пустой страницы. Добавьте заголовки, навигацию, пример содержимого, и футер, потом добавьте html разметку и только после этого CSS. [CSSing3]
  • Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset4, обнуляя отступы и поля всех элементов в самом начале файла стилей. Eric Meyer’s Global Reset5, Christian Montoya's initial CSS file6, Mike Rundle's initial CSS file7, Ping Mag's initial CSS file8. [Roger Johansson9]
  • Используйте главный файл стилей. Одна из наиболее распространенных ошибок новичков в том, что они забывают сбросить стили по умолчанию, это является причиной несоответствия оформления в различных браузерах. Браузеры тут не причем, прежде чем начать писать CSS следует сбросить стили по умолчанию. [Master Stylesheet:10 The Most Useful CSS Technique], [Ryan Parr11]

master.css 

@import url("reset.css"); 
@import url("global.css"); 
@import url("flash.css"); 
@import url("structure.css");
<style type="text/css" media="Screen"> 
/**/@import url("css/master.css");/**/ 
</style>
  • Создайте библиотеку вспомогательных классов. Полезные для отладки они должны быть исключены в окончательной версии (разделяйте разметку и оформление). Можно использовать сразу несколько имен классов (<p class="floatLeft alignLeft width75">...</p>) [Richard K. Miller12]
.width100 { width: 100%; } 
.width75 { width: 75%; } 
.width50 { width: 50%; } 
.floatLeft { float: left; } 
.floatRight { float: right; } 
.alignLeft { text-align: left; } 
.alignRight { text-align: right; }

1.2 Организация CSS

  • Используйте главный файл стилей. Организация CSS упрощает поддержку сайта. Начните с главного файла стилей в нем импортируйте reset.css, global.css, flash.css (если нужен) и structure.css и возможно файл настроек типографики.
h2 { } 
#snapshot_box h2 { 
padding: 0 0 6px 0; 
font: bold 14px/14px "Verdana", sans-serif;
} 
#main_side h2 { 
color: #444; 
font: bold 14px/14px "Verdana", sans-serif;
} 
.sidetagselection h2 { 
color: #fff; 
font: bold 14px/14px "Verdana", sans-serif;
}
  • Используйте флаги. Разделяйте файл CSS на секции, например, Global Styles – (параграфы, списки и т.д.), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS13]
/* -----------------------------------*/ 
/* ---------->>> GLOBAL <<<-----------*/ 
/* -----------------------------------*/
  • Создавайте таблицу содержимого. В начале файла CSS, создайте таблицу содержимого. Стоит выделить различные разделы (header, main, footer etc), разделитель разделов должен быть хорошо заметным. [5 Steps to CSS Heaven8]
  • Упорядочивайте свойства в алфавитном порядке. Не знаю, кто подал мне эту идею, но я упорядочиваю свойства в алфавитном порядке, это упрощает их поиск. [Christian Montoya6]
body { 
background:#fdfdfd; 
color:#333; 
font-size:1em; 
line-height:1.4; 
margin:0; 
padding:0; 
}
  • Разделяйте код на блоки. Для многих это очевидно, но иногда я все же встречаю CSS не разделенные на блоки. Эта не сложная операция значительно упрощает работу с кодом недели, месяцы и годы спустя. Примеры: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks14]
  • Используйте хуки. Несмотря на то, что вы разделяете CSS на блоки, не помешает и использование структурированных хуков. [CSS Tips and Tricks14]
  • Разделяйте файл CSS на блоки. Я разделяю код на три разных блока, в первом определения для отдельных элементов, тела документа, ссылок, заголовков, сброс параметров по умолчанию, после этого идет блок с определениями для классов, третьим идет блок, в котором определены стили для основных контейнеров, я создаю определения для контейнеров, даже если они не содержат никаких правил. [Jonathan Snook15]

1.3 Кодинг: Работа с идентификаторами, классами, селекторами и свойствами

  • Сводите число контейнеров к минимуму. Предохраняйте структуру документа от разрастания. Новички часто используют много div`ов как будто это ячейки таблицы, не повторяйте эту ошибку, используйте и другие элементы для создания разметки. Обдумайте все возможности прежде чем добавлять новый div, часто можно избежать этой необходимости используя некоторые свойства CSS. [Ryan Parr11]
  • Сводите к минимуму число свойств. Работайте умнее, а не тяжелее с CSS. Это правило включает несколько подправил: если не уверенны нужно ли добавлять свойство не добавляйте его, если не уверены, зачем добавляете свойство не добавляйте его, если видите, что свойство используется в разных местах, подумайте нельзя ли его добавить только один раз. [CSSing3]
  • Сводите к минимуму число селекторов. Исключите необязательные селекторы. Чем меньше используется селекторов, тем меньше селекторов необходимо для переназначения стилей и тем проще исправить проблемы. [Jonathan Snook15]
  • Сведите к минимуму количество хаков. Используйте только хорошо известные и документированные ошибки в браузерах. Часто мне приходится видеть хаки там, где они не нужны, поэтому прежде чем использовать хак исследуйте свою проблему (в этом вам может помочь Google). [10 Quick Tips for an easier CSS life16]
  • Используйте константы для ускорения разработки. Константы это фиксированные значения, которые можно использовать в коде. Один из способов обойти отсутствие констант в CSS, использовать комментарии в начале файла, чтобы определить «константы». Очень удобно определять, таким образом, цвета и быстро заменять их значения по всему документу с помощью «поиска и замены». [Rachel Andrew17]
# /* 
# Dark grey (text): #333333 
# Dark Blue (headings, links) #000066 
# Mid Blue (header) #333399 
# Light blue (top navigation) #CCCCFF 
# Mid grey: #666666 
# */
  • Используйте систему имен. Использование системы для имен идентификаторов и классов может сохранить много времени при исправлении багов, и обновлении документов. В больших CSS документах можно быстро запутаться, если имена абсолютно разные и не придерживаются системы правил. Я рекомендую использовать паттерн parent_child. [10 CSS Tips18]
  • Давайте классам и идентификаторам семантические имена. Необходимо исключить имена, отражающие оформление. Если назвать элемент right-col, всегда есть вероятность что после изменения CSS «right-col» будет отображаться с левой стороны страницы, в таком случае недоразумения неизбежны, лучше исключить имена отражающие оформление. [Garrett Dimon19]
  • Группируйте селекторы с общими атрибутами. Если несколько элементов, классов или идентификаторов используют одно и то же свойство, можно сгруппировать селекторы чтобы не указывать это свойство несколько раз. [Roger Johansson9]
  • Изолируйте свойства, которые собираетесь использовать несколько раз. Если необходимо часто использовать одно и то же свойство, изолируйте его чтобы не повторять каждый раз, к тому же это даст возможность изменять оформление всех элементов сайта использующих его. [5 Steps to CSS Heaven8]
  • Используйте идентификаторы и классы как можно выше в иерархии документа. По возможности, используйте комбинированные селекторы20, не бойтесь использовать длинные селекторы. Длинные селекторы могут сделать CSS более понятным и уменьшают шансы class- или div- мании21. [Chric Casciano22]
  • Учитесь использовать каскадную природу CSS. Представьте, что у вас есть два похожих элемента с минимальными отличиями — вы можете создать CSS для каждого из них, или создать один CSS для обоих, а потом использовать дополнительные свойства, чтобы один из них выглядел иначе. [5 Steps to CSS heaven8]
  • Используйте теги <small>, <em> и <strong>. Иногда нужно выделить часть текста, в таком случае не стоит использовать div или классы, используйте семантические теги. [Mike Rundle’s 5 CSS Tips7]

1.4 Кодинг: Используйте сокращения

  • Краткие шестнадцатеричные представления цвета. В шестнадцатеричных представлениях цветов, которые состоят из трех пар одинаковых цифр, можно пропустить каждую вторую цифру, #000 то же самое что и #000000, #369 то же самое что и #336699. [Roger Johansson9]
  • Определяйте псевдо классы для ссылок в порядке LoVe/HAte: Link, Visited, Hover, Active. Чтобы упорядочить определения псевдо классов для ссылок размещайте их в порядке «link-visited-hover-active», или если короче «LVHA». Псевдо класс focus, может быть помещен в конце этого списка, но прочитайте это объяснение, прежде чем использовать его. [Eric Meyer23]
a:link { color: blue; } 
a:visited { color: purple; } 
a:hover { color: purple; } 
a:active { color: red; }
  • Определяйте margin, padding или border в порядке TRouBLed: Top, Right, Bottom, Left. При использовании стенографических свойств margin, padding или border, располагайте значения по часовой стрелке, начиная сверху: Top, Right, Bottom, Left. [Roger Johansson9]
  • Используйте стенографические свойства24. Используйте стенографические свойства margin, padding, font, border и другие.
margin: top right bottom left; 
margin:1em 0 2em 0.5em;
(margin-top: 1em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0.5em;)

border:width style color; 
border:1px solid #000;

background: color image repeat attachment position; 
background:#f00 url(background.gif) no-repeat fixed 0 0;

font: font-style (italic/normal) font-variant (small-caps)
font-weight font-size/line-height font-family; 
font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5 Кодинг: Типографика

  • Чтобы работать с em как с px, установите font-size для тега body 62.5%. Размер шрифта по умолчанию 16px используя это правило, мы задаем величину em равную примерно 10px (16 x 62.5% = 10). Это позволяет легко задавать в em размеры соответствующие пиксельным величинам, к примеру 1.3em примерно равно 13px. [Jonathan Snook15]
  • Используйте универсальную кодировку символов. Хотелось бы использовать одну универсальную кодировку символов подходящую для большинства случаев. К счастью она существует, это UTF-8, которая основана на Unicode. Установить кодировку страницы можно с помощью следующего кода. [20 pro tips25]
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
  • Управляйте регистром с помощью CSS. Если нужно чтобы текст был написан заглавными буквами, вместо того чтобы переписывать его позвольте сделать эту работу CSS. Следующий код трансформирует все заголовки в верхний регистр. [20 pro tips25]
h1 { text-transform: uppercase; }
  • Используйте малые прописные с помощью CSS. Свойство font-variant используется для вывода текста малыми прописными, это значит что все буквы в нижнем регистре будут преобразованы в заглавные, но с меньшим размером шрифта
h1 { font-variant: small-caps; }
  • Предусматривайте все возможности — указывайте тип шрифта. Когда указан конкретный шрифт, который должен использоваться в дизайне, это делается в надежде на то, что этот шрифт установлен у пользователя, но нужно предусмотреть и случай когда необходимого шрифта нет, для этого можно определить альтернативные шрифты, как показано ниже, очень важно закончить список типом необходимого шрифта. [Getting into good coding habits26]
p { font-family: Arial, Verdana, Helvetica, sans-serif; }
  • Используйте 1.4em - 1.6em для высоты строки. Чтобы сделать текст читабельным используйте line-height:1.4em, длину строк около 10 слов, и достаточно контрастные цвета. Чисто черный на белом фоне слишком контрастен для ярких CRT дисплеев, я стараюсь использовать чуть затемненный белый #fafafa и темно серый #333333. [Christian Montoya6]
  • Устанавливайте размер шрифта 100.01% для элемента html. Значение 100.01% для размера шрифта компенсирует несколько багов в различных браузерах. Во-первых, установка размера шрифта в процентах (вместо em) исключает проблему в IE/Win с непропорциональным ростом или уменьшением размера шрифта, если он будет установлен в em для других элементов. Во-вторых, некоторые версии Opera могут отображать 100% шрифт слишком мелко по сравнению с другими браузерами. С другой стороны у Safari проблемы с размером шрифта 101%. Сейчас лучшее решение это использовать значение 100.01% для этого свойства. [CSS: Getting into good habits26]

1.6 Кодинг: Отладка

  • Добавляйте border чтобы увидеть контейнеры. Используйте тестовые стили, такие как границы или цвет фона при отладке документа. Хорошо работает div { border:1px red dashed; }, можно использовать и * { border: 1px solid #ff0000; }. Обратите внимание на инструменты которые могут помочь при отладке страницы27. [Chric Casciano22] Использование границ для отдельных элементов может помочь обнаружить их перекрытие, или лишние отступы которые не всегда легко увидеть. [CSS Crib Sheet28]
* { border: 1px solid #f00; }
  • При отладке в первую очередь проверяйте, все ли элементы закрыты. Если после незначительных изменений в коде ваша прекрасная разметка сломалась, причиной тому может быть незакрытый элемент. [10 CSS Tips18]

2.1 Технические хитрости: Идентификаторы, Классы

  • 1 ID, много классов. Идентификаторы, идентификаторы элементов должны быть уникальны в пределах страницы, напротив множество элементов могут использовать одно и то же имя класса. Имена классов и идентификаторов могут содержать символы A-Z, a-z, 0-9 и дефис(-), не могут начинаться с дефиса или цифры (смотрите спецификацию CSS2) [Roger Johansson29]
  • Имена элементов, используемые в селекторах, чувствительны к регистру. При использовании CSS с документом XHTML, имена элементов в селекторах чувствительны к регистру, чтобы избежать неприятностей я рекомендую использовать нижний регистр для имен элементов в CSS селекторах. Имена классов и идентификаторов чувствительны к регистру и в HTML и в XHTML, поэтому избегайте смешивания регистров в селекторах. [Roger Johansson9]
  • Классы и идентификаторы должны быть правильными. Имена классов и идентификаторов должны начинаться с буквы30, идентификаторы должны быть уникальными, их имена должны отражать функциональность элемента31, а не его оформление. [CSS Best Practices32]
  • Можно использовать несколько классов для одного элемента. Это позволяет написать несколько правил, определяющих различные свойства, и применять их по необходимости.[Roger Johansson9]

2.2 Технические хитрости: Используйте все возможности селекторов

Roger Johansson опубликовал чрезвычайно полезную серию статей о селекторах в CSS 2.120, некоторые полезные моменты перечислены ниже.

  • Селекторы дочерних элементов. Селектор дочернего элемента указывает на элемент, который является непосредственным потомком другого элемента, данный селектор состоит из двух или более селекторов элементов разделенных знаком «>», родительский элемент располагается слева от этого знака. Следующее правило действительно для всех элементов strong являющихся непосредственными потомками div. [Roger Johansson9]
div > strong { color:#f00; }
  • Селекторы соседних элементов. Селектор соседних элементов состоит из двух простых селекторов и символа «+» между ними. Данный селектор указывает на элемент, следующий за первым. Элементы должны имеет один и тот же родительский элемент и первый элемент должен располагаться непосредственно перед вторым. [Roger Johansson33]
p + p { color:#f00; }
  • Селекторы атрибутов. Эти селекторы можно использовать для сопоставления правил к элементам на основании наличия или значения атрибутов. Есть четыре способа использования селекторов атрибутов.

    [att]
    Элементы для которых установлен атрибут att, независимо от значения этого атрибута.

    [att=val]
    Элементы значение атрибута att которых в точности равно val.

    [att~=val]
    Элементы атрибут att которых содержит список значений разделенных пробелами, одно из которых равно val. В этом случае val не может содержать пробелов.

    [att|=val]
    Если значением атрибута att элемента является список разделенных дефисом слов, начинающийся со слова "val". Сопоставление всегда начинается с начала значения атрибута. В первую очередь это необходимо для сопоставления отдельным участкам кода языка (например, атрибут lang в HTML или xml:lang в XHTML), как описано в стандарте RFC1766.
  • Следующее правило применяется ко всем элементам p для которых определен атрибут title:
p[title] { color:#f00; }
  • Селектор сопоставляющий правило всем элементам div которые имеют атрибут class со значением error:
div[class=error] { color:#f00; }
  • Можно использовать и множественные селекторы атрибутов, это дает возможность отбора элементов по нескольким атрибутам. Ниже представлен пример правила применяемого к элементам blockquote которые имеют атрибут класс в точности равный “quote” и атрибут cite (независимо от значения этого атрибута):
blockquote[class=quote][cite] { color:#f00; }
  • Используйте селекторы потомков. Селекторы потомков помогут избежать использования множества классов в разметке. [Roger Johansson9]

2.3 Технические хитрости: Оформление ссылок

  • Будьте осторожны со стилями для ссылок. Обратите внимание на то, что классический якорь (<a name="anchor">) реагирует на псевдо классы :hover и :active. Чтобы исключить это, используйте в качестве якоря идентификаторы элементов, или немного более заумный синтаксис34:link:hover, :link:active. [Dave Shea28]
  • Указывайте отношение документов для ссылок. Атрибут rel предназначен для указания отношения текущей страницы к документу указанному в атрибуте href.
a[rel~="nofollow"]::after { 
content: "2620"; 
color: #933; 
font-size: x-small; 
}
a[rel~="tag"]::after { 
content: url(http://www.technorati.com/favicon.ico); 
}
  • Здесь мы используем селектор атрибутов для списка значений разделенных пробелами. Ссылки, для которых установлен nofollow будут обозначены темно красным черепом, а те для которых установлен tag будут обозначены иконкой Technocrati. [Handy CSS35]
  • Внешние ссылки можно отметить автоматически. Многие использует нестандартное значение rel="external", чтобы выделить ссылки на внешние сайты, добавлять его к каждой ссылке трудоемкая и необязательная работа. Следующее правило добавляет стрелку после каждой ссылки ведущей на внешний сайт. [Handy CSS35]
a[href^="http://"]:not([href*="smashingmagazine.com"])::after { 
content: "2197"; 
}

a:focus { outline: none; }

2.4 Технические хитрости: CSS-техники

  • Используйте идентификатор для тега body. Во многих случаях использование идентификатора для тега body позволяет управлять оформлением элементов в зависимости от того, на какой странице находится пользователь. К тому же это дает возможность изменять оформление документа не меняя файл стилей и страницу. [Ryan Parr11, Переключатель стилей37, Адаптивная разметка38]
  • С помощью CSS можно создавать колонки одинаковой высоты. Техника создания колонок одинаковой высоты39 без использования фоновых изображений. Создание колонок одинаковой высоты с помощью фоновых изображений40.
  • Вертикальное выравнивание с помощью CSS. Представьте, что у вас есть элемент меню высотой 2em, вы можете легко отцентрировать текст по вертикали, задав line-height: 2em. [Evolt.org41]
  • Используйте псевдо элементы и классы. Псевдо классы и псевдо элементы42 можно использовать для форматирования элементов не представленных в иерархии документа, например, нет таких элементов как первая строка параграфа или первая буква строки. Можно использовать псевдо классы :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after и другие.
  • Использование изображения для тега <hr> может быть хорошим дополнением к странице. [CSS: Best Practices12]
  • Можете использовать один и тот же (X)HTML код для навигации на всех страницах. Многие сайты подсвечивают в навигации текущее местонахождение пользователя, но это может быть неудобно потому что необходимо менять HTML код навигации на каждой странице. Можно ли этого избежать? [Ten More CSS Tricks you may not know43]
<ul>  
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>
  • Добавьте идентификатор к тегу body, он должен отражать текущее место пользователя и изменяться когда он переходит на другую страницу.
#home .home, #about .about, #contact .contact {
commands for highlighted navigation go here
}
  • Используйте margin: 0 auto; для горизонтального центрирования разметки. Чтобы отцентрировать элемент по горизонтали нужно задать его ширину и горизонтальные поля. [Roger Johansson44]
<div id="wrap">
<!-- Your layout goes here -->
</div>

#wrap {
width:760px; /* Change this to the width of your layout */
margin:0 auto;
}
  • Добавить CSS стили можно и к RSS. Можно сделать намного больше используя XSL, но и CSS сделает RSS более привлекательными. [Pete Freitag45]
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
  • Скрыть CSS от старых браузеров. Чтобы скрыть CSS файл от старых браузеров используйте директиву @import. [Roger Johansson9]
@import "main.css";
  • Всегда устанавливайте margin и padding для блочных элементов. [10 CSS Tips18]
  • Устанавливайте width или margin и padding. Я использую следующее правило, если устанавливаю для элемента width, то не устанавливаю для него margin и padding и наоборот. Если не следовать этому правилу, можно получить множество проблем, особенно когда ширина задана в процентах. Поэтому я сначала устанавливаю ширину контейнеров, а потом поля и отступы для дочерних элементов. [Jonathan Snook15]
  • Исключите одновременное применение padding/borders и width к элементам. IE5 неверно использует модель представления документа в виде блоков, это может привести к тому, что страница превратиться в мешанину. Один из способов исправить эту проблему применять padding к родительскому элементу, а width к дочернему. [CSS Crib Sheet28]
  • Предоставляйте стили для печати. Добавить файл, содержащий стили для печати можно точно таким же способом, как и обычный файл CSS:
<link rel="stylesheet"
type="text/css" href="print.css" media="print">

<style type="text/css" media="print">
@import url(print.css);
</style>
  • это гарантирует, что эти стили будут использоваться только для печати и не повлияют на внешний вид страницы на экране. В стилях для печати необходимо использовать черный текст на белом фоне и удалить все лишние элементы. 15 минут на подготовку к печати46, More about CSS-based print-Layouts47. [20 pro tips25]

2.5 Технические хитрости: Исправляем баги IE

  • Поддержка полупрозрачных PNG в IE. Теоретически изображения в формате PNG поддерживают различные уровни прозрачности, но отсутствие их поддержки в Internet Explorer 6, не позволяет широко использовать это их достоинство. [CSS Tips, Outer-Court.com48]
#regular_logo
{
background:url('test.png'); width:150px; height:55px;
}
/*  */  
* html #regular_logo
{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='test.png', sizingMethod='scale');
} 
/* */

#container 
{ 
min-width: 600px; 
max-width: 1200px; 
width:expression(document.body.clientWidth < 600? "600px" :
document.body.clientWidth > 1200? "1200px" : "auto"); 
}
  • В IE можно использовать условные комментарии. Самый безопасный способ задать специальные стили для IE/Win это использовать условные комментарии49. Использование условных комментариев вместо хаков сводит вероятность проблем в будущем к минимуму. Так их можно использовать чтобы подключить файл стилей, содержащий исправления для IE/Win [Roger Johansson44]
<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="ie.css" /> 
<![endif]-->

Кодинг: Поиск вдохновения

  • Экспериментируйте с CSS. Экспериментируйте с фоновыми изображениями, цветами, наследованием, выравниванием и селекторами. Play with positive and negative margins50. [Chric Casciano22]
  • Учитесь у других. Исследуйте хорошие сайты, HTML код любого сайта легко доступен, смотрите какие методы используют другие разработчики и перенимайте те которые могут быть полезны и вам. [20 pro tips25]

Источники и полезные ресурсы


Источник: http://designformasters.info/

 
« Закругление углов без использования изображений
Вернуться

Ajax

CSS

DHTML


Украинская Баннерная Сеть
PR и тИЦ