14
мар 10

Как форматирате вашия CSS код?

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

Писането на CSS код според мен е изкуство. Виждал съм какъв ли не CSS и смея да твърдя, че има много хора които не знаят на какъв език пишат. Но Нека започнем от там:

Какво точно означава CSS (Cascading Style Sheets) ?

Пишейки тези редове реших да погледна какво казва wikipedia по този въпрос ?

И ето нейният отговор :

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

Написано е чудесно нали ? Виж цялата публикация »

тагове: ,



6
мар 10

Unicode Characters за имена на CSS класове

Звучи странно нали ?
Преди време бях чел нещо подобно, но не му обърнах достатъчно внимание докъто снощи не попадна отново на Mr.Snook (на когото съм почитател от доста време). Чесно казано се зарадвах когато помислих върху предимствата на това :) . За да не ви отекчавам ще премина направо към кода.

Да вземем например следната ситуация :

Имаме следния HTML

<div class="♫">ACDC - Thunderstruck</div>
<div class="♫">Metallica - Enter Sandman</div>
<div class="♫">Manowar - Warriors of the World</div>
<div class="♫">Pantera - Walk</div>
<div class="♫">Megadeth - Symphony of destruction</div>

CSS кода ни може да изглежа така :

.♫ {
	hieght:24px;
	background: #ffffff;
	border:1px solid #ccc;
	color:#639ace;
	font-size:11px;
	line-height:23px;
}

Виж цялата публикация »




4
мар 10

Как да презапишем инлайн зададени стилове с "Style Sheet"

Написан от мен сайт на HTML и CSS, на който съм описал всички нужни елементи, като например : <p></p>,<span></span>,<a href=""></a>, <h1><h1>, <h2></h2> и т.н. бива поддържан от човекът "X".

Нека приемем, че оригиналният код изглежда така :

HTML :

<p class="normal_text">dummy text "1"</p>
<p class="normal_text">dummy text "2"</p>
<p class="normal_text">dummy text "3"</p>
<p class="normal_text">dummy text "4"</p>
<p class="normal_text">dummy text "5"</p>

CSS :

.normal_text {
	color:#777;
	font-size:11px
	font-weight:400;
	padding:0 0 10px;
}

Виж цялата публикация »

тагове: , , , , , , , , ,



2
мар 10

Block vs. Inline Elements

Когато ми се е налагало да обяснявам на някого за едните и другите, а именно Блоковите и Инлайн елементите, почти винаги съм срещал трудности и за това от няколко дни отделям по няколко минути на ден да напиша този пост и мисля че вече събрах нужната информация за тези елементи :)

Block Element - Блоковия Елемент

  • Винаги започва на нов ред
  • Може да манипулирате - height, line-height, top margin и bottom margin
  • По подразбиране ширината му е 100% от неговия "parent" елемент, "child" елемент, освен ако не му е зададена ширина

Примерни блок елементи са: <div>, <p>, <h1> - <h6>, <form>, <ul>, <li> и други.

Виж цялата публикация »




23
фев 10

Компресиране на CSS с PHP

Ако използвания от вас CSS код е голям като размер това води до забавяне на скороста с която се отваря вашият сайт. Съществуват много компресори които могата да намалят размера на вашия CSS файл премахвайки празни редове коментари и др. но това е доста неудобно имайки в предвид че когато се налага да правите промени файлът ви няма да е лесно четим. Виж цялата публикация »

тагове: , ,



16
яну 10

Уеб Формите в WebKit - базирани браузъри (Safari, Chrome)

От самото заглавие се подразбира, че става въпрос за WebKit базирани браузъри (Safari, Chrome). Със сигурност хората които се занимават с писане(композиране) на код им се е случвало да ги подразни синьо/жълтия размазан контур, който се появява, когато се фокусира върху така наречените уеб Форми (webforms) на уебсайта си. Виж цялата публикация »