ИЗРАДА ВЕБ САЈТОВА » Шта је ЦСС

Шта је ЦСС

Чланак написан 21.07.2012.    Број коментара 0 коментар/a     Број прегледа 11475 преглед/a Штампај чланак

Пошаљите свом пријатељу линк

CSS (Cascading Style Sheets ), а служи за дефинисање стилова који одређују изглед html елемената (фонт, боје, позадине, размаке...). Стилови су дефинисани у формату:

sektor {
    atribut1: vrednost1;
    atribut2: vrednost2;
    atribut3: vrednost3;
    …
}

СЕКТОРИ

Сектори могу да се поделе у три групе:

  • HTML сектори (основни),
  • ID сектори,
  • Class сектори,

HTML сектори су основни сектори и представљају називе тагова који се користе у html/php документу и на које ће бити примењен. Пример:

body {
    color: #333333;
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
    color: #0000ff;
}

ID сектори носе префикс # (тарабу). Користе се ако је потребно применити одрђени стил на јединствени елемент у html/php документу који је обележен одређеним ID атрибутом. Пример:

#zaglavlje {
    color: #009900;
}


а у самој страници (коду странице) биће приказано као:

<p id=”zaglavlje”>Назив фирме</p>

CLASS сектори носе префикс . (тачку). Користе се ако је потребно применити одрђени стил на елемент у html/php документу који је обележен одређеним CLASS атрибутом. Пример:

.polozaj {
    text-align: right;
}


a u samoj stranici (kodu stranice) biće prikazano kao:

<p class=”polozaj”>Потпис директора</p>

КОРИШЋЕЊЕ

CSS стилови се могу налазити у засебном (екстерном, External) фајлу са екстензијом .css, или се могу налазити на самој html/php страници (интерни). Интерни стилови могу бити дефинисани у заглављу странице (у оквиру head тага, Embeded), или бити у самом html елементу (Inline).

Inline CSS - Најједноставнији и најмање препоручљив начин за употребу CSS. Користи се ако је потребно на лицу места (у самом HTML-у) изменити неки већ постојећи CSS стил или задати одређени изглед без креирања стила. Није флексибилан, јер код евентуалног мењања стила, потребно је више времена да се пронађе и замени. Уколико на сајту постоји више страница са истим подешавањем, утом више посла. Пример:

<p style=”color: #FF0000; text-align: center; ”>Ово је неки пасус</p>

Embeded CSS - CSS дефинисан у заглављу странице је бољи начин од претходног, али и даље може да представља проблем при евентуалној измени. У том случају дизајнер би морао сваку страницу “ручно” да провери и измени стил и самим тим троши више времена. Овај начин користимо ако су нам потребни стилови за које смо сигурни да ћемо их користити само на тој страници. Пример:

<head>
<style type='text/css'>
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
}
a:link {
    color: #006600;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
</style>
</head>

External CSS – Дефинисање засебног CSS фајла је најпрепоручљивији начин, јер при евентуалној измени садржаја CSS фајла, стил ће се аутоматски мењати и за све странице. Страницу можете да повежете са .css документом, тако што head тагу унесете следећи код:

<head>
<link rel='stylesheet' type='text/css' href='putanja-do-css-a/stil.css' />
</head>

где је stil.css екстерни фајл.

Наставак ускоро...


ПОДЕЛИТЕ СА ПРИЈАТЕЉИМА


Facebook Twitter Delicious Digg FriendFeed Google Bookmarks MySpace Reddit Sphere StumbleUpon Technorati Favorites Tumblr

ПОШАЉИТЕ КОМЕНТАР

Име:*
Ел. пошта:*
Коментар:*
Анти-спам:* Анти-спам