10-dars “Блок” lar uchun “стиль” lar Reja: “Блок” elementi … border border-radius

10-dars
“Блок” lar uchun “стиль” lar
Reja:

• “Блок” elementi -
  …
• border
• border-radius
• margin & padding
• opacity
• box-shadow
• text-shadow

…

width – kenglik uchun ishlatiladi va biror bir elementning kengligini belgilab beradi.

height – balanglik uchun ishlatiladi va biror bir elementning balandligini belgilab beradi.

…

konteynerini yozib, CSS da unga fon, balandlik, kenglik berib ko`raylik…

• Maqol:

Bir “div” ga ham “width” kerak, ham “height”.

border
border – bu hoshiya (chegara) bo`lib, unda bir vaqtning o`zida qalinlik, uslub, rang berish imkoniyati mavjud. Bu amallar ketma-ketligi ahamiyatga ega emas, “пробел” bilan ajratilib yozilsa bo`ldi, browser o`zi tushunib oladi.
border
border-style
border-width
border-color
border-top-
style
width
color
border-right-
style
width
color
border-bottom
style
width
color
border-left
style
width
color
border-style:
top
right
bottom
left
border-width:
top
right
bottom
left
border-color:
top
right
bottom
left
border-radius
border-radius – qiymati (“свойства”si) “border” uchlarini silliqlashtirib, dumaloqlashtirib beradi (“округлять”).
Buning uchun biz biror elementga “border” berishimiz kerak. “border” bermasdan ham “background” uchun ushbuni sozlasak bo`ladi.

Qiymat uchun px, %... kabilar kiritiladi.
Bunda ham alohida-alohida qiymatlarda kiritsa bo`ladi:


border-radius: top-right bottom-right bottom-left top-left;
padding & margin
margin – tashqaridan bo`shliq hosil qilib beradi.
padding – ichkaridan bo`shliq hosil qilib beradi.
opacity
opacity – elementni shaffof (“прозрачный”) qilib beradi.
opacity: 1; - asl holati bo`lib hisoblanadi.

0.1 = .1
box-shadow
box-shadow – shakl uchun soya hosil qilib beradi.

Soyaning yo`nalishi, o`lchami, holati, rangi mavjud.
box-shadow: x y loyqaligi kattaligi rangi;
x – soyaning gorizontal siljishi.
y – soyaning vertikal siljishi.
“размытие” loyqalik – soyaning xiraligi, tiniqligi.
kattalik – soya shakldan katta bo`lishi ham, kichik bo`lishi ham mumkin.
rang – soyaning rangi.

text-shadow
text-shadow – matn uchun soya hosil qilib beradi.

Soyaning yo`nalishi, holati, rangi mavjud.
Soyaning o`lchami standart bo`ladi.
text shadow: x y loyqaligi rangi;
x – soyaning gorizontal siljishi.
y – soyaning vertikal siljishi.
“размытие” loyqalik – soyaning xiraligi, tiniqligi.
Matnning soyasi katta-kichik bo`lmaydi.
rang – soyaning rangi.