failo galūnės *.css (style.css)
<BODY><DIV><P><SPAN> – pagrindiniai blokai kuriuose dedami stiliai
kiekvienas stilius sudarytas iš aprašymo bloko:
Border_Object
{
Border: 2px solid red;
}
ir Objeto sistemoje
Class=’Border_Object’
Kodai:
/* komentaras */
Font – šriftas (p, div,td,tr,font,a,li – tegai)
font-family:Arial, Helvetica, sans-serif; – šriftas stylius
Verdana, Geneva, sans-serif;
Georgia, Times New Roman, Times, serif
Courier New, Courier, monospace
Arial, Helvetica, sans-serif;
Tahoma, Geneva, sans-serif
Trebuchet MS, Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
Times New Roman, Times, serif
Palatino Linotype, Book Antiqua, Palatino, serif
Lucida Sans Unicode, Lucida Grade, sans-serif
MS Serif, New York, serif
Lucida Console, Monaco, monospace
Comic Sans MS, cursive
font-style:inherit,italic,normal,oblique; – šrifto stylius [pakreiptas]
font-variant:inherit,normal,small-caps; – visos dydžiosios raidės (mažesnes nei pirmos)
font-weight: bold; – šrifto storis (skaičiais 100,200,…,900,bold,bolder,inherit,lighter,normal)
font-stretch:normal; – šrifto suspaudimas (condensed,expanded,extra-condensed,inherit,narrower,normal,semi-condensed,semi-expanded,ultra-condensed,ultra-expanded,wider)
font-size:px; – šrifto dydis (font-size:10px;large,pt)
Text – tekstas
text-indent:px; – pirmos eilutės įtraukimas/patraukimas,tabas (pikseliais)
text-align:right; – teksto lygiavimas (center,justify,left,right)
text-decoration:underline; – teksto dekoracijos (blink – mirksintis,inheris – defoult reikšmė,line-through – perbrauktas tekstas,none,overline – vi ršuje linija,underline – apačioje linija)
text-transform:capitalize; – teksto transformacija (capitalize – kiekvieno žodžio pirma raidė didžioji, inherit, lowercase – visos pirmos raidės mažosios, none, uppercase – visos didžiosios)
word-spacing: px; – tarpas tarp žodžių (pikseliais arba inherit, normal)
letter-spacing:px; – tarpas tarp raidžių (pikseliais arba inhertit, normal)
Kiti
color:#; – spalva _ color:#FF0000;
background-color:#; – fono spalva
border:2px dotted #FF0000; – rėmelis punktyrai ir spalva
Stilius HTML dokumente (naudojamas TIK vienam elementui, neverta kurti atskirame):
Tarp <head></head>:
<style type=”text/css”>
<!–
.style1 {
color:#FF0000;
font-weight: bold;
}
–>
</style>
… Body dalyje
<span class=”style1″>Tekstas</span>
Kitas variantas:
<span style=”color:#FF0000; font-weight: bold;”>Tekstas</span>
Stilius atskirame dokumente:
tarp <head></head>
<link href=”" rel=”stylesheet” type=”text/css”> – nuoroda į css stilių dokumentą
darbas stilių dokumente…
individualūs stilių blokai prasideda tašku:
.special_text{
}
HTML tegams nereikia taškų (<p>)
p {
}
Jei HTML teksta < p class=”style2″> – naudojamas class esantis stylius
body {
}
Class ir ID:
ID -> tik 1 kartą galime panaudoti
Class -> bet kiek kartų
HTML:
<DIV ID=”header“></DIV>
CSS:
#header {}
HTML:
<P> Tekstas </P>
CSS:
P {}
HTML:
<IMG CLASS=”IMG1″>
CSS:
.IMG1 {}
Keli tegai vienu metu:
p, ol, ul {}
Linkai (pseudo klasės):
A:link {color: red} – neaplankyta nuoroda
A:visited {color: blur} – aplankyta nuoroda
A:hover {color: yellow} – pelė ant nuorodos
A:active (color: lime} – aktyvi nuoroda (analogas focus) – paspaudus ant jos
text-decoration:none – underline nuėmimas nuo linko
FONAS (body,table,div ir …)
body{}
background: red; url(img/bg.jpg) repeat-x; – parametrai viena eilute
background-attachment 
scroll – judės kartu (defaut), fixed – fiksuotas, inderit) – ar bus fono paveiklas fiksuotas ekrane ar ne – t.y. stumiant vaizdą ar fonas keisis ar judės kartu su fonu.
background-color:blue; -fono spalva
background-image: (inheris – naudoti teviniame esantį dive naudot body esantį, none, url(images/bg.jpg)-fono paveikslo adresas) ; – fono paveikslas. Pagal nutylėjimą mažu paveiksliuku bus padengtas visas fonas.
background-position: (bottom, center, inderit, left, right, top, 300px 200px – piseliais, 20% 50% – procentais (x,y , procentai su – patenka už rėmų.)- padėtis foninio paveikslo
background-repeat: (inherit, no-repeat - nekartoti, repeat – kartoti visomis kryptimias, repeat-x – kartojimas horizontaliai ,repeat-y – kartojimas vertikaliai); – paveikslo kartojimas
Paraštės
margin – paraštės (atstumai iki objekto)
margin: 50px – paraštės nuo visų pusių
margin-top – paraštė nuo viršaus
margin-right - paraštės nuo dešinės
margin-bottom - paraštės nuo apačios
margin-left - paraštės nuo kairės
padding – atstumai objekto viduje
padding: 50px; – bloke iš visų pusių bus paraštės 50pp
Pozicionavimas CSS
position: (static – statiški (default), relative – prisitaikanti nuo kitų, absolute – nekintantis visi toje pacioej vietoje , fixed – pnš į absoliutą, inherit); – pozicija (bloko padėtis)
position:relative; atitraukti, atkabinti, laisvai judinti nuo jo padėties buvusios
top:20px;
left:-20px;
right:
bottom:10px;
position:absolute; – pastatybi bloką ten kur norime esamame teviniame objekte (jeigu jis relative) o jeigi visi tėviniai static orentuojamasi į naršklės kampus
top:
left:
right:
bottom:
width:
position:fixed; – tas pats kas absolute tik naršant jos nekeičia padėties – t.y. juda kartu su ekranu…
float: (left, right, none, inherit) – pluduriavimas, poziocionavimas kai reikia įdėti bloką o šalia jo tekstą ( kaip paveikslą).
clear: (left,right,none,inherit,both) – išvalymas, kad blokas neliptu ant bloko.
DISPLAY
display block,compact,inherit,inline,inline-block,inline-table,list-item,marker,none,rin-in) – formulavimas
Migtuko sukurimas – bloko-nuorodos
.link{display:block}
.link:hover{display:block}
Kiti:
h1, h1 a {} – h1 ir nuoroda h1
#menu .last {}
#menu a:hover {}
FORMOMS
div#IDNAME input.CLASSNAME {} – formos savybė
input#button{background:url(images/but.jpg);} – migtukas
