Преди да започна темата искам да ви споделя една крилата фраза:
"Code is Poetry"
и за англоговорящите тази тема: "Art and Computer Programming"
обърнете внимание на Richard Stallman едно добро мнение...
( темата е стартирана отдавна - още през 2005 година от "John Littler" )
източник на оригиналната фотография: schools.mukilteo.wednet.edu
Писането на CSS, както и xHTML също е изкуство (често аз оприличавам CSS с танц - нямам идея защо...) и много често ние всички както в живота и характера си така и в работата си имаме собствен стил и методика. В темата няма да разсиквам и налагам мой стил, а по-скоро дам няколко съвета за хората, които искат да оптимизират CSS кода, като по този начин постигнем няколко предимства:
1. бързо зареждане на страницата (макар това във века на Интернет-а да звучи малко нелепо)
2. подреден, изчистен и изцяло валидиран код
това са двете основни причини да напиша тази тема.
За щастие има някои трикове, които бихте могли да приложите за драстично намаляне на размера на CSS файловете, както и спестите много писане. Нека опознаем някои от тях...
1. Background
Един често използван селектор с пет елемента е именно "фон". Чрез някои хитринки можем да си спестим доста килобайти... Ето и петте елемента с различните възможни стойности:
background-color: color | transparent | inherit
background-image: uri | none | inherit
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
background-attachment: scroll | fixed | inherit
background-position: [ percentage | length | left | center | right ] [ percentage | length | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
(повече можете да откриете в портала на w3schools, вижте този линк: CSS Background )
Как можете да декларирате, всички елементи само в един ред използвайки background вижте:
background: [ background-color || background-image || background-repeat || background-attachment || background-position ] | inherit Ако искаме да:
- зададем син цвят за фон на елемента
- поставим изображението mecho puh за фон
- наслагаме mecho puh по вертикала
- ограничим скролирането на изображението в елемента
- позиционираме мечо в горния ляв ъгъл
ние обикновено пишем следните редове код:
.teddyBear { background-color: blue; background-image: url("mecho_puh.jpg"); background-repeat: repeat-y; background-attachment: fixed; background-position: left top; } Всички тези редова могат да се редуцират до един ред, което ще доведе до облекчение на китките ви (ще пише доста по-малко) и малко трафик за потребителя:
.teddyBear {
background: blue url("teddy.jpg") repeat-y fixed left top;
}
Красота!
Сега нека разгледаме и стойностите по-подразбиране, които се взимат при липса на конкретна дефиниция/правило в CSS:
background-color:transparentbackground-image:nonebackground-repeat:repeatbackground-attachment:scrollbackground-position:0% 0%
Не напразно Ви предоставям тази информация, защото ако вземем следните два реда:
background: url("teddy.jpg") fixed;
background: transparent url("teddy.jpg") repeat fixed 0% 0%;
всъщност в логически смисъл са едно и също... и ефекта ще бъде един и същи при употребата им - с тази разлика, че в пърия ред си спестявате 1. писане 2. килобайти 3. естетика за дизайнерското око
2. Border
Погледнато, чрез различните възможности за да задавате рамки на елемент има четери различни начина:
- можете да зададете ширината, стила или цвета на всички 4 рамки наведнъж
- можете да зададете ширината, стила или цвета на индивидуална (част от) рамка
- можете да зададете ширината, стила и цвета на всички 4 рамки наведнъж
- можете да зададете ширината, стила и цвета на 1 рамка
като, че ли стана каша, но ето какво всъщност имам предвид в детайли:
border-top-width: border-width | inherit
border-right-width: border-width | inherit
border-bottom-width: border-width | inherit
border-left-width: border-width | inherit
border-top-style: border-style | inherit
border-right-style: border-style | inherit
border-bottom-style: border-style | inherit
border-left-style: border-style | inherit
border-top-color: color | transparent | inherit
border-right-color: color | transparent | inherit
border-bottom-color: color | transparent | inherit
border-left-color: color | transparent | inherit
Използвайки само border-width, border-color и border-style ние можем да си спестим доста редове и то напълно излишни...вижте това:
border-width: border-width | inherit
border-style: border-style | inherit
border-color: color | transparent | inherit
Ето е и пример в действие:
.BearBorder
{
border-width: 10px;
border-style: dashed;
border-color: red;
}
Смятам, че по този начин спестяваме време и байтове - и в двата случая печелят нашите потребители.
В предходния пример правилата ще се приложат за всичките (4) рамки/бордери, но това много лесно може да се промени и да зададете правило за конкретна рамка на обект (без значение дали става въпрос за рамка или някой друг обект избройяването ВИНАГИ е по часовник)
Например:
// Горе на точки, дясно прекъсната линия, долу вдлъбнато, ляво "рамка":
border-style: dotted dashed groove ridge;
// Горе & долу dotted, ляво & дясно прекъсната линия
border-style: dotted dashed;
Така прилагаме стил за 1 или повече страни на рамка, но можем да приложим всички елементи със съответните му стойности и за една страна ето и пример: (т.е. да стилизирам еизцяло само 1 страна)
border-top: [ border-width || border-style || border-color ] | inherit
border-right: [ border-width || border-style || border-color ] | inherit
border-bottom: [ border-width || border-style || border-color ] | inherit
border-left: [ border-width || border-style || border-color ] | inherit
Ето и практично приложение:
.redBottomBearBorder
{
border-bottom: 10px dashed red;
}
Както при "фон" и тук имаме стойности, които се взимат по подразбиране и не е лошо да се знаят за да не се пишат излишни (байтове) редове код:
border-width:mediumborder-style:noneborder-color:- според браузера; най-често
black
Също така можете да дефинирате width, colour, и/или style за всичките 4 граници само в един ред код.
border: [ border-width || border-style || border-color ] | inherit
Действащ пример:
.thickDashedRedBorder
{
border: 10px dashed red;
}
Напомням, че ако липсва някоя от трите стойности ВИНАГИ се взимат под внимание тези, които са по подразбиране!
3. Цветове
Обикновено за да дефинираме цвят използваме 6 цифрен шестнадесетичен код. Например:
color: #ff0000; // червено
color: #000000; // черно
Ако се повтарят някои от 3те чифта цифри Вие можете да ги изпуснете последните:
color: #f00; // червено
color: #000; // черно
Така получавате същия резултат, а спестявате писане и "тежест".
Често срещано е колеги да работят с десетични кодове или проценти :
color: rgb(255,0,0); // червено
color: rgb(0,0,0); // черно
color: rgb(100%, 0%, 0%); // червено
color: rgb(0%, 0%, 0%); // черно
Имаме и друга възможност, която в определени случаи е невероятно бърза, лесна и изтънчена - използването на английските имена на определен брой цветове:
color: red;
color: black;
Ето и списък на цветовете, които можете да използвате с английските им имена.
Вие можете да използвате всички тези цветове във всички селектори, които използват цвят включително color и background-color.
4. Шрифтове
В CSS са налични 6 елемента за селектора Font:
font-style: normal | italic | oblique | inherit
font-variant: normal | small-caps | inherit
font-weight: normal | bold | bolder | lighter | 100, 200 ... 900 | inherit
font-size: absolute-size | relative-size | length | percentage | inherit
line-height: normal | number | length | percentage | inherit
font-family: [[ family-name | generic-family ] [, family-name | generic-family]* ] | inherit
Ето и пример, в който стилизираме P (параграф, абзац)
p
{
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1.2em;
line-height: 130%;
font-family: "Times New Roman", serif;
}
Както при останалите селектори CSS дава възможност да дефинирате всички елементи в един ред:
font: [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family> ]
Ето и съкратения вариант на примера за оформлението на параграф:
p
{
font: normal small-caps bold 1.2em/130% "Times New Roman", serif;
}
Когато използвате селектора Font е задължително да дефинирате font-size и font-family. Всички останали елементи са произволни истойностите, които взимат по подразбиране са normal
5. Списъци
Таговете в хHTML за списък са: ul, ol, и dl за тях съптветстват следните селектори в CSS:
list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
list-style-position: inside | outside | inherit
list-style-image: uri | none | inherit
Използвайки CSS ние можем да заменим първоначалния символ (булет) в списък с определено изображение и да зададем да бъде кръгче при отсъствие на изображението и позицията на булет-а или изображението:
list-style-type: circle;
list-style-position: inside;
list-style-image: url("bullet.png");
Естествено можем да изпишем стойностите на елементите в един ред:
list-style: [ list-style-type || list-style-position || list-style-image ] | inherit
Горният пример в един ред:
list-style: circle inside url("bullet.png");
В CSS има стойности по подразбиране за различните елементи от селекторите за списък:
list-style-type:disclist-style-position:outsidelist-style-image:none
6. Margin and padding
Навярно знаем, че margin-ите са в "боксов" модел т.е. имаме четери страни, на които можем да прилагаме различни стойности за селектора margin:
margin-top: margin-width | inherit
margin-right: margin-width | inherit
margin-bottom: margin-width | inherit
margin-left: margin-width | inherit
Ако искаме да съкратим писането ние можем да дефинираме за всички страни само, чрез един ред. Например ако желаете да зададете 10 пиксела margin за всичките четери страни:
margin: 10px;
Ако искаме да зададем 10 пиксела за горе и 20 пиксела за долу:
margin: 10px 20px;
Задаваме 10 пиксела горе, 20 пиксела дясно и ляво, 30 за долу:
margin: 10px 20px 30px;
(забележете, че дясно и ляво са обединени)
Можем да зададем и на всичките четери страни едновременно (в един ред) - 10 горе, 20 дясно, 30 долу, 40 ляво:
margin: 10px 20px 30px 40px;
Трябва да знаем, че посоките се взимат по подразбиране по часовниковата стрелка т.е. 12 часа е ГОРЕ, 15 часа - ДЯСНО, 18 часа - ДОЛУ и 21 часа - ЛЯВО.
Padding-ите се "третират" по абсолютно същия начин, както и margin`s:
.myBox
{
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}
трансформираме в:
.myBox
{
padding: 1em 2em 3em 4em;
}
НЕ винаги тези съвети биха били от значение! Има ситуации, в които оптимизирайки кода изпускате стойности, елементи и т.н., които някои браузери считат за !important
КОМЕНТАРИ (0)
Оставете коментар
Всички полета с този знак * (звездичка) са задължителни.