СSS и селекторы

[RuNexx]

Здравствуйте, хотелось бы узнать, может ли css выглядеть одной строкой? Опишу чуть подробнее, если открывать в блокноте с подсветкой синтаксиса, в данном случае, мне очень сложно разобраться, т.к. все в одну строку. (вперемешку).

Пример ниже. Небольшой кусок кода.

*{padding:0;margin:0;border:0}a{cursor:url("hand.cur")/*tpa=http://pworld.su/images/hand.cur*/, pointer;color:#f6d563;text-decoration:none}a:hover{color:#fff}input,textarea,select{font:8pt Arial;color:#aaa;border:1px solid #ccc;background:#fff}body{font:normal 13px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color:#F4E3B6;background:#000 url("body-bg.jpg")/*tpa=http://pworld.su/images/body-bg.jpg*/ center top no-repeat;cursor:url("normal.cur")/*tpa=http://pworld.su/images/normal.cur*/, pointer}h2{font-size:20px;color:#FEFEFE;margin-top:16px}.middle-wrapper{min-width:960px;padding-bottom:30px;overflow:hidden}.middle-bottom{width:960px;background:url("content-bottom-bg.png")/*tpa=http://pworld.su/images/content-bottom-bg.png*/ center bottom no-repeat;padding-bottom:23px;margin:0 auto}.middle-top{background:url("content-top-bg.png")/*tpa=http://pworld.su/images/content-top-bg.png*/ center top no-repeat;overflow:hidden}.content-inner{margin-right:80px;padding-left:80px}.statistic{width:160px;height:50px;background:url("statistic.png")/*tpa=http://pworld.su/images

Взялся делать шаблон, стал использовать css, стороннего сайта, как основу, но поскольку еще новичок в css, для меня это дается сложно и немного с опасной дается каждый шаг, что бы не съехал весь дизайн. Как Вы сами понимаете редактировать такой код, для меня не представляется возможным. Вопрос следующего характера, как можно все это упорядочить и привести к виду, в котором это выглядело "читаемо"?

С Вашего позволения, еще вопрос. В начале стоит селектор (*). Можно ли его убрать так, что бы это не отразилось на шаблоне и с помощью чего это возможно сделать?

Посоветуйте пожалуйста, буду благодарен Вашим ответам.

[hedgehog]

можно при помощи автозамены добавить переносы строк после точки с запятой и фигурных скобок

[sigma77]

RuNexx,

http://cssbeautify.com/ - в левую колонку вставляешь код, в правой получаешь результат.

В начале стоит селектор (*). Можно ли его убрать так, что бы это не отразилось на шаблоне

А ты прежде, чем убирать узнал для чего этот код используется?

и с помощью чего это возможно сделать?

С помощью обычного текстового редактора и рук. Или в чем заключался вопрос?

[RuNexx]

hedgehog, простите, может Вас не так понял, попытаюсь сделать, потом с Вашего позволения покажу результат, что бы удостоверится мнением гораздо опытных людей.

Большое спасибо. В скором времени постараюсь отписаться. Взял для примера другой css.

sigma77, Вам тоже большое спасибо, ссылка полезна будет несомненно.

По поводу Вашего вопрос про селекторы, я так понимаю она сбрасывает значения padding, margin и border на 0 , я сомневаюсь, но думаю как то так.

А вопрос был в том, как заменить селектор, на что-нибудь другое что бы не поплыла страница. Уже боюсь не найду ссылку на источник, но гугл подсказал, что лучше не использовать селекторы в рабочем коде, т.к. будет долго грузить страницу. Уж не знаю правда ли это.

[Avalon4eg]

*{padding:0;margin:0;border:0}

Как раз и применяется чтоб верстка не плыла - это правило сбрасывает отступу всех элементов, так как разные браузеры устанавливают их по разному. Это еще минимальный сброс параметров, есть более продвинутые.

темой ошибся=)

Edited May 24, 2012 by Avalon4eg

[RuNexx]

Вот что получилось, результат желаемый достигнут, все стало гораздо более читаемым. Всем большое спасибо кто подсказал, в том числе большое спасибо sigma77 за ссылку, но ей не стал пользоваться пока что, решил все руками делать.

#index a{
background-image:url("index.png")
}

#connect a{
background-image:url("connect.png")
}

#donate a{
background-image:url("donate.png")
}

#top a{
background-image:url("top.png")
}

#forum a{
background-image:url("forum.png")
}

#lks a{
background-image:url("lks.png")
}

Но все же подтвердите пожалуйста или опровергните, будет ли влиять селектор на скорость загрузки страницы?

Edited May 24, 2012 by RuNexx

[hedgehog]

cat bad.css | sed -r 's/([{};])/\1\n/g' | sed -r 's/^(.*[^;])(})$/\1;\n\2/g' | sed -r 's/^(.*$/\t\1/g' >good.css

*{
        padding:0;
        margin:0;
        border:0;
}
a{
        cursor:url("hand.cur")/*tpa=http://pworld.su/images/hand.cur*/, pointer;
        color:#f6d563;
        text-decoration:none;
}
a:hover{
        color:#fff;
}
input,textarea,select{
        font:8pt Arial;
        color:#aaa;
        border:1px solid #ccc;
        background:#fff;
}
body{
        font:normal 13px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color:#F4E3B6;
        background:#000 url("body-bg.jpg")/*tpa=http://pworld.su/images/body-bg.jpg*/ center top no-repeat;
        cursor:url("normal.cur")/*tpa=http://pworld.su/images/normal.cur*/, pointer;
}
h2{
        font-size:20px;
        color:#FEFEFE;
        margin-top:16px;
}
.middle-wrapper{
        min-width:960px;
        padding-bottom:30px;
        overflow:hidden;
}
.middle-bottom{
        width:960px;
        background:url("content-bottom-bg.png")/*tpa=http://pworld.su/images/content-bottom-bg.png*/ center bottom no-repeat;
        padding-bottom:23px;
        margin:0 auto;
}
.middle-top{
        background:url("content-top-bg.png")/*tpa=http://pworld.su/images/content-top-bg.png*/ center top no-repeat;
        overflow:hidden;
}

<!-- сейчас набегут гуру sed/awk и закиадают меня тапками -->

Edited May 24, 2012 by hedgehog

[RuNexx]

Спасибо Вам, у меня тоже самое получилось.

Edited May 24, 2012 by RuNexx

[web-monster]

Чтобы "расжать" css код, можно воспользоваться этим сервисом