Va axborot texnologiyalari 10-sinf toshkent – 2021

VI BOB. 
WWW-TEXNOLOGIYA VA HTML TILI
p {
border
:
4px solid green
;
width
:
200px
;
height
:
100px
;
margin
: 1
5px auto 15px auto;}
p.
one
{
box-shadow
: 
-5px -5px #8cf9bb;}
p.
two
{
box-shadow
: 
5px 5px 5px #8cf9bb;}
p.
three
{
box-shadow
: 
5px 5px 5px 5px 
#8cf9bb
;}
p.
four
{
box-shadow
: 
0 0 10px #8cf9bb
;}
p.
five
{
box-shadow
: 
inset 0 0 10px #8cf9bb
;}
NATIJA
CSS
class
="
one
">
…….
class
="
five
">
HTML
BLOK CHEGARALARI EFFEKTI: YUMALOQ VA ELLIPTIK CHEGARALAR
Yumaloq chegaralar.
CSS3da 
border-radius
xususiyati har qanday blokka burchaklarini 
yumaloq qilish imkoniyatini taqdim etadi. Qiymat sifatida radius o‘lchami pikselda ko‘rsatiladi. 
p {
border
:
5px solid pink
;
padding
:
20px
;
width
:
150px
;
text-align
:
center
;
border-radius
: 
10px
;
box-shadow
:
5px 5px 5px 5px 
#ffe7f8
;}
CSS – stillar bilan ishlay 
oluvchi kaskadli stillar 
majmuasi.
NATIJA
CSS
CSS – stillar bilan ishlay oluvchi kaskadli stillar majmuasi.
HTML
Elliptik chegaralar.
CSS3da murakkab shakllarni yaratishda 
yumaloq burchaklarning gorizontal va vertikal qismlari uchun turli 
masofalarni belgilash mumkin. Masalan, chegara radiusi: 90 piksel 
60 piksel;
Burchakning individual xususiyatlaridan foydalanib, faqat bitta 
burchakni belgilash mumkin: 
border-top-left-radius: 90px 60px.
To‘rt burchakning hamma burchaklarini birdaniga turli kо‘rinishga keltirish uchun stenografiya 
(qisqa usulda berilishi)dan foydalaniladi. Bu usulda qiymat berishda dastlab tо‘rtta gorizontal, 
sо‘ngra tо‘rtta vertikal qiymat kiritiladi: 

---

225
p {
border
:
4px solid blue
;
width
:
200px
;
height
:
100px
;
margin
: 1
5px auto 15px auto;}
p.
one
{
border-top-left-radius: 
60px 90px
;}
p.
two
{
border-radius: 
2em 1em 2em 1em/ 
1em 4em 1em 4em
;}
p.
three
{
padding: 
0px
;
border-radius: 
100px
;}
NATIJA
CSS
class
="
one
">
class
="
two
">
class
="
three
">
HTML
BLOKLAR JOYLASHUVI
Displey
xususiyati blokli elementlarni veb-sahifada qanday ko‘rinishda chiqarishni hamda 
uning joylashuvini aniqlashtirib beradi. Qiymatlari:
• inline – blok darajasidagi element (div, p)ning qatorli element (span, h1, ... h6...) kabi 
ishlashiga imkon beradi; 
• blok – qatorli elementning blok darajasidagi element kabi ishlashiga imkon beradi;
• inline-block – blok-darajali elementning qatorli element kabi ishlashiga imkon beradi, shu 
bilan birga blok-darajali elementning boshqa xususiyatlarini saqlab qoladi; 
• none – sahifadagi elementni yashiradi. Bu qiymatda element xuddi sahifada yo‘qdek 
tasvirlanadi. 
Quyidagi misolda keltirilgan rо‘yxat elementi, odatda, blok-darajali element hisoblanib, alohida 
qatorlarda chiqishi kerak. Lekin

elementlari uchun CSS qoidada ular alohida qatorlarda 
emas, balki yonma-yon turishlari belgilangan. Shuningdek, ularni ajratish uchun har bir 
elementning o‘ng tomoniga tashqi chegara (margin-right) qo‘shilgan. Mazkur usul ko‘pincha 
sayt uchun navigatsiya yaratishda ishlatiladi. 
ul {
list-style-type
:
none
;
background-color
:
green
;}
li {
display
:
inline
;
color
:
white
;
margin-right
:
10px
; }
li.
process
{
display
: 
none
;}
CSS

• 
  Home
  


• 
  Products
  


• 
  Services
  

class
="
process
">
About


• 
  Contact