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-spacing | word-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-top | margin-top: vērtība | margin-top: 3 em |
| margin-bottom | margin-bottom: vērtība | margin-bottom: 5cm |
| margin-left | margin-left: vērtība | margin-left: 30mm margin-left: 200px |
| margin-right | margin-right: vērtība | margin-right: 150px |
Attālums starp tekstu un rāmi
Īpašība | Apraksts | Piemērs |
| padding-top | padding-top: vērtība | padding-top: 200px |
| padding-bottom | padding-bottom: vērtība | padding-bottom: 2cm |
| padding-left | padding-left: vērtība | padding-left: 15pt |
| padding-right | padding-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 |
| background | Iespē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-color | background-color: vērtība | Blue #cccc00 rgb(20%,70%,10%) |
| background-image | background-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-width | min-width: vērtība | |
| min-height | min-height: vērtība | |
| max-height | max-height: vērtība | Kopā ar overflow |
| max-width | max-width: vērtība | Kopā ar overflow |
| visibility | visibility: 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 |
| clip | clip: 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). |
| overflow | overflow: 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ā |