Жишээ загварын хуудас бүхий Cascading Style Sheets-ийн тойм
Хэрвээ та вэбсайтаа зурж эхлэхэд үндсэн загварыг тодорхойлсон бол ухаалаг байх болно. Энэ нь цэвэр даавуугаар болон шинэ сойзоор эхлэхтэй адил юм. Вэб дизайнеруудтай тулгардаг хамгийн анхны асуудал бол вэб хөтчүүд бүгд өөр өөр байдаг. Анхдагч фонтын хэмжээ нь платформоос платформоос өөр платформоос өөр, анхдагч фонттой гэр бүл өөр өөр байдаг, зарим хөтөч нь байгууллагын шошгон дээр зардлын далайц, дэвсгэрийг тодорхойлж байхад бусад нь үгүй гэх мэт. Эдгээр вэбсайтуудын үндсэн хэв маягийг тодорхойлох замаар эдгээр зөрчилдөөнүүдийг тойрон эргүүлээрэй.
CSS болон Тэмдэгтийн Set
Юуны өмнө эхлээд зүйлс, CSS-ийн бичиг баримтуудын багцыг utf-8 болгож тохируулна . Таны дизайны хуудасны ихэнх нь англи хэл дээр бичигдсэн байж болох боловч зарим нь орон нутгийн шинжтэй, өөр өөр хэл, соёлын хувьд тохирсон байдаг. Тэдгээр нь utf-8 процессыг хялбаршуулдаг. Гадаад загварын хуудсан дахь тэмдэгтийн олонлогийг тохируулах нь HTTP толгойноос давтагдахгүй боловч бусад бүх нөхцөлд.
Тэмдэгт багцыг тохируулахад хялбар байдаг. CSS баримт бичгийн эхний мөрийг бичнэ үү:
@charset "utf-8";Энэ замаар, хэрэв та агуулгын шинж чанарт олон улсын тэмдэгтүүдийг ашигладаг, эсвэл анги, ID-ийн нэрийг ашигладаг бол загварын хуудас хэвээр ажиллах болно.
Page байгууллага
Дараагийнх нь хэв маягийн загварын хэрэгцээ нь хэв маяг, тэгшилж, хил хязгаарыг тэг болгох загвар юм. Энэ нь бүх хөтчүүдийг нэг газарт байрлуулж байгаа эсэх, мөн хөтөч болон контент хооронд ямар нэгэн далд зай байхгүй байна. Ихэнх веб хуудсанд энэ нь текстийн ирмэг дээр хэтэрхий ойрхон байдаг боловч арын зураг, байршлын хуваарийг зөв хэлбэрээр байрлуулах нь чухал юм.
html, body {margin: 0px; padding: 0px; border: 0px; }Анхдагч нүүрэн дээр эсвэл фонтын өнгийг тохируулахын тулд хар, үндсэн дэвсгэрийн өнгийг цагаан болго. Хэдийгээр энэ нь ихэнх вэбсайтын дизайнуудын хувьд өөрчлөгдөх боловч, эдгээр стандарт өнгөнүүд нь бие болон HTML дээр тавигддаг бөгөөд эхлээд хуудас унших, ажиллахад хялбар болгодог.
html, body {color: # 000; background: #fff; }Үндсэн үсгийн фонт
Фонтын хэмжээ болон фонтын гэр бүл загвар дизайныг үргэлжлүүлэхэд заавал зайлшгүй өөрчлөх ёстой зүйл боловч 1 em-ийн анхдагч фонтын хэмжээ болон Arial, Geneva, эсвэл бусад sans-serif фонтын анхдагч фонтоор эхэлдэг. Блог ашиглах нь аль болох хүртээмжтэй байлгах, sans-serif үсгийн фонт нь дэлгэц дээр илүү нээлттэй байх боломжтой.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Текстийг олох бусад газрууд байж болох ч p , th , td , li , dd , dt нь үндсэн фонтыг тодорхойлоход тохиромжтой эхлэл юм. Зөвхөн HTML болон биеийг оруулаарай, гэхдээ HTML эсвэл биед зориулсан фонтыг зөвхөн тодорхойлж бичдэг бол олон хөтөч фонтуудаа дарж өөрчлөх боломжтой.
Гарчиг
Хайлтын систем нь таны сайтын тоймд туслахын тулд HTML гарчгийг ашиглах нь чухал. Загвар байхгүй бол тэдгээр нь бүгд нэлээд муухай байдаг тул бүхэлдээ үндсэн хэв маягийг тохируулах, үсгийн фонт, фонтын хэмжээг тодорхойлно.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Don & # 39; t холбоосуудыг мартаарай
Загвар хоорондын холбоосыг зурах нь бараг үргэлж дизайны чухал хэсэг боловч хэрэв та анхдагч хэлбэрээр тодорхойлоогүй бол псевдо-ангиллын хамгийн багадаа нэгийг мартах магадлалтай. Тэдгээрийг цэнхэр дээр бага зэрэг өөрчилснөөр тодорхойлж, тухайн өнгөт палитрыг тодорхойлсны дараа тэдгээрийг өөрчлөх болно.
Цэнхэр өнгийн сүүдрүүд дэх холбоосуудыг тохируулахын тулд дараахийг тохируулна:
- цэнхэр өнгөтэй байна
- хар хөх өнгөтэй холбоосуудаар зочилсон
- холбоосууд нь цэнхэр өнгөтэй байна
- идэвхтэй холбоосууд нь цэнхэр өнгөтэй байна
Энэ жишээнд үзүүлсэн шиг:
a: link {color: # 00f; } a: visited {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; } Энэ холбоосыг нэлээн буруу өнгөт хэлбэрээр дүрслэх замаар би аль ч ангиасаа мартахгүй, мөн цэнхэр, улаан, ягаан гэхээсээ арай бага чанга дуу гаргах болно.Бүтэн загварын хуудас
Энд бүрэн загварын хуудас байна:
@charset "utf-8"; html, body {margin: 0px; padding: 0px; border: 0px; өнгө: # 000; background: #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 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: visited {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; }