Добијте чињенице са овим саветима
Сви веб прегледачи укључују оно што се зна као "стил дефаули". Ово су стилови који диктирају изглед и осећај ХТМЛ елемената у одсуству других информација о стилу. На пример, у готово сваком прегледачу, подразумевани изглед хиперлинкова је светло плава боја са подцртом. Ево како ти линкови изгледају ако им не кажете да се приказују на други начин.
Подразумевани стилови претраживача могу бити корисни, али у многим случајевима веб дизајнери желе да уклоне ове стилове тако да могу почети свежи са стиловима које су 100% у контроли. Ово се ради користећи оно што је познато као "мастер стилесхеет."
Главни стилски стил треба да буде први стил који позивате у свим вашим документима. Користите мастер стилесхеет да бисте очистили подразумеване поставке прегледача који могу изазвати проблеме у Веб дизајну унакрсног претраживача. Једном када сте почистили стилове помоћу мастер стилесхеета, ваш дизајн почиње са истог места у свим прегледачима - као чисто платно за сликање.
Глобална подразумевана вредност
Ваш мастер стилски стил требало би да започне нултом изношењу маргина, паддинга и граница на страници. Неки Веб прегледачи подразумевају тијело документа на 1 или 2 пиксела који су урезани у ивице окна прегледача. То значи да сви они приказују исто:
хтмл, боди {маргин: 0пк; паддинг: 0пк; бордер: 0пк; }Такође желите да фонт буде конзистентан. Обавезно поставите величину фонта на 100% или 1ем, тако да је ваша страница доступна, али величина је и даље конзистентна. И обавезно укључите висину линије.
боди {фонт: 1ем / 1.25 Ариал, Хелветица, санс-сериф; }Форматирање наслова
Ознаке наслова или заглавља (Х1, Х2, Х3, итд.), Обично подразумеване подебљаним текстом са великим маргинама или облога око њих. Чишћењем тежине, маргина и паддинга, осигурате да ови ознаци и даље остају већи (или мањи) од текста око њих без додатних стилова:
х1, х2, х3, х4, х5, х6 {маргин: 0; паддинг: 0; фонт-веигхт: нормал; фонт-фамили: Ариал, Хелветица, санс-сериф; }Можда бисте желели да размислите о постављању одређених величина, размака слова и паддинга на насловне ознаке, али то заиста зависи од стила сајта који дизајнирате и треба га оставити изван главног стила. Можете додати више стилова за ове наслове по потреби за ваш специфичан дизајн.
Обликовање обичног текста
Осим наслова, постоје и друге текстуалне ознаке које бисте требали бити сигурни да бисте их очистили. Један скуп који људи често заборављају су ознаке целија таблице (ТХ и ТД) и ознаке облика (СЕЛЕЦТ, ТЕКСТАРЕА и ИНПУТ). Ако их не подесите на исту величину као текст тела и пасуса, можда ћете бити непријатно изненађени како их прегледачи обелодањују.
п, тх, тд, ли, дд, дт, ул, ол, блоцккуоте, к, акроним, аббр, а, инпут, селецт, тектареа {маргин: 0; паддинг: 0; фонт: нормал нормал нормал 1ем / 1.25 Ариал, Хелветица, санс-сериф; }Такође је лепо дати ваше цитате (БЛОЦККУОТЕ и К), акроними и скраћенице мало додатни стил, тако да се истичу мало више:
блоцккуоте {маргин: 1.25ем; паддинг: 1.25ем} к {фонт-стиле: италиц; } акроним, аббр {курсор: помоћ; бордер-боттом: 1пк исцрпљен; }Линкови и слике
Линкови се лако управљају и мењају из наведеног светло плавог подвученог текста. Више волим да увек имам везе са подацима, али ако више волите другачији начин, ове опције можете подесити одвојено. Такође не укључујем боје у мастер стил листу, јер то зависи од дизајна.
а, а: линк, а: посећен, а: активан, а: ховер {текстуална декорација: подвлачити; }Са сликама, важно је искључити границе. Док већина претраживача не приказује границу око обичне слике, када је слика повезана, претраживачи укључују границу. Да бисте исправили ово:
имг {бордер: ноне; }Табеле
Док се табеле више не користе за сврхе распореда, локација ће их и даље користити за стварне податке таблуара. Ово је добра употреба ХТМЛ табела. Већ смо се уверили да је подразумевана величина текста иста за ваше ћелије у таблици, али постоји још неколико стилова које треба поставити тако да ваше табеле остају исте:
табела {маргин: 0; паддинг: 0; граница: нема; }Обрасци
Као и код других елемената, требало би да избришете маргине и паддинге око ваших форми. Још једна ствар коју желим је да преправим ознаку за облик као " инлине " тако да не додаје додатни простор у коме постављате ознаку у коду. Као и код других текстуалних елемената, дефинишу информације о фонту за одабир, текст и упис горе горе, тако да је исти као и остатак мог текста.
форма {маргин: 0; паддинг: 0; дисплаи: инлине; }Такође је добра идеја да промените курсор за своје етикете. Ово помаже људима да виде да ће етикета учинити нешто када кликну на њега.
ознака {показивач: показивач; }Обичне класе
За овај део мастер стилесхеета требате дефинисати класе које имају смисла за вас. Ово су неке од класа које користим најчешће. Имајте на уму да они нису постављени на било који одређени елемент, тако да их можете доделити ономе што вам је потребно:
.цлеар {јасно: обоје; } .флоатЛефт {флоат: лефт; } .флоатРигхт {флоат: десно; } .тектЛефт {текст-алигн: лево; } .тектРигхт {тект-алигн: ригхт; } .тектЦентер {тект-алигн: центар; } .тектЈустифи {тект-алигн: јустифи; } .блоцкЦентер {дисплаи: блоцк; маргин-лефт: ауто; маргин-ригхт: ауто; } / * запамтите да поставите ширину * / .болд {фонт-веигхт: болд; } .италиц {фонт-стиле: италиц; } .ундерлине {тект-децоратион: ундерлине; } .ноиндент {маргин-лефт: 0; паддинг-лефт: 0; } .номаргин {маргин: 0; } .нопаддинг {паддинг: 0; } .нобуллет {лист-стиле: ноне; лист-стиле-имаге: нема; }Запамтите то зато што су ове класе уписане пре било ког другог стила и оне су само класе, лако их могу заменити са специфичним стиловима који се појављују касније у каскади . Ако нађете да поставите заједничку класу на елемент и да не ступи на снагу, проверите да ли ћете бити сигурни да не постоји неки други стил у некој од ваших каснијих стилова који утичу на исти исти елемент.
Тхе Ентире Мастер Стилесхеет
/ * Глобални подразумевани * / хтмл, боди {маргин: 0пк; паддинг: 0пк; бордер: 0пк; } боди {фонт: 1ем / 1.25 Ариал, Хелветица, санс-сериф; } / * Наслови * / х1, х2, х3, х4, х5, х6 {маргин: 0; паддинг: 0; фонт-веигхт: нормал; фонт-фамили: Ариал, Хелветица, санс-сериф; } / * Текстови стилови * / п, тх, тд, ли, дд, дт, ул, ол, блоцккуоте, к, акроним, аббр, а, инпут, селецт, тектареа {маргин: 0; паддинг: 0; фонт: нормал нормал нормал 1ем / 1.25 Ариал, Хелветица, санс-сериф; } блоцккуоте {маргин: 1.25ем; паддинг: 1.25ем} к {фонт-стиле: италиц; } акроним, аббр {курсор: помоћ; бордер-боттом: 1пк исцрпљен; } мала {фонт-сизе: .85ем; } велика {фонт-сизе: 1.2ем; } / * Линкови и слике * / а, а: линк, а: посећени, а: активан, а: ховер {текстуална декорација: подвлачи; } имг {бордер: ноне; } / * Табеле * / табела {маргин: 0; паддинг: 0; граница: нема; } / * Обрасци * / форма {маргин: 0; паддинг: 0; дисплаи: инлине; } ознака {цурсор: поинтер; } / * Цоммон Цлассес * / .цлеар {јасно: обоје; } .флоатЛефт {флоат: лефт; } .флоатРигхт {флоат: десно; } .тектЛефт {текст-алигн: лево; } .тектРигхт {тект-алигн: ригхт; } .тектЦентер {тект-алигн: центар; } .тектЈустифи {тект-алигн: јустифи; } .блоцкЦентер {дисплаи: блоцк; маргин-лефт: ауто; маргин-ригхт: ауто; } / * запамтите да поставите ширину * / .болд {фонт-веигхт: болд; } .италиц {фонт-стиле: италиц; } .ундерлине {тект-децоратион: ундерлине; } .ноиндент {маргин-лефт: 0; паддинг-лефт: 0; } .номаргин {маргин: 0; } .нопаддинг {паддинг: 0; } .нобуллет {лист-стиле: ноне; лист-стиле-имаге: нема; }Оригинални чланак Јеннифер Кринин. Уредио Јереми Гирард на 10/6/17