5.1 Tagdagi style atributi
HTML haqida yana bir nechta foydali narsalar. Internet ommalashib boshlagandan keyin, veb-sahifalarning chiroyli yoki juda chiroyli bo'lishiga talab oshdi. Bu muammoni style style atributi yordamida hal qilishdi.
Bu atributning umumiy ko'rinishi quyidagi formatda:
<tag style="name=value;name2=value2;nameN=valueN">
style atributining qiymati sifatida, vergul bilan ajratilgan holda, tagga qo'llanadigan barcha "stillar" ko'rsatiladi.
Masalan, siz rasmni kvadrat shaklida 100x100 ko'rsatishni va uni yarim shaffof qilishni xohlaysiz. Buning uchun unga maxsus stillarni qo'shish kerak:
- width=100px;
- height=100px;
- opacity=0.5;
Unda rasm bilan HTML-kod quyidagi ko'rinishga ega bo'ladi:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Stillar yuzlab, hatto minglab. Brauzer ishlab chiquvchilari esa doimo yangilarini o'ylab topishadi. Yaxshiyamki, sen Java dasturchilikni o'rganayapsan, veb-dizaynchilikni emas :)
5.2 Mashhur CSS-stillar
Siz hayotingizda ko'p HTML-kod yozmaslik yoki uning stillarini o'zgartirish ehtimoli past, lekin barchasi sodir bo'lishi mumkin. Masalan, siz yozgan API ni sinab ko'rish uchun bir nechta kichik HTML-sahifalar yozasiz. Shuning uchun HTML ning asosiy stillarini bilish foydali bo'lishi mumkin.
Quyida backend-dasturchilar uchun eng keng tarqalgan 10 ta ko'rsatilgan:
| # | Nomi | Misol | Tavsif |
|---|---|---|---|
| 1 | width | width: 100px | elementning eni piksellarda |
| 2 | height | height: 50% | elementning balandligi foizlarda (ota-enining enidan) |
| 3 | display | display: none | element ko'rinishi (element ko'rinmasin) |
| 4 | visibility | visibility: hidden | element ko'rinishi (element yashiringan, lekin joy ajratilgan) |
| 5 | color | color: red; | matnning rangi |
| 6 | background-color | background-color: smoke; | fonning rangi |
| 7 | border | border: 1px solid black; | chegara (eni 1px, rangi qora, qattiq chiziq) |
| 8 | font | font: verdana 10pt | shrift: verdana, o'lchami 10pt |
| 9 | text-align | text-align: center; | matnni gorizontal bo'yicha tekislash |
| 10 | margin | margin:2px | elementdan tashqaridagi bo'shliq |
Senga bu teglarni eslab qolishing kerak emas, internetda hammasi bor. Ayniqsa, har bir "stil" ning o'ziga xos qiymatlari va qiymat tavsifi formati bor. Masalan, border yoki font ga qarang.
GO TO FULL VERSION