Сайтқа ену

Оқулықтар

CCC

Интернетке орналастыру

Матфизика есептерінің шешімдері

CSS-тегі қысқартулар: кодты қысқа жазыңыз

Қысқа жазу да өнер. CSS-те өрнектерді қысқа жазуға болады. Ведь уменьшая размер CSS – файлдың көлемін азайтып, беттің қотарылу жылдамдығын өсіреміз, кодты әрі ыңғайлы әрі жинақы, жазуға да аз уақыт кетеді. Жалпы, егер мүмкіндік болса, неге оны пайдаланбасқа!

Усақ-түйектен бастаймыз:

Түстің оналтылық кодын қысқарту

Әрбір түске16-лық код сәйкес келетіндігі белгілі. Егер барлық алты таңба бірдей болса, онда 3 таңбаны қысқартуға болады. Мысалы:

Ақ → #FFFFFF → #FFF
Қара →#000000→ #000

Мысалы, margin:0px; орнына - margin:0 жазған дұрыс; Басқа стилдік ережелермен де осылай

Егер класс суреттемесінде (немесе id) 2-ден кем емес сипат болса, онда оны бір жолға жазу дұрыс

Мысалы,

.test {
color:#333
}

болса, былай жазған дұрыс:

.test {color:#333}

Мүмкіндігінше стилдерді топтаңыз

Егер қандай да бір элементе бірдей сипаттар болса, олардың әрбіреуіне стилді жазу керек емес. Оларды үтір арқылы біріктіруге болады.

Мысалы,

.test {color:#333}
.test1 {color:#333}

Болса, оны былайша жазу керек:

.test,.test1 {color:#333}

Соңғы сипаттың соңына, нүктелі үтір қоюға болады

.test {
color:#333;
text-decoration:underline
}

text-decoration:underline сипатынан соң нүктелі үтір жоқ екеніне көңіл аударыңыз.

CSS-те жазбалардың толық та, сондай қысқартылған формада біраз сипаттары болады. Қысқаша соған тоқталайық:

Қысқартылған BACKGROUND сипаты

Әдепкі формада жазылғандарды

BODY {
background-color:#ffee8c ;
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right
}

Былайша бір жолға жазуға болады:

BODY {background: #ffee8c url(smile.png) no-repeat fixed top right }

background кілттік сөзінен соң, сипаттар мәнін пробел арқылы тізбелейміз. Тізбектің ерекше мәні жоқ. Егер бірдеңе көрсетілмесе, автоматты түрде әдепкі мән қойылады.

Қысқартылған BORDER сипаты

Әдепкі формада жазылғандарды

h1 {
border-width:30px;
border-style:solid;
border-color:#333;
}

бір жолға былайша жазуға болады

h1 {border:30px solid #333}

Бұл қысқартуда сипаттардың ретін сақтау маңызды.

border-width сосын пробел арқылы border-style сосын border-color .

Осылайша border-bottom, border-left, border-top, border-right үшін қысқартулар орындалады.

Мысалы:

h1 {border-left:30px solid #333}

Егер қандай да бір сипат көрсетілмесе, әдепкі мән қойылады.

Қысқартылған FONT сипаты

Толық форма

p {
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif
}

Қысқартылған форма

p { font:italic normal bold 30px arial,sans-serif}

Өзіңіз көріп тұрғандай, font кілттік сөзінен соң, пробел арқылы сол ретпен сипат мәні тізбеленеді:

font-style_ font-variant _font-weight_font-size_font-family

Егер қандай да бір сипат көрсетілмесе, әдепкі мән қойылады.

Қысқартылған LIST-STYLE сипаты

Толық форма:

ul {
list-style-type:square;
list-style-position: inside;
list-style-image: url(galka.gif)
}

Қысқартылған форма:

ul {list-style:square inside url(galka.gif) }

Тағы да сипат мәні пробел арқылы тізбеленеді. Бұл жағдайда реет мәні маңызды емес.

Мәндері оңға, солға, жоғары, төмен сипаттарды қысқарту

margin, padding және border сияқты сипаттардың нақтылауы бар оңға(right), солға(left), жоғары(top), төмен(bottom)...

Мысалы:

border-left:10px;

дегеніміз сол жақтағы рамка қалыңдығы 10 пиксел.

Немесе

margin-bottom:20px;

дегеніміз төменгі жағынан шегініс 20 пиксел.

Сонымен, егер барлық жақтар үшін төрт мәні бар, мысалы:

border-top:10px;
border-right:15px;
border-bottom:10px;
border-left:15px

онда осы жазбаны сағат тілі бойынша пробел арқылы тізбеленген мәндерді пайдаланып қысқартуға болады.

border:10px 15px 10px 15px;

Егер оңға/солға мәні, немесе жоғары/төмен сәйкес келетін, онда жазбаны одан әрі қысқартуға болады:

border:10px 15px;

Бұл жағдайда, бірінші мән, бұл шама жоғары/төмен, ал екіншісі - солға/оңға.

Егер , барлық мән сәйкес келсе, онда жазбаны одан әрі қысқартуға болады.

Мысалы:

border:10px;

дегеніміз рамка барлық жағынан қалыңдығы10 пиксел. Міне осы. Сізге түсінікті болған шығар деп ойлаймын.

Комментарии :

Добавить комментарий:

Ваше имя:

Комментарий:

Введите сумму чисел с картинки (проверка от автороботов):

Конец формы

Начало формы

Сайт бойынша іздеу

Доменге қатысты тақырыптар

Copyright © 2015 Матаев Саркытбек | Интернеттік бағдарламалар мен математика жетістіктерін жариялауға арналған сайт – www.karakoz.kz