Вземете фактите с тези съвети
Всички уеб браузъри включват това, което е известно като "просрочени стилове". Това са стилове, които диктуват вида и усещането на HTML елементи при липса на друга информация за стил. Например, в почти всеки браузър подразбиращият се външен вид на хипервръзките е ярък син цвят с подчертаване. Ето как изглежда тези връзки, освен ако не им кажете да ги показват по различен начин.
Стандартните стилове на браузърите могат да бъдат полезни, но в много случаи уеб дизайнерите искат да премахнат тези стилове, така че да могат да започнат да се сверяват със стилове, за които те са 100% контролирани. Това се прави, използвайки това, което е известно като "главен стилосфейл".
Главната стилова таблица трябва да бъде първата стилова таблица, която наричате във всичките си документи. Можете да използвате главен стилов лист, за да изчистите настройките по подразбиране на браузъра, които могат да причинят проблеми при уеб дизайна с различни браузъри. След като сте изчистили стиловете с основен стилов лист, вашият дизайн започва от едно и също място във всички браузъри - като чисто платно за рисуване.
Глобални по подразбиране
Главният ви стилов лист трябва да започне, като изтрие полетата, падките и границите на страницата. Някои уеб браузъри по подразбиране изместват тялото на документа на 1 или 2 пиксела, разделени от краищата на браузъра. Това гарантира, че те всички показват същото:
html, body {margin: 0px; подложка: 0px; граница: 0px; }Също така искате да направите шрифта последователен. Уверете се също така, че сте задали размера на шрифта до 100% или 1х, така че страницата ви да е достъпна, но размерът все още е съвместим. И не забравяйте да включите височината на линията.
тяло {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Форматиране на заглавието
Заглавните или заглавните етикети (H1, H2, H3 и т.н.) обикновено са по подразбиране към получер текст с големи полета или подложки около тях. Чрез изчистването на теглото, маржовете и подложките гарантирате, че тези етикети все още остават по-големи (или по-малки) от текста около тях, без да имат допълнителни стилове:
h1, h2, h3, h4, h5, h6 {margin: 0; подложка: 0; шрифт-тегло: нормално; шрифт-семейство: Arial, Helvetica, sans-serif; }Бихте могли да помислите за задаване на конкретни размери, разделителни знаци между буквите и петна върху етикетите на заглавията, но това наистина зависи от стила на сайта, който проектирате, и трябва да останете извън листа с стилове на майстор. Можете да добавите още стилове за тези заглавия, както е необходимо за конкретния дизайн.
Форматиране на обикновен текст
Освен заглавията, има и други текстови маркери, които трябва да сте сигурни, че ще изчистите. Един набор, който хората често забравят, са таговете за клетъчни клетки (TH и TD) и формират таговете (SELECT, TEXTAREA и INPUT). Ако не ги зададете на същия размер като текста на тялото и абзаца, може да бъдете неприятно изненадани от начина, по който браузърите ги правят.
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 и Q), акронимите и съкращенията малко допълнителен стил, така че да изпъкват малко повече:
blockquote {margin: 1.25em; подложка: 1.25em} q {font-style: italic; } акроним, abbr {курс: помощ; крайно крайно: 1px пунктирано; }Връзки и изображения
Връзките са лесни за управление и да се променят от горепосочения ярък син подсвет. Предпочитам винаги моите връзки да остават подчертани, но ако предпочитате по различен начин, можете да зададете тези опции поотделно. Също така не включвам цветовете в стила на майсторския стил, защото това зависи от дизайна.
а, а: връзка, a: посетен, a: активен, a: hover {текст-украса: подчертаване; }С изображенията е важно да изключите границите. Въпреки че повечето браузъри не показват граница около обикновен имидж, когато изображението е свързано, браузърите преобръщат границата. За да коригирате това:
img {граница: няма; }Маси
Докато таблиците вече не се използват за оформление, сайтът може да ги използва за актуални данни за табла. Това е добро използване на HTML таблици. Вече сме се уверили, че размерът на текста по подразбиране е същият за вашите таблични клетки, но има няколко други стила, които трябва да настроите, така че таблиците ви да останат еднакви:
таблица {марж: 0; подложка: 0; граница: няма; }Форми
Подобно на другите елементи, трябва да изчистите полетата и подложките около формулярите си. Друго нещо, което обичам да направя, е да пренапише маркера на формуляра като " инлайн ", така че да не добавя допълнително място, където да поставите маркера в кода. Както и при другите текстови елементи, аз определям информацията за шрифта за избиране, textarea и въвеждане нагоре по-горе, така че да е същото като останалата част от текста ми.
формуляр {margin: 0; подложка: 0; дисплей: вграден; }Също така е добра идея да смените курсора на етикетите си. Това помага на хората да видят, че етикетът ще направи нещо, когато кликнат върху него.
етикет {курсор: указател; }Общите класове
За тази част от главния стилов лист трябва да дефинирате класове, които имат смисъл за вас. Това са някои от класовете, които използвам най-често. Имайте предвид, че те не са настроени на конкретен елемент, така че можете да ги присвоите на каквото ви трябва:
.clear {clear: и двете; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {текст-подравняване: ляво; } .textRight {text-align: right; } .textЦентър {text-align: center; } .textТърсене {text-align: justify; } .blockCenter {дисплей: блок; маркер-ляво: автоматично; margin-right: auto; } / * Не забравяйте да зададете ширина * / .bold {font-weight: bold; } .italic {font-style: italic; }. под линия {text-decoration: underline; }. независимо {margin-left: 0; подложка-ляво: 0; } .nomargin {margin: 0; }. ненасищане {padding: 0; } .nobullet {style-style: none; списък-стил-изображение: няма; }Не забравяйте, че тъй като тези класове са написани преди други стилове и те са просто класове, те лесно могат да се заменят с по-специфични свойства на стил, които се появяват по-късно в каскадата . Ако установите, че сте задали общ клас на елемент и той не влезе в сила, трябва да проверите, за да сте сигурни, че в някой от по-късните ви стилове няма да има друг стил, засягащ същия елемент.
Пълният мастер стилове
/ * Глобални по подразбиране * / html, body {margin: 0px; подложка: 0px; граница: 0px; } тяло {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Заглавия * / h1, h2, h3, h4, h5, h6 {марж: 0; подложка: 0; шрифт-тегло: нормално; шрифт-семейство: 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 {font-style: italic; } акроним, abbr {курс: помощ; крайно крайно: 1px пунктирано; } малък {font-size: .85em; } голям {шрифт-размер: 1.2; } / * Връзки и изображения * / a, a: линк, a: посетен, a: активен, a: hover {text-decoration: underline; } img {граница: няма; } / * Таблици * / таблица {марж: 0; подложка: 0; граница: няма; } / * Формуляри * / формуляр {марж: 0; подложка: 0; дисплей: вграден; } етикет {cursor: pointer; } / * Общите класове * / .clear {clear: и двете; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {текст-подравняване: ляво; } .textRight {text-align: right; } .textЦентър {text-align: center; } .textТърсене {text-align: justify; } .blockCenter {дисплей: блок; маркер-ляво: автоматично; margin-right: auto; } / * Не забравяйте да зададете ширина * / .bold {font-weight: bold; } .italic {font-style: italic; }. под линия {text-decoration: underline; }. независимо {margin-left: 0; подложка-ляво: 0; } .nomargin {margin: 0; }. ненасищане {padding: 0; } .nobullet {style-style: none; списък-стил-изображение: няма; }Оригинална статия на Дженифър Кринин. Редактиран от Джеръми Жирард на 10/6/17