astkhq.cc

Tēma

Darba sākšana ar CSS ​

Stilu valoda, jeb CSS (Cascading Style Sheets), ļauj noteikt, kā tīmekļa lapa izskatās: fons, krāsas, teksta lielums, atstarpes un citi vizuālie elementi.

Kur var rakstīt CSS stilus? ​

Ir trīs galvenie veidi, kā pievienot CSS stilus:

  • tieši .html failā (iekš <style> birkas),
  • atsevišķā failā styles.css,
  • vai tieši HTML elementā (ar style atribūtu).

CSS .html failā ​

Šādā gadījumā stili tiek rakstīti starp <style>...</style> birkām, kas atrodas galvenes daļā (<head>).

index.html
html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dokuments</title>
        <style>
            body {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

Stili ārējā failā styles.css ​

Lai nesajauktu HTML ar stiliem, CSS var glabāt atsevišķā failā. Tam jābūt pieslēgtam ar <link> birku galvenes daļā.

index.html
html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dokuments</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

Un pašā failā styles.css raksta stilus:

styles.css
css
body {
    background-color: pink;
}
/* ... */

Stils tieši HTML elementā ​

Stilus var norādīt arī tieši konkrētajai birkai:

index.html
html
<span style="color:Blue; font-weight: bold;">CSS</span>

No kā sastāv CSS stils? ​

CSS struktūra ​

CSS Syntax (devdojo.com)

CSS Syntax (devdojo.com)

Katrs CSS stils sastāv no 3 galvenajām daļām:

  • Selektors — norāda, uz kādiem elementiem stils attieksies (piemēram, h1, p, .klase, #id);
  • Īpašība — tas, ko mēs mainām (piemēram, color, font-size, background-color);
  • Vērtība — kādu tieši vērtību mēs piešķiram (red, 24px, Arial utt).

Vienkāršs piemērs ​

Mainīt tikai vienu īpašību:

styles.css
css
h1 {
    font-size: 24px;
}

Mainīt vairākas īpašības vienlaikus:

styles.css
css
h1 {
    font-size: 24px;
    font-family: Arial;
    font-style: italic;
}

Noderīgi materiāli ​

CSS Tutorial
https://www.w3schools.com/html/html_comments.asp