Када ти направите веб страницу од нуле, паметно је започети са основним дефинисаним стиловима. То је као да започнете са чистим платном и свежим четкама. Један од првих проблема са којима се суочавају веб дизајнери је тај веб прегледачи сви су различити. Подразумевана величина фонта се разликује од платформе до платформе, подразумевана породица фонтова се разликује, неки прегледачи дефинишу маргине и допуне на ознаци тела, док други не, итд. Заобиђите ове недоследности дефинисањем задатих стилова за ваше веб странице.
ЦСС и скуп знакова
Прво, прво подесите скуп знакова ЦСС докумената на утф-8. Иако је вероватно да је већина страница које дизајнирате написана на енглеском језику, неке могу бити локализоване - прилагођене различитим језичким и културним контекстима. Када јесу, утф-8 поједностављује поступак. Подешавање скупа знакова у спољни табела стилова неће имати предност над ХТТП заглавље, али у свим осталим ситуацијама хоће.
Лако је поставити скуп знакова. У први ред ЦСС документа напишите:
@ цхарсет "утф-8";
На овај начин, ако у својству садржаја користите међународне знакове или као имена класа и личних карата, табела стилова и даље ће радити исправно.
Стилизовање тела странице
Следећа ствар која је задата табела стилова потребна су стилови до поништавање маргина, попуњавања и ивица. Ово осигурава да сви прегледачи смештају садржај на исто место и да између прегледача и садржаја нема скривених простора. За већину веб страница ово је преблизу ивици текста, али важно је започети тамо да би се позадинске слике и делови распореда правилно поредали.
хтмл, боди {
маржа: 0пк;
попуњавање: 0пк;
граница: 0пк;
}
Подесите подразумевану боју предњег плана или фонта на црну, а подразумевану боју позадине на белу. Иако ће се ово највероватније променити за већину дизајна веб страница, ако се ове стандардне боје поставе на телу и ХТМЛ таг у почетку чини страницу лакшом за читање и рад са њом.
хтмл, боди {
боја: # 000;
позадина: #ффф;
}
Подразумевани стилови фонтова
Величина фонта и породица фонтова су нешто што ће се неизбежно променити након што дизајн захвати, али започните са подразумеваном величином фонта 1 ем и подразумевано породица фонтова из Ариала, Женеве или неке друге санс-сериф фонт. Коришћење емс-а чини страницу што доступнијом, а санс-сериф фонт је читљивији на екрану.
хтмл, боди, п, тх, тд, ли, дд, дт {
фонт: 1ем Ариал, Хелветица, санс-сериф;
}
Можда постоје друга места на којима ћете наћи текст, али стр, тх, тд, ли, дд, и дт су добар почетак за дефинисање основног фонта. Укључи ХТМЛ и тело за сваки случај, али многи прегледачи поништавају избор фонта ако фонтове дефинишете само за ХТМЛ или тело.
Наслови
ХТМЛ заглавља су важни за употребу како би помогли вашој веб локацији да се оцрта и омогући претраживачима да уђу дубље у вашу веб локацију. Без стилова, сви су прилично ружни, па поставите задане стилове за све њих и за сваки дефинишите породицу фонтова и величине фонтова.
х1, х2, х3, х4, х5, х6 {
породица фонтова: Ариал, Хелветица, санс-сериф;
}
х1 {величина фонта: 2ем; }
х2 {величина фонта: 1,5ем; }
х3 {величина фонта: 1.2ем; }
х4 {фонт-сизе: 1.0ем; }
х5 {величина фонта: 0,9ем; }
х6 {величина фонта: 0,8ем; }
Не заборавите на везе
Стилизовање боја веза готово је увек важан део дизајна, али ако их не дефинишете у подразумеваним стиловима, велика је вероватноћа да ћете заборавити бар једну од псеудо-класа. Дефинишите их са малим варијацијама плаве боје, а затим их промените након што дефинишете палету боја за локацију.
Да бисте поставили везе у нијансама плаве боје, сет:
- везе као плава
- посећене везе као тамноплава
- ховер линкс као светло плава
- активне везе као још блеђа плава
Као што је приказано у овом примеру:
а: линк {цолор: # 00ф; }
а: посећено {цолор: # 009; }
а: ховер {боја: # 06ф; }
а: ацтиве {цолор: # 0цф; }
Стилишући везе са прилично нешкодљивом шемом боја, осигурава вам да нећете заборавити ниједну наставу, а такође их чини мало мање гласним од задатих плаве, црвене и љубичасте боје.
Табела пуног стила
Ево целокупне табеле стилова:
@ цхарсет "утф-8";
хтмл, боди {
маржа: 0пк;
попуњавање: 0пк;
граница: 0пк;
боја: # 000;
позадина: #ффф;
}
хтмл, боди, п, тх, тд, ли, дд, дт {
фонт: 1ем Ариал, Хелветица, санс-сериф;
}
х1, х2, х3, х4, х5, х6 {
породица фонтова: Ариал, Хелветица, санс-сериф;
}
х1 {величина фонта: 2ем; }
х2 {величина фонта: 1,5ем; }
х3 {величина фонта: 1.2ем; }
х4 {фонт-сизе: 1.0ем; }
х5 {величина фонта: 0,9ем; }
х6 {величина фонта: 0,8ем; }
а: линк {цолор: # 00ф; }
а: посећено {цолор: # 009; }
а: ховер {боја: # 06ф; }
а: ацтиве {цолор: # 0цф; }