CSS pamati

CSS jeb kaskadētas stila lapas (Cascading Style Sheets) ir valoda, kas paredzēta, lai aprakstītu HTML elementu izskatu — krāsu, izmēru, novietojumu, atstarpes, animācijas un daudzus citus vizuālos aspektus. CSS izmantošana atvieglo darbu izstrādātājiem, sniedz plašākas dizaina iespējas un samazina HTML dokumentu apjomu, kas paātrina mājas lapas ielādi. Pašlaik aktuālā versija ir CSS3 , kas piedāvā modernas iespējas kā animācijas, pārejas, flexbox un grid izkārtojumus. Kā pievienot CSS savam...

Lasīt tālāk

CSS failā tiek izveidots bloks ar īpašībām un to vērtībām katram elementam, kura izskatu vēlies mainīt. Vispārinātā veidā CSS noteikums izskatās šādi: selektors { ī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, selektorus var atdalīt ar komatu: h1, h2, h3 { color: #333; font-family: Arial, sans-serif; } Selektoru veidi CSS piedāvā vairākus veidus, kā atlasīt elementus: Elementa selektors — atlasa visus konkrētā tipa elementus: p { ......

Lasīt tālāk

Iepriekšējā sadaļā apskatījām, kā mainīt izskatu visiem viena tipa elementiem. Taču ko darīt, ja izmainīt vajag tikai dažus konkrētus elementus? Šeit palīgā nāk klases un identifikatori. ID — unikāls identifikators ID norāda uz konkrētu elementu, kas dokumentā ir tikai viens. CSS kodā ID selektors sākas ar # : Virsraksts #galvenais { color: #e67e22; border-bottom: 3px solid #e67e22; } Klase — elementu grupa Klasi var piešķirt vairākiem elementiem, un vienam elementam var būt vairākas klases....

Lasīt tālāk

CSS ļauj norādīt krāsas gandrīz jebkuram elementam — teksta krāsu ( color ), fona krāsu ( background-color ), apmales krāsu ( border-color ) un citas. Krāsu norādīšanas veidi CSS atbalsta vairākus veidus, kā norādīt krāsas: 1. Krāsu nosaukumi CSS atbalsta vairāk nekā 140 krāsu nosaukumus angļu valodā: color: red; background: dodgerblue; border-color: tomato; 2. HEX kods (heksadecimālais) Populārākais veids. Sākas ar # , satur 6 simbolus (pa diviem sarkanajam, zaļajam un zilajam kanālam): color:...

Lasīt tālāk

Teksta noformēšana ir viens no CSS pamatuzdevumiem. Parasti vispirms pamatvērtības norāda body elementam — tās attieksies uz visu lapu, ja elementam nav norādīts kaut kas specifiskāks. font-family — fontu saime font-family: 'Segoe UI', Arial, Helvetica, sans-serif; Norāda fontu vai vairākus fontus prioritātes secībā. Ja lietotāja ierīcē nav pirmā fonta, tiks izmantots nākamais. Fontu nosaukumus, kas satur atstarpes, liek pēdiņās. Saraksta beigās vienmēr norāda fonta tipu kā rezervi: sans-serif...

Lasīt tālāk

margin un padding ir īpašības, kas kontrolē atstarpes ap un iekšā elementos. To izpratne ir būtiska CSS izkārtojuma veidošanā. CSS kastes modelis (Box Model) Katrs HTML elements ir "kaste", kas sastāv no četriem slāņiem: Content — satura zona (teksts, attēli) Padding — iekšējā atkāpe (starp saturu un apmali) Border — apmale Margin — ārējā atkāpe (starp elementu un citiem elementiem) Margin — attālums no elementa ārējās malas līdz blakus esošajam elementam. Padding — attālums no elementa satura...

Lasīt tālāk

CSS ļauj piešķirt fonu gandrīz visiem HTML elementiem — gan vienkāršu krāsu, gan attēlus, gan gradientus. Izvēloties fonu, vienmēr jāpārliecinās, ka teksts uz tā ir skaidri salasāms. Lai norādītu fonu visai lapai, to uzstāda body elementam: body { background-color: #f5f5f5; } Fona krāsa background-color: #2c3e50; background-color: rgba(0, 0, 0, 0.8); /* ar caurspīdīgumu */ background-color: transparent; /* caurspīdīgs */ Fona attēls background-image: url('fons.jpg'); Atkārtošanās...

Lasīt tālāk

Flexbox (Flexible Box Layout) ir CSS izkārtojuma modelis, kas ļauj ērti izvietot elementus rindā vai kolonnā, kontrolēt to izmērus, atstarpes un līdzinājumu. Tas ir ideāls viendimensiju izkārtojumiem. Flexbox pamati Lai aktivizētu flexbox, vecākelementam (konteineram) pievieno display: flex : .konteiners { display: flex; } Visi tiešie bērnelementi automātiski kļūst par flex elementiem un tiek izvietoti rindā. Virziena noteikšana (flex-direction) flex-direction: row; /* rindā — no kreisās uz...

Lasīt tālāk

CSS Grid ir divdimensiju izkārtojuma sistēma, kas ļauj kontrolēt gan rindas, gan kolonnas vienlaicīgi. Tas ir ideāls sarežģītākiem lapu izkārtojumiem. Grid pamati Lai aktivizētu grid, vecākelementam pievieno display: grid un definē kolonu struktūru: .konteiners { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 vienādas kolonnas */ gap: 20px; } fr (fraction) ir īpaša mērvienība, kas sadala pieejamo vietu proporcionāli. Kolonnu definēšana /* 3 vienādas kolonnas */ grid-template-columns:...

Lasīt tālāk

CSS pārejas (transitions) un animācijas ļauj veidot vienmērīgas vizuālas izmaiņas bez JavaScript. Pārejas aktivizējas, kad mainās elementa stāvoklis (piemēram, :hover), bet animācijas var darboties automātiski. CSS pārejas (transition) Pāreja nodrošina vienmērīgu pāreju starp diviem stāvokļiem: .poga { background: #3498db; color: white; padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s ease; } .poga:hover { background: #2980b9; } Transition...

Lasīt tālāk

Responsīvais dizains nodrošina, ka mājas lapa labi izskatās un darbojas uz jebkuras ierīces — no liela datora ekrāna līdz mazam telefonam. CSS piedāvā vairākus rīkus šī mērķa sasniegšanai. Viewport meta tags Lai responsīvais dizains darbotos, HTML dokumentā obligāti jābūt šim meta tagam: Media queries Media queries ļauj piemērot dažādus CSS stilus atkarībā no ekrāna izmēra: /* Stili visiem ekrāniem */ .konteiners { padding: 20px; } /* Ja ekrāns ir šaurāks par 768px (planšetes, telefoni) */...

Lasīt tālāk

CSS mainīgie (Custom Properties) ļauj definēt atkārtoti izmantojamas vērtības, kas atvieglo stilu pārvaldību un nodrošina konsekventu dizainu visā lapā. Mainīgo definēšana Mainīgos definē ar -- prefiksu. Parasti tos norāda :root selektorā, lai tie būtu pieejami visā dokumentā: :root { --galvena-krasa: #3498db; --teksta-krasa: #333; --fona-krasa: #f5f5f5; --apmales-radius: 8px; --atstarpe: 20px; --fonts: 'Inter', Arial, sans-serif; } Mainīgo izmantošana Mainīgos lieto ar var() funkciju: body {...

Lasīt tālāk