CSS: masa dizayn. qeydiyyat nümunələri

dərsin maraqlı və məsuliyyətli - CSS ilə masalar edilməsi. bu yanaşma bütün mümkün üslub bilik ilə, savadlı lazımdır. Bundan əlavə, onların yaradıcılıq baxış off qorxutmaq üçün, gözəllik hissi malik lazımdır.

masalar demək olar ki, hər şey çevirmək olar. Gözəl dizayn CSS masalar dizayn sərhədləri, masa fon, mobil fon, onlara və daha çox arasında boşluğu istifadə edir. ən əsas hesab edir.

masa sərhəd

CSS masa stil dizayn həmişə sərhəd (frame) ilə oyun daxildir. Bütün default masalar kontur çərçivəsində deyil. Ki, bu 0 piksel təşkil edir. Amma bu əmlak sərhəd ilə düzəldilə bilər.

Siz bütün masa xarici çərçivəsində daxil edə bilərsiniz:

masa {border: 3PX qara bərk; }

bu stil istifadə edir saytda masalar bu xətt sayəsində qara bir münasibət deyil. Qeyd kənarları, lakin masa daxilində sərhəd ki, yalnız. mobil xətləri və çərçivə üçün başqa ifadə edildi.

ci td {border: 3PX bərk qara;}

qalınlığı və rəng, hər hansı bir daxil edə bilərsiniz. hüceyrələri Splicing zaman sərhədləri iki dəfə deyil ki, unutmayın.

sözü möhkəm davamlı qeydiyyat bildirir. Siz digər dəyərləri daxil edə bilərsiniz.

Bu daha cəlbedici görünür kimi ən çox bərk çərçivəsində istifadə və saytın əsas məzmunu diqqəti yayındırmaq deyil.

sərhəd əmlak board da müəyyən edilə bilər. sərhəd yalnız sol və ya sağ üst, alt üçün müəyyən edilə bilər. Bəzi hallarda bu dəfə bütün masa üçün çərçivə ilə mümkün variant deyil.

masa {border-top: 1px red bərk; }

Belə ki, yalnız masa üst üçün çərçivə bilərsiniz. Eynilə hər hansı digər partiyaların, əvəzinə yalnız üst yazmaq üçün: sağ, sol və ya aşağı.

masa header

Cədvəl header tag istifadə müəyyən edilə bilər. Bu tag gözəl-tuning üçün xassələri bir çox qeydiyyatdan CSS ola bilər. Bu elementləri istədiyiniz yol manevr etmək mümkündür, çünki CSS masa dizayn yaxşıdır.

Bu adı (məsələn, "Cədvəl 1" kimi) kitab bir standart kimi eyni şəkildə göstərilir.

Siz adı və mülkiyyət mövzu-yan (üst və ya alt) yerini daxil edə bilərsiniz. sağ sol uyğunlaşdırılması və ya əmlak mətn align tərəfindən müəyyən edilir.

background masalar

masa Background hər hansı bir rəng və ya model ola bilər. Color əmlak background-color edir. çıxışında istifadə ilə tam uyğundur xassələrinin adları. Bu bir çox dəfə saxlanılması asanlaşdırır.

rəng adı və müxtəlif kodlamaları kimi müəyyən edilə bilər. Bundan əlavə, aşağıdakı daxil edə bilərsiniz:

• Şəffaf - Şəffaf.
• Varis - rəng valideyn element kimi eyni.
• İlkin - default.

şəffaflıq ilə Variantları CSS faylı mətn bütün masalar bir rəng edilir hallarda istifadə edilə bilər, lakin bu halda heç bir ehtiyac yoxdur.

Bundan əlavə, fon bir resim ola bilər. stil müəyyən background-image əmlak, Bunu etmək üçün. yol bu kimi:

url (URL)

fayl yolu nisbi və ya mütləq ola bilər.

Daha mürəkkəb doldurmaq bir gradient ilə edilə bilər:

• xətti-gradient ();
• radial-gradient ();
• təkrar-xətti-gradient () və təkrar-radial-gradient () - gradient təkrarladı.

background mobil

ümumi bir fon əlavə, siz sütun və ya satır bir zolaqlı fon daxil edə bilərsiniz. asan xətləri əyani ayrılması məlumat oxumaq çünki əmlakın qeydiyyatı üçün, çox tez-tez istifadə olunur.

əvəz əlavə, və müəyyən bir sütun və ya sıra sayı belirtebilirsiniz. oxşar Məsələn:

• tr: nth-uşaq (hətta) {...} - interlaced müəyyən;
• tr: nth-uşaq (1) {...} - Müəyyən bir sıra xassələrinin göstəricisi;
• td: nth-uşaq (hətta) {...} - sütunları alternativ bir göstəricisidir;
• td: nth-uşaq (1) {...} - Müəyyən bir sütun xassələri bir göstəricisidir.

ardıcıllıqla və nömrələr müəyyən edilə bilər Bundan başqa - ilk (td: ilk uşaq) və ya son (td: son uşaq).

hüceyrələri arasında boşluğu

CSS, masa dizayn hüceyrələri arasında boşluq aradan qaldırılması üçün imkan verir. Mənim cari olaraq onlar. Siz sərhədləri arasında məsafə qəbulu olmadan masa çərçivəsində əgər Məsələn, burada bu nəticə olacaq.

Razıyam, bu, çox gözəl görünür və oxumaq üçün rahat deyil. İstifadəçilər çünki bu gözündə ripple olacaq. masa stil belə bir xətt yazılı ola bilər ki, bu boşluqları aradan qaldırılması:

sərhəd-dağılması: dağılması

Lakin bu da məsafə, əksinə, artırılmalıdır ki, baş verir. Bundan başqa, boşluqlar ölçüsü sütun arasında xətləri arasında müəyyən edilə bilər. dəyəri (əvəzinə dağılması) göstərir ki:

sərhəd-dağılması: ayrı-ayrı

Lakin bu fəaliyyət bu hüceyrələri ayırmaq lazımdır ki, göstərir. onların payı olduğu kimi, əlavə əmlak göstərilən:

sərhəd-spacing: 20px.

siz satır ve sütun arasında müxtəlif məsafə müəyyən etmək istəyirsinizsə, bu iki şeyi göstərir:

sərhəd-spacing: 10px20px.

brauzerlərdə fərq

CSS dizayn masalar brauzer asılı olaraq, müxtəlif baxmaq bilər unutmayın. Xüsusilə pis CSS yeniliklər dəstəklənmir ki, eski versiyasını ilə belədir.

yuxarıda digital dəyərlər çərçivəsində qalınlığı bir nümunəsidir.

Bu, misal üçün, sabitləri üçün çərçivələr qalınlığı.

sərhəd üslub da çox fərqlənir.

Buna görə də, inkişaf həmişə müxtəlif brauzerlərdə nəticə görmək.

CSS dizayn masalar brauzerinizin növü yoxlamaq üçün tövsiyə. Xüsusilə istifadə böyük problem Internet Explorer eski versiyasını ilə istifadəçilər üçün olmalıdır.

Çox inkişaf etmiş developers, brauzer asılı olaraq tamamilə fərqli CSS faylları birləşdirmək bilər. Və kimsə hər bir çek və ya xüsusi stil (sinif) edir.

Ən çox problemləri kölgələr yaranır.

CSS: Table Format nümunələri

Qeydiyyat olduqca müxtəlif ola bilər. Bu, bütün bütün site və onun dizayn asılıdır. Bütün birləşdirilmiş və rəngarəng rəng olmalıdır. Həmçinin böyük rol və ləzzət geliştirici edir. gözəllik Sense bütün fərqlidir.

Biz müxtəlif masalar bəzi nümunələr verir. rəqəm yuxarıda tilt istifadə göstərir və fon rəngi və sərhəd ilə oynayır.

Bir çox göz istifadəçilər kəsmək olmaz ki, gözəl səliqəli dizayn maraqlı nümunə olacaq. Bu təcəssümü demək olar ki, hər hansı bir vəziyyətdə uyğun.

kənarları dairəvi edilə bilər. Bu olduqca gözəl görünür.

nəticə

Gördüyünüz kimi, CSS masa görünüşü üçün bir çox alətlər var. Hər bir parametr də dəyər variantları böyük məbləğdir. Siz bir dəfə bütün istifadə etsəniz, şah yarada bilərsiniz. Xüsusilə əgər adaptiv dizayn bütün brauzerlər üçün.

dizayn əsas şey - təsiri ilə ləzzətini qaçırmaq deyil. Hər şey insaf edilməlidir. Ilk, layout təcrübə və dərhal bütün bilik istifadə etmək istəyirəm. masa nəticəsində oversaturated xassələri vardır. bu səhvlərin qarşısını almaq üçün cəhd edin.

Bundan başqa, bəzi parametrlər bir-biri ilə təsir edə bilər. Məsələn, müəyyən etmək üçün heç bir ehtiyac yoxdur fon rəngi , masa hələ müəyyən rəng üst-üstə düşür background image, orada müəyyən olunur.