Өөрийн вэбсайтын харагдах байдлыг сайжруулахад суралцаарай
CSS маягтыг хэрхэн загварчлах талаар суралцах нь вэбсайтынхаа харагдах байдлыг сайжруулах гайхалтай арга юм. HTML хэлбэрүүд нь ихэнх вэб хуудсын хамгийн муу зүйлүүдийн нэг юм. Тэдгээр нь ихэвчлэн уйтгартай, хэрэглээтэй байдаг.
CSS-ээр солигдох боломжтой. Илүү дэвшилтэт хэлбэрийн тэмдэг бүхий CSS-ыг хослуулан хэрэглэх нь зарим сайхан маягтуудыг хүргэх боломжтой.
Өнгө өөрчлөх
Текстийн адилаар та элементүүдийн нүүрэн талын болон арын өнгөийг өөрчилж болно.
Бараг бүх хэлбэрийн элементийн арын өнгийг өөрчлөх хялбар арга бол оролтын шошон дээр дэвсгэр өнгөний шинжийг ашиглах явдал юм. Жишээ нь, энэ код нь бүх элемент дээр цэнхэр дэвсгэрийн өнгө (# 9cf) хамаарна.
оролтын {
background-color: # 9cf;
өнгө: # 000;
}
Зөвхөн тодорхой хэлбэрийн элементүүдийн өнгөний өнгөийг өөрчлөхийн тулд текстээр нэмж, хэв маягтаа сонгоно уу. Жишээлбэл:
оролтын, текстар, сонгох {
background-color: # 9cf;
өнгө: # 000;
}
Хэрэв та өнгөтөө харанхуйлж байвал өнгөт текстийг өөрчлөх хэрэгтэй. Харьцуулалтын өнгө нь хэлбэрийн элементүүдийг ил тод болгоход тусалдаг. Жишээ нь, харанхуй улаан дэвсгэр дээрх текстийг текстийн өнгө нь цагаан байвал уншихад илүү хялбар байдаг. Жишээ нь, энэ код нь улаан дэвсгэр дээр цагаан текст байрлуулдаг.
оролтын, текстар, сонгох {
background-color: # c00;
өнгө: #fff;
}
Та ч гэсэн маягтын таган дээрх дэвсгэр өнгөийг тавьж болно. Form tag нь блок элемент гэдгийг санаарай, тиймээс өнгөний элементүүдийн байрлалыг төдийгүй бүхэл бүтэн тэгш өнцөгтийг дүүргэнэ.
Блок элементийг шар дэвсгэр дээрээс дараах байдалтай болгож болно:
хэлбэр {
background-color: #ffc;
}
Хил нэмэх
Өнгөний нэгэн адил та янз бүрийн хэлбэрийн элементүүдийн хилийг өөрчилж болно. Та бүхэл бүтэн хэлбэрийг нэг хил дээр нэмж болно. Тойрог нэмэх эсвэл таны маягтын элементүүд хилийн хажууд яг таарах болно.
5 пиксел дэвсгэртэй 1-пикселийн хар хилийн хувьд жишээлбэл:
хэлбэр {
border: 1px хатуу # 000;
padding: 5px;
}
Та зөвхөн хил хязгаарыг өөртөө хэлбэрээр тавьж болно. Оруулах зүйлийн хилийг өөрчилнө үү.
оролтын {
border: 2px тасархай # c00;
}
Хэрвээ та оролтын хайрцаг дээр хил дээр тавих бол болгоомжтой байгаарай. Зарим хүмүүс маягт бөглөж чадна гэдгээ мэддэггүй байж магадгүй.
Style Features хослолыг хослуулсан
Өөрийн хэлбэрийн элементийг санаа бодол, CSS хэлбэрээр нэгтгэснээр та сайтын зохион бүтээлт, зохион байгуулалтыг бүрэн дүүрэн сайхан хэлбэрээр байрлуулж болно.