Атрымаеце факты з гэтым CSS кароткім курсам
Каскадныя табліцы стыляў маюць шмат пераваг. Яны дазваляюць выкарыстоўваць адзін і той жа табліцы стыляў ва ўсёй свой вэб-сайт. Ёсць два спосабу зрабіць гэта:
- сувязь з элементам LINK
- <Спасылка отн = "табліца стыляў" HREF = "styles.css">
- імпартавання з дапамогай каманды @import
- <Стыль>
- @import URL ( 'http://www.yoursite.com/styles.css');
Перавагі і недахопы знешніх табліц стыляў
Адна з лепшых рэчаў аб каскадных табліцах стыляў з'яўляецца тое, што вы можаце выкарыстоўваць іх, каб захаваць ваш сайт паслядоўныя. Самы просты спосаб зрабіць гэта, каб звязаць або імпартаваць знешнюю табліцу стыляў. Калі вы выкарыстоўваеце адзін і тую ж знешнюю табліцу стыляў для кожнай старонкі вашага сайта, вы можаце быць упэўнены, што ўсе старонкі будуць мець тыя ж стылі.
Некаторыя з пераваг выкарыстання знешніх табліц стыляў ўключаюць у сябе, што вы можаце кантраляваць знешні выгляд некалькіх дакументаў адначасова. Гэта асабліва карысна, калі вы працуеце з камандай людзей, каб стварыць свой вэб-сайт. Шмат правілаў стылю можа быць цяжка ўспомніць, і ў той час як вы можаце мець друкаваны стыль кіраўніцтва, гэта стомна прыйдзецца стала пераварочваць праз яго, каб вызначыць, напрыклад, тэкст павінен быць напісаны ў 12 пункце шрыфта Arial ці 14 пункту кур'ерам.
Вы можаце стварыць класы стыляў, якія затым могуць быць выкарыстаны на розных HTML элементаў. Калі вы часта выкарыстоўваеце адмысловы Wingdings шрыфт, каб даць акцэнт розных рэчаў на вашай старонцы, вы можаце выкарыстоўваць клас Wingdings, наладжаны ў табліцы стыляў, каб стварыць іх, а не вызначае пэўны стыль для кожнага асобніка выразнасці.
Вы можаце лёгка групаваць вашыя стылі, каб быць больш эфектыўнымі. Усе метады групоўкі, якія даступныя для CSS можна выкарыстоўваць ў знешніх табліцах стыляў, і гэта дае вам большы кантроль і гнуткасць на вашых старонках.
Тым не менш, ёсць вельмі важкія прычыны, каб не выкарыстоўваць знешнія табліцы стыляў. З аднаго боку, яны могуць павялічыць час загрузкі, калі вы спасылаецеся на многія з іх.
Кожны раз, калі вы ствараеце новы файл CSS і спасылку або імпартаваць яго ў дакумент, які патрабуецца вэб-браўзэр, каб зрабіць яшчэ адзін званок на вэб-сервер, каб атрымаць файл. І сервер выклікае запаволіць час загрузкі старонкі.
Калі ў вас ёсць толькі невялікая колькасць стыляў, яны могуць павялічыць складанасць вашай старонкі.
Паколькі стылі не відаць прама ў HTML, хто глядзіць на старонках павінен атрымаць іншы дакумент (файл CSS), каб высветліць, што адбываецца.
Як стварыць ліст Знешні стыль
Знешнія табліцы стыляў напісаны такім жа чынам, як убудаваныя і убудаваныя табліцы стыляў. Але ўсё , што вам трэба напісаць гэта селектар стылю і дэкларацыі. Вам не патрэбны СТЫЛЬ элемент або атрыбут ў дакуменце.
Як і ва ўсіх іншых CSS, сінтаксіс для правілы:
селектар {ўласцівасць: значэнне; }
Гэтыя правілы запісваюцца ў тэкставы файл з пашырэннем .css. Напрыклад, вы маглі б назваць свой стыль ліста styles.css.
Калі ў вас ёсць дакумент табліцы стыляў, вы павінны звязаць яго з вэб-старонак. Як я ўжо казаў вышэй, гэта робіцца двума спосабамі.
Узоры дакументаў CSS
Для таго каб звязаць табліцу стыляў, можна выкарыстоўваць элемент LINK. Гэта мае атрыбуты отн і HREF. Атрыбут отн паведамляе браўзэр, што вы злучаюць (у дадзеным выпадку табліца стыляў) і HREF атрыбут ўтрымлівае шлях да файла CSS.
Існуе таксама дадатковы тып атрыбуту, які можна выкарыстоўваць для вызначэння тыпу MIME связываемого дакумента. Гэта не патрабуецца ў HTML5, але павінна быць выкарыстана ў HTML 4 дакументы.
Вось код, які вы будзеце выкарыстоўваць, каб звязаць стыль CSS ліст пад назвай styles.css:
<Спасылка отн = "табліца стыляў" HREF = "styles.css">
І ў HTML 4 дакументы можна было б напісаць:
<Спасылка отн = "табліца стыляў" HREF = "styles.css" Тып = "тэкст / CSS">
Імпарт CSS стыляў
Імпартаваныя табліцы стыляў змяшчаюцца ўнутры элемента STYLE. Затым вы можаце выкарыстоўваць убудаваныя стылі, а таксама, калі вам падабаецца. Вы можаце таксама ўключыць імпартаваныя стылі ўнутры звязаных табліц стыляў. Ўнутры СТЫЛІ або CSS дакумент, напісаць:
@import URL ( 'http://www.yoursite.com/styles.css');