CSS ASOSI
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Hello, world</h1>
</body>
</html>
Oldingi darsimizda HTML tilini ko’rgan edik. Ushbu til orqali sahifagamizda matn yozishimiz mumkin, rasm va boshqa html sahifalarga yo’llanmalar qo’yishimiz mumkin. HTML tilida barcha matn oq fonda, qora rang bilan yoziladi.
HTML da yaratilgan elementlarimizga bezak berish uchun, CSS dan foydalanamiz.
<head>
<style>
</style>
</head>
Buning uchun mahsus, style nomli teg ochamiz. Uchbu tegimiz odatda head teglari orasida turadi. Keling, butun sahifamizning fonini qizil rangga o’zgartiramiz. Esingizda bo’lsa sahifaning ko’rinib turgan qismi body tegi orasida yozilardi. Demak body tegimiz fonini qizil qilsak – butun sahifamiz qizil rangda bo’ladi.
<style> body </style>
body tegimizni tanlash uchun, ushbu tegning nomini yozamiz.
<style>
body {
}
</style>
Body tegini tanlagach, figualik qavslar orasida uning hususiyatini yozamiz.
background-color
(eng) background – (o’zb) ortki, fon;
(eng) color – (o’zb) rang
Fon uchun javob beruvchi xususiyat background-color deyiladi.
<style>
body {
background-color
}
</style>
Ushbu xususiyatni qo’ygach
<style>
body {
background-color:
}
</style>
ikki nuqta qoyib, so’ng, xususiyatimizning qiymatini berishimiz kerak.
<style>
body {
background-color: red;
}
</style>
Qiymatimizni red ga teng deb ko’rsatamiz, ingliz tilida qizil degani. Oxirida nuqtali vergul qo’yishni unutmang.
<style>
body {
background-color: red;
color: yellow;
}
</style>
Matn rangini o’zgartirish uchun – yana bir xususiyat qo’yamiz. Color – yellow. Yellow ingiliz tilida – sariq degani.
Keling, atamalarni tushunib olaylik. Bu yerda body – selector deyiladi, ingiliz tilida tanlov degani. Chunki ushbu qismda har hil html elementlarni tanlab olishimiz mumkin.
Esingizdami dasturlashda – kommandalarni guruhlash uchun figuralik qavsdan foydalanardilk? CSS dasturlash tili bo’lmasada, bu yerda ham figuralik qavslar orasida, tanlagan elelmenttlarimiz uchun har hil xususiyatlarni yozamiz. Ikki nuqta qo’yib, ularga qiymat beramiz.
<span>bir</span> <span>ikki</span> <span>uch</span>
Uchta span teglarini yarataylik. Ularning rangi ham sariq bo’lib turibdi. Chunki body ichidagi barcha matn rangini sariq bo’lsin deganmiz.
body {
background-color: red;
color: yellow;
}
span {
color: white;
}
Uning rangini oq qilish uchun, yana bitta selector yozamiz. Ya’ni span tegini tanlaymiz, figuralik qavs ichida esa color xususiyatini yozib, ikki nuqta qo’ygach, unga white (ingilizcha oq) qiymatini beramiz.
SELECTOR
(o’zb: Tanlov, рус: Выборка)
Agar ulardan faqat birini oq qilmoqchi bo’lsak, class atributidan foydalansak bo’ladi. Ushbu atribut barcha html teglarida bor.
<span>bir</span> <span class="foo">ikki</span> <span>uch</span>
Ikkinchi tegimizning class atributini foo ga teng dedik. Tushinib turganingizdek, foo ning o’rniga istagan nom berishimiz mumkin.
span {
color: white;
}
o’rniga
.foo {
color: white;
}
yozamiz.
CSS da ushbu elementni topish uchun nuqta va class nomini qo’yamiz. Ko’rib turganingizdek ikki so’zi oq rangga o’zgardi.
h1 {
font-size: 25px;
}
h1 tegimizning matni juda katta, keling sal kichikroq yozamiz. Buning uchun font-size xususiyati to’g’ri keladi. Matn hajmi 25 pikselga teng dedik. Agar foo class-iga ega bo’lgan element matnlarini ham huddi shu hajmda yozmoqchi bo’lsak,
h1, .foo {
font-size: 25px;
}
h1 dan so’ng vergul qo’yib, undan so’ng foo class-ini tanlab olamiz. Bu yerda vergul belgisi “va” ma’nosini beradi. Biz “h1 tegini va foo class-ga ega bo’lgan elementlarni tanla”, – dedik. Vergullarni istalgancha ishlatishingiz mumkin.
a, span, .foo, .bar, strong {
color: green;
}
Misol uchun bu yerda a tegini va span tegini va foo class-ini va bar class-ini va strong teglarini tanlab, ushbu teglar orasida yozilgan matnning rangini green, ya’ni yashil qilgin demoqdamiz.
<span id="bar" class="foo">bir</span>
Agar birinchi spanimizga ham foo class-ini bersak, uning rangi va hajmi ham o’zgaradi.
<span id="bar" class="foo">bir</span>
Yana bir barcha teglarimizda bor atribut bu id.
#bar {
font-weight: bold;
}
CSS da id larni panjara belgisi bilan topib olamiz. Matnni sal qalinroq yozish uchun, font-weight: bold; deb yozishimiz kerak. Ko’rib turganingizdek, id lar class-larga juda o’xshaydi. Farqi – id butun htmlda original bo’lishi kerak.
<span id="bar" class="foo">bir</span> <span id="bar" class="foo">ikki</span>
Ya’ni biz boshqa tegning id-sini – bar deb ko’rsata olmaymiz. Bu xato hisoblanadi.
<span id="baz" class="foo">ikki</span>
Unga boshqa id berishimiz mumkin.
<span id="bar" class="foo foo2 bar2 yanaBirClass">bir</span>
Class va Id ning yana bir farqi, bir teg birdaniga bir necha class ga ega bo’lishi mumkin. Buning uchun class-lar bir biri bilan probel orqali ajralib turishlari kerak. Lekin bir tegning faqat bitta id-si bo’ladi.
<!doctype html>
<html>
<head>
<style>
body {
background-color: red;
color: yellow;
}
.foo {
color: white;
}
h1, .foo {
font-size: 25px;
}
#bar {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Hello, world</h1>
<span id="bar" class="foo foo2 bar2 yanaBirClass">bir</span>
<span id="baz" class="foo">ikki</span>
<span>uch</span>
</body>
</html>
Yuqorida ushbu bo’limda yozgan kodimizni yaxlit ko’rishingiz mumkin.
RGB
body {
background-color: red;
}
Ranglarni ingliz so’zlari orqali ko’rsatish mumkinligini ko’rdik. Ularni RGB rang modeli orqali ko’rsatishingiz ham mumkin.
Red (qizil), Green (yashil), Blue (ko’k)
RGB – red, green va blue so’zlarining bosh harflaridan hosil bo’lgan abreviatura hisoblanadi. Ushbu model – texnik qurilmalarning ekranida, ranglarni ko’rsatilishi uchun ishlatiladi.
CYMK
Poligrafiyada esa, CYMK modeli ishlatiladi. Ushbu modellarning farqi fonda. Misol uchun gazetalarni oq ranglik qog’ozda chop etasiz. Ya’ni, agar biror bir rang quymasak oq rangga ega bo’lamiz.
RGB
RGB da esa fon qora rangda. Ya’ni telefoningiz o’chiq holatida – qora rangni ko’rasiz. Shuning uchun ushbu rang modellari bir biriga to’g’ri kelmaydi. Tushunganingizdek, dasturlashda aynan rgb ishlatiladi.
Har bir rang uchun 1 bayt informatsiya ko’rsatishimiz mumkin, ya’ni 0 dan 255 gacha (Esingizdami bir baytda 256 hil raqamlar mavjud edi).
body {
background-color: rgb(0, 255, 0);
}
CSS da maxsus funksiyalar bor. Shulardan biri rgb(). U uchta parametr qabul qiladi: birinchi raqamimiz qizil rang uchun, ikkinchisi yashil va ohirgisi ko’k rang uchun. Biz qizil va ko’k ranglarni ishlatmadik, ular 0 ga teng. Faqat yashil rang ishlatdik. Demak fon yashil rangda bo’ladi.
rgb(255, 255, 0);
Sariq rang hosil qilish uchun yashil va qizil ranglardan foydalanamiz.
rgb(255, 255, 255);
Barcha ranglarni qo’shsak, oq rang hosil bo’ladi. Bu tabiatga o’xshash. Quyosh nuri o’zida barcha ranglarni jam etgan hisoblanadi.
rgb(220, 2, 225);
Har hil raqamlar ishlatib ekspriment qilib ko’ring.
RGB 16LIK RAQAM TIZIMIDA
Lekin, rgb funksiyasi qariyib ishlatilmaydi, uning o’rniga qulayroq bo’lgan 16lik sanoq tizimidan foydalaniladi. Ushbu tizim bilan “Sanoq tizimlari” darsimizda tanishgan edik. Ko’rmagan bo’lsangiz, albatta ko’ring.
ff = 255, 00 = 0
Eslatib o’tamiz 255 raqamini ko’rsatish uchun ff dan foydalansak, 0 raqamini ko’rsatish uchun ikkita noldan foydalanamiz. Chunkin css da rgb raqamlari uchun 2 hona ajratilgan.
body {
background-color: #00ff00;
}
16lik sanoq tizimida rgb ranglarini ko’rsatish uchun, avval panjara belgisini qo’yamiz. Fon rangini yashil qilish uchun 00, ya’ni qizil rang ishlatmaymiz. Yashil rang uchun ff va ko’k rang uchun 00 ko’rsatamiz.
body {
background-color: #ffffff;
}
Oq rang ko’rsatish uchun esa barcha ranglar uchun ff ni ko’rsatamiz.
body {
background-color: #42eef9;
}
Ushbu 16lik tizimi orqali ham har hil eksprimentlar qilib ko’ring.
KO’P ISHLATILADIGAN
XUSUSIYATLAR
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Hello, world</h1>
</body>
</html>
Keling, ko’p ishatiladigan xususiyatlarni ko’rib o’tamiz.
h1 {
text-decoration: underline;
}
Matn ostidan chiziq chizish uchun “text-decoration” xususiyatiga “underline” qiymatini beramiz.
h1 {
text-decoration: overline;
}
Matn yuqorisidan chiziq chizish uchun ushbu xususiyatiga “overline” qiymatini beramiz.
h1 {
text-decoration: line-through;
}
Matnni ochirishimiz mumkin.
h1 {
text-decoration: line-through overline;
}
Ushbu qiymatlarni barovariga ishlatish mumkin. Buning uchun qiymatlarni probel orqali ajratamiz.
h1 {
font-style: italic;
}
Matnni qiyshiqroq qilib yozish uchun “font-style” xususiyatiga “italic” qiymatini beramiz.
h1 {
font-style: italic;
text-decoration: underline;
}
Demak ham qiyshiqroq, ham ostki chiziq chizish uchun – ushbu ikki xususiyatni yozishimiz mumkin.
CSS darsining ikkinchi qismida qiyinroq misollar ko’ramiz.