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 { ... }
  • Klases selektors — atlasa elementus ar noteiktu klasi: .klase { ... }
  • ID selektors — atlasa elementu ar konkrētu ID: #identifikators { ... }
  • Bērnelementa selektors — atlasa elementus iekš cita elementa: nav a { ... }
  • Universālais selektors — atlasa visus elementus: * { ... }

Izmēģināsim!

Izveido divus failus vienā mapē — tests.html un stils.css:

tests.html:

<!DOCTYPE html>
<html lang="lv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mana CSS mājas lapa</title>
<link rel="stylesheet" href="stils.css">
</head>
<body>
<h1>Sveicināti manā stilīgajā mājas lapā!</h1>
<p>Čau! Es šobrīd mācos izmantot CSS.</p>
<p>Gribi zināt, kas ir CSS? Apskati <a href="/read/01-ievads-css">pamācību!</a></p>
</body>
</html>

stils.css:

body {
background: #2c3e50;
color: #ecf0f1;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 16px;
padding: 20px;
line-height: 1.6;
}

h1 {
color: #e67e22;
}

p {
background: #34495e;
border-left: 4px solid #e67e22;
padding: 12px 16px;
border-radius: 4px;
}

a {
color: #3498db;
}

Atver tests.html pārlūkprogrammā. Pamēģini mainīt krāsas, fontus un citas vērtības CSS failā un pārlādē lapu, lai redzētu rezultātu.

CSS komentāri

Komentārus CSS kodā raksta starp /* un */:

/* Šis ir komentārs */
body {
color: #333; /* Teksta krāsa */
}

CSS kaskāde un specifiskums

Ja vairāki CSS noteikumi attiecas uz vienu elementu, uzvar specifiskākais selektors. Specifiskuma secība (no zemākā uz augstāko):

  1. Elementa selektors (p) — zemākais
  2. Klases selektors (.klase)
  3. ID selektors (#id)
  4. Inline stils (style="...") — augstākais

Ja specifiskums ir vienāds, uzvar pēdējais norādītais noteikums.