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
