• Kasblar
    • HTML
    CSS
    JavaScript
    PHP
    SQL
    Python
  • Bo'limlar
    • Yangiliklar
    Texnologiyalar
    Maqolalar

    Style

    Style so'zi stil, bezak deb tushunib olsak bo'ladi. Darslada style deb ishlatib ketamiz.

    HTML style atributi rang, shrift, o'lcham va boshqa  turli style larni elementga  qo'llash uchun ishlatiladi.

    Namuna

    Bu qizil rang

    ushbu ko'k rang

    Ushbu katta shrift

    HTML Style Attributi

    <tagnomi  style="property:value;">

     property  bu css  xususiyatidir  va value esa  o'sha xususiyatni  qiymatidir. Ya'ni xususiyat bor va o'sha xususiyatni qiymati bor. 

    Agar O'zbekcha yozadigan bo'lsak

     <tagnomi style=" xususiyat : uning_qiymati">

    Background Color

     background-color  xususiyati  elementning orqa fon rangini o'zgartiradi.

    Namuna

    Namunada veb saytning orqa fon  rangini yellow (sariq) ranga o'zgartiramiz.

    <!DOCTYPE html>

    <html>

    <body style="background-color:yellow;">

    <h1>Ushbu bosh sahifa</h1>

    <p>bu paragraph.</p>

    </body>

    </html>

     

    Namuna

    Boshqa elementlarda bacground-color xususiyatini ni qo'llash.

    <!DOCTYPE html>
<html>
<body>

<h1 style="background-color:powderblue;">Bu bosh sarlavha</h1>
<p  style="background-color:tomato;">Bu esa paragraph.</p>

</body>
</html>

    Text Color

    color so'zi rang deb tarjima qilinadi.

    css color xususiyati  elementning  matn rangini  o'zgartiradi.

    Namuna

    <!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Ushbu bosh sarlavha</h1>

<p style="color:red;">Bu esa paragraph.</p>

</body>
</html>

    Natija

    Ushbu bosh sarlavha

    Bu esa paragraph.

    Fonts

    font-family  xususiyati  element uchun ishlatiladigan shriftni o'zgartiradi.

    Namuna

    <!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">Bu bosh sarlavha</h1>
<p style="font-family:courier;">Bu esa paragraph</p>

</body>
</html>

     

    Natija

    Bu bosh sarlavha

    Bu esa paragraph

     

    Text Size

    Size so'zi razmer, o'lcham deb tarjima qilinadi.

    font-size  elementning  matn hajmini o'zgartiradi.

    Namuna

    
<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">Bu bosh sarlavha</h1>
<p style="font-size:22px;">Bu esa paragraph.</p>

</body>
</html>

    Natija

    Bu bosh sarlavha

    Bu esa paragraph.

    Text Alignment

     text-align  xususiyati  elementning kontentini elementga  nisbatan joylashtiradi.

    Namuna

    <!DOCTYPE html>
<html>
<body>

 <h1 style="text-align:center;">Markazdagi kontent</h1>
 <p style="text-align:right;">O'ng tomondagi kontent.</p>
 <p style="text-align:left;">Chap tomondagi kontent.</p>

</body>
</html>

    Natija

    Markazdagi kontent

    O'ng tomondagi kontent.

    Chap tomondagi kontent.

     

    Boshlang'ich holatda elementning kontenti chap tomonda to'ladi. Ya'ni  text-align:left   bo'ladi.

    Boshlangi'ch holatda barcha elementlar  text-align:left   xususiyatiga ega. Boshlang'ich xolat inglischasiga  default  xolat deyiladi.

    Default so'zi ko'p ishlatiladi. Ma'nosi boshlang'ich holatdagi xususiyat yokiy qiymat. Demak default holatda html elementlar  text-align:left   xususiyatiga ega.