Атрымаеце факты з гэтымі радамі
Усе вэб-браўзэры, што ведаюць, як «defauly стыляў.» Гэтыя стылі, якія дыктуюць знешні выгляд HTML-элементаў у адсутнасці якой-небудзь іншай інфармацыі аб стылі. Напрыклад, амаль у кожным браўзэры па змаўчанні вонкавага выгляду гіперспасылка ярка-сіні колер з падкрэсьліваньнем. Вось як гэтыя спасылкі выглядаюць, калі не сказаць ім, каб адлюстраваць у іншы спосаб.
Стылі па змаўчанні браўзэр можа быць карысным, але і ў многіх выпадках вэб-дызайнеры хочуць, каб выдаліць гэтыя стылі, каб яны маглі пачаць нанова са стылямі, што яны знаходзяцца пад кантролем 100%. Гэта робіцца з дапамогай таго, што вядома як «майстар-табліцы стыляў.»
Майстар стыляў павінен быць першымі стылямі вы выклікаеце ва ўсіх вашых дакументах. Вы можаце выкарыстоўваць майстар-табліцу стыляў, каб ачысціць налады браўзэра па змаўчанні, якія могуць выклікаць праблемы ў крос-браузерный вэб-дызайну. Пасля таго як вы ачысцілі стылі з галоўнай табліцай стыляў, ваш праект пачынаецца з таго ж месца ва ўсіх браўзэрах - як чысты палатно для жывапісу.
Глабальныя значэння па змаўчанні
Ваш майстар стыляў павінен пачаць абнуленне задворкі, Пракладкі і межаў на гэтай старонцы. Некаторыя вэб-браўзэры па змаўчанні цела дакумента на 1 або 2 пікселя з водступам ад панэлі браўзэра краю. Гэта гарантуе, што ўсе яны паказваюць тое ж самае:
HTML, цела {поле: 0px; абіўка: 0px; мяжы: 0px; }Вы таксама хочаце, каб адпавядаць шрыфта. Не забудзьцеся таксама ўсталяваць памер шрыфта на 100 працэнтаў або 1em, так што ваша старонка даступная, але памер па-ранейшаму адпавядае. І абавязкова ўключаць у вышыню радка.
цела {шрыфта: 1em / 1,25 Arial, Helvetica, без засечак; }загаловак Фарматаванне
Загаловак або загаловак пазнакі (H1, H2, H3 і г.д.), як правіла, па змаўчанні вызначаны тлустым шрыфтам з вялікімі палямі ці запаўненнем вакол іх. Пры ачыстцы вагі, поля і водступы, вы пераканайцеся, што гэтыя пазнакі застаюцца больш (або менш), чым тэкст вакол іх без дадатковых стыляў:
h1, h2, h3, h4, h5, h6 {поле: 0; абіўка: 0; напісанне шрыфта: нармальны; сямейства шрыфтоў: Arial, Helvetica, без засечак; }Вы можаце разгледзець пытанне аб усталяванні канкрэтных памераў, ліст-інтэрвал і водступаў у загалоўку тэгаў, але гэта сапраўды залежыць ад стылю сайта, які вы праектавання і павінны быць пакінутыя з ліста майстар стылю. Вы можаце дадаць дадатковыя стылі для загалоўкаў, колькі неабходна для канкрэтнай канструкцыі.
Plain Фарматаванне тэксту
Акрамя загалоўкаў, ёсць і іншыя тэкставыя тэгі, якія вы павінны быць упэўненыя, каб ачысціць. Адзін камплект, што людзі часта забываюць з'яўляюцца тэгі вочак табліцы (TH і TD) і тэгі формы (SELECT, TEXTAREA і INPUT). Калі вы не ўсталявалі тых жа памеры, як ваша цела і пункт тэкст, вы можаце быць непрыемна здзіўлены тым, як браўзэры адлюстроўваюць іх.
р, й, тд, Li, дд, Да й, вул, Ала, BLOCKQUOTE, кв, акронім, скар, а, увод, абярыце тэкставае поле {поле: 0; абіўка: 0; шрыфт: нармальныя нармальныя нармальныя 1em / 1,25 Arial, Helvetica, без засечак; }Гэта таксама добра, каб даць вашыя цытаты (BLOCKQUOTE і Q), акронимы і абрэвіятуры трохі дадатковага стылю, так што яны каштуюць крыху больш:
{BLOCKQUOTE поле: 1.25em; абіўка: 1.25em} {д стыль шрыфта: курсіў; } Акрон, скар {курсора: дапамога; мяжа дна: 1px пункцірнай; }Спасылкі і малюнкі
Спасылкі лёгка кіраваць і змяняць з гэтага вышэйзгаданага ярка-сіні падкрэслены тэкст. Я аддаю перавагу, каб заўсёды мець мае спасылкі застаюцца падкрэслены, але калі вы аддаеце перавагу іншы спосаб, якім Вы можаце ўсталяваць гэтыя параметры асобна. Я таксама не ўключаюць у сябе колеру ў лісце майстар стылю, таму што залежыць ад канструкцыі.
а, а: спасылка, а: наведаў, а: актыўны, а: завісаць {тэкст-аздабленне: падкрэсліць; }З малюнкамі, вельмі важна, каб адключыць мяжы. У той час як большасць браўзэраў ня адлюстроўваць рамку вакол звычайнага малюнка, калі малюнак звязана, браўзэры сваю чаргу на мяжы. Каб гэта выправіць:
IMG {мяжа: не; }табліцы
У той час як табліцы больш не выкарыстоўваюцца для мэтаў кампаноўкі, ваш сайт не можа па-ранейшаму выкарыстоўваць іх для фактычных дадзеных tabluar. Гэта цудоўнае выкарыстанне HTML-табліц. Мы ўжо пераканаліся, што памер тэксту па змаўчанні з'яўляецца аднолькавым для вашых вочак табліцы, але ёсць некалькі іншых стыляў, вы павінны ўсталяваць, так што вашыя табліцы застаюцца ранейшыя:
Табліца {поле: 0; абіўка: 0; мяжы: няма; }формы
Як і з іншымі элементамі, вы павінны ачысціць палёў і водступаў вакол вашых формаў. Яшчэ адна рэч , якую я хацеў бы зрабіць , гэта перапісаць тэг формы , як « инлайн » , так што ён не дадае дадатковае прастору , дзе вы змесціце тэг у кодзе. Як і з іншымі элементамі тэксту, я вызначаю інфармацыю пра шрыфты для выбару, і тэкставага поля ўводу ўверх вышэй, так што гэта тое ж самае, як і астатнія майго тэксту.
Форма {поле: 0; абіўка: 0; Дысплей: убудаваны; }Гэта таксама добрая ідэя, каб змяніць курсор для налепак. Гэта дапамагае людзям убачыць, што лэйбл будзе рабіць нешта, калі яны пстрыкніце па ім.
пазнака {курсор: паказальнік; }агульныя класы
Для гэтай частцы майстар - табліцы стыляў, вы павінны вызначыць класы , якія маюць сэнс для вас. Вось некаторыя з класаў, якія я выкарыстоўваю часцей за ўсё. Звярніце ўвагу, што яны не ўстаноўлены ў любы канкрэтны элемент, так што вы можаце прызначыць іх на тое, што вам трэба:
.clear {ясна: тое і іншае; } {.floatLeft з якая плавае кропкай: злева; } {.floatRight з якая плавае кропкай: права; } .textLeft {выраўноўвання тэксту: злева; } .textRight {выраўноўвання тэксту: справа; } .textCenter {выраўноўвання тэксту: цэнтр; } .textJustify {выраўноўвання тэксту: апраўдаць; } .blockCenter {дысплей: блок; Маржа налева: аўто; Маржа направа: аўто; } / * Памятаеце, каб усталяваць шырыню * / .bold {напісанне шрыфта: тоўсты; } {.italic стыль шрыфта: курсіў; } .underline {тэкст-аздабленне: падкрэсліць; } {.noindent рэнтабельнасць левы: 0; абіўка налева: 0; } {.nomargin поле: 0; } {.nopadding абіўка: 0; } .nobullet {спіс-стыль: не; спіс-стыль-вобраз: няма; }Памятаеце , што , так як гэтыя класы напісаны перад любымі іншымі стылямі , і яны з'яўляюцца толькі класамі, яны лёгка замясціць больш спецыфічныя ўласцівасці стылю , якія адбываюцца пазней у каскадзе . Калі вы выявіце, што вы ўсталявалі агульны клас на элемент і ён не ўступае ў сілу, вы павінны праверыць, каб пераканацца, што не існуе нейкай іншай стыль у адным з вашых наступных стыляў, якія ўплываюць на той жа элемент.
Увесь Майстар Стыляў
/ * Глабальныя значэнні па змаўчанні * / html, цела {поле: 0px; абіўка: 0px; мяжы: 0px; } {Цела шрыфта: 1em / 1.25 Arial, Helvetica, без засечак; } / * Загалоўкі * / h1, h2, h3, h4, h5, h6 {поле: 0; абіўка: 0; напісанне шрыфта: нармальны; сямейства шрыфтоў: Arial, Helvetica, без засечак; } / * Стылі тэксту * / р, й, тд, Li, дд, Да й, вул, Ала, BLOCKQUOTE, кв, акронім, скар, а, увод, абярыце тэкставае поле {поле: 0; абіўка: 0; шрыфт: нармальныя нармальныя нармальныя 1em / 1,25 Arial, Helvetica, без засечак; } {BLOCKQUOTE поле: 1.25em; абіўка: 1.25em} {д стыль шрыфта: курсіў; } Акрон, скар {курсора: дапамога; мяжа дна: 1px пункцірнай; } {Маленькага памеру шрыфта: .85em; } Вялікі {памер шрыфта: 1.2em; } / * Спасылкі і малюнкі * / а, а: спасылка, а: наведаў, а: актыўны, а: завісаць {тэкст-аздабленне: падкрэсліць; } IMG {мяжа: не; } / * Табліца * / табліца {маржа: 0; абіўка: 0; мяжы: няма; } / * Форма * / форма {поле: 0; абіўка: 0; Дысплей: убудаваны; } {Пазнака курсора: паказальнік; } / * Агульныя класы * / .clear {ясна: як; } {.floatLeft з якая плавае кропкай: злева; } {.floatRight з якая плавае кропкай: права; } .textLeft {выраўноўвання тэксту: злева; } .textRight {выраўноўвання тэксту: справа; } .textCenter {выраўноўвання тэксту: цэнтр; } .textJustify {выраўноўвання тэксту: апраўдаць; } .blockCenter {дысплей: блок; Маржа налева: аўто; Маржа направа: аўто; } / * Памятаеце, каб усталяваць шырыню * / .bold {напісанне шрыфта: тоўсты; } {.italic стыль шрыфта: курсіў; } .underline {тэкст-аздабленне: падкрэсліць; } {.noindent рэнтабельнасць левы: 0; абіўка налева: 0; } {.nomargin поле: 0; } {.nopadding абіўка: 0; } .nobullet {спіс-стыль: не; спіс-стыль-вобраз: няма; }Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 10/6/17