CSS stiliai

Kaip pajungti stilius?

Stilius galima pajungti dviem būdais:
1. Rašyti tiesiogiai <head> dalyje:

<head>
    ...
    <style>
        div {
            width: 200px;
            height: 100px;
            border: 1px solid #ff0000;
        }
    </style>
</head>

Šis būdas nerekomenduojamas, nes didelis kiekis stilių trukdo dirbti su HTML kodu.
2. Pajungti CSS stilių failus <head> dalyje:

<head>
    ...
    <link href="../css/style.css" rel="stylesheet">
</head>

Šis būdas yra rekomenduojamas, nes tada aiškiai yra atskiriama HTML ir CSS logika.

Kaip nurodyti stilius HTML elementams?

Stilius bet kuriam HTML elementui galima nurodyti trim būdais:
1. Tiesiogiai per atributą style:

<div style="width: 200px; height: 100px; border: 1px solid #FF0000;">Content</div>

Šis būdas nerekomenduojamas naudoti, nes apkrauna HTML dokumentą ir jį sunku skaityti.
2. Per atributą id. Tuomet HTML dokumente reikia rašyti:

<div id="content">Content</div>

O CSS faile:

#content {
    width: 200px;
    height: 200px;
    border: 1px solid #ff0000;
}

Vietoj reikšmės content galite rašyti bet kokį pavadinimą, tačiau nerekomenduojama naudoti lietuviškas raides ir negalima dėti tarpų, nes tai bus interpretuojama kaip du (ar daugiau) stiliai.
Šis būdas taip pat nerekomenduojamas, nes turi porą trūkumų:

Atributas id yra unikalus, todėl vieną ir tą patį stilių galima panaudoti tik vienam HTML elementui.
Atributas id gali turėti tik vieną reikšmę.

3. Per atributą class. Tuomet HTML dokumente reikia rašyti:

<div class="content">Content</div>

O CSS faile:

.content {
    width: 200px;
    height: 200px;
    border: 1px solid #ff0000;
}

Šis būdas naudojamas dažniausiai, nes turi porą privalumų:

Atributas class nėra unikalus, todėl vieną ir tą patį stilių galima panaudoti keliems HTML elementams.
Atributas class gali turėti daugiau nei vieną reikšmę.

Vienas HTML elementas gali turėti daug klasių. Kiekviena klasė vardinama atskiriant ją tarpu:

<div class="content big red new">Content</div>

Jei klasės pavadinimas susideda iš dviejų ar daugiau žodžių, rekomenduojama naudoti vieną iš šių būdų:

mainNav
main-nav
main_nav

CSS sintaksė

Baziniai selektoriai

Selektorius	Pavadinimas	Pavyzdys	Aprašymas
*	Universalus selektorius	`* { font-family: Verdana, sans-serif; }`	Visiems HTML elementams bus pritaikytas Verdana šriftas.
div	Elemento selektorius	`div { font-family: Verdana, sans-serif; }`	Visiems `<div>` elementams bus pritaikytas Verdana šriftas.
.item	Klasės selektorius	`.item { font-family: Verdana, sans-serif; }`	Visiems HTML elementams, kurių `class="item"`, bus pritaikytas Verdana šriftas.
#item	id selektorius	`#item { font-family: Verdana, sans-serif; }`	HTML elementui, kurio `id="item"`, bus pritaikytas Verdana šriftas.

Kombinatoriai

CSS selektorių gali sudaryti daugiau nei vienas paprastas selektorius. Tarp paprastųjų selektorių galime įterpti taip vadinamą kombinatorių (angl. combinator).
CSS kalboje yra keturi skirtingi kombinatoriai:

Kombinatorius	Pavadinimas	Pavyzdys	Aprašymas
(tuščias tarpas)	Palikuonio selektorius	`div p { background-color: yellow; }`	Išrinks visus `<p>` elementus, kurie yra `<div>` elemente.
>	Vaiko selektorius	`div > p { background-color: yellow; }`	Išrinks tuos `<p>` elementus, kurie yra `<div>` elemento vaikai.
+	Vieno greta esančio elemento selektorius	`div + p { background-color: yellow; }`	Išrinks vieną `<p>` elementą, kuris bus sekantis už `<div>` elemento.
~	Visų greta esančių elementų selektorius	`div ~ p { background-color: yellow; }`	Išrinks visus `<p>` elementus, kurie bus sekantys už `<div>` elemento.

Pseudo klasės

Pseudo klases galima nurodyti įvairiems HTML elementams. Yra keletas pseudo klasių, tačiau dažniausiai naudojamos šios:

Pseudo klasė	Pavyzdys	Aprašymas
:link	`a:link { color: red; }`	Elementas, kuris yra dar neaplankyta nuoroda.
:visited	`a:visited { color: green; }`	Elementas, kuris yra aplankyta nuoroda.
:hover	`a:hover { color: blue; }`	Elementas, ant kurio naudotojas yra užėjęs su pelės žymekliu.
:active	`a:active { background-color: yellow; }`	Elementas, ant kurio naudotojas yra paspaudęs su pelės mygtuku.
:focus	`a:focus { color: fuchsia; }`	Elementas, ant kurio naudotojas yra sufokusavęs pelės žymeklį.
:first-child	`li:first-child { border: 1px solid lime; color: lime; }`	Pirmas elementas tėviniame elemente.
:last-child	`li:last-child { border: 1px solid blue; color: blue; }`	Paskutinis elementas tėviniame elemente.

Norėdami patikrinti pseudo klasių veikimą, įrašykite aukščiau pateiktas klases į CSS failą, o HTML faile įrašykite tokį kodą:

<ul>
    <li><a href="https://lt.wikipedia.org/wiki/Vilnius">Vilnius</a></li>
    <li><a href="https://lt.wikipedia.org/wiki/Kaunas">Kaunas</a></li>
    <li><a href="https://lt.wikipedia.org/wiki/Klaip%C4%97da">Klaipėda</a></li>
    <li><a href="https://lt.wikipedia.org/wiki/%C5%A0iauliai">Šiauliai</a></li>
</ul>

Pseudo elementai

Pseudo elementus galima nurodyti įvairiems HTML elementams. Yra keletas pseudo elementų, tačiau dažniausiai naudojami šie:

Pseudo elementas	Pavyzdys	Aprašymas
::first-letter	`p::first-letter { color: #ff0000; font-variant: small-caps; }`	Suteikiamas nurodytas stilius pirmai elemento raidei.
::first-line	`p::first-line { color: #ff0000; font-variant: small-caps; }`	Suteikiamas nurodytas stilius pirmai elemento eilutei.
::before	`li::before { font-family: "Font Awesome 6 Free"; font-weight: 900; /* būtina nurodyti šią savybę */ content: "\f6be"; }`	Sukuriamas pseudo elementas prieš tikrąjį elementą.
::after	`li::after { font-family: "Font Awesome 6 Free"; font-weight: 900; /* būtina nurodyti šią savybę */ content: "\f6d3"; }`	Sukuriamas pseudo elementas už tikrojo elemento.
::marker	`::marker { color: red; font-size: 23px; }`	Su šiuo pseudo elementu galima keisti sąrašų žymeklius.
::selection	`::selection { color: red; background: yellow; }`	Suteikiamas nurodytas stilius pažymėtam tekstui. Su šiuo pseudo elementu galima naudoti tik šias savybes: `color`, `background`, `cursor` ir `outline`.

Spalvos

Spalvas galima nurodyti keliais būdais, tačiau dažniausiai naudojami šie:

Nurodant konkretų spalvos pavadinimą. HTML kalba palaiko 140 kalbų pavadinimų. Visą sąrašą galima rasti čia.	`.item1 {color: red;} .item2 {color: green;} .item3 {color: blue;}`
Nurodant šešioliktainį spalvos kodą. A-F reikšmes galima nurodyti tiek mažosiomis, tiek didžiosiomis raidėmis.	`.item1 {color: #FF0000;} .item2 {color: #00FF00;} .item3 {color: #0000FF;}`
Funkcijai `rgb()` nurodant RGB (Red-Green-Blue) reikšmę. Kiekvienos spalvos (raudonos, žalios ir mėlynos) intensyvumas nurodomas riekšme nuo 0 iki 255.	`.item1 {color: rgb(255, 0, 0);} .item2 {color: rgb(0, 255, 0);} .item3 {color: rgb(0, 0, 255);}`
Funkcijai `rgba()` nurodant RGBA (Red-Green-Blue-Alpha) reikšmę. Alpha reikšmė nusako elemento peršviečiamumą (skaidrumą). Galima reikšmė nuo 0.0 (visiškai skaidrus) iki 1.0 (visiškai nepermatomas).	`.item1 {color: rgba(255, 0, 0, 0.3);} .item2 {color: rgba(0, 255, 0, 0.6);} .item3 {color: rgba(0, 0, 255, 0.9);}`
Funkcijai `hsl()` nurodant HSL (Hue-Saturation-Lightness) reikšmę. Hue reikšmė nusako atspalvį. Galima reikšmė nuo 0 iki 360. 0 yra raudona, 120 - žalia, 240 - mėlyna spalva. Saturation reikšmė nusako sodrumą. Nurodoma procentais. Lightness reikšmė nusako šviesumą. Nurodoma procentais.	`.item1 {color: hsl(0, 100%, 50%);} .item2 {color: hsl(120, 50%, 50%);} .item3 {color: hsl(250, 100%, 50%);}`

CSS matavimo vienetai

Ilgiui išreikšti CSS kalboje galima naudoti keletą matavimo vienetų, tokių kaip cm, mm, in, pt, pc. Tačiau dažniausiai naudojami px (pikseliai), nes 1px atitinka vieną ekrano pikselį.

h1 {font-size: 50px;}

Taip pat CSS kalba turi keletą santykinių matavimo vienetų, iš kurių dažniausiai naudojami % ir em. em labai patogu naudoti šrifto dydžiui ir tarpams tarp eilučių nusakyti, pvz., įrašykite tokius stilius:

div {
    font-size: 30px;
    line-height: 0.5em;
}
span {
    font-size: 0.5em;
}

O HTML dokumente parašykite:

<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>

Pabandykite pakeisti div elemento šrifto dydį, pamatysite kaip automatiškai pasikeis ir span elemento šrifto dydis bei tarpai tarp eilučių.

Savybės margin ir padding

Savybė margin naudojama nustatyti erdvę aplink elementą, jo išorėje.
Savybė padding naudojama nustatyti erdvę viduje elemento.
Tiek margin, tiek padding savybės gali būti nustatomos šiais būdais:

margin: 10px; /* bus nustatytos vienodos reikšmės iš viršaus, dešinės, apačios ir kairės pusių */
margin: 10px 5px; /* iš viršaus ir apačios bus po 10px, o iš dešinės ir kairės - po 5px */
margin: 10px 20px 30px; /* iš viršaus bus 10px, iš dešinės ir kairės - po 20px, o iš apačios - 30px */
margin: 10px 20px 30px 40px; /* iš viršaus bus 10px, iš dešinės - 20px, iš apačios - 30px, o iš kairės - 40px */

Rėmelis border

Rėmeliui galima nustatyti jo storį, stilių ir spalvą atskirai su kiekviena atitinkama savybe:

border-width: 1px;
border-style: solid;
border-color: red;

O galima nustatyti ir su viena savybe border:

border: 1px solid red;

Funkcija url()

CSS kalba turi keletą funkcijų. Paragrafe apie spalvas jau aptarėme dvi funkcijas rgb() ir rgba().
Dar viena gana dažnai naudojama CSS funkcija yra url(). Pavyzdžiui, ši funkcija gali būti panaudota nurodant fono paveiksliuką:

background-image: url("../images/bg.jpg");

Nurodant kokį nors atsarginį šriftą:

@font-face {
    font-family: Terminus;
    src: url(fonts/terminus.ttf);
}

Specifiškumo skaičiavimas

Sukurkime 3 stilius:

p {
    background-color: red;
}
#blue {
    background-color: blue;
}
.green {
    background-color: green;
}

ir 3 paragrafus su šiais stiliais:

<p>Labas pasauli</p>
<p id="blue" class="green">Labas pasauli</p>
<p class="green">Labas pasauli</p>

Pastebėsite, kad ne visi paragrafai yra raudoni, o antras paragrafas nėra žalias, nors jam ir suteikėme klasę green. Kodėl taip yra? Nes kiekvienas selektorius turi savo vertę, pagal kurią apskaičiuojamas jo specifiškumas (svarbumas).

Selektorius	Specifiškumo vertė
*	0
p	1
.myclass	10
#myid	100
<p style="color: red;">	1000
p .myclass	11
#navbar p	101

!important taisyklė

Bet kokiam stiliui galima suteikti didžiausią prioritetą, nežiūrint į jo specifiškumo vertę. Tam yra naudojama !important taisyklė:

p {
    background-color: red !important;
}