2.1 Súwret. Tegdi stillew. Kishkene aynada tegtiń dáslepki kórinisi.

2.1. Stiller kestesini import qılıw.

Eger stildi bir betge emes, al pútin saytqa qollaw kerek bolsa stiller kestesin basqarıw ushın olardı basqa bir faylǵa kóshirgenimiz maqul boladı. Keyinlew kerekli keste import qılınadı. Sonıń menen hár túrli kestelerdi maǵlıwmatlardı súwretlew hár túrli formatlarına (mısal ushın, web-betti kóriw hám baspaǵa shıǵarıw formatları) HTML kodti ózgertpey paydalanıwımız múmkin.

Bul maqsetge eki jol menen erisiwge boladı, birinshiden CSS-tiń @import direktivasınan paydalanıw:

<style>

@import url('styles.css');

</style>

Bul buyrıq brauzerge style.css atli stiller kestesin júklep alıwǵa májbúr qıladı. @import buyrıǵıniń maslasıwshańlıǵı quramalı, bir-birin import qilatuǵın stiller kestesin jaratıwǵa imkaniyat beredi. Biraq stiller kestesinen basqa kesteni shaqiriw ushın <style> … </style> tegleri zárur emes, olar buyrıqlardı jaramsız qıladı.

CSS-ti HTMl kodtan import qılıw

Sonlıqtan stiller kestesin <link> tegi járdeminde isletiw múmkin:

<link rel='stylesheet' type='text/css' href='my.css'>

Nátiyjesi @import direktivasınan paydalanıw menen birdey, biraq <link> teginen tek ǵana HTML-kod ishinde paydalanıw múmkin hám stil direktivalarına tiyisli emes hám stil kestelerde qollanıw múmkin emes. Sonlıqtan <link> tegin <style> </style> tegler ishinde isletiw múmkin emes.

CSS-de bir neshe @import direktivalardı paydalanıw múmkinligi sıyaqlı, HTML-kodta <link> teginen bir neshe márte qollanıwımız múmkin.

Ornatılǵan stil sazlawshıları

Sonıń menen birge HTML-kod ishinde stillerdi jaylastirip, jeke sazlawshılardı orınlaw hám anıq stillerdiń ornın alıw múmkin (bul mısalda teg ishinde kók reńli tekst belgilenedi):

<div style='font-style:italic; color:blue;'>Sálem</div>

Biraq bul ornatılǵan stillerdi tek ǵana barıp turgan zárúriyat bolǵan halda paydalanıń, sebebi olar kórsetiliwdi mazmunınan ajıratıw prinsipina qarsı shıǵadi.

2.2. Identifikatorlar (id)

Ornatılǵan stillerge qaraǵanda qolay sheshim bul belgilengen elementlerge identifikator kórsetiw:

<div id='welcome'>Sálem dúnya!</div>

Keltirilgen kod welcome identifikatorına iye <div> konteynerdiń stili welcome stiliniń sazlawında belgilengen ekenligi kórsetiledi. Oǵan tiyisli CSS-buyrıq tómende kórsetilgen kóriniste bolıwı kerek:

#welcome { font-style:italic; color:blue; }

2.3. Klasslar

Eger bir stildi bir neshe elementlerge qollaw kerek bolsa, olardıń hár birine bólek ID beriw shárt emes, onıń ornına klasstan paydalanıwımız múmkin:

<div class='welcome'>Sálem dúnya!</div>

Demek, welcome klassında anıqlanǵan stil sol elementke (hám sol klassqa tiyisli basqa elementlerge) qollanıwı kerek ekenligi belgilenedi. Klasstan paydalanǵanda bettiń joqarında yamasa sırtqı stiller kestesinde tómendegi klass stillerin ornatıwımız múmkin:

.welcome { font-style:italic; color:blue; }

Identifikator ushın mólsherlengen tor belgi (#) ornına klasslarǵa tiyisli buyrıqlar noqat (.) belgisi qollaniladı.

Noqatlı útir

CSS tilinde noqatlı útirler bir qatarda jaylasqan CSS-buyrıqların ajıratıw ushın qollanıladı. Eger qaǵıyda tek gańa bir buyrıqtan ibarat bolsa yamasa stildi HTML-teg ishinde orntilǵan bolsa noqatlı útir taslap ketiliwine ruxsat beriledi. Jáne de gruppada aqırǵı buyrıqtan soń noqatlı útir taslap ketiliwi múmkin.

Biraq CSS-den paydalanǵanda anıqlawı qıyın bolǵan qátelerden qutılıw ushın biz hár bir buyrıqtan soń noqatlı útirdi qoyıwdı qaǵıyda etip alamiz. Keyinlew buyrıqlardı ózgertirgende biz noqatlı útirlerdi óshiriw hám ornatıwdı oylamaymız.

2.4. CSS-qaǵıydaları

CSS tilinde hár buyrıq selektordan yaki qaǵıydanı qollaytuǵın elementten baslanadı. Mısal ushın, berilgen anıqlamada h1 selektor bolıp esaplanadı, bul selektorǵa dáslepki shriftan 240% úlken shrift belgilenedi:

h1 { font-size:240%; }

font-size qásiyet bolıp esaplanadı. h1 selektorına font-size qásiyetin ornatıp, biz hár <h1> ……. </h1> tegler jupliǵına shrift 240% úlkenligi menen kórsetilgenligin támiyinleymiz. Hámme qaǵıydalardıń ózgerisleri selektordan soń qoyılǵan { hám } belgileriniń ishinde jazılıwı lazım. Font-size: 240% jazılıwında qos noqat (:) aldında jaylasqan bólim qásiyet, qalǵani bolsa qásiyettiń mánisi bolıp esaplanadı.

Noqatlı útir buyrıqtı juwmaqlaydı. Bul mısalda, font-size aqırǵı buyrıq bolıp, onnan soń noqat útir qoyılıwı májbúr emes, lekin font-size dan keyin basqa buyrıqlar bar bolsa noqar útir qoyılıwı shárt.

Kóplik stil beriw

Bir neshe stildi berıwdıń eki túrli usuli bar. Olardı bir qatarda birlestirıwımız kerek:

h1 { font-size:240%; color:blue; }

Keltirilgen kodta <h1> tegi járdeminde anıqlanǵan baslamasınıń reńi ekinshi stil buyrıǵı arqalı berilgen. Olardı eki qatar qılıp jaylastırıwımız múmkin:

h1 { font-size:240%;

color:blue; }

yamasa bunnanda kóp ajıratıwımız múmkin:

h1 {

font-size :240%;

color :blue;

}

Sol waqıtta qaǵıydalar toplamı qay jerde jaylasqanlıǵı kózge túsedi, sebebi selector hár dayım birinshi baǵanada jaylasqan boladı, hám tómendegi buyrıqlar sulıw bolıp keyingi baǵanaǵa jaylasqan boladı.

Bir selektordı bir neshe márte kórsetiliwi ruxsat etiledi, CSS olardıń qásiyetlerin birlestiredi. Demek aldınǵı mısaldı tómendegishe kórsetiwimiz múmkin:

h1 { font-size: 240%; }

h1 { color : blue; }

Esletpe

CSS kodtı durıs hám qáte jaylastırıw usilları joq, biraq hámme bloklardı bir túr stilde formatlanıwı usınıladı.

Eger selektorǵa bir qásiyet eki márte berilgen bolsa ne boladı?

h1 { color : red; }

h1 { color : blue; }

Bunday halda aqırǵı berilgen qásiyet qabıl etiledi – color:blue. Bir faylda bir qásiyetti eki márte jazıwdıń mánisi joq, lekin haqıyqıy halatta web-betlerden paydalanǵanda sonday qaytalanıwlar ushraydı. CSS-tiń bul qásiyeti kaskadliq dep ataladı.