2.9 Suwret. Tekstti formatlaw
2.8. CSS-reńler
Reńler tekstlerdiń aldınǵı bólegine hám fonına color hám background-color (yamasa jeke background argumenti arqalı) qásiyetleri járdeminde qollanılıwı múmkin. Bul reń úsh on altiliq san (mısal ushın #ff0000 yamasa #0000ff), yamasa reń atınan ibarat (mısal red yamasa blue) reń biri, yamasa RGB formatta berilgen bir reń bolıwı múmkin.
W3C shólkemi tárepinen belgilengen 16 standart reńler atları tómendegishe: Akvarian - aqua, qara - black, kók - blue, ashiq qızıl yaki fuchsiya - fuchsia, kúlreń – gray, jasıl - green, jarqın nur jasıl - lime, qızıl hám shın qızıl - maroon, shın kók - navy, olivkalı - olive, fiolet – purple, qızıl – red, gúmis - silver, binapsha - teal, aq – white hám sarı - yellow.
Tómendegi qaǵıyda bul atlardıń birin ID=object obyektine fon reńin belgilew ushın paydalanadı:
#object { background - color: silver; }
Tómendegi qaǵıyda da hámme <div> elementleri ushın teksttiń fon reńi sarı órnatıldı (sebebi monitorda qızıldıń on altiliqtaǵı ff dárejesi, jasıldiń ff dárejesi hám kóktiń 00 dárejesi qosılǵanda nátiyjede sarı payda boladı):
div { color: #ffff00 ; }
Eger 16-lıq san menen islewdi qálemeseńiz yamasa siz kórsetken hújjetiń arqa fon reńin akvamaringe ózgertirıwdı qáleseńiz tómendegi qaǵıyda sıyaqlı rgb funkciyasınan paydalanıp, onıń úsh reń komponentaların kórsetiwińiz múmkin:
body{ background-color:rgb(0, 255, 255); }
Reń komponentasın kórsetkende san ornına onıń payız muǵdarın kórsetseńiz boladı, mısalı rgb(58%, 95%, 74%).
Qısqartılǵan reń atları
On altılıq sanlardı qısqa qılıp jazıwdın jolı bar. Hár bir reń komponentasın eki on altılıq san ornına bir san jazıladı. Mısal ushın, #fe4692 reń mánisi #ff4499 reńge derlik teń, demek ekinshi on altiliq san jazılmasa onda qısqartılǵan jazıw #f49 boladı.
Anıq reń kerek bolmasa bunday qaǵıydadan paydalanıw múmkin. Olardıń parqi 6 háripten ibarat reńler 16-millon hár túrli reńdi qollap-quwatlasa, 3 háripten ibarat bolǵan reńler tek 4 000 reń isletiw múmkin.
2.9. Elementlerdi jaylastırıw
Elementler web-bette kórsetilgen jerine túsedi, lekin olar kóshiwide múmkin: statikalıq, salıstırmalı yamasa belgilengen orın beriwimiz múmkin.
Absolyut jaylasıw
Absolyut jaylastırılǵan element hújjetten óshiriledi hám bos qalgán orınǵa qálegen basqa elementler iyeleydi.
Bunnan soń siz obyektti hújjettiń qálegen kerek jerine “joqari”- top, “ońǵa”-right, “tómenge”-bottom hám “shep”-left qásiyetlerin paydalanip ózgertip qoyıwińizǵa boladı. Ol basqa elementlerge salıstırǵanda joqarında yamasa tómeninde qaladı.
Mısal ushın, ID=object mánisi bar obyektti hújjetiń tómennen sanaǵanda 100 pikselge hám shep tárepten 200 pikselge jılıstırıw ushın oǵan tómendegi qaǵıydalardı qollanıw kerek (siz jáne de CSS qollap-quwatlaytin basqa ólshem birliklerin paydalanıwińizǵa boladı):
#object {
position: absolute;
top: 100px;
left: 200px;
}
Salıstırmalı jaylastiw
Bunday kóriniste obyektti hújjetti rásmiylestirgen waqtinda jaylasqan ornına qarap qarama-qarsı orınǵa ózgertiwge boladı. Mısal ushın 10 piksel tómenge hám 10 piksel ońǵa óziniń ádetgi jaǵdayinan obyektti ózgertiw ushın tómendegi qaǵıydani paydalanamiz:
#object {
position: relative;
top: 10px;
left: 10px;
}
Belgilengen jaylasiw
Jaylastırıw qásiyetleri sazlaw obyektin belgilengen jerlerge qoyıwǵa imkan beredi, biraq tek sol brauzer aynası ishinde. Eger hújjet tómenge túsirilse, obyekt óz ornında qaladı, hújettiń ózi bolsa onıń ústine ótip turadı – bul túrli dok-panellerdiń islep shıǵıwdıń jaqsı jolı bolıp esaplanadı. Tómendegi qaǵıydalardan paydalanıp siz brauzerdiń joqarǵı shep múyeshinen obyektti qatırıp qoyıwıńız múmkin:
#object {
position: fixed;
top: 0px;
left: 0px;
}
2.10 súwrette 2.5 mısalda kórsetilgen kod, brauzer aynasına júklendi hám brauzer aynasi eni hám biyikligi boyınsha qısqartırıldı. Nátiyjede hújjetti tómenge aylantiriw zárúrligi payda boldı.
