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