Kimning yorlig'i qo'llaniladi?— strukturaviy hujjatlarga (masalan, HTML hujjatlari va XML plaginlari) uslub (masalan, shriftlar va ranglar) biriktirish imkonini beruvchi uslublar jadvali. Veb-sayt elementlari va mijozlar interfeyslari uslubini yaratish va o'zgartirish uchun ishlatiladigan CSS uslublarini o'rnating HTML filmlar

va XHTML, lekin XML, SVG va XUL kabi XML hujjatining istalgan turiga ham kompilyatsiya qilinishi mumkin.

Hujjatlar o'rniga hujjatlarni taqdim etish uslubini kuchaytirish orqali CSS veb-sahifalarni yaratish va saytlarga texnik xizmat ko'rsatishni soddalashtiradi.

CSS media uchun maxsus uslublar jadvallarini qo'llab-quvvatlaydi, shuning uchun mualliflar o'z hujjatlari taqdimotini vizual brauzerlar, eshitish asboblari, printerlar, brayl qurilmalari, ichak qurilmalari va boshqalarga moslashtirishi mumkin. Kaskadli uslublar jadvallari ushbu vakolatlarning vakolatlari va qabul qilinadigan qiymatlari asosida elementlarni formatlash qoidalarini tavsiflaydi.і Teri elementi uchun siz hokimiyatlar to'plamini tanlashingiz mumkin, boshqa organlar yangisiga oqib chiqmaydi. Ajoyib uslub va ikki qism:

lol qoldi

.

HTML element nomlari katta-kichik harflarni sezmaydi, shuning uchun "h1" "H1" bilan bir xil ishlaydi.

Ahmoqlik ikki qismdan iborat: kuchning mavjudligi (masalan, rang) va kuchning ma'nosi (kulrang).

Selektor brauzerga qaysi element formatlanayotgani haqida xabar beradi va chalkashlik blokida (jingalak qo'llardagi kod) formatlanayotgan buyruqlar ko'rsatiladi - vakolatlar va ularning ma'nolari. Guruch. 1. Ko'rlarning tuzilishi Ko'rsatish usuli HTML hujjatini ko'rsatish uchun zarur bo'lgan bir nechta boshqaruv elementlarini qo'shish uchun mo'ljallangan bo'lsa-da, uning o'zi uslublar jadvali sifatida tavsiflanadi. Boshqa uslublar jadvallari bilan birlashtirilganda (CSS-ning asosiy xususiyati uslublar jadvallari birlashtirilganligidir), qoida hujjatning qolgan qismiga nisbatan qo'llaniladi. Kaskadli uslublar jadvallarining turlari va ularning o'ziga xos xususiyatlari 1. Uslublar jadvaliga qarang

1.1. , media teg atributida uslublar jadvali qiymatini belgilash.

rel = "stylesheet" nashrning turini ko'rsatadi (uslublar jadvaliga joylashtirish).

type="text/css" atributi HTML5 standarti tomonidan talab qilinmaydi, shuning uchun uni o'tkazib yuborish mumkin.

Agar atribut kundalik bo'lsa, type="text/css" qiymati ishlatiladi. 1.2. Ichki uslublar Ichki uslublar

...

bo'linmaga qo'shiling

HTML hujjatlari tegning o'rtasida ko'rsatilgan . Ichki uslublar standart uslublarga (uslub atributi orqali ko'rsatilgan) yo'l berishdan ko'ra, tashqi uslublardan ustun turadi.

1.3.

Ilhomlantirilgan uslublar

Qachon yozsak

ilhomlantirilgan uslublar, biz CSS kodini HTML faylida, qo'shimcha uslub atributi orqasidagi element tegining o'rtasiga yozamiz:

Ushbu matnga hurmat bilan qayting.

Bunday uslublar ko'rsatilgan elementsiz ishlaydi.

1.4.

@import qoidasi@import qoidasi

Tashqi uslublar jadvallarini sozlash imkonini beradi.

@import direktivasi ishlashi uchun u boshqa qoidalardan oldin uslublar jadvalida (tashqi yoki ichki) kengaytirilishi kerak:

@import qoidasi veb-shriftlarni kiritish uchun ham ishlatiladi:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,kirill); 2. Selektorlarning turlari Tanlov

veb-sahifaning tuzilishini ifodalaydi.

Ularning yordami bilan veb-sahifa elementlarini formatlash qoidalari yaratiladi.

Selektorlar elementlar, ularning sinflari va identifikatorlari, shuningdek, psevdosinflar va psevdoelementlar bo'lishi mumkin.

Universal selektor

Shaxsiy kompyuterdan foydalanish bo'yicha ko'rsatmalar

2.4.

ID selektori Identifikator selektori formatlash imkonini beradi bitta

o'ziga xos element.

ID qiymatlari noyob bo'lishi mumkin, ular bir sahifada bir necha marta paydo bo'lishi va kamida bitta belgidan iborat bo'lishi mumkin.

Id, belgilar, identifikatorlar yordamida tuzilishi mumkin bo'lgan shakllarda raqamlardan boshlab, stullardan boshlab, faqat bo'linish belgilarini qo'shish va hokazolardan iborat bo'lishi mumkin bo'lgan boshqa ko'plab farqlar mavjud.

Noyob element identifikatori turli xil maqsadlarda ishlatilishi mumkin, masalan, turli fragmentlar identifikatorlari bilan hujjatning muayyan qismlarini yo'naltirish usuli yoki muayyan stsenariy davomida elementni nishonlash usuli CSS elementi.

#yon panel (kengligi: 300px; float: chap; ) 2.5. Tanlash paneli

Panel selektorlari konteyner elementining o'rtasiga joylashtirilgan elementlarga uslublarni o'rnatadilar.

Masalan, ul li (matnni o'zgartirish: katta harf;) - li ning barcha elementlarini tanlang, keyin esa ul ning barcha elementlarini tanlang.

Yostiqchalarni formatlash kerak bo'lganda

qo'shiq elementi

, uning elementiga uslublar sinfi berilishi kerak: p.first a (rang: yashil;) - bu uslub birinchi sinf bilan paragrafdagi barcha tafsilotlarga o'rnatiladi; p .first a (rang: yashil;) - agar siz bo'sh joy qo'shsangiz, u holda stilize qilingan xabarlar elementning yon tomonida joylashgan har qanday sinf tagining o'rtasiga joylashtiriladi.
Birinchidan a (rang: yashil;) - bu uslub sinf tomonidan belgilangan boshqa elementning o'rtasiga qandaydir xabar joylashtirilmaguncha turg'un bo'ladi. birinchi.

2.6.

Bolalar tanlovchisi

Bola element bevosita boshqa elementga joylashtiriladi.

Bitta elementda sprat bo'lishi mumkin

bolalar elementlari

2.8.

Atribut selektori

Atribut selektorlari atribut nomi yoki atribut qiymatiga qarab elementlarni tanlaydi:

[atribut] - atributni ko'rsatadigan barcha elementlar, - alt atribut vazifalari bajaradigan barcha elementlar;

selektor[atribut] - atribut sifatida foydalanish mumkin bo'lgan ushbu turdagi elementlar, img - faqat alt atributi ko'rsatilgan rasmlar; selektor[atribut="qiymat"] - atribut ko'rsatilishi uchun ushbu turdagi elementlar muayyan qiymatlar

, img - nomi gul so'zini o'z ichiga olgan barcha rasmlar; selektor [atribut~="qiymat"] - tez-tez ishlatiladigan elementlar ma'no berilgan

, masalan, agar elementga kliring bo'ylab bir nechta sinflar berilgan bo'lsa, p - paragraflar, ularning sinfi xususiyatni o'z ichiga oladi;

selektor [atribut | = "qiymat"] - elementlar, belgilangan so'z bilan boshlanadigan atribut qiymatlari ro'yxati, p - sinfi xususiyat yoki xususiyat bilan boshlanadigan paragraflar;

selektor [atribut ^ = "qiymat"] - atribut qiymatlari tayinlangan qiymatdan boshlanadigan elementlar, a - http:// bilan boshlanadigan barcha xabarlar;

selektor[atribut$="qiymat"] - atribut qiymatlari belgilangan qiymatlar bilan tugaydigan elementlar, img - png formatidagi barcha rasmlar;

selektor [atribut*="qiymat"] - atributi so'zni joylashtiradigan elementlar va - barcha xabarlar, qaysi kitobning nomlari.

2.9.

Psevdoklass selektori

Pseudo-klasslar sinflar emas, ular HTML teglariga deyarli biriktirilmagan.

Ular yaratish jarayonida CSS qoidalarini elementlargacha o'rnatishga imkon beradi yoki ular muayyan qoidaga bo'ysunadi.

Pseudo-sinflar rivojlangan hokimiyat elementlarini tavsiflaydi:

:hover - sichqoncha kursorini siljitish uchun qaysi elementdan foydalansangiz;

:fokus - qo'shimcha klaviaturaga o'tguningizcha yoki nishonni faollashtirmaguningizcha interaktiv element;

:aktiv - koristuvach tomonidan faollashtirilgan element;

:valid - shakl maydonlari, ularning o'rniga brauzer belgilangan ma'lumotlar turiga muvofiqligini tekshirishi kerak;

:invalid - belgilangan ma'lumotlar turiga mos kelmaydigan shakl maydonlari;

: yoqilgan - barcha faol shakl maydonlari;

:disabled - shakl maydonlari faol bo'lmagan holatda bo'lishi uchun bloklanadi;

:in-diapazonda - qiymatlari belgilangan diapazonda bo'lgan shakl maydonlari;

:diapazondan tashqari - qiymatlari belgilangan diapazonga kiritilmagan shakl maydonlari;

2.10.

Strukturaviy psevdo-sinf selektori

Strukturaviy psevdo-sinflar dumaloq qo'llar uchun ko'rsatilgan parametrga muvofiq bolalar elementlarini tanlaydi:

:nth-child(odd) - juftlashtirilmagan bolalar;

:nth-child(juft) - juftlashgan bolalar;

:nth-child(3n) - bolalar orasida uchinchi element;

:nth-child(3n+2) - boshqa asosiy elementdan boshlab uchinchi elementni tanlaydi (+2);

:nth-child(n+2) - boshqasidan boshlanadigan barcha elementlarni tanlaydi;

:nth-child(3) - uchinchi yordamchi elementni tanlaydi;

:nth-last-child() — ichki elementlar roʻyxatidan elementni belgilangan kengaytirish joyidan tanlaydi, shunga oʻxshash:nth-child() , lekin qolgan qismidan boshlab, darvozada;

:first-child - tegning faqat birinchi yordamchi elementini formatlash imkonini beradi;

:last-child - tegning oxirgi yordamchi elementini formatlash imkonini beradi;

:ly-child - bitta asosiy element bo'lgan elementni tanlaydi;

:bo'sh - o'z ichiga oluvchi elementlar bo'lmagan elementlarni tanlaydi;

:root - hujjatning ildizi bo'lgan elementni - html elementni tanlaydi.

2.11.

Strukturaviy psevdo-sinflarning selektori

Bolalar tegining ma'lum bir turini ko'rsating:

:nth-of-type() - shunga o'xshash elementlarni tanlaydi: nth-child(), bu element turini hisobga oladi;

:birinchi turdagi - bu turdagi birinchi asosiy elementni tanlaydi;

:last-of-type - bu turdagi oxirgi elementni tanlaydi;

:nth-last-of-type() — elementlar roʻyxatidan koʻrsatilgan aylanishgacha, oxiridan boshlab berilgan turdagi elementni tanlaydi;

:faqat turdagi - asosiy elementning pastki elementlarining o'rtasi turiga tayinlangan bitta elementni tanlaydi

2.12.

Pseudo element selektori

Pseudo-elementlar qo'shimcha quvvat tarkibi uchun ishlab chiqarilgan narsalar o'rniga qo'shilish uchun ishlatiladi:

:birinchi harf - blok elementlari bilan chegaralangan har bir xatboshining birinchi harfini tanlaydi;

:birinchi qator - element matnining birinchi qatorini, shu jumladan faqat blok elementlarini tanlaydi;

:befor — elementdan oldin hosil boʻlgan narsani kiritadi;

:after - elementdan keyin hosil bo'lgan narsalarni qo'shadi. 3. Selektorlar birikmasi.

Formatlash elementlarini aniqroq tanlash uchun siz selektor birikmalarini tanlashingiz mumkin:

img:nth-of-type(hatto) - barcha yigitlarning rasmlarini tanlang, qasos olish uchun muqobil matn

so'z css

4. Guruhlash selektorlari

Kuz va kaskad CSS-da bir-biri bilan chambarchas bog'liq bo'lgan ikkita asosiy tushunchadir. Bu pasayish elementlarning otasining kuchida (ulardan qasos oladigan element) kamayib borayotganligidadir. Kaskad kimda namoyon bo'ladi

turli qarashlar

Uslublar jadvali hujjatga birlashtiriladi, chunki ziddiyatli qoidalar bir-biriga qayta tayinlanadi. 5.1.

tinchlantirish

tinchlantirish

Bu kuch qo'shiqlari ajdoddan keyingi avlodga uzatiladigan mexanizmdir. CSS spetsifikatsiyasi rang, shrift, harf oralig'i, satr balandligi, ro'yxat uslubi, matnni tekislash, matnni chegaralash, matnni o'zgartirish, ko'rinish, oq kabi matn tomoniga tegishli boshqaruv elementlarini qisqartirishni ta'minlaydi. bo'shliq va so'z oralig'i. Aksariyat hollarda bu oddiy, chunki veb-sahifa terisi elementi uchun shrift o'lchami va shrift oilasini o'rnatishingiz shart emas.

Bloklarni formatlashda qiynalayotgan rasmiylar to'xtamayapti.

Bular fon, chegara, displey, suzuvchi va aniq, balandlik va kenglik, chekka, min-maks-balandlik va -kenglik, kontur, toʻldirish, toʻldirish, joylashish, matnni bezash, vertikal tekislash va z-indeks.

Primusovning dam olishi

Qo'shimcha yordam uchun

CSS uslublarini qanday o'rnatish va ishlash

2) Quyidagi uslublar jadvalida kengaytirilgan uslublar, yuqoridagi jadvalda kengaytirilgan uslublarni masshtablash;

3) Bitta elementgacha turli elementlardan uslublar birlashtirilishi mumkin.- bu bitta elementga turli CSS qoidalari qo'llanganda yakuniy natijani ta'minlaydigan mexanizm.

Hokimiyatni tashkil etish tartibini belgilaydigan uchta mezon mavjud - qoida!muhim, o'ziga xoslik va uslublar jadvalini kiritish tartibi.

Qoida!

Qoidalaringizni quvvat qiymatidan keyin darhol keladigan!important kalit so'zi yordamida o'rnatishingiz mumkin, masalan, span (shrift-og'irligi: qalin! muhim;) .

Qoida kamonni yopishdan oldin ovozning oxirida, bo'sh joysiz joylashtirilishi kerak. Ushbu shartnoma boshqa qoidalardan ustun turadi. Ushbu qoida, agar uslublar bilan faylga to'g'ridan-to'g'ri kirish imkoni bo'lmasa, bir vaqtning o'zida bir guruh elementlardan element uchun quvvat qiymatini belgilash va yangisini o'rnatish imkonini beradi.

Xususiyatlar
Teri qoidasi uchun brauzer hisoblab chiqadi
selektorning o'ziga xosligi
, va mojaroning elementi hokimiyatning zarbasi bo'lganligi sababli, biz eng katta o'ziga xoslikka ega bo'lgan qoidani hisobga olamiz.
O'ziga xoslik qiymati to'rt qismdan iborat: 0, 0, 0, 0.

Selektorning o'ziga xosligi quyidagi tartib bilan ko'rsatiladi:

id uchun 0, 1, 0, 0 qo'shiladi;

sinf uchun 0, 0, 1, 0 qo'shiladi;

teri elementi va psevdoelement uchun 0, 0, 0, 1 qo'shing; to'g'ridan-to'g'ri elementga qo'shilgan uslub uchun - 1, 0, 0, 0; Universal selektor aniq emas.

H1 (rang: ochiq ko'k;) /*o'ziga xoslik 0, 0, 0, 1*/ em (rang: kumush;) /*o'ziga xoslik 0, 0, 0, 1*/ h1 em (rang: oltin;) /* o'ziga xoslik: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.haqida (rang: ko‘k;) /*o‘ziga xoslik: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .yon panel (rang: kulrang;) /*oʻziga xoslik 0, 0, 1, 0 */ #sidebar (rang: to'q sariq;) /*o'ziga xoslik 0, 1, 0, 0*/ li#sidebar (rang: aqua;) /*o'ziga xoslik: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Elementning natijasi bir xil qoidalarga ega bo'ladi, ularning o'ziga xosligi kattaroqdir.
html-hikoyadagi element, har qanday talab uchun
Yoki CSS uslubini o'zgartiring.

CSS-dagi selektor turlari

Elementlar bo'yicha selektor

Kerakli CSS uslubini qo'shish uchun bu yigitga Selektor sifatida html elementining nomi yoziladi. Masalan, yozish kifoya talab qilinadigan uslub

H1 sarlavhasi uchun, shundan keyin bu sarlavhalar bizga kerakli ko'rinishni beradi.
Eksa kodi shunday bo'ladi:
}

H1 (

shrift o'lchami: 11pt;

Turli xil uslublarda sarlavhalar yaratish zarur bo'lganda, ko'pincha o'zgarishlar amalga oshiriladi.

Bu erda, bu muammoni hal qilish uchun sinf selektori yordam berishi mumkin.
Sinf selektori
Sinf selektori CSS-da universaldir.
Eksa kodi shunday bo'ladi:
}

Siz buni shunday yozishingiz mumkin: sinf nomidan oldin biz nuqta yozamiz, so'ngra jingalak qo'llarga kerakli uslubni ko'rsatamiz: .qizil (:

font-family: tahoma, sans-serif;

rang: qizil; Butt vikoristannya selektor sinf orqasida. "Keling, ushbu uslubni H1 sarlavhasiga qo'shamiz".
html sahifalar

sahifa sarlavhasi

CSS uslubi

qizil
Yana bir dumba.
Html qismi shunday deydi:
Bu sarlavha ko'k rangda, oldingi sinfning bo'laklari birlashtirilgan
}

Matn, bu teglarning joylashuvi o'zgartirilgan harflar va kulrang ranglar bilan bo'ladi

Yuqorida yozilganlarni amalga oshirish uchun siz CSS-ga quyidagi o'zgartirishlarni kiritishingiz kerak:

.koʻk (rang: koʻk;)

.kichik_kulrang(

shrift o'lchami: 12px;

rang: kulrang;

Shu tarzda, eng boshida sarlavha uslubi ko'rsatiladi (element bo'yicha tanlov), shundan so'ng, agar biron bir sarlavhaga o'zgartirish kerak bo'lsa, keyingi uslub yoziladi (sinf bo'yicha tanlov). Sinf yaratishda selektorga element bo'yicha qo'shish yoki o'zgartirish kiritishni talab qiladigan vakolatlarni ro'yxatdan o'tkazish kerak.".

Sinflarni nafaqat sarlavhalar, balki paragraflar, jadvallar, ularning o'rtalari va boshqalar bilan ham umumlashtirish mumkin.

Agar siz ishingizni faqat ma'lum bir elementga (masalan, paragrafga) kengaytirmoqchi bo'lsangiz, quyidagi misoldagi kabi ushbu elementni nuqtadan oldin yozing:

P.qora (rang:qora;)

Bu kombinatsiya P elementiga bevosita ta'sir qiladi.

Tanlovchi 3 identifikatori

Variantlar saytdagi qo'shni element uchun uslubni o'rnatish zarur bo'lsa ishlatiladi.

Atributning ushbu elementiga ehtiyot bo'ling " id.
Html hujjati quyidagicha ko'rinadi: Ushbu paragraf uchun uslubni o'rnating CSS hujjati uchun:

p#newsstyle (rang: ko'k; shrift o'lchami: 12px;)

Bachimo singari, biz birinchi navbatda H1 sarlavhasini yozamiz, bo'sh joy qo'yamiz, teg Ushbu paragraf uchun uslubni o'rnating va keyin vazifalarning kamonida bizda uslub mavjud.

So'zlar bilan ifodalanganda, buni shunday qilish mumkin: "Aniqlik uchun H1 teg sarlavhasining o'rtasida qalin matn qizil rangga ega bo'lishi mumkin."

Shunday qilib, siz markirovka qilingan ro'yxat elementlari, jadvallar va ularning o'rtalari va turli darajadagi hissalar uchun bir xil uslublarni o'rnatishingiz mumkin. -

Yon keladi CSS selektori nima?

- bu element yoki elementlar guruhining tavsifi bo'lib, u brauzerga ma'lum bir uslubda uslublash uchun qaysi elementni tanlash kerakligini ko'rsatadi.

1) .X.mavzu sarlavhasi (fon rangi: sariq; )

• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

Chrome

Safari Opera

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

3) *

Id uchun CSS selektori.

X CSS selektori oldidagi belgi id = X bo'lgan elementni tanlaydi. Id bo'yicha ko'pgina uslublar uning noyob ekanligini doimo yodda tutishi kerak - sahifaga faqat bitta id tayinlangan.

Sinflar, sinflar birikmalari yoki teg nomlari uchun selektorlardan foydalanish yaxshiroqdir.

Tim, kam emas, identifikatori bo'yicha selektorlarni avtomatlashtirilgan testda ishlatish mumkin, chunki

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

Qurilmaga kerakli element bilan to'g'ridan-to'g'ri ta'sir o'tkazishga ruxsat bering va sahifada faqat bitta turdagi mavjud ekanligini unutmang.

* (chekka: 0; toʻldirish: 0; ) Barcha elementlar uchun CSS selektori

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

.

Barcha sahifa elementlarining chekka va to'ldirish qiymatlarini tiklash (nol) uchun ushbu usuldan foydalanadigan ko'plab mutaxassislar mavjud. Tim kam emas, amalda bunday ishlamaslik yaxshiroqdir, chunki ushbu CSS selektori sahifadagi barcha elementlarni qidirish orqali brauzerga katta xalaqit berishi mumkin. CSS bolalar elementi selektori Vikoristlar ko'pincha suiiste'mol qilinadi.

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

G'olib bo'lish uchun ko'plab qiz elementlardan qo'shiq turining elementlarini tanlash kerak.

Bunday holda, ushbu selektordan foydalaning. Bunday selektorlarning vikoristlari va bog'ichlari, avvalo o'zingizdan so'rang va siz ko'rinadigan element uchun selektorlarning yanada qisqaroq ketma-ketligini vikorist qilishingiz mumkin. 6) X+Y div + p (shrift oilasi: "Helvetica Neue", Arial, sans-serif; shrift o'lchami: 18px; )

2) #X
• Murakkab element selektori
• .
• CSS selektori X sinfi
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• CSS selektori X sinfi

talon-taroj qiladi

Barcha sahifa elementlarining chekka va to'ldirish qiymatlarini tiklash (nol) uchun ushbu usuldan foydalanadigan ko'plab mutaxassislar mavjud. X elementidan keyin darhol keladigan Y tipidagi element. Ushbu turdagi teri paragrafi uchun teri elementi divdan so'ng darhol shriftning maxsus turi va hajmini tanlang.

.

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

X Y va X > Y selektorlari o'rtasidagi farq shundaki, selektor faqat o'rta yordamchi elementlarni tanlashda ko'rinadi (faqat to'g'ridan-to'g'ri maydonchalarni tanlash).

Ro'yxat elementi Ro'yxatdagi birinchi element

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

CSS selektori #content > ul faqat ul ni tanlang, u to'g'ridan-to'g'ri id = "konteyner" bilan div blokiga joylashtiriladi. Birinchi li bo'lgan ulni tanlamang. Bu kuchli CSS selektori..

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

8) X ~ Y

Opa-singil (shaling) elementlarning selektori kamroq suvory nizh X + Y. Vín birinchi biri sifatida tanlang va ol keyin ketadi boshqa elementlar p.

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

a: havola (rang: yashil; ) a: tashrif buyurilgan (rang: kulrang; )

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

Hali bosilmagan barcha xabarlarni tanlash uchun Vikorist.

psevdo-sinf: tashrif buyurgan

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

10) X

Atribut orqasidagi CSS selektori

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

.

Bu erda muntazam ifoda va $ belgisi qator oxirini ko'rsatish uchun ishlatiladi.

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

Kimning ilovasida biz kengaytmali rasmlarda qilingan barcha harakatlarni ko'rishimiz mumkin.

15) X Biz bu erda to'xtab qoldik Koristuvach atributining orqasidagi CSS selektori

.

Biz teriga kuchli ma'lumotlar fayl turi atributimizni qo'shamiz:

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

posilannya

Endi CSS selektori yordamida siz istalgan kengaytmali tasvirlarga olib keladigan barcha variantlarni tanlashingiz mumkin.

.

16) X

Tilde (~) bo'sh joy bilan ajratilgan atributlar ro'yxatida bitta atributni ko'rish imkonini beradi.

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

Siz bo'sh joylar bilan ajratilgan bir qator kalit so'zlarni o'z ichiga olgan data-info atributini ro'yxatdan o'tkazishingiz mumkin.

Bunga qo'shimcha ravishda biz kerakli atribut birikmalariga ega elementlarni tanlashimiz mumkin:

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

/* Elementni tanlang, istalgan tashqi qiymatning data-info atributi */ a (rang: yashil; ) /* Elementni tanlang, istalgan qiymat tasvirining data-info atributi */ a (chegara: 2px chiziqli qora; )

17) X: tekshirildi

kiritish:belgilangan (chegara: 3px bosh qora; )

Ushbu psevdo-sinf faqat belgilash qutisi yoki radio tugmasi kabi elementlarni ko'radi va ular allaqachon belgilangan holatda bo'lsa.

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

18) X: keyin

Clearfix:after (kontent: ""; displey: blok; aniq: ikkalasi; ko'rinish: yashirin; shrift o'lchami: 0; balandlik: 0; ) .clearfix ( *displey: inline-block; _height: 1%; )

Pseudo-sinfga yordam uchun bu erda: sinf bilan blokdan keyin. clearfix bo'sh qator yaratadi va keyin uni tozalaydi.

2) #X
• Ushbu yondashuv suiiste'mol qilinmoqda, chunki toshib ketish kuchini to'xtatib bo'lmaydi: yashirin .
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

19) X: hover

U sichqoncha kursorini sichqonchaga olib kelganda qo‘shiq aytish uslubini elementga muzlatib qo‘yadi. Internet Explorer-ning eski versiyalari ishlashni to'xtatadi: kursorni faqat u tugaguncha ushlab turing.

A: suring (chegara-pastki: 1px nuqtali ko'k; )

IE6+ (IE6da u faqat oxirigacha to'xtab qoladi)

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

20) X: emas (tanlovchi)

Psevdo-sinf emas (kesish)

Birinchi xatboshini tanlang:

P::birinchi harf (shrift oilasi: kursiv; shrift o'lchami: 30px; shrift og'irligi: qalin; to'ldirish-o'ng: 1px; )

Paragraf uchun birinchi qatorni tanlang:

P: birinchi qator (shrift o'lchami: 28px; shrift og'irligi: qalin; )

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Klasi varto vikoristovat stasovannya uchun bir xil uslub pastga ko'p elementlar.

22) X: birinchi farzand

Pseudoklas birinchi farzandi Ota elementining birinchi qismini tanlaydi. Ko'pincha ro'yxatdagi birinchi elementga chegara qo'shish uchun wiki mavjud..

2) #X
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• Bu psevdo-sinf tom ma'noda
• CSS 1

Opera 3.5+

23) X: oxirgi bola ul > li:oxirgi bola (chegara-pastki: yo‘q; ) Pseudo-sinf oxirgi bola.

2) #X
• faqat dan paydo bo'lgan Otaning Vín elementining qolgan qismini tanlaydi
• CSS selektori X sinfi
• .
• Id va sinf o'rtasidagi farq shundaki, bir xil sinf sahifadagi bir nechta elementlarda bo'lishi mumkin va id har doim yagona bo'ladi.
• CSS 3
• CSS 1

IE9+ (IE8 oxirgi emas, birinchi farzandni qo'llab-quvvatlaydi. Microsoft (c))

24) X: yagona bola div p: yolg'iz bola (rang: yashil; )

2) #X
• CSS selektori X sinfi
• .
• Pseudo-sinf yagona bola
• CSS 3
• CSS 1

Otalaringizning bir xil qismlari bo'lgan elementlarni tanlash imkonini beradi.

25) X:nchi bola(n) li:nth-child(3) (rang: qora; ) Parametrda ko'rsatilgan raqam bilan bola elementni tanlaydi. Pseudo-sinf oxirgi bola.

2) #X
• CSS selektori X sinfi
• n-chi bola selektori
• parametr sifatida butun sonni qabul qiladi, shuning uchun uni 1 dan olish kerak, keyin.
• CSS 3
• Agar siz ro'yxatdan boshqa elementni tanlashingiz kerak bo'lsa, li:nth-child(2) ni tekshiring.
• Vikoristannyam n-child dan barcha psevdo-sinflar faqat dan paydo bo'ldi

Firefox 3.6+

Android 2.1+ iOS 2.0+ 26) X:nchi-oxirgi bola(n)

2) #X
• CSS selektori X sinfi
• n-chi bola selektori
• parametr sifatida butun sonni qabul qiladi, shuning uchun uni 1 dan olish kerak, keyin.
• CSS 3
• Agar siz ro'yxatdan boshqa elementni tanlashingiz kerak bo'lsa, li:nth-child(2) ni tekshiring.
• Vikoristannyam n-child dan barcha psevdo-sinflar faqat dan paydo bo'ldi

li:nchi-oxirgi bola(2) (rang: qizil; )

Li:nth-child(109) yozish o'rniga siz vikory dan foydalanishingiz mumkin

2) #X
• CSS selektori X sinfi
• n-chi bola selektori
• parametr sifatida butun sonni qabul qiladi, shuning uchun uni 1 dan olish kerak, keyin.
• CSS 3
• Agar siz ro'yxatdan boshqa elementni tanlashingiz kerak bo'lsa, li:nth-child(2) ni tekshiring.
• Vikoristannyam n-child dan barcha psevdo-sinflar faqat dan paydo bo'ldi

qolgan pedlarning selektori nth-oxirgi-child

Bu usul birinchisi bilan bir xil, lekin oxiridan oxirigacha davom etadi. 27) X: n-tur (n)

2) #X
• CSS selektori X sinfi
• n-chi bola selektori
• parametr sifatida butun sonni qabul qiladi, shuning uchun uni 1 dan olish kerak, keyin.
• CSS 3
• Agar siz ro'yxatdan boshqa elementni tanlashingiz kerak bo'lsa, li:nth-child(2) ni tekshiring.
• Vikoristannyam n-child dan barcha psevdo-sinflar faqat dan paydo bo'ldi

ul:nth-of-tur(3) (chegara: 1px nuqtali qora; )

28) X: turining oxirgisi (n) ul:turning oxirgi turi(3) (chegara: 2px tizma koʻk; )

2) #X
• CSS selektori X sinfi
• Psevdoklas n-turning oxirgisi(n)
• parametr sifatida butun sonni qabul qiladi, shuning uchun uni 1 dan olish kerak, keyin.
• CSS 3
• Agar siz ro'yxatdan boshqa elementni tanlashingiz kerak bo'lsa, li:nth-child(2) ni tekshiring.
• Vikoristannyam n-child dan barcha psevdo-sinflar faqat dan paydo bo'ldi

qo`shiq turi z kintsyaning n-elementini tanlashga topshiriqlar.

li:faqat turdagi (shrift vazni: qalin; ) Yagona turdagi psevdo-sinf

2) #X
• CSS selektori X sinfi
• Psevdoklas n-turning oxirgisi(n)
• parametr sifatida butun sonni qabul qiladi, shuning uchun uni 1 dan olish kerak, keyin.
• ota elementining devorlari orasida joylashgan elementlarni tanlaydi.
• Agar siz ro'yxatdan boshqa elementni tanlashingiz kerak bo'lsa, li:nth-child(2) ni tekshiring.
• Vikoristannyam n-child dan barcha psevdo-sinflar faqat dan paydo bo'ldi

Masalan, siz barcha ullarni tanlashingiz mumkin, ular faqat bir xillarga mos keladi. Firefox 3.5+ har xil turdagi uslublarni birlashtirish va uslublarni tashqi teglardan ichki teglar bilan birlashtirish imkoniyatini ko'rsatadi.

CSS - bu hujjatning ko'rinishini nazorat qilish imkonini beruvchi vositadir.

CSS spetsifikatsiyasi HTML elementlari bilan bog'lanish uchun kuch va tavsifni beradi.

CSS - bu veb-hujjatning tashqi ko'rinishini belgilaydigan abstraksiya.

Ushbu uslublar barcha brauzerlar tomonidan qo'llab-quvvatlanmaydi.

Biroq, har qanday uslubni tanib olish mumkin, shuning uchun qo'llab-quvvatlanmaydigan uslublar e'tiborga olinmaydi.

Agar atribut kundalik bo'lsa, type="text/css" qiymati ishlatiladi.

Ehtimol, sizga ham kerak bo'ladi: Uslublarni qo'shish usullariga ko'ra, hujjat uslublarning uch turiga bo'linadi. Ichki uslublar atribut bilan ko'rsatilgan

uslub

maxsus teglar.

Ichki uslub faqat elementlarning qo'shiq teglariga ta'sir qiladi.

maxsus teglar.

Bu usul an'anaviy HTMLdan kam farq qiladi.

dumba

Ko'k rangdagi matnli paragraf

NATIJA: Matnga qizil rang bilan paragraf ... .

Ichki uslublarni tez-tez o'zgartirish tavsiya etilmaydi, chunki veb-hujjat kod bilan qayta ishlab chiqilganga o'xshaydi va uning tashqi ko'rinishini o'zgartirish muhimdir. Global uslublar Global CSS uslublari konteynerga joylashtirilgan .........

, tortmasidan idishga soling