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

Atpakaļ Uz augšu