CSS sintaksė

1
2
3
4
5

selektorius {
  parametras:reikšmė;
  parametras:reikšmė;
  parametras:reikšmė;
}

Tai yra kodo struktūros pavyzdys, aprašytos vienam selektorius trys taisyklės. Taisyklių galime aprašyti tiek, kiek reikia. Tas pats parametras viename taisyklių bloke gali būti tik vieną kartą. Bloko pradžią nurodo atidaromieji laužtiniai skliaustai {, pabaigą - uždaromieji laužtiniais skliaustai }

Selektorius

Selektorius tai yra ta dalis, kuri parenka kokiems elementams bus taikomos css taisyklės. Selektorių su kiekviena nauja css kalbos versija atsiranda vis įvairesnių. Reiktų nepamiršti, kad ne visus selektorius supranta visos naršyklės.

Populiariausi selektoriai

Visi elementai. Toks aprašas visiems html elementams priskirtų stilius padding ir margin po 0 pikselių:

1
2
3
4

* {
  padding:0px;
  margin:0px;
}

Elemento pavadinimas. Toks css kalbos aprašas nuo visų puslapyje esančių paveikslėlių nuimtų rėmelį:

1
2
3

img {
  border:none;
}

Klasės selektorius. Toks selektorius paima visus html elementus, kurie turi atributą class su reikšme klase ir tų elementų teksto spalva tampa raudona:

1
2
3

.klase {
  color:#f00;
}

ID selektorius. Toks selektorius paima elementus su atributu id ir reikšme id. Viename puslapyje gali būti tik vienas elementas su tokiu id, negali būti kelių su tokiu pat id pavadinimu:

1
2
3

#id {
  background-color:#0f0;
}

Daugiau informacijos apie selektorius galite rasti mūsų kitose css kalbos pamokose.

Taip pat apie visus iš karto galite pasiskaityti angliškame straipsnyje: Selectors Level 3

Jei matote, kad jau yra naujesnė angliško straipsnio versija, prašome parašyti apie tai komentare. Ačiū.

Parametras

Parametro vietoje yra rašoma css kalbos komanda. Komandų yra apie 90, jos visos yra surašytos css žinyne. Viename taisyklių bloke kiekviena komanda negali kartotis, visos turi būti skritingos, tačiau skirtingų gali būti tiek kiek reikia. Daugelis parametrų yra angliški pilni žodžiai, todėl mokant anglų kalbą yra iš ties paprasta juos prisiminti. Mokantis siūlyčiau pasinaudoti anglų žodynu ir susižinoti lietuviškus vertimus, tai padės lengviau suprasti kiekvieno parametro reikšmę ir nereikės mokytis atmintinai.

Reikšmė

Reikšmės vietoje rašome parametro reikšmę. Kiekvienas parametras turi turėti kokią nors jam tinkamą reikšmę, pavyzdžiui parametras color gali turėti arba žodinę spalvos išraišką, tarkim red, arba hex koduote užrašytą spalvos kodą, ta pati raudona būtų #ff0000; arba #f00;, arba rgb išraiška, raudona būtų rgb(255,0,0). Kokias reikšmes gali įgyti parametras priklauso nuo parametro.

Komentarai

Kaip ir kiekvienoje kalboje, css kalba turi komentavimo galimybe. Komentuoti reiktų atskirų puslapio vietų rašomus taisyklių blokus. Komentarai yra rašomi taip:

1
2
3
4
5

/* css komentaras */
 
div {
  border:1px solid #f00;
}

Didelio stilių failo ištrauka

Čia galite pamatyti kaip realiai atrodo puslapio stilių failas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

charset "utf-8";
* {
	margin:0px;
	padding:0px;
}
img {
	border:none;
}
a, a:link, a:visited, a:active {
	font-family:Arial, Helvetica, sans-serif;
	color:#45786b;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
.clear {
	clear:both;
}
body {
	background-color:#edecec;
	background-image:url(../images/top_bg.png);
	background-position:top;
	background-repeat:repeat-x;
}
 
/* pranesimai ir klaidos */
div#pranesimams {
	width:958px;
	margin:0px auto;
}
 
div.pranesimas_kaire {
	background-image:url(../images/klaida_kaire_desine.png);	
	background-position:0px 0px;
	background-repeat:no-repeat;
	height:37px;
	width:5px;
	margin-left:15px;
	float:left;
	margin-top:20px;
}
div.pranesimas_desine {
	background-image:url(../images/klaida_kaire_desine.png);	
	background-position:-5px 0px;
	background-repeat:no-repeat;
	height:37px;
	width:5px;
	float:left;
	margin-top:20px;
}
div.pranesimas_centras_klaida, div.pranesimas_centras_pranesimas {
	height:35px;
	width:900px;
	float:left;
	border-bottom:1px solid #dddcdc;
	border-top:1px solid #dddcdc;
	background-color:#e7e6e6;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:italic;
	font-weight:normal;
	color:#4f7417;
	padding-left:32px;
	background-image:url(../images/pranesimas.png);
	background-position:6px 0px;
	background-repeat:no-repeat;
	line-height:35px;
	margin-bottom:0px;
	margin-top:20px;
}
div.pranesimas_centras_klaida {
	color:#c33214;	
	background-position:6px -35px;
}
 
/* bendra */
 
div#top {
	min-width:1000px;
	max-width:1300px;
	margin:0px auto;
	height:215px;
	background-image:url(../images/top.png);
	background-position:top;
}
div#logo {
	position:relative;
	top:-25px;
	left:35px;
}
div#social_moduliui {
	width:1000px;
	margin:0px auto;
	height:36px;
}
div#social_modulis {
	width:235px;
	height:23px;
	position:relative;
	left:730px;
	top:6px;
	z-index:2;
}
div#top_reklama_468x60 {
	width:468px;
	height:60px;
	background-color:#333;
	position:relative;
	left:448px;
	top:45px;
	z-index:3;
}

CSS kalba yra kliento pusės, todėl betkurio atidaryto puslapio css taisykles yra galima pasižiūrėti. Tai galime atlikti tiesiog paspaudus dešinį pelės klavišą ant neaktyvios puslapio vietos ir pasirinkus meniu punktą View Page Source (Firefox).

Patariu parsisiųsti Firefox naudotojams papildymą FireBug. Šis Firefox papildymas leis lengvai peržiūrėti ne tik kiekvieno elemento CSS stilių taisykles, bet taip pat suteiks daug naudingos papildomos informacijos apie betkurį puslapį. Nuoroda siųstis: https://addons.mozilla.org/en-US/firefox/addon/1843