Sample Style Sheet bilan kaskadli jadvallar jadvallarini ko'rib chiqish
Veb-saytni noldan yaratganingizda, aniqlangan asosiy uslublardan boshlash oqilona. Bu toza tuvali va yangi cho'tkalar bilan boshlanganga o'xshaydi. Veb-dizaynerlar oldida turgan birinchi muammolardan biri, veb-brauzerlarning barchasi boshqacha. Standart shrift hajmi platformadan platformaga farq qiladi, standart shrift oilasi boshqacha, ayrim brauzerlar marjinlarni belgilaydi va tananing tagida to'ldiradi, boshqalari esa yo'q. Veb-sahifalaringiz uchun standart uslublarni belgilab, ushbu ziddiyatlarni ko'rib chiqing.
CSS va Belgilar to'plami
Avvalo birinchi narsa, sizning CSS dosyaning belgilar to'plamini utf-8ga sozlang. Siz yaratgan sahifalarning aksariyati ingliz tilida yozilgan bo'lsa-da, ba'zilari turli xil til va madaniy kontekst uchun mahalliylashtirilgan bo'lishi mumkin. Ular utf-8 jarayonini osonlashtiradi. Tashqi stil sahifasida belgilar majmuini o'rnatish HTTP sarlavhasidan ustunlikka ega bo'lmaydi, lekin boshqa barcha holatlarda ham shunday bo'ladi.
Belgilar to'plamini o'rnatish oson. CSS hujjatining birinchi qatori uchun quyidagilarni yozing:
@sharset "utf-8";Shunday qilib, agar siz xalqaro kontentdan tarkibni tarkibi yoki sinf va identifikatorlari nomidan foydalansangiz, uslublar jadvali ham to'g'ri ishlaydi.
Sahifa tanasini shakllantirish
Keyingi uslublar uchun standart uslublar varaqlari marjinalarni, bo'shliqlarni va chegaralarni nolga chiqarish uchun uslublardir. Bu barcha brauzerlarning kontentni bir joyda joylashtirilishiga va brauzer va kontent o'rtasida hech qanday yashirin joylar mavjudligiga ishonch hosil qiladi. Ko'pgina veb-sahifalar uchun bu matn uchun chetga juda yaqin, ammo fon tasvirlari va tartib bo'linmalari to'g'ri yo'lga qo'yilganligi uchun u erda boshlash muhimdir.
html, body {margin: 0px; to'ldirish: 0px; border: 0px; }Standart old fon yoki shrift rangi qora va asl fon rangini oq rangga o'rnating. Bu, ehtimol veb-dizaynlarning ko'pchiligi uchun o'zgarishi mumkin, bu tanadagi standart ranglar va HTML yorlig'iga ega bo'lishi avval sahifani o'qishni va ishlashni osonlashtiradi.
html, body {rangi: # 000; fon: #fff; }Standart shrift uslublari
Shriftning o'lchami va shrift oilasi loyiha bajarilganidan keyin muqarrar ravishda o'zgaradi, lekin 1 litr shrift o'lchami va Arial, Jeneva yoki boshqa ba'zi bir sans-serif yozuv shriftlari bilan boshlanadi. Em'lardan foydalanish sahifani iloji boricha erkin tutib turadi va sans-serif shrifti ekranda ko'proq o'qilishi mumkin.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Matnni topishingiz mumkin bo'lgan boshqa joylar bo'lishi mumkin, lekin p , th , td , li , dd va dt asosiy shriftni aniqlash uchun yaxshi boshlanishdir. HTML va tanani faqatgina o'z ichiga olishi mumkin, lekin ko'pgina brauzerlar shrift tanlovlarini bekor qiladi, agar siz faqat HTML yoki tanangiz uchun shriftlarni aniqlasangiz.
Yangiliklar
HTML sarlavhalari saytingizning konstruktsiyasiga yordam berish va qidiruv tizimini saytingizga yanada chuqurroq kiritish uchun foydalanish uchun muhimdir. Uslublarsiz, ularning barchasi juda chirkin, shuning uchun ularning hammasiga sukut uslublarini o'rnating va shrift oilasini va shrift o'lchamlarini har bir kishi uchun belgilang.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {shrift hajmi: 1.5em; } h3 {font-size: 1.2em; } h4 {harflarning o'lchami: 1.0em; } h5 {font-size: 0.9em; h6 {font-size: 0.8em; }Ulanishlarni unutmang
Bog'lanish ranglarini shakllantirish deyarli har doim dizaynning muhim qismidir, lekin agar siz ularni asl uslubda belgilab qo'ysangiz, ehtimol sizda so'zlovchilarning kamida bittasini unutasiz. Moyli ranglardagi ba'zi kichik farqlar bilan ularni belgilang va belgilangan sayt uchun rang palitrasi mavjud bo'lganda ularni o'zgartiring.
Ko'k ranglarda bog'lanishni o'rnatish uchun quyidagilarni tanlang:
- ko'k sifatida bog'langan
- havolalarni quyuq ko'k kabi ziyorat qildi
- havolalarni ochiq ko'k rang sifatida ko'rsatish
- faol havolalar , hatto ko'k rangda
bu misolda ko'rsatilganidek:
a: link {color: # 00f; } a: tashrif buyurilgan {color: # 009; } a: hover {color: # 06f; } a: faol {rang: # 0cf; } Ijobiy ranglar sxemasi bilan aloqani shakllantirish orqali sinflarning hech birini unutmayman, shuningdek ularni asl qiymati ko'k, qizil va binafsha ranglardan biroz balandroq qiladi.To'liq uslub sahifasi
Bu erda to'liq stil varaqchasi:
@sharset "utf-8"; html, body {margin: 0px; to'ldirish: 0px; border: 0px; rang: # 000; fon: #fff; html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {shrift hajmi: 1.5em; } h3 {font-size: 1.2em; } h4 {harflarning o'lchami: 1.0em; } h5 {font-size: 0.9em; h6 {font-size: 0.8em; } a: link {color: # 00f; } a: tashrif buyurilgan {color: # 009; } a: hover {color: # 06f; } a: faol {rang: # 0cf; }