Хэрвээ та ямар нэгэн зургийн программ дээр ажиллаж чаддаг бол энэ ойлголтыг та мэдэх байх. Бусад хүмүүст тайлбарлая. Ямар нэгэн юм бичсэн эсвэл зурсан олон тооны цаасан хуудас байна гээд бодъё. Бид зөвхөн эхний хуудас дээрх агуулгыг л харах болно. Хэрвээ эхний хуудсыг авчихвал дараагийн хуудсны агуулгыг харна гэх мэтээр. Үүний адилаар CSS -д бид хэд хэдэн үе үүсгээд үе бүрдээ хэрэгтэй элементүүдээ байршуулаад тэдгээрийг z-index шинжийн тусламжтайгаар дугаарлан өгч болдог. Үеийн дугаар их байх тусам тухайн үе давхрагад дээгүүр байрлана. Жишээ нь бид 6 үе хийсэн байхад хэрэглэгч эхлээд z-index:6 үеийг харах юм. Үеийг дэлгэгдэх цэсийг хийхэд ихэнхдээ ашигладаг.

HTML -д бид хуудаст элементүүдийг байршуулахдаа хүснэгтийг ашигласан. Хүснэгтийн хувьд ашиглахад хялбар, төрөл бүрийн хөтөч дээр ижилхэн харагддаг гээд давуу талууд байдаг ч их хэмжээтэй, код уншигдах талаасаа хүнд, бүтцийн логик муутай гээд сул талуудтай.
CSS -д элементүүдийг байрлуулахдаа блокийг (div) ашигладаг. Ингэснээр хуудасны код логик сайтай, авсаарсан, өөрчлөлт оруулахад амархан болдог. Хуудсыг блокоор үүсгэх аргын дутагдалтай талууд гэвэл хөтөчүүд яг ижил дэмжин ажилладаггүйд оршино. Иймээс хөтөч программуудад хөрвөх боломжтой кодыг бичих хэрэгтэй болдог. Өөрөөр хэлбэл төрөл бүрийн хөтөч дээр бараг ижилхэн харагдах код гэсэн үг.
За ингээд эхэлье. Бидэнд ийм нэгэн стандарт html хуудас байя гэе.

Хэвийн үндсэн хүснэгт

Бид reset.css файлыг зохиох үед түүнийг html файлд холбоос ашиглан шууд оруулахгүй сайтын хэвийн үндсэн хүснэгтээс түүнийг дуудах талаар дурдсан. Мэдээжээр та хүсвэл бүх CSS файлуудыг HTML кодоос холбоос үүсгэн оруулан ирж болно. Гэхдээ би кодын дээд хэсгийг цэвэрхэн байлгах үүднээс үүнийг хийхгүйгээр шийдсэн байгаа.
Одоо бид хэвийн үндсэн хүснэгтээ үүсгэх хэрэгтэй. Би голдуу үндсэн хүснэгтийг style.css гэж нэрлэдэг. Харин та түүнийг main.css, master.css, screen.css гэх мэтээр яаж ч нэрлэж болно. Хэвийн үндсэн хүснэгтэнд бид манай reset болон тесктийг хэлбэржүүлэх typography файлуудыг оруулан ирнэ. Үүнийг бид @import дүрмийг ашиглан оруулах юм.

Бид өмнөх хичээлээр сайтын дээд хэсэгт хэрэгтэй зургуудыг PSD макетаас үүсгэн авсан болохоор дээд хэсгийн CSS кодчлолыг эхлэх цаг нь болсон. Өмнөх хичээл танд фотошоп программыг ашиглах дадлагын сайн хичээл болсон гэдэгт найдаж байна. За ингээд хичээлдээ орцгооё.

Дээд хэсгийг кодчлол

Сануулахад сайтын дээд хэсгийн html код

<div id="status-bar">
    <div id="status-bar-content">
        <form action="#search" method="post" id="search-form">
            <p>
            <input type="text" name="query" value="Хайлт" />
            <input type="submit" name="submit" value="Хайлт!" />
            </p>
        </form>
        <div id="status-bar-commands">
            <p id="welcome">Тавтай морил, Зочин</p>
            <p id="action-bar">
                <a href="#login" title="Login">Нэвтрэх</a>
                <a href="#sitemap" title="Sitemap">Сайтын карт</a>
                <a href="#license" title="License">Лиценз</a>
            </p>
        </div>
    </div>
</div>