Добијте ги фактите со овие совети
Сите веб прелистувачи го вклучуваат она што се знае како "стилови на defauly". Ова се стилови кои го диктираат изгледот и чувството на HTML елементи во отсуство на други стилски информации. На пример, во речиси секој прелистувач, стандардниот изглед на хиперлинкови е светло сина боја со потцртување. Ова е како тие линкови изгледаат, освен ако не им кажете да се прикажат на поинаков начин.
Стандардните стилови на прелистувачи можат да бидат корисни, но во многу случаи веб-дизајнерите сакаат да ги отстранат овие стилови за да можат да станат свежи со стилови кои тие ги контролираат 100%. Ова е направено со користење на она што е познато како "мастер стил".
Мастер стил лист треба да биде првиот стилски лист што ќе го повикате во сите ваши документи. Вие користите главен стилски лист за да ги исчистите стандардните поставувања на прелистувачот што можат да предизвикаат проблеми во веб-дизајнот на крос-прелистувачот. Откако ќе ги исчистите стиловите со мастер стил, вашиот дизајн започнува од истото место во сите прелистувачи - како чиста платно за сликање.
Глобални стандардни вредности
Вашиот мастер стил треба да започне со нула на маргините, paddings и границите на страната. Некои веб-прелистувачи го поставуваат телото на документот до 1 или 2 пиксели вовлечени од рабовите на прелистувачот. Ова осигурува дека сите тие се прикажуваат исти:
html, body {margin: 0px; Соочувајќи се: 0px; граница: 0px; }Исто така сакате да го направите фонтот доследен. Бидете сигурни да ја поставите големината на фонтот на 100 проценти или 1em, така што вашата страница е достапна, но големината е сеуште конзистентна. И не заборавајте да ја вклучите висината на линијата.
тело {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Форматирање во наслов
Ознаки за наслов или заглавија (H1, H2, H3, итн.) Обично се задебелени букви со големи маргини или заоблени околу нив. Со расчистување на тежината, маргините и дополнувањето, ќе бидете сигурни дека овие ознаки се уште остануваат поголеми (или помали) од текстот околу нив без дополнителни стилови:
h1, h2, h3, h4, h5, h6 {маргина: 0; Соочи: 0; фонт-тежина: нормално; font-family: Arial, Helvetica, sans-serif; }Можеби ќе сакате да размислите за поставување на специфични големини, растојание по букви и педали до насловите на насловните страници, но тоа навистина зависи од стилот на веб-локацијата што ја дизајнирате и треба да ја оставите надвор од главниот стилски лист. Можете да додадете повеќе стилови за овие наслови колку што е потребно за вашиот специфичен дизајн.
Форматирање на обичен текст
Надвор од наслови, постојат и други текстуални ознаки кои треба да бидете сигурни да ги исчистите. Еден комплет што луѓето често го забораваат се ознаките на табелата на табелата (TH и TD) и ги означуваат формите (SELECT, TEXTAREA и INPUT). Ако не ги поставите оние со иста големина како текстот на вашето тело и став, може да бидете непријатно изненадени од тоа како прелистувачите ги прават.
p, th, td, li, dd, dt, ul, ol, blockquote, q, акроним, abbr, a, внесување, селектирање, textarea {margin: 0; Соочи: 0; фонт: нормален нормален нормален 1em / 1.25 Arial, Helvetica, sans-serif; }Исто така, убаво е да ги дадете вашите цитати (BLOCKQUOTE и Q), акроними и кратенки малку дополнителен стил, така што тие се истакнуваат малку повеќе:
блоккоти {маргина: 1.25em; Содржина: 1.25em} q {фонт-стил: италик; } акроним, abbr {курсорот: помош; граница-дното: 1px попарен; }Линкови и слики
Линковите се лесни за управување и за промена од горенаведениот светло сино подвлечен текст. Повеќе сакам да ги имам моите врски да останат подвлечени, но ако претпочитате поинаков начин, можете да ги поставите овие опции одделно. Јас, исто така, не вклучуваат бои во мастер стил лист, бидејќи тоа зависи од дизајнот.
a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }Со слики, важно е да ги исклучите границите. Додека повеќето пребарувачи не прикажуваат граница околу обична слика, кога сликата е поврзана, прелистувачите ја вклучуваат границата. За да го надминете ова:
img {border: none; }Табели
Додека табелите повеќе не се користат за целите на изгледот, веб-страницата може да ги користи за вистински табларни податоци. Ова е добра употреба на HTML табели. Веќе сме сигурни дека стандардната големина на текст е иста за вашите клетки на табелата, но има неколку други стилови што треба да ги поставите за да ги оставите истите важни:
маса (маргина: 0; Соочи: 0; граница: нема; }Форми
Како и со другите елементи, треба да ги исчистите маргините и педалите околу вашите форми. Друга работа што сакам да ја направам е да ја напишете ознаката за форма како " inline ", така што таа не додава дополнителен простор каде што ќе ја ставите ознаката во кодот. Како и со другите текстуални елементи, ги дефинирам информациите за фонтот за избирање, текстот и внесувањето погоре, така што тоа е исто како и остатокот од мојот текст.
форма {маргина: 0; Соочи: 0; дисплеј: внатрешен; }Исто така, добра идеја е да го смените курсорот за вашите етикети. Ова им помага на луѓето да видат дека етикетата ќе направи нешто кога ќе го кликнат.
етикета {курсорот: покажувач; }Заеднички класи
За овој дел од главниот стилски лист, треба да ги дефинирате класи кои имаат смисла за вас. Ова се некои од часовите кои ги користам најчесто. Забележете дека тие не се поставени на одреден елемент, па можете да ги доделите на она што ви е потребно:
јасно (јасно: и двете; } .floatLeft {float: лево; } .floatRight {float: десно; } .textLeft {текст-порамнување: лево; } .textRight {текст-усогласување: десно; } .textCenter {текст-порамнување: центар; } .Технигирај {текстот-усогласување: оправда; } .blockCenter {display: block; маргина-лево: авто; маргина-десна: авто; } / * не заборавајте да поставите ширина * /. bold {font-weight: bold; } .italic {font-style: italic; }. {line-decoration: underline; }. Исклучено (маргина-лево: 0; дополнување-лево: 0; } .nomargin {маргина: 0; } .nopadding {padding: 0; } .nobullet {листа-стил: нема; list-style-image: none; }Запомнете дека поради тоа што овие класи се напишани пред други стилови и тие се само класи, тие лесно можат да се заменат со поспецифични својства на стилот кои се појавуваат подоцна во каскадата . Ако најдете дека поставувате заедничка класа на елемент и тоа не стапи на сила, треба да проверите дали во некој од подоцнежните стилови кои влијаат на истиот елемент нема друг стил.
Целиот мастер стил
/ * Global Defaults * / html, body {margin: 0px; Соочувајќи се: 0px; граница: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Наслови * / h1, h2, h3, h4, h5, h6 {маргина: 0; Соочи: 0; фонт-тежина: нормално; font-family: Arial, Helvetica, sans-serif; } / * Стилови на текст * / p, th, td, li, dd, dt, ul, ol, blockquote, q, акроним, abbr, a, input, select, textarea {margin: 0; Соочи: 0; фонт: нормален нормален нормален 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; Содржина: 1.25em} q {фонт-стил: италик; } акроним, abbr {курсорот: помош; граница-дното: 1px попарен; } мали {font-size: .85em; } големина {font-size: 1.2em; } / * Линкови и слики * / а, а: врска, а: посетена, а: активна, а: лебди {текст-декорација: подвлече; } img {border: none; } / * Табели * / табела {margin: 0; Соочи: 0; граница: нема; } / * Форми * / форма {маргина: 0; Соочи: 0; дисплеј: внатрешен; } етикета {курсорот: покажувач; } / * Заеднички класи * /. Јасно {јасно: и двете; } .floatLeft {float: лево; } .floatRight {float: десно; } .textLeft {текст-порамнување: лево; } .textRight {текст-усогласување: десно; } .textCenter {текст-порамнување: центар; } .Технигирај {текстот-усогласување: оправда; } .blockCenter {display: block; маргина-лево: авто; маргина-десна: авто; } / * не заборавајте да поставите ширина * /. bold {font-weight: bold; } .italic {font-style: italic; }. {line-decoration: underline; }. Исклучено (маргина-лево: 0; дополнување-лево: 0; } .nomargin {маргина: 0; } .nopadding {padding: 0; } .nobullet {листа-стил: нема; list-style-image: none; }Авторски напис од Џенифер Крајнин. Ревидирани од Џереми Жирард на 10/6/17