Преглед каскадних стилских плоча са узорком Стиле Схеет
Када изградите веб локацију од огреботине, паметно је да почнете са дефинисаним основним стиловима. То је као почети са чистим платном и свежим четкама. Један од првих проблема са којима се сусрећу веб дизајнери јесте да су сви претраживачи различити. Подразумевана величина фонта се разликује од платформе до платформе, подразумевана породица фонтова је различита, неки прегледачи дефинишу маргине и паддинг на ознаци тела, док други не чине, и тако даље. Објасните ове недоследности дефинисањем подразумеваних стилова за ваше веб странице.
ЦСС и Сет карактера
Прво прво поставите скуп знакова ваших ЦСС докумената на утф-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цф; }