Mavzu: css sintaksisi, css kiritish amallari: inline, internal, external

Mavzu: CSS sintaksisi, CSS kiritish amallari: inline, internal, external

Selektor siz uslublashni xohlagan HTML elementiga ishora qiladi.
Deklaratsiya blokida nuqta-vergul bilan ajratilgan bir yoki bir nechta deklaratsiyalar mavjud.
Har bir deklaratsiyada CSS mulk nomi va ikki nuqta bilan ajratilgan qiymat mavjud.
Bir nechta CSS deklaratsiyasi nuqta-vergul bilan ajratilgan va deklaratsiya bloklari jingalak qavslar bilan o'ralgan.

Misol

Ushbu misolda barcha
elementlar qizil matn rangi bilan markazga tekislanadi:
p {
color: red;
text-align: center;
}

Misol tushuntirildi

• 
  pCSS-dagi selektor (u siz uslublashni xohlagan HTML elementiga ishora qiladi:
  ).
  
• 
  colormulk redhisoblanadi va mulk qiymati hisoblanadi
  
• 
  text-align mulk center hisoblanadi va mulk qiymati hisoblanadi
  

CSS selektorlari
CSS selektorlari siz uslub qilmoqchi bo'lgan HTML elementlarini "topish" (yoki tanlash) uchun ishlatiladi.
Biz CSS selektorlarini besh toifaga ajratishimiz mumkin:

• 
  Oddiy selektorlar (nom, id, sinf asosida elementlarni tanlang)
  
• 
  Kombinator selektorlari (elementlarni ular orasidagi ma'lum munosabatga qarab tanlang)
  
• 
  Pseudo-klass selektorlari (ma'lum bir holatga asoslangan elementlarni tanlash)
  
• 
  Pseudoelement selektorlari (elementning bir qismini tanlash va uslublash)
  
• 
  Atribut selektorlari (atribut yoki atribut qiymati asosida elementlarni tanlang)
  

Ushbu sahifada eng asosiy CSS selektorlari tushuntiriladi.
CSS element selektori
Element selektori element nomi asosida HTML elementlarini tanlaydi.
Misol
Bu yerda sahifadagi barcha
elementlar qizil matn rangi bilan markazga tekislanadi: 
p {
text-align: center;
color: red;
}
CSS id selektori
Id selektori muayyan elementni tanlash uchun HTML elementining id atributidan foydalanadi.
Elementning identifikatori sahifada noyobdir, shuning uchun id selektori bitta noyob elementni tanlash uchun ishlatiladi!
Muayyan identifikatorga ega elementni tanlash uchun xesh (#) belgisini va undan keyin element identifikatorini yozing.
Misol
Quyidagi CSS qoidasi id="para1" bilan HTML elementiga qo'llaniladi: 
#para1 {
text-align: center;
color: red;
}
CSS-ni kiritishning uchta usuli
Uslublar jadvalini kiritishning uchta usuli mavjud:

• 
  Tashqi CSS
  
• 
  Ichki CSS
  
• 
  Inline CSS
  

Tashqi CSS
Tashqi uslublar jadvali yordamida siz faqat bitta faylni o'zgartirish orqali butun veb-sayt ko'rinishini o'zgartirishingiz mumkin!
Har bir HTML sahifasi bosh qismidagi elementi ichidagi tashqi uslublar jadvali fayliga havolani o'z ichiga olishi kerak.
Misol
Tashqi uslublar HTML sahifasining elementida, boʻlimida aniqlanadi:

This is a heading

This is a paragraph.

Tashqi uslublar jadvali har qanday matn muharririda yozilishi mumkin va .css kengaytmasi bilan saqlanishi kerak.
Tashqi .css faylida HTML teglar bo'lmasligi kerak.
"mystyle.css" fayli quyidagicha ko'rinadi:
"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;

margin-left: 20px;
}
Eslatma: Xususiyat qiymati va birlik o'rtasida bo'sh joy qo'shmang:
Noto'g'ri (bo'sh joy): margin-left: 20 px;
To'g'ri (bo'sh joy):margin-left: 20px;
The display: inline-block Value
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline, display: inline-block and display: block:
Example
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.b {
display: inline-block;

width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.c {
display: block;

width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Using inline-block to Create Navigation Links
One common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates horizontal navigation links:
Example
.nav {
background-color: yellow;
list-style-type: none;
text-align: center; 
padding: 0;
margin: 0;
}

.nav li {

display: inline-block;
font-size: 20px;
padding: 20px;
}