Yordamida CSS rangi va fon veb-sahifaning deyarli barcha elementlarini o'rnatishingiz, fon rasmini, uning gorizontal va vertikal takrorlanishini erkin boshqarishingiz mumkin. Bundan tashqari, CSS-dan foydalanib, joylashishni aniqlash yordamida fon rasmini ekranning istalgan joyiga qo'yishingiz mumkin. Hali uzoqqa yugurmaylik, tartibda boraylik.

COLOR mulki

Ushbu xususiyat element rangini, aniqrog'i, element ichidagi matn rangini belgilaydi. Qiymat mumkin bo'lgan shakllardan birida ko'rsatilgan:

• rang nomi (Yashil, qora, qizil ...);
• o'n oltinchi rang kodi (008000, 000000, FF0000 ...);
• rGB-da o'nlik rang kodi (rang: rgb (40, 175, 250));

COLOR xususiyati meros qilib olinadi va agar biron bir element uchun qiymat ko'rsatilmagan bo'lsa, qiymat ota-onadan meros bo'lib olinadi. Ammo ajdod uchun ham o'rnatilmagan bo'lishi mumkin - keyin brauzerning uslublar varag'i standart qiymatlardan foydalangan holda qo'llaniladi. Bu holda elementlarning rangi qora rangga ega bo'lishi mumkin.

Yuqorida aytib o'tganimdek, deyarli barcha elementlar uchun rangni belgilashingiz mumkin, u (H1 ... H6), (kuchli, em) va hatto butun sonlar (p) va hatto jadval chegaralari bo'lishi mumkin, ammo keyinchalik bu haqda ko'proq ma'lumot.

Keling, CSS yordamida matn rangini o'rnatish misolini ko'rib chiqaylik:

h1 (rang: Moviy)

Ushbu misolda veb-sahifaning birinchi darajadagi barcha sarlavhalari ko'k rangda bo'ladi:

kuchli (rang: qizil)

Bunday holda, sahifa matnida bo'lgan hamma narsa yorliq bilan ta'kidlanadi kuchli, qizil rangga aylanadi.

Buni shunday yozish mumkin:

h1, p, kuchli (rang: yashil)

Keyin birinchi darajadagi sarlavhalar, barcha xatboshilar va yorliq bilan belgilangan barcha narsalar yashil rangga ega bo'ladi.

Sarlavhalarni turli xil ranglarda ajratib ko'rsatish zarurati tug'ilganda sinf selektorlaridan foydalaniladi. HTML-da sinfni aniqlash uchun atributdan foydalaning sinfhar qanday elementga qo'llanilishi mumkin. HTML kodida quyidagilarni yozishingiz kerak bo'ladi:

class \u003d "Moviy"\u003e Ushbu sinf sarlavhalarining rangi ko'k rangga ega bo'ladi

Jadvalda cSS uslublari, bu holda, biz selektor H1 elementi bo'lgan va (nuqta orqali) qoida yozamiz . ) sinf nomi:

h1.Blue (rang: ko'k)

HTML hujjatlarida identifikator selektorlari ham ishlatiladi, ular atribut bo'yicha aniqlanadi id... Identifikator sinfga qaraganda muhimroq yoki ustuvor xarakteristikadir. Va agar element uchun HTML kodida ikkala sinf va identifikator ko'rsatilgan bo'lsa, u holda identifikator uslubi qo'llaniladi. Identifikator xash belgisi bilan belgilanadi ( # ). HTML kodida identifikatordan foydalanish uchun quyidagilarni yozishingiz kerak bo'ladi:

id \u003d "Moviy"\u003e Ushbu identifikator sarlavhalarining rangi ko'k rangga ega bo'ladi

Uslublar jadvalida, o'z navbatida:

h1 # Moviy (rang: ko'k)

ZAMON - RANK Mulk

Ushbu xususiyat sizga sahifaning fon rangini, paragrafini, havolasini, umuman, istalgan HTML elementi uchun belgilashga imkon beradi. Buning uchun xususiyat qiymatida rang yoki qiymat belgilanadi. shaffof(shaffof). Sahifa fon uchun kod yoziladi:

tanasi (fon rangi: akva)

Bunday holda, sahifa fonida bo'ladi firuzava sarlavha uchun ma'lumot berish uchun quyidagilarni yozing:

h1 (fon rangi: sariq)

Birinchi darajadagi sarlavhalarning sariq fonini olamiz.

CSS rangi va fon

ZAMONNI QAYTA takrorlash Mulk

Ushbu xususiyat gorizontal va vertikal ravishda takrorlanishini aniqlash uchun berilganida ishlatiladi. Yaroqli qiymatlar:

• takrorlang - tasvir vertikal va gorizontal ravishda takrorlangan;
• takrorlash-x - tasvir faqat gorizontal ravishda takrorlanadi;
• takrorlash-y - tasvir faqat vertikal holda takrorlanadi;
• takrorlanmaydi - rasm takrorlanmaydi.

Kod quyidagicha yozilgan:

p (
fon-rasm: url ( rasm fayl manzili) ;
fon-takrorlash: takrorlash-x
}

Ushbu xat uchun matn gorizontal joylashtirilgan fon rasmining yuqori qismida bo'ladi.

ZAMONLARNI QO'ShIMChA MULK

Ushbu xususiyat brauzerga sahifaning orqa fon rasmi matn bilan aylanishi kerakligini aytish uchun ishlatiladi ( aylantirish) yoki harakatsiz qoling ( sobit).

tanasi (
fon-rasm: url ( rasm fayl manzili) ;
fon-takror: takror-x;
fon-biriktirma: sobit
}

Bunday holda, fon tasviri statsionar bo'lib qoladi.

MAQSADI MOSHA Mulk

Ushbu xususiyat tasvirni nisbatan nisbatan joylashtirish uchun ishlatiladi. Qiymatlar foizlarda (%), uzunlik birliklarida (sm, px), kalit so'zlar bilan o'rnatiladi:

• Vertikal:
• yuqori - rasmning yuqori qismi sahifaning yoki blokning yuqori chetiga to'g'ri keladi;
• markaz
• pastki - rasmning pastki qismi sahifaning yoki blokning pastki chetiga to'g'ri keladi.
• Gorizontal ravishda:
• chap - rasmning chap qirrasi sahifaning yoki blokning chap chetiga to'g'ri keladi;
• markaz - rasmning o'rtasi sahifaning yoki blokning o'rtasiga to'g'ri keladi;
• to'g'ri - rasmning o'ng qirrasi sahifaning yoki blokning o'ng chetiga to'g'ri keladi.

Biz kodni foizlarda, uzunlik birliklarida va kalit so'zlarda yozamiz:

tanasi (
fon-rasm: url ( rasm fayl manzili) ;
fon holati: 0% 0%
}

Tanasi (
fon-rasm: url ( rasm fayl manzili) ;
orqa fon holati: 10px 25cm
}

Tanasi (
fon-rasm: url ( rasm fayl manzili) ;
orqa-pozitsiya: yuqori markaz
}

Assalomu alaykum blog saytining aziz o'quvchilari. Bugun biz HTML-dagi har qanday element uchun fonni o'rnatishga imkon beradigan beshta CSS qoidalarini ko'rib chiqamiz - fon-pozitsiya (rasm, takrorlash, rang, biriktirma). Fon birikmasi qoidasini ham eslashni unutmaylik.

Bu erda hech qanday qiyin narsa yo'q, lekin tayyor shablon haqida bilishingiz kerak bo'lgan ba'zi nozikliklar va nuanslar mavjud (bu haqda har qanday dizaynning barcha nozik va nozik tomonlarini ochishingizga yordam beradi).

Sizga yana bir bor eslatib o'tamanki, ushbu maqola ketma-ketlikning bir qismidir va avvalo uslubni belgilashni o'rganishni boshlash yaxshiroq, ya'ni CSS nima va u nima bilan yeyilganligi haqidagi maqoladan so'ng, keyin ma'lumotnomada keltirilgan tartibda amal qiling. Garchi, har qanday holatda ham, bu sizga bog'liq, ammo endi fonni sozlash haqida gaplashamiz.

Rang, fon-rang va fon-rasm

Keling, avval rang qanday o'rnatilishini ko'rib chiqaylik HTML elementlari yordamida CSS-ning rang qoidalari... Aslida, bu erda hamma narsa oddiy. Sintaksis mutlaqo normal va siz rangni gipermatnni belgilash tilida qanday bajarilganiga qarab belgilashingiz mumkin. Esingizda bo'lsa, xash belgisidan (xash - "# fe35a3") keyin joylashtirilgan yoki uchta raqam ishlatilgan, agar birinchisi ikkinchisiga, uchinchisi to'rtinchi, yaxshi va beshinchisiga mos keladigan bo'lsa, oltinchisiga to'g'ri keladi (rang kodi "# aa33ff") qisqartirilishi mumkin "a3f").

Bundan tashqari, HTML va Css kodlaridagi ranglar so'z sifatida ifodalanishi mumkin (masalan, "qizil"), lekin o'n oltinchi kod ko'pincha ishlatiladi:

Rang: # 303

Misol tariqasida men ushbu kichik xatboshisini yuqoridagi rangga bo'yalganman (# 303). Endi u men foydalanadigan CSS faylida # 555 sifatida o'rnatilgan boshqa barcha xatboshilarning rangidan (quyuqroq) bir oz farq qiladi. wordPress mavzular... Ammo rangni rang bilan belgilash juda oddiy, ammo fon bilan u biroz murakkabroq bo'ladi.

Shunday qilib, cSS-dagi fon uchun agar xohlasa, bitta jamoaga birlashtirilishi mumkin bo'lgan beshta qoidalar mavjud. Ularni ko'rish uchun siz joriy W3C spetsifikatsiyasi sahifasiga o'tishingiz va Fon so'zi bilan biror narsani qidirishingiz mumkin:

1. fon rangi - bu qoida har qanday HTML elementi uchun fon rangini o'rnatadi. Unda siz kodni yoki soyaning nomidan foydalanishingiz mumkin, ya'ni. hamma narsa rangni ishlatishda bo'lgani kabi.

orqa fon rasmi - u bilan siz rasmni fon sifatida ishlatishingiz mumkin (lekin bu haqda o'qishni unutmang, chunki og'ir rasmlar sahifalarni yuklashni sekinlashtiradi), bu yo'l url () funksiyasida ko'rsatiladi.

Agar siz spetsifikatsiyani ko'rib chiqsangiz, buni ko'rasiz standart fon rangi har qanday element shaffof bo'ladi (qoidaning standart qiymati "fon-rang: shaffof" dir). Biroq, elementlarda u sukut bo'yicha shaffof bo'lmaydi, chunki bu tizim elementlari va ular gipermatnni belgilash tilining odatiy teglaridan farq qiladi va farq qiladi.

Fon rangining rangi standart sifatida o'rnatiladi (o'n oltinchi kodning olti yoki uchta raqami yoki so'z):

Fon rangi: #FEFCDE

Masalan, ushbu paragrafning fonida aniq yuqorida ko'rsatilgan rang kodi bilan fon rangi orqali aniqlanadi.

Boshqa to'rtta CSS qoidalari faqat har qanday HTML elementi uchun o'rnatiladigan va agar kerak bo'lsa, aniq joylashtirilgan fon rasmiga taalluqlidir. Qaysi grafik faylni ishlatishni sozlash mumkin fon-rasm.

Agar siz uslublarni belgilash tilining spetsifikatsiyasini ko'rib chiqsangiz, standart fon-rasm "yo'q" ekanligini ko'rasiz (ya'ni fon rasmi ishlatilmaydi). Xo'sh, agar siz hali ham bunga muhtoj bo'lsangiz, u holda url () funksiyasida unga yo'lni ko'rsatishingiz kerak bo'ladi:

Fon-rasm: url (https: //site/image/comment_top_focus.gif);

Masalan, ushbu paragraf uchun men yuqoridagi yo'l tasvirlangan fonli grafik fayldan foydalandim. Ushbu paragraf uchun ajratilgan butun maydon takrorlanadigan rasm bilan qoplanganligini ko'rishingiz mumkin, asl nusxada shunday ko'rinadi:

O'sha. grafik faylga yo'lni ko'rsatadigan bitta fon-rasm qoidasidan foydalanganda, ushbu rasm Html elementi uchun veb-sahifada ajratilgan maydonni qamrab olguncha vertikal va gorizontal ravishda ko'paytiriladi (bizning Masalan, bu xatboshi edi). Nima uchun bu sodir bo'layapti?

Fon-takrorlash - fon rasmini takrorlash

Ha, chunki biz CSS qoidasi uchun hech qanday qiymat yozmadik orqa-takrorlash, demak, buning uchun standart qiymat ishlatiladi. Spetsifikatsiyani ko'rib chiqib, ushbu qiymat "takrorlash" ga mos kelishini aniqlaymiz (rasmni barcha o'qlar bo'ylab takrorlash). Javob o'z-o'zidan paydo bo'ldi.

Shuning uchun, fonni takrorlash bilan biz qila olamiz fon rasmining takrorlanishlarini boshqarish... Ushbu qoida faqat to'rtta qiymatga ega bo'lishi mumkin:




Fon-pozitsiya - fonni joylashtirish

Endi savol tug'iladi, fon rasmini elementning o'lchamini cheklaydigan maydonning yuqori chap burchagidan uzoqlashtirish mumkinmi? Albatta siz qila olasiz va buning uchun alohida qoida mavjud fon holati:



CSS spetsifikatsiyasiga qarab, standart fon rasmi nima uchun Html elementi maydonining yuqori chap qismiga joylashtirilganligi aniq bo'ladi. "0% 0%" qiymati fon holati qoidasi uchun standart hisoblanadi.

Xo'sh, agar ushbu qoida element uchun aniq ko'rsatilmagan bo'lsa (bizda bo'lgani kabi), u holda brauzer spetsifikatsiyada qabul qilingan qiymatini tanlaydi (e'tibor bering CSS-dagi koordinata o'qlari maydonning yuqori chap chetidan xabar qilinadi) element).

Shuningdek, aniqlikdan fon rasmini fon-pozitsiya yordamida joylashtirish uchun nisbiy (foiz) va mutlaq qiymatlardan (masalan) foydalanish mumkinligini ko'rishingiz mumkin. Xo'sh, siz ma'lum bir raqamli qiymatlarga mos keladigan so'zlardan ham foydalanishingiz mumkin. Lekin birinchi navbatda birinchi narsa.

Fon rasmining joylashishini belgilashda mutlaq birliklardan foydalangan holda fon holatida uning yakuniy pozitsiyasini aniqlashning quyidagi printsipi amalga oshiriladi:

O'sha. brauzer hisoblab chiqadi chekkalarni o'rnatish ob'ekt joylashtirilgan maydonning paydo bo'lishidan X va Y o'qlari bo'ylab aynan shu tasvirning kelib chiqishiga qadar. Masalan, ushbu xatboshida men fon rasmini quyidagi CSS qoidalari yordamida fon holati orqali joylashtirdim:

Fon-rasm: url (https: //site/image/logo.png); fon-takrorlash: takrorlanmaslik; fon holati: 400px 25px;

Iltimos, ushbu holatda u ushbu paragraflar uchun ajratilgan maydonning markaziga emas, balki ko'rinish oynasining o'rtasiga to'g'ri kelishini unutmang. Haqiqatan ham fon tasvirining bunday joylashuvi ilova topishi dargumon.

Ammo, agar siz Body yoki Html (masalan, butun veb-sahifani qamrab oladigan teglarda) kabi elementlar uchun aniq fon holatini o'rnatgan bo'lsangiz, unda bu rasm ko'rinish oynasida har doim ko'rinib turadi va zamonaviy blokirovka tartibida CSS-ning fon-biriktirma xususiyati shunday ishlatiladi.

Yana bor prefabrik qoida, bu sizga yuqorida bayon qilingan barcha beshta qoidalarni bitta shishada birlashtirishga imkon beradi. Bundan tashqari, birlashtirilgan versiyadagi beshta uchun qiymatlar har qanday tartibda va har qanday miqdorda ishlatilishi mumkin (ular noyobdir va brauzer ularni bir-biriga aralashtirmaydi). Siz aniq ko'rsatmagan har qanday narsani brauzer standart qiymatga teng deb hisoblaydi.

Png) takrorlanmaydigan 50%;

Ushbu xatboshida aniqlik uchun misolda ko'rsatilgan yig'ilish qoidasi qo'llaniladi. Bu chiroyli emas edi, lekin bu asosiy narsa emas. Ushbu xatboshi uchun g'alati sariq rangdagi plomba, shuningdek LiveInternet logotipi paragrafning o'rtasiga to'g'ri keladigan rasm ishlatiladi. Chunki orqa fon qo'shimchasi qoidasi uchun hech qanday qiymat belgilanmagan, keyin aylantirish qiymati (standart) ishlatiladi.

Agar biron bir element uchun siz faqat rang bilan to'ldirishni xohlasangiz va fon tasviri bilan bezovta qilmasangiz, unda buning o'rniga osongina qilishingiz mumkin:

Fon rangi: #FEFCDE

yozing:

Fon: #FEFCDE

Birlashtirilgan qoidaning barcha boshqa qiymatlari sukut bo'yicha qabul qilinadi va bu sizga kerak bo'lgan narsadir.

Omad sizga! Yaqinda blog sayti sahifalarida ko'rishguncha

orqali ko'proq video tomosha qilishingiz mumkin

");">


Sizni qiziqtirishi mumkin

Ro'yxat uslubi (turi, tasviri, pozitsiyasi) - sozlash bo'yicha CSS qoidalari tashqi ko'rinish ro'yxatlar HTML kodi Nth-child pseudo-class yordamida saytdagi jadvallar, ro'yxatlar va boshqa HTML elementlarining o'zgaruvchan fon ranglarini qanday sozlash mumkin
Lavozim (mutlaq, nisbiy va qat'iy) - HTML elementlarini CSS-da joylashtirish usullari (chap, o'ng, yuqori va pastki qoidalar)
CSS-da blokirovka qilish vositalarini joylashtiring va tozalang
Sichqoncha kursorini o'zgartirish uchun Z-index va CSS Cursor qoidalari bilan joylashishni aniqlash

Menimcha, mulk ishlatilmaydigan bitta sayt yo'q CSS fon... Bu xususiyatdan ko'ra oddiyroq narsa nima bo'lishi mumkin? Ammo yo'q, uning imkoniyatlari sahifaning fonida rasm yoki rangning odatiy maqsadidan ancha kengroq. Biror narsa tanish bo'ladi, lekin bir narsa, albatta, ko'pchilik uchun yangilik bo'lib qoladi. Har qanday holatda, fonning qanday ishlashini to'liq bilish foydali bo'ladi.

CSS3 mulkka juda ko'p yangi narsalarni olib keldi, shu jumladan shaffoflik va bir nechta rasmlarni fon sifatida belgilash, lekin biz bu haqda quyida gaplashamiz va avval mulkning asoslarini ko'rib chiqamiz. fon.

fon rangi

Ishonchim komilki, siz fon ranglarini topshiriqlarini ko'p marta bajargansiz. Buni bir necha turdagi yozuvlar yordamida amalga oshirish mumkin: odatiy (rang nomi ishlatiladi), o'n oltinchi yoki RGB yozuvlari. Har bir tur teng, qaysi birini yoqtirsangiz foydalaning. Men eng qisqa versiyadan foydalanishga harakat qilaman, va idrok etish uchun bu oddiyroq va uslublar fayli hajmi biroz kichikroq.

P (fon-rang: qizil;) p (fon-rang: # f00;) p (fon-rang: # ff0000;) p (fon-rang: rgb (255, 0, 0;))

CSS3 shaffoflikni qo'llab-quvvatlaydi, shuning uchun uni bizning rangimizga qo'shishingiz mumkin:

P (fon rangi: rgba (255, 0, 0, 0.5);)

Oxirgi raqam 50% shaffoflikka o'rnatildi. Shaffoflik qiymatini 0 dan (to'liq) o'rnatishingiz mumkin shaffof fon) 1 ga (to'liq shaffof emas).

fon-rasm

Ushbu xususiyat, shuningdek, juda tez-tez ishlatiladi, bu sizga fonga rasm tayinlash imkonini beradi. CSS3 fonga bir nechta rasmlarni tayinlash qobiliyatini qo'shadi, ularning har biri o'ziga xos qatlam hosil qiladi, shuning uchun har bir keyingi rasm oldingisiga joylashtirilgan. Nima uchun bu foydali bo'lishi mumkin? Hammasi juda oddiy - aytaylik, saytning har bir burchagidagi kichik narsalarni mahkamlashingiz kerak. Bir rasm yordamida ozroq yoki ozroq suyuqlik tartibini taqdim etish imkoniyat emas. Shuning uchun, biz 4 ta "qatlam" qilamiz, har bir rasmni o'z burchagiga o'tkazamiz va shu bilan muammo hal qilinadi

Asosiy qism (fon-rasm: url ("image1"), url ("image2"), url ("image3"))

Agar siz bitta rasmni fonga tayinlashingiz kerak bo'lsa, biz kodda faqat birinchisini qoldiramiz, menimcha bu tushunarli.
Har qanday rasmni fon sifatida ishlatishda ikkita qoidani yodda tutish kerak:

• foydalanuvchi biron sababga ko'ra rasmni namoyish qila olmasa, kontrastli fon rangini o'rnating. Bu rasmlarning ko'rinishini o'chirib qo'yishi mumkin, trafikni tejashga imkon beradi.
• har qanday narsani etkazish uchun fon rasmidan foydalanmang muhim ma'lumotlar... Yuqorida aytib o'tilgan sababga ko'ra foydalanuvchi buni ko'rmasligi mumkin.

Bir nechta fon rasmlarini qo'llab-quvvatlash etarlicha keng. Barcha brauzerlar, hatto IE8 ushbu xususiyatni qo'llab-quvvatlaydi.

qisqa ma'lumot

CSS versiyalari

Qadriyatlar

HTML5 CSS2.1 IE Cr Op Sa Fx

Ob'ekt modeli

document.getElementById ("elementID") .style.backgroundImage

Brauzerlar

Internet Explorer 7.0 gacha va shu qatorda hasLayout xususiyati o'rnatilgan element chegarasining ichki qismiga fon qo'llaniladi. Agar elementda hasLayout bo'lmasa, background-image xususiyati spetsifikatsiyada ko'rsatilganidek element chegaralarini hurmat qiladi. Displeydagi farq chegaralar mustahkam emas, balki kesilgan yoki nuqta qo'yilgan bo'lsa sezilarli bo'ladi.

Agar element siljitish yoki avtomatik tarzda o'rnatilsa, Internet Explorer 8-da fon o'tsa, bitta pikselli vertikal kechikish bo'ladi.

Internet Explorer 7.0 yoki undan keyingi versiyasi meros qiymatini qo'llab-quvvatlamaydi.

Agar jadval satri (yorlig'i) uchun fon o'rnatilgan bo'lsa ), keyin Chrome, Safari, iOS uni spetsifikatsiya bo'yicha ko'rsatilmaydi, ya'ni har bir katak uchun alohida-alohida. Holbuki brauzer butun satr uchun mustahkam fon ko'rsatishi kerak. 2-misolda xatoni ko'rsatadigan kod ko'rsatilgan.

HTML5 CSS2.1 IE Cr Op Sa Fx

Natija ushbu misol yilda chrome brauzeri shaklda ko'rsatilgan. 1. Internet-brauzer Explorer, Opera va Firefox chiziq uchun fonni to'g'ri aks ettiradi (2-rasm).

Shakl: 1. Har bir katak uchun fonni takrorlash

Shakl: 2. Barcha chiziq uchun fon