CSS prioritāte

HTML dokumentā CSS var pielietot 3 veidos. To protams var darīt arī vienlaicīgi, līdz ar to rodas jautājums par CSS prioritāti. Secība ir sekojoša:

  1. Elementa iekšējais CSS
  2. Dokumenta iekšējais CSS
  3. Ārējais CSS fails

Prakstiskais uzdevums

  1. Izveido mapi: css_prioritate
  2. Izveido failus: index.html un style.css
  3. Dots sākuma kods index.html failam:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css"> <!-- 3. Ārējais CSS fails -->
    <style>
      /* 2. Dokumenta iekšējais CSS */
    </style>
  </head>
  <body>
    <p style="color: green">1. Elementa iekšējais CSS</p>
  </body>
</html>

4. Pievienot stilu elementam “p” arī dokumenta iekšējā CSS un ārējā CSS. Jāizvēlas cita krāsa, lai pārliecinātos par CSS prioritātes esamību.

5. Ar “Inspect Element” (F12) var pārliecināties, ka ir pārsvītroti stila likumi:

Tomēr ir arī iespēja mainīt ierasto lietu kārtību ar “!important” likumu:

p {
    color: yellow !important;
}