CSS, veb səhifələrin görünüşünü təsvir etmək üçün bir dildə olan kaskad bir stil cədvəlidir. CSS-in əsas üstünlüklərindən biri masa düzülüşünü blok düzeni ilə əvəz etmək qabiliyyətidir.
Vacibdir
HTML kod redaktoru
Təlimat
Addım 1
İlk bloku yaradın. HTML şəklində, 'block01' id ilə div etiketi kimi görünür. Burada block01 identifikatoru CSS təsvirində bu blokun bütün xüsusiyyətlərinin # block01 seçicisi üçün göstərildiyini göstərir.
Addım 2
CSS-də bloku təsvir edin. CSS üslublarında identifikatorun adını (# block01) göstərin və buruq mötərizədə parametrlərini təsvir edin - genişlik, yerləşdirmə, ofset, arxa plan rəngi və s. Məsələn, belə görünə bilər: # block01 {width: 150px; hündürlük: 150 piksel; mövqe: mütləq; üst: 0px; sol: 0px; arxa rəng: çəhrayı}. Bu təsvirdə qutunun 150 piksel uzunluğunda və 150 piksel enində olacağını, sənədin sol yuxarı küncündə sərt şəkildə yerləşdiriləcəyini və arxa planının çəhrayı rəngdə olacağını düşünür.
Addım 3
Bloka nisbi bir konumlandırma verin. CSS təsvirində mütləq deyil, nisbi yerləşdirmə istifadə edirsinizsə, blokları bir koordinat cədvəlinə bərkitmə ilə deyil, mövcud olan digər bloklara nisbətən yerləşdirə bilərsiniz. Bunu etmək üçün kod mövqeyini dəyişdirin: mütləq; üst: 0px; sol: mövqeyə görə 0px: nisbi; üst: 200 piksel; sol: 100px.
Addım 4
Bloka yuvarlaqlaşdırın. CSS-də sərhəd radiusu ifadəsi bunun üçün məsuliyyət daşıyır. Stil cədvəlinizə aşağıdakı kodu əlavə edin: border-radius: 8px. Blok artıq yuvarlaq künclərə sahib olacaqdır. Yalnız bəzi küncləri yuvarlaqlaşdırmaq istəyirsinizsə, radiusu hər biri üçün ayrıca təsvir edin: haşiyə radiusu: 8px 8px 0px 0px.
Addım 5
Bloka vuruş verin. Bir bloğun konturunu nazik bir xəttlə vurğulamaq üçün CSS təsvirinə aşağıdakı kodu əlavə edin: border-top: 1px kəsikli qara. Bu təlimat blokun sərhədinin qara olacağını və qalınlığı bir piksel olacağını bildirir. Bu vəziyyətdə kontur xəttinin özü kəsikli bir xətt kimi göstəriləcək (kəsikli - nöqtəli bir xətt, nöqtəli - nöqtələr, möhkəm - möhkəm bir xətt).
Addım 6
Qalan blok xüsusiyyətlərini təyin edin. CSS təsvirində blokun içərisindəki mətn üçün hansı yazı tipindən istifadə edilməli olduğunu, blokun kənarından şrift ölçüsü, hizalanma və girinti nə olduğunu göstərin. Bu xüsusiyyətlər font-family, font size, text-align və padding təriflərində təsvir edilmişdir.
Addım 7
Bir blokun digərinin üstündəki axını fərdiləşdirmək üçün float xassəsini istifadə edə bilərsiniz. Əgər onu "sola" qoysanız, qalan elementlər solda, "sağda" isə sağda axacaq. Şamandıra dəyərini “yox” olaraq təyin etsəniz, blok hizalaması ayarlanmayacaq. CSS-dəki aydın xüsusiyyət blokun sağa, sola və ya hər iki tərəfə axmasına mane olur və float ifadəsini ləğv edir.
