Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

CSS foydalanuvchi interfeysi

ULASHISH

CSS foydalanuvchi interfeysi

Bu bobda quyidagi CSS foydalanuvchi interfeysi xossalari haqida bilib olasiz:

  • resize
  • outline-offset

CSS o‘lchamni o‘zgartirish (resize)

resize xossasi elementni foydalanuvchi o‘lchami o‘zgartirishi mumkinligini (va qanday) belgilaydi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

  • horizontal — foydalanuvchi elementni gorizontal (kengligini) o‘zgartirishi mumkin
  • vertical — foydalanuvchi elementni vertikal (balandligini) o‘zgartirishi mumkin
  • both — foydalanuvchi elementni vertikal ham, gorizontal ham o‘zgartirishi mumkin
  • none — foydalanuvchi elementni o‘zgartira olmaydi

Bu div elementini vertikal yo‘nalishda o‘zgartirishingiz mumkin!

O‘lchamini o‘zgartirish uchun o‘ng-pastki burchakka bosib sudring!

CSS resize — faqat kenglik

Quyidagi misol foydalanuvchiga <div> elementining faqat kengligini o‘zgartirish imkonini beradi:

Misol

div {
  resize: horizontal;
  overflow: auto;
}
O‘zingiz sinab ko‘ring »

CSS resize — faqat balandlik

Quyidagi misol foydalanuvchiga <div> elementining faqat balandligini o‘zgartirish imkonini beradi:

Misol

div {
  resize: vertical;
  overflow: auto;
}
O‘zingiz sinab ko‘ring »

CSS o‘lcham o‘zgartirish — kenglik hamda balandlik

Quyidagi misol foydalanuvchiga <div> elementining kengligi va balandligini o‘zgartirish imkonini beradi:

Misol

div {
  resize: both;
  overflow: auto;
}
O‘zingiz sinab ko‘ring »

CSS Textarea-da o‘lcham o‘zgartirishni o‘chirish

<textarea> odatda sukut bo‘yicha o‘lchamini o‘zgartirish mumkin.

Bu yerda <textarea> da o‘lchamni o‘zgartirishni o‘chirish uchun resize xossasidan foydalandik:

Misol

textarea {
  resize: none;
}
O‘zingiz sinab ko‘ring »

CSS outline-offset xossasi

outline-offset xossasi outline bilan element cheti/chegarasi o‘rtasiga bo‘shliq qo‘shadi. Element va uning outline’i o‘rtasidagi bo‘shliq shaffof bo‘ladi.

Quyidagi misol chegara chetidan tashqarida 15px uzoqlikdagi outline’ni belgilaydi:

Bu paragraf qora chegara va chegara chetidan tashqarida 15px uzoqlikdagi qizil outline’ga ega.

Eslatma: Outline chegaradan farq qiladi! Border’dan farqli o‘laroq, outline element chegarasidan tashqarida chiziladi va boshqa kontent ustiga chiqishi mumkin. Bundan tashqari, outline element o‘lchamlarining bir qismi EMAS; elementning umumiy kengligi va balandligi outline kengligidan ta’sirlanmaydi.

Quyidagi misol chegara va outline orasiga bo‘shliq qo‘shish uchun outline-offset xossasidan foydalanadi:

Misol

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}
O‘zingiz sinab ko‘ring »

CSS User Interface xossalari

Quyidagi jadval barcha foydalanuvchi interfeysi xossalarini sanab o‘tadi:

Xususiyat Tavsif
outline-offset Kontur va elementning cheti yoki chegarasi orasiga bo‘sh joy qo‘shadi
resize Element o‘lchami foydalanuvchi tomonidan o‘zgartirilishi mumkin yoki yo‘qligini belgilaydi

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish