CSS pamati

01. Ievads CSS

CSS jeb kaskadētas stila lapas (Cascading Style Sheets) ir īpaša valoda, kas paredzēta, lai aprakstītu izskatu iezīmēšanas valodās veidotiem dokumentiem. Visplašāk tā tiek lietota Interneta mājas lapās, lai aprakstītu HTML elementu izskatu. Ar CSS palīdzību var izmainīt jebkura HTML elementa ārējo izskatu - krāsu, izmēru, novietojumu un dažādus citus atribūtus. CSS izmantošana gan atvieglo darbu izstrādātājiem un sniedz plašākas dizaina iespējas, gan samazina HTML dokumentu apjomu, kas paātrina mājas lapas ielādi lietotājam. Kā pievienot CSS savam...

Lasīt tālāk

02. CSS sintakse

CSS failā tiek izveidots bloks ar atribūtiem un to vērtībām, katram no elementiem, kuru izskatu velies mainīt. Vispārinātā veidā tas izskatās šādi: elements { īpašība: vērtība; cita-īpašība: vērtība2; } Lai vienas un tās pašas īpašības piešķirtu vairākiem elementiem, tos var atdalīt ar komatu: elements, cits-elements { īpašība: vērtība; cita-īpašība: vērtība2; } Izmēģināsim! Lai izmēginātu CSS darbībā, vispirms nepieciešams izveidot divus failus - tests.html un stils.css, kuri atrastos vienā mapē. Fails tests.html saturēs virsrakstu un divas...

Lasīt tālāk

03. CSS Klases un Identifikatori

Iepriekšējā sadaļā apskatījām, kā kāda veida elementiem nomainīt izskatu. Taču ko darīt, ja izmainīt vajag tikai vienu vai dazus no viena veida elementiem, nevis visus? Šeit palīgā nāk elementu klases un identifikatori. Tie dod iespēju piešķirt kādu īpašību vienam elementam (id) vai elementu grupai (klase). ID un/vai klasi var piešķirt jebkuram HTML elementam. Atšķirība ir apstāklī, ka ID norāda uz konkrētu elementu, kurš visā dokumentā ir tikai viens. Savukārt klasē var būt vairāki elementi, kā arī vienam elementam var būt vairākas klases. Nedaudz...

Lasīt tālāk

04. CSS krāsas

Lielākajai daļai HTML elementu var piešķirt krāsu (color) un fona krāsu (background vai background-color). Krāsu iespējams norādīt dažādās formās. • Lietojot krāsas nosaukumu (angļu valodā) iespējamie varianti ir: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, un yellow • RGB skaitliskās vērtības rgb(255, 0, 0) • RGB procentuālās vērtības rgb(100%, 0%, 0%) • Krāsas RGB kodu heksadecomālā formā #ff0000 Šo variantu iesējams lietot arī saīsinātā veidā - #f00 Būtībā visos variantos,...

Lasīt tālāk

05. Teksta noformēšana

Teksta noformēšana ir viens no CSS pamatuzdevumiem. Tālāk apskatītās īpašības iespējams mainīt jebkuram objektam, kas satur tekstu, bet parasti vispirms pamatvērtības tiek norādītas body pašā CSS dokumenta sākumā. Body elementam piešķirtais teksta noformējums attieksies uz visu, kam pēc tam nav speciāli norādīts kaut kas cits. font-family font-family: Arial, Helvetica, sans-serif; font-family norāda fontu, kas tiek izmantots. Var norādīt vairākus fontus, atdalot tos ar komatu. Ja lietotāja datorā nebūs pirmā fonta, tiks izmantots otrais un tā uz priekšu. Ja...

Lasīt tālāk

06. Margin un padding

margin un padding ir atribūti, kas tiek izmantoti dažādu atkāpju, lapas elementu savstarpēja attāluma un atrašanās vietas norādīšanai. Margin norāda attālumu no elementa ārējās malas, līdz citam elementam. Padding norāda attālumu no elementa satura līdz malai, tā iekšienē. Abiem atribūtiem iespējams norādīt 4 vērtības: margin: 10px 20px 10px 15px; Šīs vērtīas nozīmē attālumu no elementa uz visām 4 pusēm, sākot no augšas, pulksteņrādītāja virzienā. Var norādīt arī tikai vienu vērtību (tad attālums uz visām pusēm būs vienāds), vai divas...

Lasīt tālāk

07. Fons

Izmantojot CSS, fonu var piešķirt gandrīz visiem HTML elementiem, un tas ļauj izmantot gan vienkāršu krāsu, gan attēlus. Izvēloties fonu vienmēr jāņem vērā, ka tekstam uz tā jābūt skaidri salasāmam. Lai norādītu fonu visai lapai, tas uzstādāms <body> elementam. body { background: #000000; } CSS fona atribūti AtribūtsVērtībasPiemērsbackground-color krāsa (rgb, hex vai vārdiski) | transparent background-color: #123456 background-image url | none background-image: url(bilde.jpg) background-repeat repeat | repeat-x | repeat-y | no-repeat background-repeat:...

Lasīt tālāk

CSS: float

Ar CSS float īpašību elementu var novietot pa labi vai pa kreisi, atļaujot citiem elementiem tam "aptīties" apkārt. Float ir ļoti bieži izmantots bilžu formatēšanai un lapu izkārtojuma veidošanai. Elements ar īpašību float atradīsies cik vien tālu labajā vai kreisajā pusē cik lapa vai elements, kurā tas atrodas, tam atļauj. #float { float:left; } Ja ir vairāki elementi ar float vērtību uz to pašu pusi, tad tie novietosies viens otram blakus nevis virsū. Īpašība Apraksts Vērtības float definē elementa atrašānas vietu dokumentā left right none inherit

Lasīt tālāk

CSS: Rāmji

CSS border īpašība ļauj definēt konkrētā elementa rāmi (tā biezumu, stilu, krāsu). Biežāk izmantoto rāmju stili: • punktots (dotted) • svītrains (dashed) • tīrs (solid) • dubults (double) Protams ir arī citi rāmju stili kā groove, ridge, inset un outset, bet viņi tiek izmantoti ļoti reti. Rāmjiem var arī noteikt to biezumu. Biezums vissbiežāk tiek noteikts pikseļos, jeb izmantojot vienu no trīs jau gatavajiem izmēriem: think, meduin un thick. Rāmju krāsas var iestādīt izmantojot vienu no trīs metodēm - pēc vārda, RGB vai pēc krāsas Hex koda. Rāmja...

Lasīt tālāk

Mājas lapās izmantojamie fonti

Tips Fonts Windows 9x/2K/XP Windows Vista Mac OS X Linux/Unix serif Cambria Jā Constantia Jā Times New Roman Jā Jā Jā Daļēji Times Jā Jā Georgia Jā Jā Jā Daļēji sans-serif Andale Mono Jā Jā Jā Daļēji Arial Jā Jā Jā Daļēji Arial Black Jā Jā Jā Daļēji Calibri Jā Candara Jā Century Gothic Jā Jā Jā Daļēji Corbel Jā Helvetica Jā Jā Impact Jā Jā Jā Daļēji Trebuchet MS Jā Jā Jā Daļēji Verdana Jā Jā Jā Daļēji cursive Comic Sans MS Jā Jā Jā Daļēji monospace Consolas Jā Courier New Jā Jā Jā Daļēji Courier Jā Jā

Lasīt tālāk

Atpakaļ Uz augšu