Как привести CSS код к читаемому виду?

Категория CSS

В этом уроке, мы с Вами познакомимся с онлайн форматтером CSS кода. Дело в том, что когда мы самостоятельно пишем CSS код, он не всегда получается ровным и легко читаемым.

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

Пример:

CSS код до использования форматтера:
body {font-family:tahoma; font-size:12px;};
a {font-size:14px; color:#3399FF; text-decoration:none;}
.url {font-size:10px; color:#009900;}
p {margin:1px;}
h3 {margin-bottom:10px;}
.button {border:1px solid #CCCCCC;}
#nav {background-color:#CCFFCC; text-align:center; margin:10px; padding:10px;}

CSS код после:
body
{
font-family: tahoma;
font-size: 12px;
}
a
{
color: #3399FF;
font-size: 14px;
text-decoration: none;
}
.url
{
color: #009900;
font-size: 10px;
}
p
{
margin: 1px;
}
h3
{
margin-bottom: 10px;
}
.button
{
border: 1px solid #CCCCCC;
}
#nav
{
background-color: #CCFFCC;
margin: 10px;
padding: 10px;
text-align: center;
}

т.е. сам код не трогается, а меняется только внешний вид.
Чтобы воспользоваться форматтером, зайдите по ссылке:
Перед Вами появится страница из двух частей. В левую часть вводите свой CSS код;
Затем, жмите кнопку “Format CSS”.
Форматированный CSS код появляется справа.

Другие посты, близкие по теме:

  1. Выпадающее меню на CSS
  2. Развертывание / сворачивание блока с текстом на jQuery
  3. Всплывающие подсказки на CSS
  4. Новостной блок своими руками на JavaScript
  5. Движение картинки при наведении курсора
]]>

Добавить в закладки

]]>

Теги: , юзабилити

июня 30, 2009

3 комментариев по “Как привести CSS код к читаемому виду?”

  1. ]]> Пользователь ]]> сказал:
    июля 12, 2009 в 22:52

    Очень удобно кстати!

  2. ]]> Admin ]]> сказал:
    июля 31, 2009 в 17:05

    Скачал исходник, скоро и на этом сайте будет оптимизатор css кода

  3. ]]> Rat ]]> сказал:
    марта 28, 2010 в 03:54

    Я пишу первым вариантом и мне так удобнее как писать так и читать чем вот такой раскинутый код. Когда у тебя много кода вот такое написание еще увеличивает его в 5 раз только с 2 стилями.. и так далее и вместо 500 строчек получаем 2500 )

Оставьте комментарий: