Проблем с кодиране на дизайн

[Nazi_93]

Здравейте, ето го и проблема:

искам тази лента да се залепи за левия, и съответно за десния край, ето ми css кода:
[css]#top_line{
margin:0;
padding:0;
height:48px;
background:url("img/line.jpg");


}[/css]
Писах какви ли не работи, не ще и не ще да ми се получи....

 

[Anonymous]

* { margin: 0; padding: 0; }

:?:

 

[nqkafff]

background:url("img/line.jpg");

тва за кво ? като лентата ти е един бордър топ и боттом и един цвят ??

 

[joTunkiq]

* { margin: 0; padding: 0; }

:?:

Да, това е решението, но е по-практично да се напишат всички тагове, който ще се използват иначе ако го отавиш така със звездичка, това ще отнеме толкова, все едно да заредиш файла 2-пъти, а това не е нужно и при по голям размер на файла .. ще забави доста зареждането на сайта

по-правилно е :

 html,Body, div, ul, li, table, td,th,tr, h1,h2,h3,h4,h5,h6,span,small,b,i,img{
 margin: 0;
padding: 0;
outline: 0;
}

П.с. Начина ти е прав, просто това е за Оптимизация. Ако примера ти върши работа - дай точка на Replace, защото той първи даде идеята :?:

 

[Anonymous]

...

...

И какво разбираш под оптимизация? В смисъл, някакъв бенчмарк ли си си играл да правиш, или си го прочел някъде И в двата (а и може би и в третия случай ще ми е интересно да чуя), та дано ми светне и на мен малко.
Според мен (не че съм толкова вещ), но въобще не е по-правилно, именно защото правилно и грешно в тоя случай - няма (но пак, мое си мнение).
За практично, може да е за теб, аз бих си спестил писането.

 

[Nazi_93]

Получи се, благодаря много!

 

[adrian]

Ще се опитам да хвърля малко светлина по въпроса за "правилно" и "грешно" точно по този въпрос с universal selector-a (а именно "*").

Тъй като подхванахте темата за performance-a ще започна с него. Да, има го като съображение точно това, понеже "*" минава през всеки елемент на страницата и слага стиловете, които са зададени в съответния rule. НО тук има едно голямо "НО", по това съображение много се спори и по-скоро performance проблема се проявява само в по-стари браузъри и го няма наличен в новите.

Друг проблем на universal selector-a е, че IE 6 и 7 имат бъгове в поддръжката му.

Още проблеми, които поражда universal selector-a са:
1. Нямаш контрол точно на кои елементи reset-ваш property-тата. (това малко по-късно ще го разгледам и като плюс).
2. Друг проблем, който вече е доста по-съществен е, че при използването на "*" можеш да забравиш за наследяването на property-та от parent към child елемент. Това ще го онагледя с пример, за да стане по-ясно:

Да предположим, че имаш следния css rule:

[css]
* {
font-size: 40px;
}
[/css]

това ще направи всеки елемент в страницата ти с 40px размер на шрифта (същото важи и в случая с margin: 0; padding: 0; просто по-лесно се разбира примера с font-size).

Да предположим, че имаш div и в него p и имаш следния CSS:

[css]div {
font-size: 15px;
}[/css]

С този код очакваш всеки елемент, който е child на div да наследи font-size: 15px, защото така работи CSS (font-size е property, което се наследява от child-овете). Но заради Universal selector-a това наследяване не работи. Тук ще се наложи да понапишеш още малко CSS, който в по-голям проект ще увеличи размера на CSS файла.
http://jsbin.com/EPIfaTa/1/

Предимствата на unviersal selector-a иначе са:
1. Спорно по-малкия размер на файла, защото всеки CSS Reset е с пъти по-голям като размер от един ред с universal selector-а. Казвам спорно, именно заради горния пример, заради който потенциално може да се наложи да пишеш много повече CSS от необходимото.
2. Universal selector-a обхваща всеки нов елемент, който се добавя. Т.е някой ден ако се появи нов елемент, който използваш, но нямаш сложен в CSS Reset-a ти, може браузърите да го възпроизведат по различен начин, но universal selector-a ще сложи стилове и за него.

Или иначе казано няма правилно и грешно в този случай, а подходящо или неподходящо. Просто трябва да знаеш предимствата и недостатъците на двата подхода.

 

[Anonymous]

М да, не се поддържа от ИЕ7 и надолу - булшит, както обикновенно.
А относно примера ти с наследяването, именно ако беше дал примера с margin:0; padding: 0 щеше (по-скоро би било добре) да мине за плюс, точно защото ще си спестиш доста повече код. Но с примера с font-size, наистина повечето биха го сметнали за минус