• Здраво и добредојдовте на форумот на IT.mk.

    Доколку сеуште не сте дел од најголемата заедница на ИТ професионалци и ентузијасти во Македонија, можете бесплатно да се - процесот нема да ви одземе повеќе од 2-3 минути, а за полесна регистрација овозможивме и регистрирање со Facebook и Steam.

CSS

  • Ја почнал/а темата
  • #1

Vermilion

Intern
23 јули 2007
92
0
www.ikon-design.net
Ајде некој нека се зафати и работење со ЦСС .
Мора да имате барем основно познавање од X/HTML.

Што е CSS ?
- CSS стои за Cascading Style Sheets
- Стиловите го дефинираат прикажувањето на HTML елементите
- Стиловите беа додадени во HTML 4.0 за да решат проблем
- Екстерни стилови (External Style Sheets) можат да ви заштедат многу работа а и време

CSS синтаксата (syntax) се содржи од 3 елементи:
- selector
- property
- value
Код:
selector {property: value}
Selector е HTML елементот/тагот кој сакаш да го дефинираш, property е атрибутот кој сакаш да го промениш, и секој property има value.
Код:
body {color: black}
Па од тука, body - selector, color - property, black - value.

Ако value ви се содржи од повеќе зборови тогаш `замотајте` ја со наводници:
Код:
p {font-family: "sans serif"}
Ако сакате повеќе прегледност, тогаш наредете го кодот вака:
Код:
p
{
text-align: center;
color: black;
font-family: arial
}
Можете и да ги групирате повеќе selectors така што ќе ги одделите со запирка:
Код:
h1,h2,h3,h4,h5,h6 
{
color: green
}
и од тука сите хединзи ќе ви бидат зелени.

Можете и да оставите ваши коментари за да не се изгубите во просторот.
Отварате коментар со `/*` и затварате со `*/`
Код:
/* Ова е коментар */
p
{
text-align: center;
/* Ова е друг коментар */
color: black;
font-family: arial
}
За оние кои сакаат да ги знаат сите атрибути или values, ѕирнете тука.
Ќе продолжам подоцна .....
 
  • Ја почнал/а темата
  • #2

Vermilion

Intern
23 јули 2007
92
0
www.ikon-design.net
Ај сега да направиме наш CSS style sheet.

Отвораме Notepad.
Сакаме да имаме наш heading, па пишиме:
Код:
.h1 {
font-family:verdana;
font-size:22;
color:#001100;
}
Сакаме обичен текст:
Код:
.text {
font-family:verdana;
font-size:12;
color:#0066dd;
}
Е сега доколку сакаме линкуваните текстови да си ги правиме како што сакаме, на пример на претходниот .text елемент:
Код:
.text {
font-family:verdana;
font-size:12;
color:#0066dd;
}
[B]a:link.text {color:#0066dd;}
a:visited.text {color:#0066dd;}
a:hover.text {color:#0066dd; text-decoration:underline;}
a:active.text {color:#0066dd;}
a.text {text-decoration:none;}[/B]
Ова го снимаме како main.css



Ај сега да поврземе ХТМЛ со ЦСС.
Отвораме Notepad. Меѓу <head> таговите вметнуваме:
Код:
<head>
<link rel="stylesheet" type="text/css"
href="main.css" />
</head>
Така main.css ни е поврзан со ХТМЛ документот.
Сега, доколку пишеме некој текст меѓу <body> таговите, и сакаме да ни биде heading, знаеме дека веќе имаме таков во main.css, па затоа ќе напишеме:
Код:
<body>
<h1>Hello World!</h1>
</body>
Сакаме да вметниме обичен текст, а знаеме дека направивме еден .text во main.css, па ќе пишиме:
Код:
<body>
<h1>Hello World!</h1>
<p class="text">Welcome !</p>
</body>
Ете така им додаваме стајл на ХТМЛ елементите.
Следува уште ;)
 
  • Ја почнал/а темата
  • #3

Vermilion

Intern
23 јули 2007
92
0
www.ikon-design.net
Додавање на рамки (borders) со CSS.

Значи отвараме Нотепад. И сакаме стајлот за рамката да ни се вика ramka. Внесуваме:
Код:
.ramka {
border:1px solid #000000;
}
[B]a:link.ramka {border:1px solid #000000;}
a:visited.ramka {border:1px solid #000000;}
a:hover.ramka {border:1px solid #000000;}
a:active.ramka {border:1px solid #000000;}[/B]
Објаснување:
Селекторот ни се вика ramka.
border e property.
1px - значи рамката ќе ни биде 1px, со солидна линија, и #000000 како боја за истата.
Болдираниот код е линк стајлот за рамката. Доколку истата е линкувана.
И како што можете да видите, стајлот за линк секогаш е подреден:
link (како ќе изгледа нормално линкувана)
visited (како ќе изгледа доколку е посетен линкот)
hover (скратено од rollover, или како ќе изгледа со маусот врз неа)
active (како ќе изгледа како активен линк)
 

Нови мислења

Последни Теми

Статистика

Теми
42,609
Мислења
821,624
Членови
28,258
Најнов член
mimoza.stoilova
На врв Дно