204-guruh talabasi Suvonov Sunnatbek. 2-laboratoriya ishi

Mikroformatlar faqat maxsus sinf nomlaridir

Mikroformatlar sizning boshingizga tushadi deb o'ylaysizmi? Ular emas! Ular oddiy belgilar bo'lib, ulardagi ma'lumotlar uchun standartlashtirilgan sinf nomlaridan foydalanadi. Standart vCardni tekshiring:

CommerceNet

Work:

169 University Avenue

Palo Alto,

CA

94301

USA

Work [phone]

Fax [phone]

Email:

[e-mail]

Klass selektor

Klas selektor bu htmldagi elementni aniq bir qiymatini belgilab olish uchun ishlatiladi. "Class selector" nuqta (.) bilan boshlanishi kerak. Masalan aytaylik biror klasning "center" qiymatini olaylik.

#para1 {

text-align: center;

color: red;

}

Quyida

elementni klasiga oid misolni ko'ramiz.

p.center {

text-align: center;

color: red;

}

Id selektor

Id selektor htmldagi biror elementning id sini belgilab unga ko'rinish berishda ishlatiladi. Bizga ma'lumki, id takrorlanmas bo'lishi kerak. Shu qatori, id selektor veb sahifadagi o'ziga xos "id" ini belgilaydi. Id maxsus hash kod orqali belgilanadi ya'ni (#) belgi orqali.

#para1 {

text-align: center;

color: red;

}

Id: noyob (Sahifadagi bitta elementga qo'llaniladi) Sinf: Sahifadagi bir nechta elementlarga qo'llaniladi.

Class selector bir necha html elementlarda ishlatiladi. Bir nechta elementlarga o'xshash uslubni berishni xohlagan holatlarda.ID tanlagich yagona elementni yagona identifikatsiya qilish yoki uslublash uchun ishlatiladi. Ikki html elementi bir xil identifikator nomiga ega bo'lolmaydi.Uslubni tanlashda siz sinf tanlovchisiga "." Bilan murojaat qilasiz, ID raqami tanlagichiga esa "#" bilan murojaat qilasiz.

Id va sinf javascript orqali element tanlashda juda muhim rol o'ynaydi. Ba'zi bir id asosida elementlarni olsangiz, javascript o'sha id bilan bog'langan bitta elementni qaytaradi.

Ba'zi bir sinf asosida elementlarni olsangiz, javascript ushbu sinf bilan bog'liq bo'lgan elementlarning qatorini qaytaradi.

Standartlar shuni ko'rsatadiki, berilgan har qanday identifikator nomiga sahifa yoki hujjat ichida faqat bir marta murojaat qilish mumkin, ammo klassdan ko'p marta foydalanish mumkin. CSS-da sinf nomlari '' 'bilan to'ldiriladi. (ya'ni "div.container") va ID raqamlari "#" bilan belgilanadi (ya'ni "h3 oralig'i # sarlavha"). Albatta, tirnoqsiz (').

Sinflar umumiy va identifikatorlari o'ziga xosdir. Siz sahifada bir xil identifikatorli bitta elementga ega bo'lishingiz mumkin. Ammo sahifada bir xil sinf nomiga ega ko'plab elementlarga ega bo'lishingiz mumkin. CSS-da ID hash belgisi bilan, sinf esa nuqta bilan ko'rsatiladi. Html teglari va css uslublari quyidagi misollar sifatida ko'rsatilgan:

Agar men buni texnik bo'lmagan odamga tushuntirmoqchi bo'lsam, men buni shunday tushuntiraman.Siz sahifaga kiritgan CSS faqat o'sha sahifaga tegishli. Elementlarni aniqlash uchun sinf va ID raqamlari berilgan. Ushbu sahifani Dunyo, ID DNK identifikatori va Qon guruhi deb tasniflang.Odamlar orasida DNK noyobdir, shuning uchun u faqat bitta odamga tegishli (ya'ni ID) va qon guruhi takrorlanadi.Xulosa: Agar biz ID bilan element yaratsak, u faqat o'sha noyob shaxsga (ya'ni Elementga) tegishli va agar biz bir xil qon guruhiga ega bo'lgan guruhni yaratsak, u o'sha qon guruhiga ega bo'lganlarga (ya'ni Class) tegishli bo'ladi. Qon guruhi takrorlanishi mumkin, ammo DNK takrorlanmaydi.

Misollar:

1-misol.

HTML kodi.

DOCTYPE html>

   

   

   

 

   

   

       

       

       

       

       

   

   

       

       

       

       

       

   

Css kodi:

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}
body {

    width: 100%;

    height: 100%;background-color: rgba(243, 13, 13, 0.3);

}
.container_1 {

    width: 100%;

    height: 350px;

    background-color: white;

    padding: 100px;

    display: flex;

    text-align: center;

    justify-content: space-around;

}
.div1 {

    width: 200px;

    height: 200px;

    background-color: rgb(84, 64, 116);

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}
.div2 {

    width: 200px;

    height: 200px;

    background-color: red;

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}
.div3 {

    width: 200px;

    height: 200px;

    background-color: blue;

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}
.div4 {

    width: 200px;

    height: 200px;

    background-color: aqua;

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}
.div5 {

    width: 200px;

    height: 200px;

    background-color: green;

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}

.container_2 {

    width: 100%;

    height: 350px;

    background-color: white;

    padding: 100px;

    display: flex;

    text-align: center;

    justify-content: space-around;

    margin-top: 30px;

}
#div1 {

    width: 200px;

    height: 200px;

    background-color: yellow;

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}
#div2 {

    width: 200px;

    height: 200px;

    background-color: red;

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}
#div3 {

    width: 200px;

    height: 200px;

    background-color: blue;

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}
#div4 {

    width: 200px;

    height: 200px;

    background-color: rgb(84, 80, 133);

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}
#div5 {

    width: 200px;

    height: 200px;

    background-color: green;

    border-radius: 40px;

    box-shadow: 10px 10px 30px;

}

Natija:

Klasslarga misollar.

Idlarga misollar.

Html kodi.

DOCTYPE html>

   

   

   

   

   

   

       

Qizil Sarlavha

       

       

       
KATTA

   

Css kodi

*{

    padding: 0;

    margin: 0;

}

#Myheader {

    background-color: blue;

    height: 100vh;

}

#qizil {

    color: red;

}

#dumaloq {

    width: 100px;

    height: 100px;

    background-color: black;

    border-radius: 50%;

}

#oq {

    width: 100px;

    height: 100px;

    background-color: white;

    margin-top: 20px;

}

#katta {

    font-size: 100px;

}

Natija: