Ievads CSS – pamācība

DG WEB FACTORY » Pamācības » Ievads CSS – pamācība

Lai apgūtu šo pamācību, Tev pirms tam jābūt izveidotam HTML failam un datorā uzstādītam koda editoram. Ja nezini kā izveidot, to vari apgūt pamācībā Ievads HTML.

Ar CSS palīdzību mēs piešķirsim dizainu HTML dokumentam. Lai to izdarītu būs nepieciešams izveidot css failu.

1. 1. Atveriet koda redaktoru, piemēram Brackets vai Notepad ++ vai Sublime un izveidojiet jaunu failu ar paplašinājumu .css, nosauciet to par stils.css un saglabājiet tajā pat mapē, kur atrodas index.html fails, ko izveidojām iepriekš.
   2. Atveriet iepriekš izveidoto index.html failu un galvenē (head) norādiet ceļu uz CSS failu. Tādā veidā tiek HTML dokuments tiek sasaistīts ar CSS failu, no kura HTML dokuments iegūs savu jauno izskatu, ko mēs piešķirsim tālākajos soļos.  Rel norāda attiecības starp failiem, stylesheet norāda, ka jāimportē stila lapa. Href – ir saite uz css failu, jeb ceļš. Ja css fails atrodas tajā pat mapē, kur index.html fails, var norādīt tikai faila nosaukumu. Ja css fails atrodas, kur citur, jānorāda pilns ceļš, līdzīgi kā bija ar attēliem (par to vairāk vari atrast šeit). Tā kā iepriekš izveidojām un saglabājām css failu stils.css tajā pat mapē, kur atrodas index.html dokuments, varam norādīt tikai faila nosaukumu stils.css.
      <link rel="stylesheet" href="stils.css">
   3. Atveriet stils.css failu un pievienosim pirmās īpašības HTML elementiem, kas ir mūsu index.html failā.
      CSS sastāv no selektora, un bloka ar īpašībām un vērtībām. Piemēram, ja mēs vēlētos, lai mūsu visi pirmā līmeņa virsraksti mājas lapā būtu sarkanā krāsā un 16px izmērā, mēs CSS failā rakstītu selektoru h1 u pievienotu tādas īpašības kā color (krāsa) un font-size (fonta izmērs) un pievienotu vērtības sarkans un 16 px. CSS sintakse (pieraksta veids un formatējums) izskatās šādi:
      selektors{
      īpašība:vērtība;
      īpašība:vērtība;
      }
      jeb konkrētajā piemērā ar pirmā līmeņa virsrakstu tas būtu šādi, pievienojiet zemāk redzamo bloku stils.css failam:
      h1{
      color:red;
      font-size:16px;
      }
      Šāda tipa selektorus sacu par grupu selektoriem, jo ar tiem var piešķirt stilu elemnetu grupām, piemēram, visiem virsrakstiem, visiem paregrāfiem, visām saitēm, kas ir mājas lapā utt.

Vienā blokā var norādīt arī vairākus selektorus atdalot tos ar komatu, piemēram:

h1, p{

color:red;

}

Apzīmēs to, ka gan h1 līmeņa virsrakstiem, han paregrāfiem jābūt sarkanā krāsā.

Katra rindiņa īpašību blokā jānobeidz ar semikolu; Bloks tiek atvērts ar figūriekavām un aizvērts ar figūriekavām. Tādā pat veidā var pievienot krāsas, fontus, izmērus, novietojumu arī citiem elementiem, piemēram p (paregrāfiem), body (visai mājaslapai, piemēram noteikt mājas lapas fona krāsu) u.c.

CSS klases

HTML elementiem var pievienot klases (class) un izmantot šīs klases, lai stilizētu elementus. Klases nosaukumu izdomājiet Jūs paši, tādu, lai varētu paši varētu saprast, ko tas apzīmēs. Klases nosaukumam jāsastāv no mazajiem burtiem bez mīkstinājumiem un garumzīmēm un klases nosaukums nedrīkst sākties ar ciparu. Piemēram, vairākiem paregrāfiem ar piešķirt klasi “izcelts”:

<p>kaut kāds teksts </p>
<p class=”izcelts”>kaut kāds teksts</p>
<p class=”izcelts”>kaut kāds teksts</p>
<p class=”izcelts”>kaut kāds teksts</p>

Šajā gadījumā klase piešķirta 2., 3. un 4. paregrāfam.

CSS failā, savukārt, varam norādīt, ka visi paregrāfi ar kalsi “izcelts”, būs treknrakstā un sarkanā krāsā:

 

.izcelts{

color:red;

font-weight:600;

}

CSS failā pirms klases vienmēr liek punktu.

Rezultāts izskatīsies šādi:

kaut kāds teksts

kaut kāds teksts

kaut kāds teksts

kaut kāds teksts

CSS failā Jūs variet norādīt, ka stils jāpiešķir tikai kādam konkrētam elementam iekš norādītās klases. Piemēram, Jums ir izveidots paregrāfs ar klasi “izcelts”. Un šajā paregrāfā ir vēl citi elementi, kā piemērā zemāk elements <a>, kas ir saite.

<p class=”izcelts”>kaut kāds teksts <a href’=”https://dwebfactory.com”>Spied šeit</a></p>

CSS failā variet norādīt, ka visiem a elementiem, kas ir iekš paregrāfa ar klasi “izcelts” jābūt zilā krāsā. CSS failā tas būs šādi:

a.izcelts{

color:blue;

text-decoration:none;

}

Rezultāts:

kaut kāds teksts Spied šeit

ID selektori

CSS ir iespējami vairāki selektoru veidi. Līdzīgi kā klases var izmantot ID. Tikai atšķirība ir tā, ka elementa ID ir unikāls lapā, tāpēc ID selektoru izmanto, lai atlasītu tikai vienu unikālu elementu!

CSS failā rakstiet ID nosaukumu un hashtag (#) rakstzīmi pirms ID nosaukuma, piemēram:

#pirmais{

color:green;

}

HTML-ā pievienojiet ID elementam:

<p id=”pirmais”>Teksts </p>

Šajā gadījumā paregrāfs, kuram pievienots ID “pirmais” būs zaļā krāsā. Tāpat kā klašu nosaukumi, ID nosaukumi nedrīkst sākties ar ciparu un tiem jābūt ar mazajiem burtiem un bez garumzīmēm, un bez mīkstinājuma zīmēm.

Rezultāts:

Teksts

Universālais selektors

Universālo selektoru apzīmē ar zvaigznīti * un šo selektoru var izmantot, ja nepieciešams piešķirt vienu stilu pilnībā visiem elementiem, kas ir lapā.

* {
text-align: center;
color: black;
}

Apzīmē, ka visi elementi lapā būs melnā krāsā un iecentrēti.