- No category
CSS va uning imkonyatlari - Farg'ona Davlat Texnika Universiteti Mustaqil Ish
advertisement
FARG’ONA DAVLAT
TEXNIKA UNIVERSITETI
III BOSQICH KI 713-23 GURUH
TALABASINING
Web Ilovalar yaratish FANIDAN
MUSTAQIL ISH
Bajardi: ____________________
Qabul qildi: ____________________
CSS va uning imkonyatlari
Reja
1.Kirish
2. CSS-FONT-FAMILY
3. RAMKA VA BO’SHLIQ
4. Foydalanilgan adabiyotlar
5. Xulosa
Kirish
CSS yoki Cascading Style Sheets - bu belgilash tilida yozilgan hujjat
taqdimotini tasvirlash uchun ishlatiladigan uslublar tili. (CSS dasturlash
tili hisoblanmaydi) U birinchi navbatda HTML va XHTML-da yozilgan
veb-sahifalarni uslublash va joylashtirish uchun ishlatiladi, lekin SVG
va XML kabi boshqa belgilash tillari bilan ham foydalanish mumkin.
CSS dasturchilarga veb-sahifa taqdimotini uning tuzilishi va
mazmunidan ajratish imkonini beradi. Bu shuni anglatadiki, bir xil
HTML hujjati turli xil CSS fayllariga oddiygina ulanish orqali bir necha
usulda uslublanishi mumkin. Bu, ayniqsa, sezgir dizaynlarni yaratish
uchun foydalidir, chunki bir xil HTML turli ekran o'lchamlari uchun
turli tartiblarni yaratish uchun ishlatilishi mumkin.
CSS ning asosiy sintaksisi selektorlar va deklaratsiyalardan iborat.
Tanlagichlar veb-sahifadagi siz uslubni yaratmoqchi bo'lgan
elementlarni tanlash uchun ishlatiladi va deklaratsiyalar ushbu
elementlarga qo'llamoqchi bo'lgan uslublarni belgilash uchun ishlatiladi.
Masalan, quyidagi kod veb-sahifadagi barcha paragraf elementlarini
qizil rangga aylantiradi:
p{
color: red;
}
CSS selektorlari juda aniq bo'lishi mumkin, bu sizga alohida
elementlarni yoki elementlar guruhlarini ularning identifikatori, sinfi,
turi yoki atributiga qarab belgilash imkonini beradi. Bundan tashqari,
CSS-ning kuchli kaskadli va meros tizimi mavjud bo'lib, u uslublarni
ota-ona elementlardan pastki elementlarga meros qilib olish imkonini
beradi. Bu shuni anglatadiki, siz ota-ona elementiga uslublar
o'rnatishingiz va ularni avtomatik ravishda uning barcha bolalariga
qo'llashingiz mumkin.
CSS veb-sahifaning joylashuvi va taqdimotini boshqarish uchun
ishlatilishi mumkin bo'lgan turli xil xususiyatlarga ega. Eng ko'p
ishlatiladigan xususiyatlardan ba'zilari:
rang va fon rangi: Elementning matn rangi va fon rangini o'rnatish
uchun ishlatiladi...
Bundan tashqari, CSS-da moslashuvchan va sezgir tartiblarni yaratish
uchun ishlatilishi mumkin bo'lgan Flexbox va Grid kabi bir nechta tartib
modullari mavjud. Flexbox ishlab chiquvchilarga osongina
moslashuvchan, bir o'lchovli maketlarni yaratishga imkon beradi va
Grid ishlab chiquvchilarga ikki o'lchovli maketlarni yaratishga imkon
beradi.
CSS shuningdek, media so'rovlar, animatsiyalar va transformatsiyalar
kabi bir qator rivojlangan xususiyatlarga ega. Media so'rovlari ishlab
chiquvchilarga qurilmaning ekran o'lchami yoki ruxsati kabi
xususiyatlariga qarab turli uslublarni qo'llash imkonini beradi.
Animatsiyalar va o'zgartirishlar ishlab chiquvchilarga sichqonchani
ko'tarish holatlari va aylantiruvchi animatsiyalar kabi dinamik va
interaktiv effektlarni yaratishga imkon beradi.
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.
padding-right: o’ng tomondagi bo’shliq. Bu o’zgarishni sezmasligimiz
mumkin hozir, chunki o’ng tomonda bo’sh joy yetarli.
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.
Foydalanilgan adabiyotlar
www.dasturlarinfo.com
www.arxiv.com
www.ziyo.net
www.dasturchi.uz
www.vikipedia.com
www.google.com
Xulosa
Web ilovalarni yaratish fanida html va css birinchi qadam ekanligini
tushundim va men ushbu mavzuda yanada ko’proq or’ganishga
harakat qilaman.
0
advertisement
Download
advertisement
Add this document to collection(s)
You can add this document to your study collection(s)
Sign in Available only to authorized usersAdd this document to saved
You can add this document to your saved list
Sign in Available only to authorized users