CSS (Cascading Style Sheets).
OK преди да започнеме ще е добре,ако имате някакви предварителни познания по xhtml/html.

1.Какво е CSS?

- Начин който формулира как да се покажат html елементите
- CSS съкратено от Cascading Style Sheets

2.Синтаксис

CSS се състои от три части: Селектор (selector), Свойство (property) и стойност (value).
Пример:

selector {property: value}


Селектора (selector) обикновенно е html елемент или таг,който искаме да използваме,Свойството (property) е атрибута,който искаме да промениме и всяко свойство може да има стойност (value). Property и value се разделят с двоеточие (:) и се обграждат от "къдрави" скоби ( { } ).
Ако стойноста (value) се състои от няколко думи се обгражда със кавички ("").
Пример:

p {font-family: "sans serif"}


Ако искате да поставите повече от едно свойство (property),трябва да отделите всяко такова със точка и запетайка (;).
Пример:

p {text-align:center;color:red}


За по пригледен и по лесно четлив код може да поставите всяка стойност на нов ред.
Пример:

p
{
text-align: center;
color: black;
font-family: arial
}


3.Групировка(групиране)

Може да групирате Селекторите (selectors).Разделете всеки селектор с запетайка (,).
Пример:

h1,h2,h3,h4,h5,h6
{
color: green
}


4.Class селектор

С клас селектора може да прилагате различни стилове на еднакви типове елементи в html.
Пример:

p.right {text-align: right}
p.center {text-align: center}


За тази цел вие трябва да ползвате class attribute във вашия html документ.
Пример:

<p class="right">
този параграф ще бъде от дясно позициониран
</p>

<p class="center">
Този ще е централно позициониран
</p>


За да приложите повече от един class за даден елемент, синтаксиса е:
Пример:

<p class="center bold">
This is a paragraph.
</p>


Параграфа от горния пример,ще бъде стилизиран под center class и под bold class,с две думи за него ще отговарят 2 селектора наведнъж.

Можете да пропуснете името на тага в селектора за да дефинирате стила,който ще бъде използван от всички елементи, които имат същия class.
Пример:

.center {text-align: center}


В по долния пример и двата елемента h1 и p имат class="center".Това значи,че и двата елемента са подвластни на center селектора.
Пример:

<h1 class="center">
този надпис,ще бъде централно разположен
</h1>

<p class="center">
този параграф,ще бъде също централно разположен
</p>


Забележка:Не започвайте името на class-a с цифра,защото няма да работи при Mozilla/Firefox.


5.Добавяне на стил на елемент със индивидуален атрибут
Пример:

input[type="text"] {background-color: blue}


Стилът от горния пример,ще влиае на всеки input елемент,които имат атрибут със стойност text.


6.ID селектор

ID селектора се дефинира със помоща на този знак #.
Стилът от примера от долу,ще влиае на елемент,който има id атрибут със стойност "green".
Пример:

#green {color: green}


Стилът от долния пример,ще влиае на p елемент,който има id селектор и стойност "zaheto".
Пример:

p#zaheto
{
text-align: center;
color: red
}


Забележка: не започвайте id името на селектора с цифра,защото няма да работи под Mozilla/Firefox.

7.Коментари в CSS

Коментарите се използват за описване на сорса (кода),който в последствие може да е от ползва за обработка.При CSS коментарите започват с (/*) и завършват с (*/).
Пример:

/* Това е коментар */
p
{
text-align: center;
/* Това е друг коментар */
color: black;
font-family: arial
}


8.Вмъкнеме на Style Sheet

"Външен" Style Sheet.
Това е много удобно,ако искате един css файл да определя стила на няколко страници.Всяка страница трябва да има връзка със css файла.Това става с помоща на <link> тага.Той се поставя между head секцията.
Пример:

<head>
<link rel="stylesheet" type="text/css"
href="imeto na faila.css" />
</head>


"Вътрешен " Style Sheet-
Използва се когато искаме единичен документ да има уникален стил,с 2 думи стил който ще бъде валиден само за дадената страница в която е вкаран.Това става с помоща на <style> тага,който се слага между head тага.
Пример:


<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("kartinka.gif")}
</style>
</head>


9.CSS Backgorund

CSS background приставките(настройките) определят фоновите ефекти на дадения елемент.

Поставяне на цвят на фона.
Код:


<html>
<head>
<style type="text/css">
body {background-color: brown}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

</head>

<body>
Цветът на фона,ще бъде кафяв
<h1>header 1,ще бъде с зелен фон</h1>
<h2>header 2,ще бъде с просрачен фон</h2>
<p>Фонът на paragraph,ще е розов</p>

</body>
</html>


Demo

Поставяне на Изображение за фон.
Код:


<html>
<head>

<style type="text/css">
body
{
background-image:
url('http://www.readersdigest.ca/wallpaper/1280x1024/water_1280x1024.jpg')
}
</style>

</head>

<body>
</body>

</html>


Demo

Повтаряне на фоновото изображение.
Код:

<html>
<head>

<style type="text/css">
body
{
background-image:
url('http://www.cit.gu.edu.au/images/art.gif');
background-repeat: repeat
}
</style>

</head>

<body>
</body>
</html>


Demo

Повтаряне на фоновото изображение вертикално.
Код:


<html>
<head>

<style type="text/css">
body
{
background-image:
url('http://www.cit.gu.edu.au/images/art.gif');
background-repeat: repeat-y
}
</style>

</head>

<body>
</body>
</html>


Demo

Повтаряне на фоновото изображение хоризонтално.
Код:


<html>
<head>

<style type="text/css">
body
{
background-image:
url('http://www.cit.gu.edu.au/images/art.gif');
background-repeat: repeat-x
}
</style>

</head>

<body>
</body>
</html>


Demo

Позициониране на изображение.
Код:


<html>
<head>
<style type="text/css">
body
{
background-image:
url('http://www.cit.gu.edu.au/images/art.gif');
background-repeat:
no-repeat;
background-position:
center;
}
</style>
</head>

<body>
</body>
</html>


Demo

Фиксирано(неподвижно) изображение.
Код:


<html>
<head>
<style type="text/css">
body
{
background-image:
url('http://www.cit.gu.edu.au/images/art.gif');
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>

<body>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
<p>zaheto zaheto zaheto zaheto zaheto zaheto zaheto</p>
</body>

</html>


Demo


9.CSS Text

CSS Text приставките(настройките) определят вида (изгледа) на дадения текст.

Поставяне на цвят на текст.
Код:


<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>

<body>
<h1>header 1</h1>
<h2>header 2</h2>
<p>paragraph</p>
</body>

</html>


Demo

Поставяне на цвят на фона на текст.
Код:


<html>
<head>
<style type="text/css">
span.highlight
{
background-color:red
}
</style>
</head>

<body>
<p>
<span class="highlight">Viktor Zahov (zaheto).</span> Viktor Zahov (zaheto)Viktor Zahov (zaheto)Viktor Zahov (zaheto)Viktor Zahov (zaheto)Viktor Zahov (zaheto)Viktor Zahov (zaheto) <span class="highlight">Viktor Zahov (zaheto)</span>
</p>
</body>
</html>


Demo

Определяне разтоянието между буквите.
Код:


<html>
<head>
<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>

<body>
<h1>Viktor Zahov</h1>
<h4>Viktor Zahov (zaheto)</h4>
</body>

</html>


Demo

Подреждане на текст.
Код:

<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>

<body>
<h1>Centur</h1>
<h2>Ot lqvo</h2>
<h3>Ot dqsno</h3>
</body>

</html>


Demo

Декорация на текст.
Код:

<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</style>
</head>

<body>
<h1>Viktor Zahov</h1>
<h2>Viktor Zahov</h2>
<h3>Viktor Zahov</h3>
<p><a href="http://web-tourist.net/">Link</a></p>
</body>

</html>


Demo

Indent текст.
Kод:

<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head>

<body>
<p>
Zaheto ,zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto zaheto.
</p>
</body>

</html>


Demo

Контрол вурху буквите на текст.
Код:

<html>
<head>
<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>

<body>
<p class="uppercase">Tova e tekst koito shte e s glavni bukvi</p>

<p class="lowercase">Tova e tekst koito shte e s malki bukvi</p>

<p class="capitalize">Tekst koito vsqka nova duma e s glavna bukva</p>
</body>

</html>


Demo


10.CSS Font (шрифт)

CSS font приставки (настройки) определят шрифта на текста.

Променяне шрифта на текст.

<html>
<head>
<style type="text/css">
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>

<body>
<h3>Tova e font times</h3>
<p>Tova e font courier</p>
<p class="sansserif">tova e font sans-serif</p>
</body>

</html>


Demo

Променяне големината на шрифта.
Код:

<html>
<head>
<style type="text/css">
h1 {font-size: 35px}
h2 {font-size: 23px}
p {font-size: 10px}
</style>
</head>

<body>
<h1>Font s golemina 35px</h1>
<h2>Font s golemina 23px</h2>
<p>Font s golemina 10px</p>
</body>

</html>


Demo

Променяне начина на писане на текст.
Код:

<html>
<head>
<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>

<body>
<h1>Nachin na pisane:italic</h1>
<h2>Nachin na pisane:normalen</h2>
<p>Nachin na pisane:oblique</p>
</body>

</html>


Demo

Променяне на дебелината на текст.
Код:

<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.thick {font-weight: bold}

</style>
</head>

<body>
<p class="normal">Normalen tekst</p>

<p class="thick">Odebelen tekst</p>

</body>

</html>


Demo


10.CSS Border (граница)

CSS Border приставките (нстройките) определят границите около дадения елемент.

Видове border-и
Код:

<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>

<body>
<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>
</body>

</html>



Demo

Променяне цвета на border-a.
Код:

<html>
<head>

<style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>

</head>

<body>

<p class="one">Ednocveten border!</p>

<p class="two">Dvu cveten border!</p>

<p class="three">Tri cveten border!</p>

<p class="four">Chetri cveten border!</p>



</body>
</html>


Demo

Променяне големината на border-a.
Код:

<html>
<head>
<style type="text/css">
p.a
{
border-style: solid;
border-bottom-width: 15px
}
p.b
{
border-style: solid;
border-left-width: 15px
}
p.c
{
border-style: solid;
border-right-width: 15px
}
p.d
{
border-style: solid;
border-top-width: 15px
}
</style>
</head>

<body>
<p class="a">Promenq goleminata na dolnata ramka</p>
<p class="b">Promenq goleminata na Lqvata ramka</p>
<p class="c">Promenq goleminata na dqsnata ramka</p>
<p class="d">Promenq goleminata na gornata ramka</p>
</body>

</html>


Demo


11.CSS Margin (ръб)

CSS Margin приставките (настройките) определят разтоянието между дадения елемент.

Поставяне на маргин на текст.
Код:

<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
p.rightmargin {margin-right: 8cm}
p.topmargin {margin-top: 2cm}
p.bottommargin {margin-bottom: 2cm}
</style>
</head>

<body>
<p>Viktor Zahov (zaheto)</p>
<p class="leftmargin">Tozi tekst e sus lqv margin</p>
<p>Viktor Zahov (zaheto)</p>
<p class="rightmargin">Tozi tekst e sus desen margin</p>
<p>Viktor Zahov (zaheto)</p>
<p class="topmargin">Tozi tekst e sus goren margin</p>
<p>Viktor Zahov (zaheto)</p>
<p class="bottommargin">Tozi tekst e sus dolen margin</p>
<p>Viktor Zahov (zaheto)</p>
</body>

</html>


Demo

12.CSS Padding

CSS Padding приставките (настройките) определят разтоянието между границите на дадения елемент и неговото съдържание.

Поставяне на padding на текст.
Код:

<html>
<head>
<style type="text/css">
td.b {padding-left: 2cm}
td.a {padding-right: 2cm}
td.v {padding-top: 2cm}
td.g {padding-bottom: 2cm}
</style>
</head>

<body>
<table border="1">
<tr>
<td class="b">
Tozi tekst e sus lqv padding.Tozi tekst e sus lqv padding.Tozi tekst e sus lqv padding.
</td>
</tr>
<tr>
<td class="a">
Tozi tekst e sus desen padding.Tozi tekst e sus desen padding.Tozi tekst e sus desen padding.
</td>
</tr>
<tr>
<td class="v">
Tozi tekst e sus goren padding.
</td>
</tr>
<tr>
<td class="g">
Tozi tekst e sus dolen padding.
</td>
</tr>
</table>
</body>

</html>


Demo


13.CSS List (списъци)

CSS List приставките (настройките)ви позволяват да наместите списако-артикуловия маркер (list-item marker),размяна на различните такива маркери или да сложите изображение вместо този маркер(объркващо е,но след примерите от долу ще ви стане по ясно).

Списако-артикулов маркер (list-item marker) в неподреден списък.
Код:

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul class="disc">
<li>Hlqb</li>
<li>Bira</li>
<li>Coca Cola</li>
</ul>

<ul class="circle">
<li>Hlqb</li>
<li>Bira</li>
<li>Coca Cola</li>
</ul>

<ul class="square">
<li>Hlqb</li>
<li>Bira</li>
<li>Coca Cola</li>
</ul>

<ul class="none">
<li>Hlqb</li>
<li>Bira</li>
<li>Coca Cola</li>
</ul>
</body>

</html>


Demo


Списако-артикулов маркер (list-item marker) в подреден списък.
Код:

<html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>

<body>
<ol class="decimal">
<li>Bira</li>
<li>Hlqb</li>
<li>Coca Cola</li>
</ol>

<ol class="lroman">
<li>Bira</li>
<li>Hlqb</li>
<li>Coca Cola</li>
</ol>

<ol class="uroman">
<li>Bira</li>
<li>Hlqb</li>
<li>Coca Cola</li>
</ol>

<ol class="lalpha">
<li>Bira</li>
<li>Hlqb</li>
<li>Coca Cola</li>
</ol>

<ol class="ualpha">
<li>Bira</li>
<li>Hlqb</li>
<li>Coca Cola</li>
</ol>
</body>

</html>


Demo

Поставяне на изображение за list-item marker.
Код:

<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('http://www.w3schools.com/css/arrow.gif')
}
</style>
</head>

<body>
<ul>
<li>Hlqb</li>
<li>Maslo</li>
<li>Coca Cola</li>
</ul>
</body>

</html>



Demo

Наместване на list-item marker.
Код:

<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}

ul.outside
{
list-style-position: outside
}
</style>
</head>

<body>
<p>This list has a list-style-position with a value of "inside":</p>
<ul class="inside">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>

<p>This list has a list-style-position with a value of "outside":</p>
<ul class="outside">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>
</body>
</html>



Demo

14.CSS Classification (класификация)

CSS Classification приставките (настройките) ви позволяват да определяте как и къде да се показват дадените елементи.

Показване на елемент.
Код:

<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>

<body>
<p>Web-tourist.net Web-tourist.net Web-tourist.net</p>

<p>nqma raztoqnie mejdu dvata elementa zashoto gorniq paragraf e sys stoinost "inline"</p>

<div>Tozi tekst nqma da se pokaje zashtoto e sys stoinost "none"</div>
</body>
</html>


Demo

Float селектор.
Код:

<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>

<body>
<p>Kartinkata e sys stojnost float:right</p>
<p>
<img src="http://www.cit.gu.edu.au/images/art.gif" width="95" height="84" />
Viktor Zahov.Viktor Zahov.Viktor Zahov.Viktor Zahov.
Viktor Zahov.Viktor Zahov.Viktor Zahov.Viktor Zahov.
Viktor Zahov.Viktor Zahov.Viktor Zahov.Viktor Zahov.
Viktor Zahov.Viktor Zahov.Viktor Zahov.Viktor Zahov.
Viktor Zahov.Viktor Zahov.Viktor Zahov.Viktor Zahov.
Viktor Zahov.Viktor Zahov.Viktor Zahov.Viktor Zahov.
Viktor Zahov.Viktor Zahov.Viktor Zahov.Viktor Zahov.
Viktor Zahov.Viktor Zahov.Viktor Zahov.Viktor Zahov.
</p>
</body>

</html>


Demo

Просто хоризонтално меню.
Код:

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:#07ADEF;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#0375A2}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">For me</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Links</a></li>
</ul>
<br />
<br />

<p align="center">Create by zaheto™</p>



</body>
</html>


Demo

Лесен сайт без таблици (tables).
Код:


<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:#0375A2;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid black;
padding:1em;
}
</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">Web-tourist.net</h1></div>
<div class="left"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div>
<div class="content">
<h2>CSS sait</h2>
<p>Eto kak lesno i burzo moje da si napravite sait bez tablici,a s pomoshta na div tagove</p>
<p>Viktor Zahov</p></div>
<div class="footer">Copyright 2007 by zaheto™.</div>
</div>

</body>
</html>


Demo

Absolute и Relative позициониране на елемент.
Код:

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
h2.pos_abs
{
position:absolute;
left:100px;
top:150px;
color: red;
}
</style>
</head>

<body>
<h2>Tozi natpis e normalno pozicioniran</h2>
<h2 class="pos_left">Tozi natpis e premesten na lqvo ot negovoto normalno poz.</h2>
<h2 class="pos_right">Tozi natpis e premesten da dqsno ot negovoto normalno poz.</h2>
<h2 class="pos_abs">Tozi natpis e sys absolute pozicionirane</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>

</html>


Demo

Как да направиме елемент да изчезне.
Код:

<html>
<head>
<style type="text/css">
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}
</style>
</head>

<body>
<h1 class="visible">Tozi tekst e vidime</h1>
<h1 class="invisible">Tozi tekst e nevidim</h1>
</body>

</html>



Demo

Смяна на курсора.
Код:

<html>

<body>
<p>Mestete mishkata po protejenie na teksta i shte vidite kak kursora se smenq:</p>
<span style="cursor:auto">
<b>Auto</b></span><br />
<span style="cursor:crosshair">
<b>Crosshair</b></span><br />
<span style="cursor:default">
<b>Default</b></span><br />
<span style="cursor:pointer">
<b>Pointer</b></span><br />
<span style="cursor:move">
<b>Move</b></span><br />
<span style="cursor:e-resize">
<b>e-resize</b></span><br />
<span style="cursor:ne-resize">
<b>ne-resize</b></span><br />
<span style="cursor:nw-resize">
<b>nw-resize</b></span><br />
<span style="cursor:n-resize">
<b>n-resize</b></span><br />
<span style="cursor:se-resize">
<b>se-resize</b></span><br />
<span style="cursor:sw-resize">
<b>sw-resize</b></span><br />
<span style="cursor:s-resize">
<b>s-resize</b></span><br />
<span style="cursor:w-resize">
<b>w-resize</b></span><br />
<span style="cursor:text">
<b>text</b></span><br />
<span style="cursor:wait">
<b>wait</b></span><br />
<span style="cursor:help">
<b>help</b></span>
</body>

</html>


Demo



Този урок е изготвен от zaheto™.




/ Трябва да сте регистриран за да напишете коментар /
От: batmanabg
13:21 22-07-2011
Полезен урок.
1