Што е CSS?
CSS (Cascading Style Sheets) е стандардизиран јазик за стилизирање и форматирање на веб страници и веб апликации.
CSS овозможува ефикасен развој на визуелно богати, интерактивни и респонзивни веб апликации. Тоа е втората од три компоненти што го овозможуваат модерниот веб развој.
Надворешни линкови и ресурси
Синтакса
Јазикот има едноставна синтакса и јасна структура, што го прави лесен за одржување и надградување.
Основни составни елементи на CSS се селекторите и декларациите. Декларацијата се состои од својство и дадена вредност за истото, додека селекторот претставува механизам за дефинирање кои елементи треба да ги имаат декларираните својства.
/* Ова е коментар */
selector {
prop1: value;
prop2: value;
selector {
prop3: value;
}
}
Сетот од декларации што следат по името на селекторот групирани во {} се нарекува декларациски блок.
Надворешни линкови и ресурси
Селектори
Со селекторите дефинираме кој елемент треба да ги наследи декларираните стилови. Постојат голем број селектори кои се користат во зависност од околностите, секој со свој коефициент на специфичност што диктира кој стил ќе биде усвоен доколку постојат повеќе декларативни блокови што се однесуваат на еден ист елемент.
*
Универзален селектор кои ги стилизира сите елементи во рамките на контекстот во кој што е дефиниран. Најчесто се користи за глобални стилови и декларирање на општи својства што сите елементи треба да ги имаат.
* { color: blue; }
type
Селектор според тип на елемент. Името на селекторот зависи од ознаките (таговите) на елементот што сакаме да го стилизираме.
<p>Ова е параграф со подвлечен текст.</p>
p { text-decoration: underline; }
.class
Селекор што дефинира стилски декларации за сите елементи со дадената класа.
<section class="myClass">Секција со црвен бордер и заоблени агли.</section>
.myClass { border: 2px solid red; border-radius: 5px; }
#id
Стиловите дефинирани со овој селектор се однесуваат само на елементот со даденото ID. Овој атрибут во HTML има уникатна вредност.
<h1 id="elID">Наслов со променета маргина.</h1>
#elID { padding: 5px; margin: 0; }
[attr]
Селектор што дефинира декларативен блок за елемент со даден атрибут или вредност на атрибут.
Покрај основната форма [attr] што ги стилизира сите елементи со дадениот атрибут (attr) постојат и [attr="value"], [attr*="value"], [attr$="value"] и [attr~="value"] кои стилизираат елементи во зависност од вредноста на дадениот атрибут.
<a href="#" title="Опис">Линк 1</a>
<a href="#">Линк 2</a>
[title] { text-transform: uppercase; }
[href="#"] { font-weight: 500; }
Надворешни линкови и ресурси
Псевдо-класи
Псевдо-класите се посебен тип на класи кои се користат за стилизирање на елементи во зависност од нивната состојба или позиција во HTML документот.
:link, :visited, :hover, :active, :checked, :disabled...
Овие псевдо класи се однесуваат на специфична состојба на елементот и се користат за стилизирање на елементите кога оваа состојба е активна.
:nth-child
Оваа псевдо класа, заедно со :first-child, :last-child, :only-child, стилизира елементи во зависност од позицијата на елементите во контекстот во којшто се наоѓаат.
Селекторот :first-child се однесува на првиот елемент во рамките на својот родител, :last-child на вториот елемент во рамките на својот родител додека :only-child се однесува на елемент што е сам во контекстот во којшто се најоѓа.
Селекторот :nth-child(n) се однесува на n-тиот елемент во рамките на својот родител. Покрај 'n', селекторот може да прима и други аргументи како формули (2n, 2n+1...), броеви, 'odd', 'even' итн.
:nth-of-type
Оваа псевдо-класа, заедно со :first-of-type, :last-of-type, :only-of-type, стилизира елементи во зависност од позицијата на елементите во контекстот во којшто се наоѓаат, со тоа што додава уште еден критериум при евалуација - типот на елементот. По логика и синтакса функционира исто како и :nth-child селекторот.
Надворешни линкови и ресурси
Псевдо-елементи
::before, ::after
Овие псевдо-елементи се користат за вметнување на содржина во HTML документот преку CSS. Покрај тоа, се користат и како декоративни решенија при изведба на комплексни дизајни.
Својството content е задолжително.
<p>Ова е параграф.</p>
p::before { content: 'Префикс'; }
p::after { content: 'Суфикс'; }
::placeholder, ::marker
Псевдо елементот ::marker се користи за стилизирање на ознаките кај подредените <ol> и неподредените <ul> листи, додека ::placeholder се користи за стилизирање на текстот дефиниран со placeholder атрибутот кај <input> елементите.
Постојат и други псевдо-елементи кои се користат во одредени околности како ::first-line, ::first-letter, ::backdrop итн.
Надворешни линкови и ресурси
Мерни единици
Во CSS постојат релативни и апсолутни мерни единици кои се користат секаде каде што треба да се дефинира висина, ширина, големина на фонт, позиција итн.
Апсолутни мерни единици
px - одговара на еден пиксел од екранот на уредот што ја прикажува содржината на вашата веб-страница или веб апликација и е една од најчесто користените мерни единици во веб-развојот. Покрај пиксели постојат и cm, mm, in, pt (точки) кои се користат во одредени ситуации (при печатење итн).
Релативни мерни единици
em - одговара на големината на фонтот на елементот.
rem - одговара на големината на root (html) елементот - доколку не е експлицитно дефинирана кај повеќето уреди одговара на 16px.
vw - произлегува од големината на прозорецот што ја прикажува содржината (Viewport Width). 1vw претставува еден процент од ширината на прозорецот.
vh - произлегува од големината на прозорецот што ја прикажува содржината (Viewport Height). 1vh претставува еден процент од висината на прозорецот.
% - произлегува од димензиите на елементот-родител, во одредени ситуации (пример при трансформација) произлегува од димензиите на самиот елемент.
Надворешни линкови и ресурси
Бои и позадини
Однапред дефинирани бои
Во CSS постојат однапред дефинирани бои како red, green, blue, pink, grey, lightblue итн кои можат да се користат директно со нивните дескриптивни имиња.
color: red;
Хексадецимални вредности
Боите можат да се дефинираат и како шестцифрени хексадецимални вредности.
color: #ff0000;
rgb(), rgba()
Функција со која што се дефинира боја преку неколку влезни аргументи. Првите три аргументи се застапеност на боја (црвена, зелена, сина) од 1 до 255, додека четвртиот аргумент е опционален и се однесува алфа каналот преку кој се дефинира проѕирноста на бојата. Синтаксата е следна:
color: rgba(0-255, 0-255, 0-255, 0-1) | rgb(0-255, 0-255, 0-255);
hsl(), hsla()
Функција со која што се дефинира боја преку три, односно четири влезни аргументи. За разлика од rgba, овде се дефинира боја (0-360), заситеност (0-100%) и светлина (0-100%). Четвртиот аргумент е опционален и е резервиран за алфа каналот.
color: hsla(0-360, 0-100%, 0-100%, 0-1) | hsl(0-360, 0-100%, 0-100%);
background, background-image, background-color
Својството background-image е едно од најупотребуваните својства за дефинирање на позадина затоа што нуди механизми за користење на надворешен ресурс (слика) како и неколку функции за покомплексни позадини, имено linear-gradient() и radial-gradient().
background-image: url('патека до ресурсот');
Својството background-color се користи за еднобојни позадини.
Дополнителни својства за контрола на позадината се background-repeat, background-size, background-position итн.
Надворешни линкови и ресурси
Текст
CSS нуди широк спектар на својства за стилизирање на текстуалната содржина на веб страницата. Најчесто користени се color, font-family, font-weight, font-size, font-style, line-height, text-decoration, text-transform, text-align, text-indent, text-shadow итн.
color
Со ова својство се дефинира бојата на текстот во дадениот елемент. Може да ги прима сите вредности за боја.
font-family
Со font-family се дефинира фонтот на текстот во елементот. Се декларираат повеќе фонтови - првиот е приоритетниот фонт, останатите се користат во случај претходните да се недостапни.
font-family: 'Име на фонт', 'Име на фонт', serif | sans-serif;
font-size
Со ова својство се дефинира големината на фонтот. Вредностите можат да бидат релативни или апсолутни, во зависност од потребите.
font-size: px | em | rem | % | vw | pt | ...;
font-weight
Со ова својство се дефинира дебелината на фонтот.
font-weight: 100 - 900 | bold | bolder | lighter | normal;
text-decoration
Се користи за додавање на декорација на текстот во елементот или модифицирање на постоечка декорација.
text-decoration: underline | overline | line-through | dashed | dotted | none;
text-transform
Ова својство се користи за трансформирање на текстот во елементот без да се врши промена на самиот HTML код.
text-transform: uppercase | lowercase | capitalize | none;
Дополнителни својства за стилизирање на текстуална содржина се letter-spacing, word-spacing, white-space, direction итн.
Надворешни линкови и ресурси
Позиционирање и трансформирање
position
Со position се дефинира начинот на кој елементот е позициониран во документот. Ова својство има неколку карактеристични вредности кои се користат во зависност од околностите и намената.
static - елементот е позициониран во нормалниот тек на документот. Ова е стандардна (default) вредност за position својството.
relative - елементот се позиционира релативно на неговата нормална позиција во документот. За промена на позицијата се служиме со четири дополнителни својства: top, bottom, left, right.
absolute - елементот се вади од нормалниот тек на документот и се позиционира релативно на најблискиот родител чија што позиција е различна од static.
fixed - елементот се вади од нормалниот тек на документот и се позиционира на фиксна позиција во однос на прозорецот на клиентот.
sticky - елементот се однесува како релативно-позициониран елемент (position: relative) сѐ додека не дојде до дефинираните координати (top / bottom / left / right). Во тој момент се однесува како фиксиран елемент и останува фиксиран во однос на прозорецот на клиентот.
position: static | relative | absolute | fixed | sticky;
transform
Со ова својство се извршуваат различни трансформации врз елементот како ротација, поместување, искосување итн. За таа цел имаме повеќе функции како translate(), translateX(), translateY(), rotate() кои можат да се користат засебно или во комбинација со други функции за креирање комплексни ефекти.
transform: translate() | scale() | skew() | rotate() | ...;
Надворешни линкови и ресурси
Box Model
Моделот на кутија (The Box Model) е клучен концепт во веб-развојот кој објаснува како се димензионирани, распоредени и структурирани сите елементи во рамките на еден HTML документ. Моделот се состои од четири компоненти - content, padding, border и margin. Сите овие елементи формираат правоаголна кутија околу содржината и ја диктираат целокупната зафатнина во просторот.
display
Како едно од најосновните својства, display својството го одредува начинот на којшто се прикажуваат елементите во еден HTML документ. Од особена важност е да се знаат разликите помеѓу inline и block вредностите на ова својство.
inline - елементите не ја зафаќаат целата ширина на својот елемент-родител и може да се редат еден до друг. Внатрешните (padding) и надворешните маргини (margin) немаат влијание по вертикала. Не можат да се димензионираат.
block - елементите ја зафаќаат целата ширина на својот елемент-родител (default) и автоматски креираат нов ред во текот на документот. Можат да се димензионираат и применат стандардните box model својства.
display: none | inline | block | inline-block | contents | ...;
margin
Со margin се дефинира просторот помеѓу рамката на елементот и надворешната содржина. Со margin-top, margin-bottom, margin-left, margin-right се дефинираат димензии за секоја страна посебно.
margin: px | em | rem | % | vw | pt | auto ...;
margin: all;
margin: top-bottom left-right;
margin: top right bottom left;
border
Со border, border-style, border-width, border-color, border-radius и сите други поврзани својства се дефинираат димензиите, стилот и формата на рамката на елементот.
border: border-width border-style border-color;
padding
Просторот помеѓу содржината и рамката на елементот (внатрешна маргина) се дефинира со padding својството. Исто како и кај маргините, имаме посебни својства за димензионирање на просторот на секоја страна посебно - padding-top, padding-bottom, padding-left, padding-right.
padding: px | em | rem | % | vw | pt | ...;
padding: all;
padding: top-bottom left-right;
padding: top right bottom left;
box-sizing
Со ова својство се одредува како ќе се применуваат зададените димензии за даден елемент. Доколку е сетирано на content-box (default) димензиите ќе се однесуваат на содржината на елементот. Доколку е сетирано на border-box димензиите ќе се однесуваат на целокупната зафатнина на елементот до рамката (border).
box-sizing: border-box | content-box;
Надворешни линкови и ресурси
Flexbox
Flexbox (Flexible Box Layout) е систем за распоредување, подредување и димензионирање на елементи во рамките на еден елемент-родител. Создаден е за поефикасно управување со просторот и полесно дефинирање на комплексни и динамични распореди.
Пример со сите flexbox својства и нивните можни вредности:
parent {
display: flex | inline-flex;
flex-direction: row | column | row-reverse | column-reverse;
justify-content: flex-start | flex-end, center | space-between | space-around | space-evenly;
align-items: flex-start | flex-end | center | baseline | stretch;
flex-wrap: wrap | nowrap | wrap-reverse;
gap: px | rem | em | ...;
child {
flex: flex-grow flex-shrink flex-basis; /* Скратен начин за дефинирање на овие три својства истовремено */
flex-grow: 0 | 1 | 2 | ...;
flex-shrink: 0 | 1 | 2 | ...;
flex-basis: px | rem | em | ...;
align-self: flex-start | flex-end, center | baseline | stretch;
}
}
Надворешни линкови и ресурси
Grid
CSS Grid е дводимензионален систем за подредување, порамнување и димензионирање на елементи во рамките на еден елемент-родител, кој преку дефинирање на редови и колони овозможување креирање на комплексни, динамични и респонзивни решенија во модерниот веб-развој.
parent {
display: grid | inline-grid;
grid-template-columns: px | rem | em | auto | min-content | max-content | minmax() | repeat() | ...;
grid-template-rows: px | rem | em | auto | min-content | max-content | minmax() | repeat() | ...;
grid-template-areas: 'area1 area2 area2' 'area1 area2 area2';
grid-auto-flow:; row | column | dense;
grid-auto-columns: px | rem | em | ...;
grid-auto-rows: px | rem | em | ...;
row-gap: px | rem | em | ...;
column-gap: px | rem | em | ...;
gap: px | rem | em | ...; /* Скратен начин за дефинирање на овие две својства истовремено */
justify-content: start | end | center | space-between | space-around | space-evenly;
align-content: start | end | center | space-between | space-around | space-evenly;
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
child {
grid-area: ... | -1 | 0 | 1 | ... / ... | -1 | 0 | 1 | ... / ... | -1 | 0 | 1 | ... / ... | -1 | 0 | 1 | ...; /* Скратен начин за дефинирање grid-column и grid-row. Алтернативно може да се користи име на grid-area */
grid-column: ... | -1 | 0 | 1 | ... / ... | -1 | 0 | 1 | ...; /* grid-column-start / grid-column-end */
grid-row: ... | -1 | 0 | 1 | ... / ... | -1 | 0 | 1 | ...; /* grid-row-start / grid-row-end */
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: start | end | center | stretch;
}
}