#5 – CSS (2-qism). Veb-dasturlash kursi

Videoni variantida ko’rish uchun ko’rish bu yo’llanmaga bosing.

FONT-FAMILY

<!doctype html>
<html>
<head>
    <style>
    h1 {
    
    }
    </style>
</head>
<body>
    <h1>Hello, world</h1>
</body>
</html>

CSSni o’rganishda davom etamiz

h1 {   
    font-family: Arial;
}

Matnning shriftini, ya’ni qanday yozilishini tanlashimiz mumkin. Arial nomli shriftimiz bor.

h1 {   
    font-family: Helvetica;
}

Yoki misol uchun, Helvetica juda chiroyli shrift. Shrift ingilizchasiga Font bo’ladi, shuning uchun shrift bilan ishlash uchun kerak bo’lgan barcha xususiyatlarimiz font so’zi bilan boshlanadi.

Sizda bor shrifltar, saytingizni ochayotgan foydalanuvchining kompyuterida bo’lmasligi mumkin. Misol uchun siz “font-family: Arial” deb ko’rsatdingiz. Men brauzerimda sizning saytingizni ochdim. Menda Arial shrifti yo’q. Demak, brauzer matnni ushbu shrift o’rniga, menda bor boshqa shrifda ko’rsatadi. Sayt siz o’ylaganizdan hunukroq bo’lib ko’rinishi mumkin.

h1 {   
    font-family: Geneva, Arial, Helvetica, sans-serif;
}

Shuning uchun ham vergul orqali bir nechta shrift ko’rsatish maslahat beriladi. Hozirgi holatda matn Geneva shriftida ko’rsatiladi. Agar foydalauvchi tizimida ushbu shrift bo’lmasa – Arial shriftida ko’rinadi. U ham bo’lmasa Helvetica, u ham bo’lmasa sans-serif shriftlarining birida.

sans-serif

Sans-serif bu aniq bir shrift emas, bu shriftlar guruhu. Shriftlarni ikki hil guruhga ajratsak bo’ladi:

serif

Serif: harflar uchida chiziqchasi bo’ladi

sans-serif

Sans-serif esa chiziqchasiz degan ma’noni beradi.

RAMKA VA BO’SHLIQ

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
}

Elementlarga tashqi chiziq – ramka berish uchun border xususiyatidan foydalaniladi. Qiymat sifatida esa 3 ta ma’lumot berishimiz kerak.

Ramka qalinligini. Biz 1 piksel sifatida ko’rsatdik.

Uning rangini. Biz black, ya’ni qora rang ko’rsatdik. Bu yerda rgb dan ham foydalansa bo’ladi.

Ramka stilini. Biz solid deb ko’rsatdik, bu oddiy chiziq. Soliddan tashqari dotted, ya’ni nuqtalik varianti bor. Undan tashqari dashed (uzulma chiziq), double (ikkitalik), inset va outset varianlari bor.

Kichik vazifa: barcha variantlarni ishlatib ko’ring.

PADDING
(o’zb: Ichki bo’shliq, рус: Внутренний отступ)

Elementlarga ichki bo’shliq berish uchun padding xususiyatidan foydalaniladi.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    padding: 30px;
}

Bu yerda h1 elementimizga 30 piksel ichki bo’shliq berdik. Ya’ni, ramka va element orasida 30 pikseldan bo’sh joy paydo bo’ladi. Element ustida 30px, ostida 30 piksel, chap va o’ng tomonlarida ham 30 pikseldan.

Eslatib o’taman: piksel monitoringizdagi eng kichik nuqta.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    padding: 30px;
    background-color: yellow;
}

Elementning foniga rang bersak, padding ham o’sha rangda bo’ladi.

Faqatgina bir tomonda bo’shliq qoldirish uchun ham – alohida xususiyatlar bor.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    padding-top: 30px;
    background-color: yellow;
}

padding-top: yuqoridagi bo’shliq.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    padding-right: 30px;
    background-color: yellow;
}

padding-right: o’ng tomondagi bo’shliq. Bu o’zgarishni sezmasligimiz mumkin hozir, chunki o’ng tomonda bo’sh joy yetarli.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    padding-bottom: 30px;
    background-color: yellow;
}

padding-bottom: pastdan bo’shliq qoldirish.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    padding-left: 30px;
    background-color: yellow;
}

va padding-left: chap tomondan bo’sh joy.

E’tibor bergan bo’sangiz, biz xususiyalarni soat strelkasi yurishi tomonlama sanadik. Tepa, o’ng, past va chap.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    padding: 40px 30px 20px 0;
    background-color: yellow;
}

Birinchi ko’rgan padding xususiyatimiz orqali ushbu 4 tomonga ichki bo’shliq qoldirishimiz mumkin. Buning uchun yuqoridan boshlasb soat strelkasi yo’nalishida qiymatlarni yozamiz. Elementimizning tepa qismiga 40 piksel, o’ng tomonga 30, elementimizning ostki qismiga 20 piksel va chap tomonga 0, ya’ni chap tomonda hech qanaqa boshliq bo’lmaydi. 0 raqami qo’yganimizdan so’ng o’lcham birligini qo’ymaymiz. Chunki 0 barcha o’lcham birliglrida ham 0. Shuning uchun ushbu raqamdan so’ng px kalit so’zi yo’q.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 20px;
    background-color: yellow;
}

Bir xususiyatdan foydalanish, alohida bir nechta xususiyatlar yozishdan ko’ra ancha qulayroq.

MARGIN
(o’zb: Tashqi bo’shliq, рус: Внешний отступ)

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    background-color: yellow;
    padding: 40px 30px 20px 0;
    margin: 30px;
}

Tashqi bo’shliq hajmini ko’rsatish uchun margin xususiyatidan foydalanamiz. Tashqi bo’shliq deb nomlanishining sababi – bo’sh joy ramkaning tashqi tarafida bo’ladi.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    background-color: yellow;
    padding: 40px 30px 20px 0;
    margin: 30px 70px 60px 20px;
}

Huddi paddingda bo’lgani kabi, margin xususiyatida ham top, right, bottom va left variantlari bor. Leking margin ni ham soat strelkasi yo’nalishi bo’yicha yozish qulayroq.

Bu yerda elementimiz ostida 60 piksel joy qoldirganmiz, lekin buni ko’ra olayotganimiz yo’q. Chunki elementimiz ostida boshqa biror element yo’q.

<h1>Hello, world</h1>
<p>Test</p>

Keling, h1 tegi ostidan p tegi yaratamiz. E’tibor bering, “Test” so’zimiz “Hello, world!” so’zidan ancha pastda yozilmoqda. Sababi h1 tegimiz ostida 60 piksellik bo’shliq bor.

margin: 30px 70px 0 20px;

Keling uni 0 ga o’zgartiramiz. Ko’rib turganingizdek, p tegi teparoqqa ko’tarildi. Lekin baribir qanaqadir bo’shliq bor. Bu p tegening bo’shliqlari. To’g’ri, biz ushbu tegga hechqanaqa bo’shliqlar berganimiz yo’q. Lekin har bir elementlarning oldindan berilgan hususiyatlari bor.

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    background-color: yellow;
    padding: 40px 30px 20px 0;
    margin: 30px 70px 0 20px;
}
p {
    padding: 0;
    margin: 0;
}

Bu bizni qoniqtirmaydi, keling p tegidan barcha bo’shliqlarni olib tashlaymiz.

Mana endi teglarimiz orasida hechqanaqa bo’shliq qolmadi.

QIYINROQ SELECTORLAR

h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    border: 1px black solid;
    background-color: yellow;
    padding: 40px 30px 20px 0;
    margin: 30px 70px 0 20px;
}
p {
    padding: 0;
    margin: 0;
}
h1:hover {
    text-decoration: underline;
}

Sichqoncha elementlarning ustida turganida, o’zgarishi kerak bo’lgan xususiyatlarni ko’rsatish uchun :hover selectoridan foydalanamiz. Biror elementni tanlagach, ikki nuqta va hover so’zini yozamiz.

Element va ikki nuqta orasida probel bo’lmaslgi kerak. Demak kursorni h1 tegimiz ustiga oborsak, oldinroq h1 selectorida ko’rsatilgan xususiyatlarimizga, endi text-decoration xususiyati ham qo’shiladi. Ya’ni matnimiz ostida chiziq paydo bo’ladi.

Kursor elementimiz ustidan ketgach, tekst ostidagi chiziqcha ham yo’qoladi. Demak, :hover selectorida yozilgan xususiyatlar, faqatgina sichqoncha ko’rsatkichi element ustida bo’lganida aktivlashadi va u elementimizni tark etgach, selector xususiyatlari ham o’z aktivligini yo’qotadi.

<!doctype html>
<html>
<head>
    <style>
    </style>
</head>
<body>
    <h1>Hello, world</h1>
    <p>Test</p>
</body>
</html>

Element nomi va ikki nuqta hover so’zlari orasida probel bo’lmasin dedim, sababi css selectorlarida probel “ichida” degan ma’noni beradi.

div p {
    color: red;
}

Misol uchun bu yerda div tegi ichida p tegi bor, o’sha teg matni rangini – qizil qil demoqdamiz. Shuning uchun ham p tegimiz matnining rangi o’zgarmadi. Chunki ushbu tegimiz div tegi ichida emas.

<h1>Hello, world</h1>
<p>Test</p>
<div>
    <p>Test 2</p>
</div>

Keling, div tegi ochamiz va ichida p tegini yaratamiz. Ushbu tegimiz matni qizil rangda ko’rinmoqda.

<h1>Hello, world!</h1>
<p>Test</p>
<div>
    <p>Test 2</p>
    <form>
        <p>Test 3</p>
    </form>
</div>

Form tegi yaratamiz, uning ichida yana bitta p tegi. Ushbu tegimiz matni ham qizil rangda.

Bir birimizni osonroq tushunish uchun p tegini form tegining bolasi deb ataylik. P tegimiz uchun esa form tegi ota bo’ladi. Ingiliz tilida biz ota deb aytgan atamamizni “Parent” deyishadi. Rus tilida “Родительский элемент”. Bola deb atagan atamamizni ingiliz tilida “Child” detishadi, ruschada “Дочерний элемент”.

Teglarimizga qaytamiz: p tegimizning otasi form tegi xisoblanadi. U baribir qizil rangda. Selectorimizda div ichidagi p tegi deganmiz. P tegimizning otasi div bo’lmasada, u baribir div tegi ichida. Yana bir bor eslatib o’taman, css selectorida probel belgisi “ichida” ma’nosini beradi.

div > p {
    color: red;
}

Agar, aynan “Bolasi” tushunchasini bermoqchi bo’lsak, probel o’rniga katta belgisini qo’yamiz. Endi biz div ning bolasi bo’lgan p tegi rangini qizil qil demoqdamiz. Rostdan ham faqatgina “Test 2” yozuvi qizil rangga o’zgardi.

BACKGROUND

body {
    background-color: red; 
}

Esignizdami background-color ni ko’rgan edik. Undan tashqari yana bir nechta ortki fon bilan ishlovchi xususiyatlar bor.

body {
    background-color: red; 
    background-image: url('images/rasm.jpg');
}

Fonga rasm qo’yish uchun background image xususiyatidan foydalaniladi. Qiymat sifatida url() funksiyasini ishlatamiz. Ushbu funksiyamiz parametri sifatida esa qo’ymoqchi bo’lgan rasmimizga yo’l ko’rsatamiz. Bu yerda biz images pakpasini och, uning ichida rasm.jpg fayli bor demoqdamiz. Hozir rang ko’rinmay qoldi, chunki rangning ustidan rasm joylashgan. Shunga qaramay baribir background-color xususiyatini olib tashlamaymiz. Chunki, biror sababga ko’ra brauzer rasmimizni ocha olmasa, foydalanuvchiga background-color da ko’rsatgan rang ko’rinadi.

body {
    background-color: red; 
    background-image: url('images/rasm.jpg');
    background-attachment: fixed;
}

Scroll qilganimizda, ya’ni oynaning holatini o’zgartirganimizda, fon rasmi, sahifadagi matn kabi o’z turar joyini o’zgartiradi. Agar scroll qilishimizga qaramasdan, rasm mutloq turishini istasak, background-attachment xususiyatiga fixed qiymatini berishimiz mumkin

body {
    background-color: red; 
    background-image: url('images/rasm.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
}

Rasm tugagan joy qaytarilmoqda. Uni qaytarmaslik uchun background-repeat xususiyatiga “no-repeat” qiymatini beramiz.

body {
    background-color: red; 
    background-image: url('images/rasm.jpg');
    background-attachment: fixed;
    background-repeat: repeat-x;
}

Faqat bir tomonga qaytarilishi uchun “repeat-x”,

body {
    background-color: red; 
    background-image: url('images/rasm.jpg');
    background-attachment: fixed;
    background-repeat: repeat-y;
}

yoki “repeat-y” qiymatlaridan birini berishimiz mumkin

body {
    background-color: red; 
    background-image: url('images/rasm.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top left;
}

Rasm yuqori chap tomondan boshlangan. Rasmning qaysi tomondan boshlanishini background-position xususiyati boshqaradi. U odatda top left qiymatiga ega. Eslab ko’ramiz: top yuqodi degani, right – o’ng, bottom – past, left – chap. O’rta esa center bo’ladi.

background-position: top right;

Ushbu qiymatlardan aralashtirib o’zimizga kerak effekt yaratamiz. Misol yuqori o’rng tomondan boshlanishi uchun top right,

background-position: bottom left;

Rasm pastki chap tomonidan boshlanishi uchun bottom left qiymatlarini ishlatamiz.

XULOSA

CSS da tashqi ko’rinish, ya’ni htmlimiz stilini belgilaymiz dedik.

<h1 style="color: red; padding: 12px">Hello, world!</h1>

Har bir tegda style atributi mavjud. Ularga ham har hil xususiyatlar ko’rsatib ketishimiz mumkin

Bugungi darsda tushunishingiz oson bo’lishi uchun html faylda css yozib ko’rdik. Lekin, na head teglari orasida, na style atributida css yozish yaxshi emas. CSS kodlarni alohida faylda saqlagan yaxshiroq.

<link href='css/style.css' rel='stylesheet' />

Buning uchun head teglari orasida link tegini yaratamiz. href atributida css faylimizga yo’l ko’rsatamiz. Biz: css papkasi bor, uning ichida style.css fayli bor demoqdamiz.

Ushbu yozayotgan html faylimiz va link tegi orqali yo’l ko’rsatgan faylimiz, bir biriga qanaqa bo’g’liq tomoni borligini – barauzerga tushintirishimiz kerak. Buning uchun rel atributidan foydalaniladi. Unga stylesheet qiymatini beramiz. Shunda brauzer biz css faylni ko’rsatayotganimizni tushunadi. Chunki CSS abreviaturasi Cascading Style Sheets so’zlaridan olingan. Rus tilida Каскадные таблицы стилей deyishadi. O’zbekchasiga Kaskadlik tablitsalar stili bo’aldi… Rosa bopladim-a o’zbekchaga tarjima qilishni? 🙂

Dars ohirida ko’pchilikni chalg’itadigan bir narchani aytmoqchiman. Sizning html faylingiz bor. Uning yonida css papakasi va image papakalari mavjud. css papkasi ichida style.css, images papakasi ichida rasm.jpg fayli bor.

Bugun rasmga yo’l ko’rsatganimizda html faylda yozayotgan edik, shuning uchun ham images/rasm.jpg yo’lini ko’rsatdik.

background-image: url('../images/rasm.jpg');

style.css faylimizdan ushbu rasmga yo’l qo’ymoqchi bo’lsak, ../images/rasm.jpg qo’yishimiz kerak bo’ladi. Chunki avvaliga css papkasidan chiqishimiz kerak, keyin images papkasiga kirishimiz kerak bo’ladi. Umid qilaman yo’llar bilan ishlashni allaqachon yaxshi o’zlashtirib olgansiz.

16+