Эдгээр зөвлөмжүүдийг баримтаар олж аваарай
Бүх вэб хөтөч нь "муу хэв маягийг" гэж ойлгох болно. Эдгээр нь бусад төрлийн хэв маяг байхгүй тохиолдолд HTML элементүүдийн харагдах болон мэдрэмжийг тодорхойлох загвар юм. Жишээ нь, бараг бүх хөтөч дээр hyperlinks-ийн үндсэн харагдах байдал нь товчлуур бүхий тод цэнхэр өнгө юм. Энэ нь тэдгээрийг өөр аргаар харуулахыг хэлээгүй л бол эдгээр холбоосууд харагдаж байна.
Стандарт браузерын загвар нь тустай байж болох боловч ихэнх тохиолдолд вэб дизайнерууд эдгээр загваруудыг устгахыг хүсч байгаа бөгөөд ингэснээр тэд 100% хянах боломжтой стильтэй болж эхэлдэг. Үүнийг "мастер хэв маяг хуудас" гэж нэрлэдэг.
Мастер хэв маяг хуудас нь таны бүх баримт бичигт таны эхний загвар болох ёстой. Та интернетийн хөтөч вэбсайтын дизайн дахь хүндрэл учруулж болох анхдагч вэб хөтөчийн тохиргоог арилгахын тулд мастер загварчилсан хуудсыг ашигладаг. Мастер стильшн хавтастай стилийг цэвэрлэж дууссаны дараа таны дизайныг бүх браузер дээрээс нэг газраас эхлэн зураг зурах зориулалттай цэвэр даавуугаар хийсэн байдаг.
Глобал Стандартууд
Таны мастер загвар хуудсууд хуудасны зах, хонгил, хил хязгаарыг гаргах ёстой. Зарим Вэб хөтөч нь баримт бичгийн биед браузерын ирмэгүүдийн ирмэгээс 1 эсвэл 2 пиксель хүртэл анхдагч байдаг. Энэ нь бүгд ижилхэн болохыг харуулж байна:
html, body {margin: 0px; padding: 0px; border: 0px; }Та мөн үсгийн маяг тохируулахыг хүсч байна. Мөн үсгийн хэмжээг 100 хувь эсвэл 1ем болгон тохируулаарай, ингэснээр таны хуудас хүртээмжтэй байх боловч хэмжээ нь хэвээр байна. Мөн мөрний өндөрийг оруулах хэрэгтэй.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Толгойн формат
Толгой эсвэл толгойн таг (H1, H2, H3, гэх мэт) нь ихэвчлэн тод текст руу чиглүүлэх бөгөөд тэдгээрийн эргэн тойронд их хэмжээний хөндлөнгөөс хамааралтай. Жин, хажуу, дэвсгэр зэргийг цэвэрлэсний дараа эдгээр таагууд нэмэлт стилүүдгүйгээр эргэн тойрон дахь текстээс илүү том (эсвэл жижиг) байлгахыг анхаарна уу.
h1, h2, h3, h4, h5, h6 {margin: 0; Налуу: 0; фонт-жин: хэвийн; font-family: Arial, Helvetica, sans-serif; }Та тодорхой хэмжээ, үсэг, зай талбайг өөрийн гарчигт тэмдэглэгээ болгож тохируулахыг хүсч болох юм. Гэхдээ энэ нь таны дизайн хийх сайтуудын хэв маягаас шууд хамаарна. Тодорхой дизайн хийхдээ эдгээр гарчигт илүү олон загварыг нэмж болно.
Энгийн текст форматлах
Гарчигнаас гадна бусад зүйлсийг текстийн хаягуудаар устгах хэрэгтэй. Хүмүүс ихэвчлэн мартдаг нэг л хүснэгт нь хүснэгт эсийн хаягууд (TH ба TD) ба хаягууд (SELECT, TEXTAREA болон INPUT). Хэрэв та тэдгээрийг өөрийн бие болон догол мөрийн тексттэй адил хэмжээгээр тохируулахгүй бол хөтчөөс тэдгээрийг хэрхэн үзүүлж байгаад тааламжгүй байж болох юм.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; Налуу: 0; фонт: хэвийн хэвийн хэвийн 1em / 1.25 Arial, Helvetica, sans-serif; }Таны буулга (BLOCKQUOTE ба Q), товчилсон үгс, товчилсон үгс нь бага зэрэг нэмэлт хэв маягийг өгөхөд таатай байна:
blockquote {маржин: 1.25em; padding: 1.25em} q {font-style: italic; } товчлол, abbr {cursor: help; border-bottom: 1px тасархай; }Холбоос ба Зураг
Холбоосууд нь удирдахад хялбар бөгөөд дээр дурдсан тод цэнхэр өнгийн доогуур зураасыг өөрчлөх боломжтой. Миний доогуур зурааснууд нь доогуур зураастай байхыг илүүд үздэг боловч хэрэв та үүнийг өөр замаар сонговол эдгээр сонголтуудыг тусад нь тохируулж болно. Мастер загварын хуудсан дээрх өнгө оруулаагүй тул дизайнаас хамаарна.
a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }Зургуудаар хил хязгаарыг унтраах нь чухал юм. Ихэнх хөтчүүд нь энгийн дүрсийг тойрсон зургийг харуулдаггүй бол, зурагтай холбосон үед хөтчүүдийг хилээр эргүүлнэ. Үүнийг засахын тулд:
img {border: none; }Хүснэгтүүд
Хэдийгээр хүснэгтийн байршлын зориулалтаар ашиглагдахаа больсон ч, танай сайтын хувьд тэдгээрийг жинхэнэ tabluar өгөгдөлд ашиглаж болно. Энэ бол HTML хүснэгтүүдийн сайн хэрэглээ юм. Бидний хүснэгтийн нүдэнд анхны текстийн хэмжээ ижил байна гэдэгт бид итгэлтэй байгаа боловч таны хүснэгтүүд ижил хэвээр байх ёстой хэд хэдэн өөр өөр загварууд байдаг:
table {margin: 0; Налуу: 0; border: none; }Маягтууд
Бусад элементүүдийн нэгэн адил та маягтуудыг тойрсон зах, талбайнуудыг цэвэрлэх хэрэгтэй. Миний хийхийг хүсч байгаа бас нэг зүйл бол " inline " гэсэн хэлбэрийн хаягыг дахин бичих бөгөөд ингэснээр та кодонд шошгыг байршуулах нэмэлт зай нэмэхгүй. Бусад текстийн элементүүдийн нэгэн адил сонгох, textarea болон оруулгын фонтыг тодорхойлохын тулд би текстийнхээ үлдсэн хэсэгтэй ижил байна.
form {margin: 0; Налуу: 0; дэлгэц: inline; }Мөн шошгон дээрээ курсорыг өөрчлөх нь зүйтэй юм. Энэ нь хүмүүс шошгон дээр дарахад ямар нэгэн зүйл хийх болно гэдгийг харахад тусалдаг.
шошго {курсор: заагч; }Нийтлэг ангилал
Мастер загварын хуудсын энэ хэсэгт таныг ойлгох хичээлүүдийг тодорхойлно. Эдгээр нь хамгийн их ашигладаг зарим хичээлүүд юм. Эдгээр нь ямар нэг элемент дээр тохируулагдаагүйг анхаарна уу, ингэснээр тэдгээрийг хэрэгцээтэй бүхэнд өгч болно:
.гэж тодорхой: хоёулаа; } .floatLeft {float: left; } .floatRight {float: right; }. textLeft {текст-align: left; } .textRight {text-align: right; }. textCenter {текст-шугам: төв; } .textJustify {текст-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * Өргөн * / .bold тохируулахыг санаарай {font-weight: bold; } .italic {font-style: italic; }. secondary {text-decoration: underline; } .харин {margin-left: 0; Доошоо үлдээх: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {жагсаалт-style: none; жагсаалт-style-image: none; }Эдгээр ангиуд өөр ямар ч загвараас өмнө бичигдсэн тул тэдгээр нь зөвхөн ангиуд юм. Учир нь эдгээр ангиуд нь дарааллын үед илэрч байдаг илүү тодорхой хэв маягийн онцлог шинжийг агуулдаг. Хэрэв та элемент дээр нийтлэг анги үүсгэхийг хүсч байгаа бөгөөд энэ нь хүчин төгөлдөр бус байвал та ижил элементэд нөлөөлөх сүүлчийн хэв маягуудын аль нэгэнд өөр ямар ч загвар байхгүй эсэхийг шалгах хэрэгтэй.
Бүх мастер хэв маяг
/ * Global Defaults * / html, body {margin: 0px; padding: 0px; border: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0; Налуу: 0; фонт-жин: хэвийн; font-family: Arial, Helvetica, sans-serif; / / Текстийн Styles * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; Налуу: 0; фонт: хэвийн хэвийн хэвийн 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {маржин: 1.25em; padding: 1.25em} q {font-style: italic; } товчлол, abbr {cursor: help; border-bottom: 1px тасархай; } жижиг {үсгийн хэмжээ: .85em; } том {үсгийн хэмжээ: 1.2em; } / * Холбоосууд ба зурагнууд * / a, a: холбоос, a: зочилсон, a: active, a: hover {text-decoration: underline; } img {border: none; } / * Хүснэгт * / table {margin: 0; Налуу: 0; border: none; } / * Forms * / form {margin: 0; Налуу: 0; дэлгэц: inline; } шошго {курсор: заагч; } / * Common Classes * / .clear {clear: both; } .floatLeft {float: left; } .floatRight {float: right; }. textLeft {текст-align: left; } .textRight {text-align: right; }. textCenter {текст-шугам: төв; } .textJustify {текст-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * Өргөн * / .bold тохируулахыг санаарай {font-weight: bold; } .italic {font-style: italic; }. secondary {text-decoration: underline; } .харин {margin-left: 0; Доошоо үлдээх: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {жагсаалт-style: none; жагсаалт-style-image: none; }Женнифер Кэрнин эх нийтлэл. 10/6/17 дээр Жереми Герард засварлав