HTML Stillari - CSS

HTML Stillari - CSS


CSS = Stillar va Ranglar

Matnga rang berish, shakl va bloklarni qo`llash


Web-sahifani CSS yordamida formatlash

CSS – bu web-sahifa dizayni bilan ishlash uchun mo`ljallangan kodlar majmuidir.

Stillarni HTML elementlariga uch xil usulda qo`shish mumkin:

  • Qatorli formatlash – stil atributlarini HTML elementlarida qo`llash yo`li bilan
  • Ichki formatlash – HTMLning <head> qismida <style>elementini qo`llagan holda
  • Tashqi formatlash – bir yoki undan ortiq tashqi CSS fayllaridan foydalangan holda

Stillarga murojaatning eng ma’qul yo`li – stillarni alohida-alohida CSS fayllarda saqlagan holda ulardan HTMLda foydalanish. Lekin, bu darslikda biz stillarni HTML elementlariga ichki formatlash usulida qo`shishni ko`rib chiqamiz, chunki bu usulda kodlarni ifodalash va terib ko`rish qolganlariga nisbatan osonroq.


Qatorli formatlash

Qatorli formatlash usuli faqatgina bitta HTML elementiga alohida fason(stil) berishda ishlatiladi:

Qatorli formatlashda style atributi ishlatiladi.

Quyidagi misol <h1> elementi rangini ko`k rangga o`zgartiradi:

Namuna:

O'zingni Sinab Ko'r
<h1 style="color:blue;">Bu ko`k rangdagi sarlavha</h1>

Ichki formatlash

Faqatgina bitta veb-sahifa dizaynini ifodalashda ichki formatlash usuli ishlatiladi.

Ichki formatlash HTMLning <head> qismida, <style> elementi ichida ifodalanadi.

Namuna:

O'zingni Sinab Ko'r
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body>

<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>

</body>
</html>

Tashqi formatlash

Birdan ortiq veb-sahifalar dizaynini formatlashda tashqi formatlash usulidan foydalanamiz.

Tashqi formatlash usulida bor-yo`g`i bittagina faylni o`zgartirish bilan veb-sahifaning ko`rinishini o`zgartirib yuborish mumkin.

Bu usulda HTMLning <head> qismiga boshqa bir alohida CSS faylga bog`lovchi link qo`shib qo`yish kifoya.

Namuna:

O'zingni Sinab Ko'r
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>

</body>
</html>

Tashqi formatlash stilini istalgan matn muharririda yozish mumkin. Fayl hech qaysi bir HTML tegini o`z ichiga olmasligi va .css kengaytmasi bilan saqlanishi kerak.

Quyida “styles.css” faylining ko`rinishi keltirilgan

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

CSS shriftlari

CSS color xossasidan HTML elementlarida ishlatiladigan matnlarga rang berishda foydalaniladi.

CSS font-family xossasidan HTML elementlarida ishlatiladigan matnlarning shriftini o`zgartirishda foydalaniladi.

CSS font-size xossasidan HTML elementlarida ishlatiladigan matnlarning o`lchamini ifodalashda foydalaniladi.

Namuna:

O'zingni Sinab Ko'r
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>

</body>
</html>

CSSda chegaralash

CSSda chegaralash xossasidan matnning chegaralariga fon berishda ishlatiladi. Bunda matn to`rt tomondan chegaralangan ko`rinishda bo`ladi.

Namuna:

O'zingni Sinab Ko'r
p {
    border: 1px solid powderblue;
    padding: 30px;
}

CSSda xoshiya

CSSda xoshiya xossasidan matn va chegara o`rtasida xoshiya oralig`ini qoldirishda foydalaniladi.

Namuna:

O'zingni Sinab Ko'r
p {
    border: 1px solid powderblue;
    margin: 50px;
}

CSSda bo`sh joy qoldirish xossasi

CSSda bo`sh joy qoldirish xossasidan element chegarasidan tashqarida bo`shliq qoldirish uchun ishlatiladi.

Namuna:

O'zingni Sinab Ko'r
p {
    border: 1px solid powderblue;
    margin: 50px;
}

CSSda id xususiyati

Alohida bir element uchun stil berishda id xususiyatidan foydalanamiz:

Namuna:

O'zingni Sinab Ko'r
<p id="p01">Men o`zgachaman</p>
Endi bu id xususiyati “p01” ga teng bo`lgan element uchun alohida stil beramiz
#p01 {
    color: blue;
}

...   Eslatma: elementga berilgan id xususiyati web-sahifada yagona bo`lishi kerak, id selektori alohida bir elementga o`zgacha bir stil berish uchun ishlatiladi.


CSSda class xususiyati

Alohida bir element uchun stil berishda id xususiyatidan foydalanamiz:

Namuna:

O'zingni Sinab Ko'r
<p id="p01">Men o`zgachaman</p>
Endi bu id xususiyati “p01” ga teng bo`lgan element uchun alohida stil beramiz
#p01 {
    color: blue;
}

Xulosa

  • Qatorli formatlash usuli faqatgina bitta HTML elementiga alohida fason(stil) berishda ishlatiladi.
  • Faqatgina bitta veb-sahifa dizaynini ifodalashda ichki formatlash usuli ishlatiladi.
  • Birdan ortiq veb-sahifalar dizaynini formatlashda tashqi formatlash usulidan foydalanamiz.
  • CSS color xossasidan HTML elementlarida ishlatiladigan matnlarga rang berishda foydalaniladi.
  • CSSda chegaralash xossasidan matnning chegaralariga fon berishda ishlatiladi.
  • CSSda xoshiya xossasidan matn va chegara o`rtasida xoshiya oralig`ini qoldirishda foydalaniladi.
  • CSSda bo`sh joy qoldirish xossasidan element chegarasidan tashqarida bo`shliq qoldirish uchun ishlatiladi.
  • Alohida bir element uchun stil berishda id xususiyatidan foydalanamiz.
  • Alohida bir elementlar majmui uchun stil berishda class xususiyatidan foydalanamiz.

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017