Teorija

Kopsavilkums
Dažu vairāk lietoto CSS komandu tabulas
Fonti
 
Īpašība
Apraksts
Piemērs
font-family
Fonts vai fontu grupa
font-family: dažādi fonti
font-family: Helvetica, Arial, sans-serif
font-style
font-style: vērtība
Iespējamās vērtības:
italic = kursīvs
oblique = slīpais raksts
normal = normāls raksts
font-style: italic
font-variant
font-variant: vērtība
Iespējamās vērtības:
small-caps = samazināti lielie burti (kapiteļi)
normal = normāls
font-variant: small-caps
font-size
Burtu lielums
font-size: vērtība
Iespējamās vērtības:
xx-small = ļoti, ļoti mazs
x-small = ļoti mazs
small = mazs
medium = vidējs
large = liels
x-large = ļoti liels
xx-large = milzīgs
smaller = acīm redzami mazāks par normālo
larger = acīm redzami lielāks par normālo
font-size: large
font-size: 18pt
 
Iespējamās vērtības var tikt uzdotas ar
em, px, pt vai ar parādītajiem vārdiem large, small u.c.
font-weight
Burtu platums, biezums
font-weight: vērtība
Iespējamās vērtības:
bold = trekns
bolder = ekstra trekns
lighter = plāns
normal = normāls
ar skaitļiem: 100, 200, 300, 400, 500, 600, 700 (no plānākā uz treknāko)
font-weight: bold
font-weight: 100
letter-spacing
letter-spacing: vērtība
(iestāta atstarpi starp burtiem)
Var pielietot atslēgas vārdu normal vai iestatīt brīvi izvēlētu attālumu
letter-spacing: 10px
letter-spacing: 0.3em
word-spacingword-spacing: vērtība
(iestāta atstarpes starp vārdiem)
word-spacing: 1em
 
Teksta formatēšana
 
Īpašība
Apraksts
Piemērs
text-decoration
text-decoration: vērtība
Iespējamās vērtības:
underline = pasvītrots,
overline = pārsvītrots,
line-through = caursvītrots,
blink = mirgojošs,
none = nepielietot text-decoration
text-decoration: underline
text-decoration: line-through
text-transform
text-transform: vērtība
Iespējamās vērtības:
capitalize = vārds sākas ar lielo burtu,
uppercase = tikai lielie burti,
lowercase =  tikai mazie burti,
none = nepielietot text-transform
text-transform: capitalize
color
color: vērtība
Krāsu var iestatīt vienā no veidiem:
#FFCC99,
red
rgb(96,255,0)
color: blue
color: #FFCC99
color: rgb(96,255,0)
 
Rindkopas formatēšana
 
Īpašība
Apraksts
Piemērs
text-indent
Rindkopas atkāpe
text-indent: vērtība
(iestāta pirmā vārda atkāpi rindkopā)
text-indent: 2em
line-height
Teksta rindas augstums
(iestāta atstarpi starp rindām)
line-height: vērtība
Var uzdot absolūto augstumu (pt), rindu skaitu (1.4)
vai arī procentus no tekošā rindu augstuma
line-height: 1.5em
vertical-align
vertical-align: vērtība
Iespējamās vērtības:
top = nolīdzināšana no augšas
middle = no vidus
bottom = no apakšas
baseline = no bāzes līnijas
vertical-align: top
vertical-align: middle
vertical-align: bottom
text-align
Teksta nolīdzinājums
(norāda horizontālās izlīdzināšanas veidu)
text-align: vērtība
Iespējamās vērtības:
left = tekstu izlīdzina pa kreisi
center = centrē
right = pa labi
justify = pa labi un pa kreisi (pēc platuma)
text-align: center
white-space
white-space: vērtība
Norāda kā tiek attēloti atstarpes simboli.
Normal nozīmē ka blakus esošas atstarpes tiek attēlotas kā viena, pre nodrošina visu simbolu attēlošanu, bet nowrap tekstam pāriet jaunā rindā ja vien tekstā nav ievietots <br /> tags.
white-space: nowrap
 
Teksta attālumi no lapas malām
 
Īpašība
Apraksts
Piemērs
margin-topmargin-top: vērtība
margin-top: 3 em
margin-bottommargin-bottom: vērtībamargin-bottom: 5cm
margin-leftmargin-left: vērtībamargin-left: 30mm
margin-left: 200px
margin-rightmargin-right: vērtībamargin-right: 150px
 
Attālums starp tekstu un rāmi
 
Īpašība
Apraksts
Piemērs
padding-toppadding-top: vērtībapadding-top: 200px
padding-bottom padding-bottom: vērtībapadding-bottom: 2cm
padding-left padding-left: vērtībapadding-left: 15pt 
padding-rightpadding-right: vērtība padding-right: 0.4in
 
Rāmis
 
Īpašība
Apraksts
Piemērs
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
Nosaka rāmja biezumu
(to var norādīt ar skaitļiem vai ar atslēgas vārdiem).
border-width: vērtība (visas malas)
border-top-width: vērtība (tikai augšējā mala)
border-bottom-width: vērtība (apakšējā mala)
border-left-width: vērtība (kreisā mala)
border-right-width: vērtība (labā mala)
Iespējamas īpašības:
thin = plāna
medium = vidēji bieza
thick = bieza
border-left-width: 2.5 em
border-right-width: 0.5 em
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
Nosaka rāmja krāsu.
Šo īpašību var pievienot,
ja ir uzdota īpašība border style.
border-color: vērtība (visas malas)
border-top-color: vērtība (tikai augšējā mala)
border-bottom-color: vērtība (apakšējā mala)
border-left-color: vērtība (kreisā mala)
border-right-color: vērtība (labā mala)
border-top-color: #FF00FF
border-left-color: #00FF00
border-right-color: #3333FF
border-bottom-color: #FFFF00
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
Nosaka elementa rāmja veidu
border-style: vērtība (visas malas)
border-top-style: vērtība (tikai augšējā mala)
border-bottom-style: vērtība
(apakšējā mala)
border-left-style: vērtība (kreisā mala)
border-right-style: vērtība (labā mala)
Iespējamas īpašības:
none = nav redzama rāmja
hidden = paslēpts rāmis
dotted = punktots rāmis
double - divkāršā līnija
dashed = rāmis ar pārtrauktām līnijām
solid = nepārtraukts
groove - iespiesta rāmja robeža,
ridge - izcelta rāmja robeža,
inset - iespiests elements,
outset - izcelts elements
 border-style: dotted
border
border: vērtība (visas malas)
border-top: vērtība (augša)
border-bottom: vērtība (apakša)
border-left: vērtība (pa kreisi)
border-right: vērtība (pa labi)
 
 
Fona krāsas un zīmējuma ievietošana
 
Īpašība
Apraksts
Piemērs
backgroundIespējamās vērtības:
background-color
background-image
backgrou nd-repeat
background-attachment
background-position
Īpašība, ar kura var vienā komandā norādīt visus vajadzīgos nosacījumus.
background-colorbackground-color: vērtība
Blue
#cccc00
rgb(20%,70%,10%)
background-imagebackground-image: url (attēla adrese) 
background-repeat 
background-repeat: vērtība
Iespējamās vērtības:
repeat = atkārtot attēlu
repeat-x = atkārtot attēlu pa x asi
repeat-y = atkārtot attēlu pa y asi
no repeat = neatkārtot attēlu
 
background-attachment background-attachment: vērtība
Iespējamās īpašības:
scroll = attēls seko līdzi, ja lapas pāršķir
fixed = attēls paliek nekustīgs
 
background-position 
background-position: vērtība
Iespējamās vērtības:
top = augšā novietots attēls
center = horizontāli centrēts attēls
bottom = apakšā novietots attēls
left = pa kreisi novietots attēls
right = pa labi novietots attēls
 
 
Sarakstu formatēšana
  
Īpašība
Apraksts
Piemērs
list-style-type
list-style-type: vērtība
Iespējamās vērtības:
decimal - 1,2,3,...
lower-roman - i,ii,iii,iv,...
upper-roman - I,II,III,IV,...
lower-alpha - a,b,c,...
upper-alpha - A,B,C,...
list-style-type: lower-roman
list-style-position
Uzskaitījuma (bullet) zīmes atrašanās
list-style-position: vērtība
Iespējamās vērtības:
inside
outside
 
list-style-image
list-style-image: url (adrese)
Uzskaitījuma (bullet) zīmes vietā ir attēls (uzrādīta tīkla adrese url) vai nav (none)
Sarakstā ieliek saiti uz attēlu
list-style 
Uzskaitījuma (bullet) stils
list-style: vērtība
Var visus iepriekšējos apvienot, lietojot kā atstarpi tukšumzīmi.
list-style: lower-alpha inside
 
Tabulu organizācija ar CSS
 
Īpašība
Apraksts
Piemērs
caption-side
caption-side: vērtība
Iespējamās vērtības:
top - no augšas
bottom - no apakšas
left - no kreisās puses
right - no labās puses
Tabulas virsraksta novietojums
table-layout
table-layout: vērtība
Iespējamās vērtības:
fixed - fiksēti izmēri
auto - izmēri pieskaņojas saturam
Tabula pieskaņojas saturam (auto) vai nepieskaņojas (fixed)
border-collapse 
border-collapse: vērtība
Iespējamās vērtības:
separate - šūnu rāmji nepārklājas
collapse - šūnu rāmji pārklājas
 
border-spacing border-spacing: vērtība
Uzstāda attālumu starp tabulas šūnu robežām.
 Iestāta ar px, em, mm
empty-cels 
empty-cels: vērtība
Iespējamās vērtības:
show - parādīt tukšās šūnas
hide - noslēpt tukšās šūnas
 
 
Elementu pozicionēšana
 
Īpašība
Apraksts
Piemērs
position
position: vērtība
Iespējamās vērtības:
absolute,
fixed,
relative,
static
 
position (left, right, bottom, top)
position-left: vērtība
position-right: vērtība
position-top: vērtība
position-bottom: vērtība
Vērtības iestāta ar px, in, mm, cm vai auto
min-widthmin-width: vērtība 
min-heightmin-height: vērtība 
max-heightmax-height: vērtībaKopā ar overflow
max-widthmax-width: vērtībaKopā ar overflow
visibilityvisibility: vērtība
Iespējamās vērtības:
visible - parāda elementu uz ekrāna
hidden - nerāda elementu uz ekrāna
Elementa redzamība vai neredzamība
clipclip: rect(vērtība1, vērtība2, vērtība3, vērtība4)Ja attēls liels, tad uzrāda tā redzamības robežas (0, l00px, l00px, 0).
overflowoverflow: vērtība
Iespējamās vērtības:
visible - attēls redzams pilnībā
hidden - attēls nav redzams pilnībā
scroll - attēls nav redzams pilnībā, bet parādās ritjoslas
 
direction
direction: vērtība
Iespējamās vērtības:
ltr - no kreisās uz labo
rtl - no labās uz kreiso
Nosaka rakstīšanas virzienu
float
float: vērtība
Iespējamās vērtības:
left - no kreisās puses
right - no labās puses
Teksta apliekšanās
clear
clear: vērtība
Iespējamās vērtības:
left, right, both, none
Apliekšanās ap attēlu ierobežošana
z-index
z-index: vērtība
Iespējamās vērtības:
skaitlis (arī negatīvs), kas nosaka elementa atrašanos noteiktā slānī uz ekrāna. Iedarbojas tikai uz pozicionētiem elementiem.
position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3
display
display: vērtība
Iespējamās vērtības:
block,
inline,
list-item,
marker,
run-in,
compact,
none,
inline-table,
table-row,
table-row-group,
table-header-group,
table-footer-group,
table-column,
table-column-group,
table-cell,
table-caption,
caption
Informācijas izkārtojums tabulā
 
Atsauce:
Tīmekļa lapu veidošana. HTML un CSS / Andris Kamars - Rīga: Apgāds Zvaigzne ABC, 2008. – 320 lpp.: il. – izmantotā literatūra: 313.-318. lpp.