Ishni bajarish tartibi:
CSS haqida qisqacha ma’lumot berish.
CSS dan foydalanib web sahifaga misol keltirish.
Natijani brauzerda ko’rsatish
Qisqacha nazariy ma’lumot
CSS - HTMLning qo'shimcha dasturi bo'lib, web 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 xohlagan matnga, rasmga va hamma narsaga qo'llashingiz mumkin bo'ladi, faqat id=" ", style=" " yoki class=" " kabi atributlarga o'sha qoidalarni nomini kiritsangiz bo'lgani, bemalol ishlatishingiz mumkin bo'ladi. Bu dastur HTML kabi Faqat web sahifa yaratish uchun mo'ljallangandir.
CSS - Cascading Style Sheets, HTML web sahifa yaratish dasturiga ancha qulaylik va web sahifalarning matnini mukammal tarzda tuzish uchun qo'shimcha tarzda yaratilgan dasturdir, HTML dan keyin kelib chiqqan. CSS ni HTML bilan bog'lashning uch xil yo'li bo'lib, ikkita yo'li biror HTML dokumentni ichida ishlatilsa, uchinchi yo'li HTML dan mustaqil tarzda "dokument_nomi.css" qilib alohida tuziladi va saqlanadi. HTML dokumenti ichida ishlatiladigan CSS qoidalar o'sha bitta dokumentga tegishli bo'ladi va odatda kichik qoidalar bo'ladi, mustaqil CSS dokument esa juda ko'p ma'lumotlarni o'zida saqlaydi va odatda bitta website ning bir nechta web page lari uchun qo'llaniladi. CSS ni HTML da qo'llash usullarining hammasini ham o'z ishlatilish o'rni, maqsadlari va qulayliklari bor, shuning uchun birini biridan afzal ko'rish yoki solishtirishning ilojisi yo'q, yaxshi web master uchala uslubda ham o'z o'rnini topa bilib ishlatishi lozim bo'ladi.
CSS yordamida quyidagilar amalga oshiriladi:
1. CSS yordamida biz HTML dokumentimizga ko'p, har hil teg va atributlar kiritmasdan web sahifamizga ishlov berishimiz mumkindir, albatta HTML ga kiritiladigan kodlarga o'xshash kodlar CSS da sodda va osonroq holda kiritishingiz kerak bo'ladi. Faqat bitta kiritgan CSS kodni qayta kiritmasdan, o'sha qoidani istalgancha qayta-qayta ishlatish mumkin bo'ladi, hatto boshqa sahifalar uchun ham.
2. Agarda siz misol uchun biror font turini, rangini, o'lchamini yoki boshqa biror narsani o'zgartirmoqchi bo'lsangiz ham bitta so'z yordamida butun bir web sahifadagi o'sha qoida ishlatilingan HTML dokumentlarni o'zgartira olasiz.
3. HTML da bajarib bo'lmaydigan juda ko'p funksiyalarni ham bu CSS dasturi yordamida bajarishimiz mumkindir. Masalan HTML da tuzilgan oddiy jadvalni CSS bilan ishlov berishimiz mumkin, HTML da border="" atributidan boshqa hech narsa qilib bo'lmaydi.
Topshiriq: CSS dan foydalanib shriftlarni, o’lchamini, gipersilka xususiyatlarini va boshqa elementlarni o’zgartirish.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
h1 {
text-shadow: 2px 2px;
}
h2
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body style="background-image:url('lebron.jpg')">
<h1 style="text-align:center;">SPORT</h1>
<p style="text-align:center;font-family:verdana;"> SPORT - bu uzoq umr garovidir!</p>
<hr>
<h2 style="text-align: center;">Bu yerda siz sportning bir nechta turi haqida ma'lumotlarga ega bo'lasiz!</h2>
<table align="center">
<tr> <td><br><h2>Basketbol</h2>
<img src= basketball_betting061417.jpg alt="Basketbol" style="width:20%">
<p>Basketbol sizni qiziqtirmoqdami? </p>
<a href= Basketbol.htm title="Go to W3Schools HTML section">BASKETBOL</a>
<hr>
<h2>Dzyudo</h2>
<img src= 17_12_27_1514388361.jpg alt="Dzyudo" style="width:20%">
<p>Yoki siz dzyudo tarafdorimisiz? </p>
<a href= Dzyudo.htm title="Go to W3Schools HTML section">DZYUDO</a>
<hr>
<h2>Boks</h2>
<img src= stavki-na-box.jpg alt="Boks" style="width:20%">
<p>Professional boks bu erakaklar tanlovi! </p>
<a href= Boks.htm title="Go to W3Schools HTML section">BOKS</a>
<hr>
</body>
</html>
NATIJA:
Laboratoriya ishi №5