Когато ти изграждане на уеб сайт от нулата, умно е да започнете с дефинираните основни стилове. Все едно да започнете с чисто платно и свежи четки. Един от първите проблеми, пред които са изправени уеб дизайнерите, е този уеб браузъри всички са различни. Размерът на шрифта по подразбиране е различен от платформата до платформата, семейството на шрифтовете по подразбиране е различно, някои браузъри дефинират полета и подплънки върху маркера на тялото, докато други не и т.н. Заобиколете тези несъответствия, като дефинирате стиловете по подразбиране за вашите уеб страници.
CSS и набор от символи
Първо, първо, задайте набора от символи на вашите CSS документи utf-8. Въпреки че е вероятно повечето от страниците, които проектирате, да са написани на английски, някои могат да бъдат локализирани - адаптирани към различен езиков и културен контекст. Когато са, utf-8 опростява процеса. Задаване на набор от символи в външен лист със стилове няма да има предимство пред HTTP заглавка, но във всички други ситуации ще го направи.
Лесно е да зададете набор от символи. За първия ред на CSS документа напишете:
@charset "utf-8";
По този начин, ако използвате международни символи в свойството на съдържанието или като имена на класове и идентификатори, таблицата със стилове ще продължи да работи правилно.
Оформяне на тялото на страницата
Следващото нещо, от което се нуждае таблицата със стилове по подразбиране, са стилове до нулиране на полета, подложки и граници. Това гарантира, че всички браузъри поставят съдържанието на едно и също място и няма никакви скрити интервали между браузъра и съдържанието. За повечето уеб страници това е твърде близо до ръба за текст, но е важно да започнете там, така че фоновите изображения и разделите на оформлението да са подредени правилно.
html, тяло {
марж: 0px;
подплата: 0px;
граница: 0px;
}
Задайте по подразбиране цвета на предния план или шрифта на черен и цвета на фона по подразбиране на бял. Въпреки че това най-вероятно ще се промени за повечето дизайни на уеб страници, като тези стандартни цветове са зададени върху тялото и HTML таг отначало прави страницата по-лесна за четене и работа с нея.
html, тяло {
цвят: # 000;
фон: #fff;
}
Стилове на шрифта по подразбиране
Размерът на шрифта и семейството на шрифтовете са нещо, което неизбежно ще се промени, след като дизайнът се задържи, но започнете с размер на шрифта по подразбиране 1 ем и по подразбиране шрифтово семейство на Arial, Женева или някои други шрифт без сериф. Използването на ems поддържа страницата възможно най-достъпна, а шрифтът без засечки е по-четлив на екрана.
html, body, p, th, td, li, dd, dt {
шрифт: 1em Arial, Helvetica, без засечки;
}
Може да има и други места, където може да намерите текст, но стр, ти, td, ли, дд, и dt са добро начало за дефиниране на основния шрифт. Включете HTML и тяло за всеки случай, но много браузъри отменят избор на шрифт ако дефинирате само шрифтовете си за HTML или тялото.
Заглавия
HTML заглавия са важни за използване, за да помогнат на сайта ви да се очертае и да позволи на търсачките да навлязат по-дълбоко в него. Без стилове, всички те са доста грозни, така че задайте стилове по подразбиране за всички тях и дефинирайте семейството на шрифтовете и размерите на шрифтовете за всеки.
h1, h2, h3, h4, h5, h6 {
семейство шрифтове: Arial, Helvetica, sans-serif;
}
h1 {размер на шрифта: 2em; }
h2 {размер на шрифта: 1.5em; }
h3 {размер на шрифта: 1.2em; }
h4 {размер на шрифта: 1.0em; }
h5 {размер на шрифта: 0.9em; }
h6 {размер на шрифта: 0.8em; }
Не забравяйте връзките
Стилът на цветовете на връзките е почти винаги критична част от дизайна, но ако не ги дефинирате в стиловете по подразбиране, има вероятност да забравите поне един от псевдокласовете. Определете ги с някои малки вариации на синьото и след това ги променете, след като определите цветовата палитра за сайта.
За да зададете връзки в нюанси на синьо, комплект:
- връзки като синьо
- посетени връзки като тъмно синьо
- връзки за задържане като светлосиньо
- активни връзки като още по-бледо синьо
Както е показано в този пример:
a: link {цвят: # 00f; }
a: посетен {цвят: # 009; }
a: hover {цвят: # 06f; }
a: активен {цвят: # 0cf; }
Чрез стилизиране на връзките с доста безобидна цветова схема, той гарантира, че няма да забравите нито един от класовете, а също така ги прави малко по-малко силни от стандартните синьо, червено и лилаво.
Пълен лист със стил
Ето пълната таблица със стилове:
@charset "utf-8";
html, тяло {
марж: 0px;
подплата: 0px;
граница: 0px;
цвят: # 000;
фон: #fff;
}
html, body, p, th, td, li, dd, dt {
шрифт: 1em Arial, Helvetica, без засечки;
}
h1, h2, h3, h4, h5, h6 {
семейство шрифтове: Arial, Helvetica, sans-serif;
}
h1 {размер на шрифта: 2em; }
h2 {размер на шрифта: 1.5em; }
h3 {размер на шрифта: 1.2em; }
h4 {размер на шрифта: 1.0em; }
h5 {размер на шрифта: 0.9em; }
h6 {размер на шрифта: 0.8em; }
a: link {цвят: # 00f; }
a: посетен {цвят: # 009; }
a: hover {цвят: # 06f; }
a: активен {цвят: # 0cf; }