Nümunə Style Vərəqi ilə Kağızlaşdırma Stillərinin Baxışları
Bir veb saytını sıfırdan qurarkən, müəyyən edilmiş əsas üslublarla başlayan ağıllıdır. Təmiz kətan və təzə fırçalar ilə başlayan kimi. Veb-dizaynerlərin üzləşdiyi ilk problemlərdən biri veb-brauzerlərin fərqli olmasıdır . Standart font ölçüsü platformadan platforma fərqlənir, default font ailəsi fərqlidir, bəzi brauzerlər marjinləri müəyyənləşdirir və başqaları olmadıqda vücut etiketində dolğunlaşdırır və s. Veb səhifələriniz üçün default üslubları müəyyən edərək, bu tutarsızlıqları əldə edin.
CSS və Karakter Seti
Əvvəlcə ilk növbədə, CSS sənədlərinizin karakter dəstini utf-8- ə qoyun . Layihə səhifələrinizin əksəriyyəti ingilis dilində yazılmışdır, bəziləri linqvistik və mədəni kontekstdə lokallaşdırılmış ola bilər. Onlar olduqda, utf-8 prosesi asanlaşdırır. Xarici stildə göstərilən xarakterlərin müəyyən edilməsi bir HTTP başlığından üstün olmayacaq, lakin digər bütün hallarda bu olacaq.
Karakter dəstini qurmaq asandır. CSS sənədinin ilk sətri üçün:
@ şarset "utf-8";Bu yolla, məzmun əmlakında beynəlxalq simvol və ya sinif və şəxsiyyət adları kimi istifadə edərsəniz , stil hesabatı düzgün işləməyəcəkdir.
Səhifənin bədənini tərtib etmək
Bir öncə stil stilinə ehtiyac duyulan növbəti şey marjin, padding və sərhədləri sıfırlamaq üçün üslubdur. Bu, bütün brauzerlərin məzmunu eyni yerdə yerləşdirdiyini və brauzer və məzmun arasında heç bir gizli boşluq olmadığından əmin olur. Çox veb səhifələr üçün bu mətnin kənarına çox yaxındır, ancaq fon şəkilləri və layout bölmələrinin düzgün şəkildə düzəldilməsi üçün orada başlamaq vacibdir.
html, body {margin: 0px; padding: 0px; sərhəd: 0px; }Əvvəlki ön və ya yazı rəngini qara və default fon rəngini ağa qoyun. Bu, ən çox veb-dizaynları üçün dəyişir, bədənin üstünə qoyulmuş bu standart rəngləri və HTML etiketini ilk dəfə oxumaq və işləməyə asanlaşdırır.
html, bədən (rəng: # 000; fon: # ff; }Standart Font Stillər
Şriftin ölçüsü və font ailəsi, dizaynın tutulmasından sonra 1 em default şrift ölçüsü və Arial, Cenevrə və ya başqa bir sans-serif şriftinin default font ailəsindən başlayaraq qaçılmaz şəkildə dəyişəcək bir şeydir. Ems-dən istifadə etmək, səhifəni mümkün qədər əlçatan saxlayır və sans-serif fontları ekranda daha aydın ola bilər.
html, bədən, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Mətn tapacaq başqa yerlər ola bilər, amma p , th , td , li , dd və dt əsas yazı tipini müəyyənləşdirmək üçün yaxşı bir başlanğıcdır. Yalnızca HTML və bədən daxildir, ancaq HTML və ya bədən üçün yazı tiplərini müəyyənləşdirdiyiniz halda, bir çox brauzerlər font seçimlərini ləğv edirlər.
Mövzular
HTML başlıqları, saytınızın xülasəsi və axtarış motorlarının sitenize daha dərinləşməsinə kömək etmək üçün istifadə etmək vacibdir. Üslub olmadan onlar olduqca çirkindir, buna görə də hamısı üzərində default üslubları təyin edin və hər bir font ailəsini və font ölçüsünü təyin edin.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Bağlantıları Unutmayın
Bağlantı rənglərini tərtib etmək demək olar ki, həmişə dizaynın vacib hissəsidir, ancaq siz onları üslubda müəyyən etmədiyiniz təqdirdə, ən azı yalançı siniflərdən birini unutursunuz. Müəyyən bir site üçün rəng palitrası olduqda onları mavi bir az dəyişmə ilə təyin edin və sonra onları dəyişdirin.
Mavi gölgelerdeki bağlantıları qurmaq üçün aşağıdakıları seçin:
- göy kimi bağlar
- əlaqələri qaranlıq olaraq ziyarət etdi
- əlaqələri açıq mavi rəngdə göstərin
- hətta paler mavisi kimi aktiv əlaqələr
bu nümunədə göstərildiyi kimi:
a: link (rəng: # 00f; } a: ziyarət edilmiş {color: # 009; } a: hover {color: # 06f; } a: aktiv {color: # 0cf; } Bağları çox ədalətli bir rəng sxemi ilə tərtib edərək, mən heç bir sinifləri unutmayacağam və həm də onlara mavi, qırmızı və bənövşəyi rənglərdən daha az səs verir.Tam Sifarişlər
Tam stil var:
@ şarset "utf-8"; html, body {margin: 0px; padding: 0px; sərhəd: 0px; rəng: # 000; fon: # ff; html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: ziyarət edilmiş {color: # 009; } a: hover {color: # 06f; } a: aktiv {color: # 0cf; }