CSS haqida tushincha - Педагогика - Рефераты

Информация о документе

Цена	2000UZS
Размер	1.5MB
Покупки	0
Дата загрузки	07 Ноябрь 2026
Расширение	docx
Раздел	Рефераты
Предмет	Педагогика

CSS haqida tushincha

Купить

Reja:
1. CSS haqida tushincha
2. CSS da matnlar bilan ishlash
3. CSS da rasmlardan foydalanish

CSS haqida tushincha
CSS – HTMLning qo’shimcha dasturi bo’lib veb masterlar uchun to’liq o’rganish talab
qilinadi, bu dastursiz HTML ning o’zi ko’p funksiya bajara olmaydi.
CSS o’rganish juda oson va qulay dastur, qulayligi hadeb HTML kodlarini qayta-qayta
yozavermasdan bitta yaratilgan qoidani chohlagan matnga, rasmga va hamma hamma
narsaga qo’llashingiz mumkin bo’ladi faqat id=” “, style=” “ yoki class=” “ kabi
attributlarga o’sha qoidalarni nomini kiritsangiz bo’lgani bemalol ishlatishingiz mumkin
bo’ladi. Bu dastur HTML kabi f aqat v eb sahifa yaratish uchun mo’ljallangandir.
HTML bilan qilib bo’lmaydigan juda ko’p funksyalar mavjud, quyida ba’zi birlarini
aytib o’tamiz:
Tasavvur qiling siz bitta veb-sayt ning 20 ta sahifasini hammasini HTML yordamida
tuzdingiz, va nihoyat veb-saytni tayyor holatini sizga veb sahifa qilib berish taklifini
bergan korxona yoki tashkilotga ko’rsatdingiz, tayyor holatini ko’rgach boshida o’zi
tanlagan foni, yozuvning o’zi yoki ranglari yoqmaganini bildirdi va uni boshqasiga
o’zgartirishingizni sizdan iltimos qildi (masalan times new roman o’rniga arial) va siz
tuzatishni bajarishingiz uchun kerak bo’lgan amallar quyidagichadir:
1. 20 ta sahifaning har birini <body bgcolor=” “>, <font color=”_” face=””>
<basefont /> va hakazo teglarni har birini HTML dokumentdan qidirib topib (nimani
o’zgartirish kerak bo’lsa o’sha tegni qidirib topib) hammasiga bitta bitta o’zgartirishni
kiritishingizga to’g’ri keladi. Lekin CSS ni bilsangiz 20 ta sahifaning hammasini bitta so’z
bilan CSS faylda o’zgartirib o’zgaritirgan CSS faylni saqlashingiz kifoyadir. Yaxshi
kompyuter mutaxassisi uchun yuqoridagi CSS faylni o`zgartirishga 30 soniya yetarli
bo`ladi, hatto ushbu amalni bajarish uchun 20 ta veb sahifaning bironta HTML faylini
ochib ko`rishga hojat ham yo’qdir.
2. Veb sahifaning tez va oson veb-bauzerlarda yuklanishi ham juda muhim jihatlardan
sanaladi chunki sizni sahifangizga har xil tezlikka ega internet foydalanuvchilari
tomonidan tashrif buyuriladi. Agar sizni sahifangiz yuklanishi HTML teg va kodlarning
ko’pligi evaziga sekin yuklansa, bu internet foydalanuvchilarga noqulaylik tug`diradi.
Biroq, siz CSS kodlarni HTML faylda bitta <link rel=”stylesheet” type=”text/css”

href=”mystyle.css” /> buyrug`i bilan bog’lasangiz barcha 20 ta veb sahifangiz uchun usha
kiritgan bitta CSS fayl xizmat qiladi va oqibatda HTML sahifa ochilishi ancha tezlashadi.
Nimaga CSS?
HTML – veb sahifaning matn strukturasini tuzadi, CSS esa usha matnni (ramslar,
videolar, so’zlar, gaplar, va hamma hamma narsa) HTML qila olmaydigan darajada go’zal
qilib formatlaydi va mukammalshtiradi.
Bitta CSS fayl bilan bir nechta HTML dagi sahifalarni nazoratini qo’lga olish mumkin.
HTML sahifalarida kodlar miqdori kam yozilib vaqtingiz tejaladi.
CSS juda pu x ta va tushunarli, qoidalar kam.
CSS – veb ustalar uchun o’rganish majburiy bo`lib, CSS ni bilmagan veb sahifa
yaratuvchi veb usta emasdir.
CSS ning Qulayligi nimada?
CSS dan HTML da foydalanishning uch hil yo’li bordir, va uchala uslubning ham
o`ziga yarasha qulayliklari ko’pdir. Quyida uchala yo’lni qisqacha ko’rib chiqamiz.
2. CSS da matnlar bilan ishlash
Bu bo’limda CSS xususiyatlaridan foydalanib qanday qilib matnlarni manipulyatsiya
qilish qaraladi. Siz elementning quyidagi xossalarini o’rnatishingiz mumkin.
- Color xossasi matnning rangini o’rnatishda foydalaniladi.
- Direction xossasi matnning yo’lini o’rnatishda foydalaniladi.
- Letter-spacing xossasi harflar orasidagi joyni o’rnatishda ishlatiladi.
- Word-spacing xossasi jumladagi so’zlar orasidagi masofani o’rnatishda ishlatiladi.
- Text-indent xossasi paragraf matni abzaslarini o’rnatishda ishlatiladi.
- Text-align xossasi hujjatning matni joylashuvida foydalaniladi.
- Text-decoration xossasi tagiga yoki ustiga chizilgan yozuv va matnda joy tashlashda
ishlatiladi.
- Text-transform xossasi matn harflarini katta harflarga yoki kichik harflarga
o’tkazishda foydalaniladi.
- White-space xossasi xossasi matnni formatlash va oqishni nazorat qilishda
foydalaniladi.

- Text-shadow xossasi matn bo’ylab matn izini o’rnatishda foydalaniladi.
MATN RANGINI O’RNATISH
Quyidagi misolda qanday qilib matn rangini o’rnatish ko’rsatilgan. Mumkin bo’lgan
qiymatlar ixtiyoriy mumkin bo’lgan qiymatlardagi ixtiyoriy rang nomlari.
<html>
<head>
</head>
<body>
<p style = “color:red;”>
Bu matn qizil rangda yozilgan.
</p>
</body>
</html>
Dastur natijasi quyidagicha:
TEXT-DIRECTION (MATN YO’LI) NI O’RNATISH
Quyidagi misolda matnning yo’nalishi qanday o’rnatilishi keltirilgan. Mumkin bo’lgan
qiymatlar. Itr yoki rtl.
<html>
<head>
</head>
<body>
<p style = “direction:rtl;”>
Bu matn o’ng tarafdan chap tarafga ifodalangan.
</p>
</body>
</html>
Dastur natijasi quyidagicha:
BELGILAR ORASIDAGI BO’SH JOYNI O’RNATISH.

Quyidagi misolda qanday qilib belgilar orasidagi bo’sh joyni o’rnatish ko’rsatilgan.
Mumkin bo’lgan qiymatlar: normal, yoki belgilangan bo’sh joy sonlari.
<html>
<head>
</head>
<body>
<p style = “letter-spacing:5px;”>
Bu matn harflari o’rtasida bo’sh joylar mavjud.
</p>
</body>
</html>
Dastur natijasi quyidagicha:
SO’ZLAR ORASIDAGI BO’SH JOYNI O’RNATISH:
Quyidagi misolda qanday qilib matn so’zlari orasidagi bo’sh joylarni belgilash
ko’rsatilgan. Mumkin bo’lgan qiymatlar: normal yoki mumkin bo’lgan sonlar.
<html>
<head>
</head>
<body>
<p style = “word-spacing:10px;”>
Bu matn so’zlari o’rtasida bo’sh joylar mavjud.
</p>
</body>
</html>
Dastur natijasi quyidagicha:
MATN ABSASLARINI O ’ RNATISH .
Quyidagi misolda qanday qilib paragraf birinchi qatori absasi qo ’ yilishi ko ’ rsatilgan .
Mumkin bo’lgan qiymatlar: % yoki abzas fazosining mumkin bo’lgan sonlari.
<html>

<head>
</head>
<body>
<p style = “text-indent:5cm;”>
Bu matn birinchi qatori 1 sm lik abzasga
ega bo’ladi va bu qator uning haqiqiy o’rnida
qoldiriladi. Bu CSS ning text-indent
xossasidan qilinadi.
</p>
</body>
</html>
Dastur natijasi quyidagicha:
MATN SOYASINI TUSHIRISH
Quyidagi misolda matnning soyasi qanday qilib o’rnatilishi ko’rsatilgan. Buni hamma
brouzerlar ham qo’llab quvvatlamaydi.
<!Doctype html>
<html>
<head>
<style>
p {
text-transform: uppercase;
word-spacing: 1cm;
}
</style>
</head>
<body>
<p style = “text-shadow:4px 4px 8px blue;”>
agar sizning brouzeringiz text-shadow ni qo’llab quvvatlasa, bu matn
soyaga ega bo’ladi.
</p>
</body>
</html>
Dastur natijasi quyidagicha:

3. CSS da rasmlardan foydalanish
Rasmlar ixtiyoriy web sahifada muhim rol o’ynaydi. Garchi juda ko’p rasmlarni
olish mumkin bo’lmasa ham, leki hali ham yaxshi rasmlardan foydalanish muhim
hisoblanadi va qayerda bo’lmasin kerak bo’ladi.
CSS ekranga chiqariladigan rasmlarni nazorat qilishda juda muhim rol o’ynaydi. Siz
CSS dan foydalanib rasmlarning quyidagi xossalarini o’rnata olasiz.
- border xossasidan tasvir chegarasi kengligini o’rnatishda foydalaniladi.
- height xossasidan tasvirning balandligini o’rnatishda foydalaniladi
- width xossasidan tasvirning kengligini o’rnatishda foydalaniladi
- -moz-opasity xossasidan tasvirning tiniqligini o’rnatishda foydalaniladi.
IMAGE BORDER XOSSASI
Tasvirning border xossasi tasvir chegarasining kengligini o’rnatishda foydalaniladi. Bu
xossa uzunlikdagi yoki % dagi qiymatga ega.
0 pixel kenglik chegara yo’q ekanligini bildiradi.
Quyida bunga misol keltirilgan.
<!Doctype html>
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "1.jpg" />
<br/>
<img style = "border:5px dashed red;" src = "pictures/2.jpg" />
</body>
</html>
Dastur natijasi quyidagicha:

IMAGE HEIGHT XOSSASI.
Tasvirning height xossasi tasvirining bo’yini o’rnatishda foydalaniladi. Bu xossa
uzunlik yoki % qiymatlariga ega bo’lishi mumkin.
Quyida bunga misol berilgan.
<!Doctype html>
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; height:200px;" src = "pictures/1.jpg">
<br />
<img style = "border:1px solid blue; height:40%;" src = "pictures/1.jpg">
</body>
</html>
Dastur natijasi quyidagicha:

IMAGE WIDTH(TASVIR KENGLIGI) XOSSASI.
Tasvirning width xossasidan tasvirning kengiligini o’rnatishda foydalaniladi. Bu
xossa uzunlik yoki % qiymatlariga ega.
Quyida bunga misol keltirilgan.
<!Doctype html>
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; width:100px;" src = "pictures/1.jpg">
<br />
<img style = "border:1px solid blue; width:5%;" src = "pictures/1.jpg">
<img style = "border:1px solid blue; width:25%;" src = "pictures/1.jpg">
</body>
</html>
Dastur natijasi quyidagicha:

-MOZ-OPASITY XOSSASI.
Tasvirning –moz-opasity xossasidan tasvirning tiniqligini o’rnatishda foydalaniladi.
Bu xossa Mozillada tiniq rasmlar yaratishda ishlatiladi. IE tiniq rasmlarni yaratishda
filter:alpha(opacity=x) dan foydalanadi.
Mozillada (-moz-opacity) x 0.0 – 1.0 qiymatlarda bo’lishi mumkin. Kichikroq
qiymatlar ko’proq tiniqlikni hosil qiladi. (mumkin bo’lgan sintaksis opacity:x).
IE da (filter:alpha(opacity=x)) x 0 – 100 qiymatlarda bo’lishi mumkin. Kichikroq
qiymatlar katta tiniqlikni hosil qiladi.
Quyida bunga misol keltirilgan.
<!Doctype html>
<html>
<head>
</head>
<body>
<img style = "border:10px solid green; -moz-opacity:0.1;
filter:alpha(opacity=5);" src = "pictures/1.jpg">
<img style = "border:10px solid green; -moz-opacity:0.9;
filter:alpha(opacity=90);" src = "pictures/1.jpg">
</body>
</html>
Dastur natijasi quyidagicha:

FOYDALANILGAN ADABIYOTLAR
1. Блинова Т.А., Порев В.Н. Компьютерная графика /Под ред. В.Н.Порева - К.:
Издательство Юниор, 2005. – 520 с.
2. Геоiнформацiйна система "ОКО". Керiвництво користувача. Книга 3. — Киiв:
Геобiономiка, 1996. – 57.
3. Голованов Н. Н. Геометрическое моделирование. - М.: Издательство Физико-
математической литературы, 2002. –472 с.
4. Иванов В.П., Батраков А.С. Трехмерная компьютерная графика /Под ред. Г.М.
Полищука. - М.: Радио и связь, 1995. – 224 с.
5. Ли Ким. 3D Studio МАХ для дизайнера. Искусство трехмерной анимации. –
Второе издание переработанное и дополненное: Пер. с англ. / Ким Ли и др. – К.:
ООО -ТИД «ДС». 2003. – 864 с.
6. Марк Джамбруно. Трехмерная графика и анимация. 2-е изд. – М.: Издательство
Вильямс, 2002. – 624 с.
7. Маров М. 3D Studio MAX 3: учебный курс. – СПб: Издательство «Питер», 2010 –
640 с.
8. Мосин В.Г. Математические основы компьютерной графики. – Самара: СГАСУ,
2005. – С. 139-154.
9. Никулин Е. А. Компьютерная геометрия и алгоритмы машинной графики. - СПб.:
БХВ-Петербург, 2003. – 560 с.
10. Основы трехмерной графики и анимации / Коллектив авторов. – М., 2005. – 341
с.
11. Петерсон М. Эффективная работа с 3d Studio MAX – СПб: Питер, 2011 – 656 с.

CSS haqida tushincha

Купить

Похожие документы
2001-yil sentabr voqealri va uning xalqaro munosabatlarga
1945-1990-yillarda Buyuk Britaniya
1918-1923 yillarda xalqaro munosabatlar, Versal Vashington siyetemasining tuzilishi
Ahmad al-farg‘oniy
Almashlab ekishni loyihalashtirish va joriy etish