|
CSS (Cascading Style Sheets) asoslari
|
| bet | 18/19 | | Sana | 15.06.2024 | | Hajmi | 0,62 Mb. | | #263916 |
Bog'liq KG VA WD dan gost Javoblar 30. CSS (Cascading Style Sheets) asoslari.
CSS (Cascading Style Sheets) - bu HTML yoki XML (shu jumladan SGML o'zgarishlar kabi XHTML) hujjatlari ko'rinishini formatlash uchun ishlatiladigan til. CSS veb-sahifalarning dizaynini tuzilmasidan ajratishga yordam beradi, bu esa mazmunni qayta ishlatish va sahifa stilarini osonroq boshqarish imkonini beradi. Quyidagi punktlarda CSS'ning bir qancha asosiy tushunchalarini ko'rib chiqamiz:
1. Selektorlar: CSS selektorlari HTML elementlarini tanlash uchun ishlatiladi. Selektor turi HTML elementlari, sinflar, ID'lar yoki boshqa attributlarga bog'liq bo'lishi mumkin.
2. Xususiyatlar: Har bir CSS qoidalari bir yoki bir nechta xususiyatlarni o'z ichiga olishi mumkin, xususiyat esa o'sha selektor bilan tanlangan elementlarning ko'rinishini ta'riflaydi.
3. Qiymatlar: Xususiyatlar berilgan qiymatlar orqali belgilanadi. Bu qiymatlar aniq ranglar, o'lchamlar, fontlar va boshqalar bo'lishi mumkin.
4. Deklaratsiyalar: Xususiyat va uning qiymati ikkilamchi kombinatsiyaga deklaratsiya deyiladi. Deklaratsiyalar yopiqli jingalak qavslar { } ichida joylashtiriladi.
5. Deklaratsiya bloki: Bir yoki bir nechta deklaratsiyalardan iborat blok {} jingalak qavslar ichida yoziladi.
6. Qoidalar to'plami: Selektor va deklaratsiya blokidir. Bu ikkilamchi kombinatsiyadan iborat CSS qoidalari to'plamini tashkil qiladi.
7. Xususiyatlar merosi: Ko'p hollarda, agar bir elementga bir xususiyat qiymati berilmasa, u o'zining ota (parent) elementidan meros qilib oladi.
8. Cascading: Agar bir nechta CSS qoidalari bir xil elementga taalluql bo'lsa, nizo bo'lishi mumkin. "Cascading" qoidalari nizo bo'lganda qaysi stilar qo'llanilishi kerakligini aniqlashda yordam beradi
Ushbu tushunchalar CSS asoslari bo'lib, veb-sahifalarda turli xil dizayn yaratish imkonini beradi. CSS'ni mukammal o'rganish uchun kodeks yozishni amaliyotda qo'llash va turli manbalardan o'qish tavsiya etiladi.
31. CSS-hususiyatlar.
CSS-da hususiyatlar (properties) — bu HTML elementlarining ko'rinishini va o'rnishtirilishini boshqaruvchi qoidalardir. Har bir hususiyat ma'lum bir elementning stilini sozlashga yordam beradi, masalan, rangini, o'lchamini, chegarasini va boshqa ko'rinish elementlarini. Quyida ba'zi eng ko'p ishlatiladigan CSS hususiyatlari va ularning qisqacha tavsiflari keltirilgan:
1. **color**: Elementning matn rangini belgilaydi.
```css
p { color: blue; }
```
2. **background-color**: Elementning fon rangini belgilaydi.
```css
div { background-color: #f0f0f0; }
```
3. **font-family**: Elementning yozuv turi yoki shriftini belgilaydi.
```css
body { font-family: "Arial", sans-serif; }
```
4. **font-size**: Shrifting o'lchamini belgilaydi.
```css
h1 { font-size: 2em; }
```
5. **border**: Elementning chegarasini belgilaydi, bunda chegaraning o'lchami, stili va rangi aniqlanadi.
```css
img { border: 1px solid #000; }
```
6. **margin**: Elementning tashqi yoki yonidan bosim (bo'sh joy) qo'shadi.
```css
.box { margin: 10px; }
```
7. **padding**: Elementning ichidan bosim qo'shadi.
```css
.box { padding: 10px; }
```
8. **width** va **height**: Elementning kengligi va balandligini aniqlaydi.
```css
.thumbnail { width: 100px; height: 100px; }
```
9. **display**: Elementning namoyish usulini belgilab, qanday qilib o'rinshtirilishini boshqaradi (masalan, block, inline, flex).
```css
nav { display: flex; }
```
10. **position**: Elementning o'rinshtirish usuli va joylashuvini boshqaradi (relative, absolute, fixed, va sticky).
```css
.sticky-header { position: sticky; top: 0; }
```
11. **overflow**: Element kontenti belgilangan o'lchamdagi joydan tashqariga chiqib ketganda qanday harakat qilishini belgilaydi (visible, hidden, scroll, auto).
```css
.container { overflow: auto; }
```
12. **text-align**: Matnni horizontal tarzda qanday joylashtirishni belgilaydi (left, right, center).
```css
.text-center { text-align: center; }
```
13. **opacity**: Elementning shaffofligini belgilaydi.
```css
.transparent-box { opacity: 0.5; }
```
14. **box-shadow**: Elementga soya qo'shish imkonini beradi.
```css
.box { box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.15); }
```
15. **transition**: Bir elementning stilining o'zgarishini animatsion tarzda belgilaydi.
```css
.button { transition: background-color 0.3s ease-in-out; }
CSS-da literally yuzlab turli xil hususiyatlar mavjud, ularning har biri o'zining maxsus qoidalariga va ishlatish kontekstiga ega. Yuqorida keltirilganlari esa, faqatgina keng tarqalgan.
|
| |
