Kas ir CSS?

CSS jeb kaskādes stila lapas ir valoda, kas tiek izmantota, lai aprakstītu HTML dokumentu izskatu un formatējumu. Ar CSS palīdzību var noteikt noformējumu, krāsas, fontus, izmērus, elementu izvietojumu un saskarnes uzvedību dažādās ierīcēs. WordPress tēmas izmanto CSS un HTML, lai attēlotu sistēmas ģenerētos datus. Katram WordPress motīvam ir fails style.css, kurā atrodas noteikumi un stili, kas nosaka lapu izskatu.

CSS ir vienkārša apgūšanai un lietošanai. Ir pieejami daudzi resursi un tiešsaistes apmācības, kas palīdz apgūt pamatus burtiski no nulles. WordPress lietotāji var ātri saprast principus, vienkārši atverot motīva failu style.css un apskatot, kā ir noteikti stili.

Piemērs:

body {
  font-size: 16px;
  color: #333;
  background-color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}
 
h1 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
 
.post-title {
  font-size: 1.25rem;
  color: #4c0000;
  font-weight: 500;
}

HTML elementi var saņemt stilu tieši no CSS. Dizaineri izmanto identifikatorus un klases, lai noteiktu dažādus parametrus atsevišķām sadaļām vai atkārtotiem blokiem lapā. Tas palīdz pielietot dažādus stilus vienam un tam pašam HTML elementam dažādās vietās. Piemēram, bloga virsraksts var izskatīties citādi nekā ieraksta virsraksts.

HTML piemērs:

<div id="header">
  <h1 class="blog-title">
    <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">
      <?php bloginfo('name'); ?>
    </a>
  </h1>
</div>

Iepriekš redzamajā HTML ir identifikators ‘header’ un klase ‘blog-title’. Šīs sadaļas var tikt noformētas ar CSS.

Пример CSS:

#header {
  background-color: #4c0000;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
h1.blog-title a {
  color: #fff;
  font-size: 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  text-decoration: none;
}

CSS ļauj izveidot ne tikai pamata noformējumu, bet arī elastīgus, pielāgojamus izkārtojumus. Mūsdienu vietnes izmanto Flexbox un CSS Grid, lai elementi automātiski pielāgotos dažādiem ekrāna izmēriem.

Piemērs adaptīvajam blokam:

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

Šajā piemērā tiek izmantota režģa struktūra, kas eleganti pārkārtojas mobilajās ierīcēs bez papildu koda.

Turklāt CSS var definēt mainīgos, kas atvieglo stilu uzturēšanu un dizaina sistēmu veidošanu:

:root {
  --color-primary: #4c0000;
  --color-text: #333;
}
 
body {
  color: var(--color-text);
}
 
a {
  color: var(--color-primary);
}

CSS ir kļuvusi par interneta vizuālās daļas pamatu, ļaujot dizaineriem un izstrādātājiem veidot ātras, pielāgojamas un skaistas vietnes.

Mūsu specializācija — WordPress vietņu izstrāde un uzturēšana. Kontakti bezmaksas konsultācijai – [email protected], +371 29394520