CSS бол вэб хуудасны гадаад төрхийг дүрслэх хэл болох каскад хэлбэрийн хүснэгт юм. CSS-ийн гол давуу талуудын нэг бол хүснэгтийн байршлыг блокийн байрлалаар солих явдал юм.
Энэ нь зайлшгүй шаардлагатай
HTML код засварлагч
Зааварчилгаа
1-р алхам
Эхний блокыг үүсгэх. HTML хэлбэрээр энэ нь id 'block01' бүхий div tag шиг харагдах болно. Энд block01 танигч CSS тайлбар дээр энэ блокийн бүх шинж чанаруудыг # block01 сонгогчдод зориулж зааж өгсөн болохыг харуулж байна.
Алхам 2
CSS дээрх блокийн талаар тайлбарлана уу. CSS хэв маягт танигчийн нэрийг зааж өгөх хэрэгтэй (# block01) ба буржгар хаалтанд түүний параметрүүдийг тайлбарлах - өргөн, байршил, офсет, дэвсгэр өнгө гэх мэт. Жишээлбэл, иймэрхүү харагдаж магадгүй юм: # block01 {width: 150px; өндөр: 150px; албан тушаал: туйлын; дээд: 0px; зүүн: 0px; дэвсгэр өнгө: ягаан}. Энэхүү тодорхойлолт нь хайрцаг нь 150 пикселийн урт, 150 пикселийн өргөнтэй байх бөгөөд баримт бичгийн зүүн дээд буланд хатуу байрлалтай байх бөгөөд дэвсгэр нь ягаан өнгөтэй байх болно.
Алхам 3
Блоконд харьцангуй байрлалыг өгнө үү. Хэрэв та CSS-ийн тодорхойлолтод үнэмлэхүй биш, харин харьцангуй байрлалыг ашигладаг бол координатын сүлжээнд хатуу байрлалгүй, харин одоо байгаа бусад блокуудтай харьцуулж блокуудыг байрлуулж болно. Үүнийг хийхийн тулд кодын байрлалыг өөрчлөх хэрэгтэй: туйлын; дээд: 0px; зүүн: байрлалаар 0px: харьцангуй; дээд: 200px; зүүн: 100px.
Алхам 4
Блокыг дугуйруулж өг. CSS-т хилийн радиусын мэдэгдэл үүнийг хариуцдаг. Дараах кодыг өөрийн хүснэгтэд нэмнэ үү: border-radius: 8px. Блок нь дугуйрсан булантай болно. Хэрэв та зөвхөн зарим буланг тойрон эргэлдэхийг хүсвэл радиусыг тус бүрт нь тусад нь тодорхойлно уу: border-radius: 8px 8px 0px 0px.
Алхам 5
Цус харвалт өгөх. Блокны тоймыг нимгэн шугамаар тодруулахын тулд дараах кодыг CSS тайлбартаа нэмнэ үү: border-top: 1px тасархай хар. Энэ заавар нь блокийн хүрээ хар өнгөтэй байх бөгөөд зузаан нь нэг пиксел болно гэсэн үг юм. Энэ тохиолдолд контурын шугамыг өөрөө тасархай шугам хэлбэрээр харуулах болно (тасархай - тасархай шугам, тасархай - цэг, хатуу - хатуу шугам).
Алхам 6
Үлдсэн блок шинж чанаруудыг тохируулна уу. CSS тайлбар дээр блок доторх текстэнд ямар үсгийн хэлбэр хэрэглэх, фонтын хэмжээ, блокийн ирмэгээс ямар хэмжээтэй, догол мөр оруулахыг зааж өгнө үү. Эдгээр шинж чанаруудыг font-family, font-size, text-align, padding гэсэн тодорхойлолтуудад тайлбарласан болно.
Алхам 7
Та нэг блокийн нөгөөгөөр дамжих урсгалыг өөрчлөхийн тулд float шинж чанарыг ашиглаж болно. Хэрэв та үүнийг "зүүн" гэж тохируулсан бол үлдсэн элементүүд нь зүүн талд, "баруун талд" баруун талд нь урсана. Хэрэв та float утгыг "none" гэж тохируулсан бол блокийн тохируулгыг тохируулахгүй. CSS доторх тодорхой шинж чанар нь блокийн баруун, зүүн, эсвэл хоёр тал руу урсахаас сэргийлж, float операторыг хүчингүй болгодог.
