Ushbu maslahatlar bilan faktlarni oling
Barcha veb-brauzerlar "nima defaulyar uslublar" deb nomlanadi. Bu boshqa uslublar ma'lumoti bo'lmaganida HTML elementlarining ko'rinishini va hisini belgilaydigan uslublar. Masalan, deyarli har bir brauzerda ko'priklarning asl ko'rinishi pastki chiziqli yorqin ko'k rangdir. Bu havolalar siz boshqacha tarzda namoyish qilishni aytmaguningizcha ko'rinadi.
Standart brauzer uslublari foydali bo'lishi mumkin, lekin ko'p hollarda veb-dizaynerlar ushbu uslublarni olib tashlashni xohlashadi, ular uslublarni 100% nazorat qilish uslubi bilan yangiladi. Bu "master uslublar jadvali" deb nomlanuvchi narsadan foydalanib amalga oshiriladi.
Asosiy uslublar jadvali sizning barcha hujjatlaringizda qo'ng'iroq qilgan birinchi uslub sahifasi bo'lishi kerak. Brauzerning veb-dizaynida muammolarga olib kelishi mumkin bo'lgan standart brauzer sozlamalarini tozalash uchun master uslublar jadvalidan foydalanasiz. Uslublar usta uslublar jadvalini o'chirib tashlaganingizdan so'ng, dizayningiz barcha brauzerlarda xuddi bo'yash uchun toza tuvali kabi bir xil joydan boshlanadi.
Global standartlar
Asosiy uslub sahifangiz sahifadagi chekka bo'shliqlarni, bo'shliqlarni va chegaralarni o'chirib tashlashni boshlashi kerak. Ba'zi veb-brauzerlar hujjatning korpusini brauzer paneli chekkasidan indekslangan 1 yoki 2 pikselga moslab qo'yadi. Bu ularning barchasi bir xil ko'rinishini ta'minlaydi:
html, body {margin: 0px; to'ldirish: 0px; border: 0px; }Bundan tashqari, shriftni izchil qilishni xohlaysiz. Shrift hajmini 100 foizga yoki 1em ga sozlaganingizga ishonch hosil qiling, shunda siz sahifangizga kirishingiz mumkin, ammo hajmi hali ham izchil. Va chiziq balandligini ishonch hosil qiling.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Sarlavha formatlash
Sarlavha yoki sarlavha teglari (H1, H2, H3, va hokazo) odatda sukut katta qalin harflar bilan qalin harflar yoki ularni atrofida to'ldiradi. Og'irliklar, chekka bo'shliqlar va to'ldirishlarni tozalash orqali siz ushbu teglar atrofdagi matndan qo'shimcha uslublar qolmay, katta (yoki kichikroq) turishini ta'minlaysiz:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; harflarning og'irligi: oddiy; harflarning oilasi: Arial, Helvetica, sans-serif; }Mavzu o'lchamlarini, harflar oralig'ini va satrlarni taglavhalaringizga belgilashni o'ylashingiz mumkin, lekin bu siz loyihalashtirgan sayt uslubiga bog'liq bo'lib, master uslub sahifasidan tashqarida bo'lishi kerak. Siz o'zingizning dizayneriz uchun zarur bo'lgan ushbu sarlavha uchun qo'shimcha jihozlarni qo'shishingiz mumkin.
Oddiy matnni formatlash
Sarlavhalar tashqari, tozalash kerakligiga ishonch hosil qilishingiz kerak bo'lgan boshqa matnli teglar ham bor. Odamlar tez-tez unutgan jadvallar, jadvallar xujayrasi belgilaridir (TH va TD) va formalar teglar (SELECT, TEXTAREA va INPUT). Agar ularni tanangiz va paragraf matnlari bilan bir xil o'lchamlarga o'rnatmasangiz, siz brauzerlarning ularni qanday ko'rsatganiga sizni yoqtirmaydigan bo'lishi mumkin.
p, th, td, li, dd, dt, ul, ol, blockquote, q, qisqartma, abbr, a, input, select, textarea {margin: 0; padding: 0; shrift: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Shuningdek, kotirovkalarni (BLOCKQUOTE va Q), qisqartirishlarni va qisqartirishlarni biroz qo'shimcha uslublar bilan ifodalash yaxshi.
blockquote {margin: 1.25em; padding: 1.25em} q {font-uslub: kursiv; } qisqartma, abbr {kursor: yordam; pastki taglik: 1px dashed; }Linklar va rasmlar
Linklar boshqarish oson va yuqorida ko'rsatilgan yorqin ko'k ostidagi matndan o'zgarishi mumkin. Men har doim aloqalarimning chizilganligini ta'kidlashni afzal ko'raman, lekin siz uni boshqa usul bilan tanlasangiz, ushbu variantlarni alohida belgilashingiz mumkin. Usta uslublar jadvalidagi ranglarni ham kiritmayman, chunki bu dizaynga bog'liq.
a, a: havola, a: tashrif buyurilgan, a: faol, a: hover {matn-dekoratsiya: chizilgan; }Tasvirlar bilan cheklovlarni o'chirish muhim. Ko'pgina brauzerlar tekis tasvir atrofida chegarani ko'rsatmasa ham, tasvir bog'liq bo'lsa, brauzerlar chegarani ochadi. Buni tuzatish uchun:
img {border: yo'q; }Jadvallar
Jadvallar tartib-maqsadlar uchun foydalanilmaganda ham, siz saytni ularni haqiqiy tablol ma'lumotlari uchun ishlatishingiz mumkin. Bu HTML jadvallarni yaxshi ishlatishdir. Biz allaqachon standart matn o'lchamlari jadval hujayralari uchun bir xil ekanligiga ishonch hosil qildik, lekin jadvallaringiz bir xil bo'lishi uchun siz o'rnatadigan bir necha boshqa uslublar mavjud:
jadval {margin: 0; padding: 0; chegara: yo'q; }Shakllar
Boshqa elementlarga o'xshab, sizning shakllaringiz bo'ylab chekkalarni va bo'shliqlarni tozalash kerak. Men qilmoqchi bo'lgan yana bir narsa - bu formadagi yorliqni " inline " deb qayta yozib qo'yish, shuning uchun u tagdagi kodni joylashtiradigan qo'shimcha joy qo'shmaydi. Boshqa matn elementlarida bo'lgani kabi, yuqoridagi matnni tanlash, textarea va kirish uchun shrift ma'lumotlarini belgilab qo'yaman, shuning uchun matnimning qolgan qismi bilan bir xil bo'ladi.
formasi {margin: 0; padding: 0; displey: inline; }Kursorni teglaringizni o'zgartirishni ham yaxshi bilish. Bu, odamlarga tegib chertganingizda biror narsa qilishini ko'rishga yordam beradi.
kirish {kursor: ko'rsatgich; }Umumiy kurslar
Usta uslublar jadvalining ushbu qismi uchun siz uchun mantiqiy bo'lgan sinflarni aniqlash kerak. Ular men eng ko'p ishlatadigan sinflardir. Ular ma'lum bir elementga o'rnatilmaganligini unutmang, shuning uchun ularni kerakli narsalarga belgilashingiz mumkin:
.clear {aniq: ikkalasi ham; } .floatLeft {float: chap; } .floatRight {float: o'ng; } .textLeft {text-align: left; } .textRight {text-align: o'ng; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * kengligi belgilashni unutmang * / .bold {font-weight: bold; } .italic {font-style: kursiv; }. {} {} matnni bezash: chizilgan; } .nointent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {to'ldirish: 0; } .nobullet {list-style: none; list-style-image: yo'q; }Shuni yodda tutingki, bu sinflar har qanday boshqa uslublardan oldin yozilgan va ular faqat sinflar bo'lib, keyinroq kaskadda paydo bo'ladigan o'ziga xos uslubiy xususiyatlarga ega bo'lishi mumkin. Biror elementga umumiy klass qo'yganingizni bilsangiz va u kuchga kirmasa, siz o'sha elementga ta'sir qiladigan keyingi uslub sahifalaridan birida boshqa uslub yo'qligini tekshirishingiz kerak.
Butun Usta Stil sahifa
/ * Global defolt * / html, body {margin: 0px; to'ldirish: 0px; border: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; harflarning og'irligi: oddiy; harflarning oilasi: Arial, Helvetica, sans-serif; } / * Matn uslublari * / p, th, td, li, dd, dt, ul, ol, blockquote, q, qisqartma, abbr, a, input, tanlang, textarea {margin: 0; padding: 0; shrift: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-uslub: kursiv; } qisqartma, abbr {kursor: yordam; pastki taglik: 1px dashed; } kichik {harflarning o'lchami: .85em; } katta {harflarning o'lchami: 1.2em; } / * Linklar va rasmlar * / a, a: havola, a: ziyorat qilingan, a: faol, a: hover {matn-dekoratsiya: Underline; } Img {border: none; } / * Jadvallar * / table {margin: 0; padding: 0; chegara: yo'q; } / * Shakllar * / form {margin: 0; padding: 0; displey: inline; } yorliq {kursor: ko'rsatgich; } / * Umumiy sinflar * / .clear {clear: both; } .floatLeft {float: chap; } .floatRight {float: o'ng; } .textLeft {text-align: left; } .textRight {text-align: o'ng; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * kengligi belgilashni unutmang * / .bold {font-weight: bold; } .italic {font-style: kursiv; }. {} {} matnni bezash: chizilgan; } .nointent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {to'ldirish: 0; } .nobullet {list-style: none; list-style-image: yo'q; }Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 10/6/17 yil tahrirlangan