CSS

Vermilion · 10 април 2008

Ајде некој нека се зафати и работење со ЦСС .
Мора да имате барем основно познавање од 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, ѕирнете тука.
Ќе продолжам подоцна .....

Vermilion · 10 април 2008

Ај сега да направиме наш 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>

Ете така им додаваме стајл на ХТМЛ елементите.
Следува уште

Vermilion · 11 април 2008

Додавање на рамки (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 (како ќе изгледа како активен линк)

CSS

Vermilion

Intern

Vermilion

Intern

Vermilion

Intern

Нови мислења

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

Онлајн членови

Статистика