Inline, убудаваныя і знешнія табліцы стыляў: Вось што вам трэба ведаць
фронтенд-распрацоўка вэб-сайт часта прадстаўляюцца ў выглядзе 3 ножак крэсла. Гэтыя ногі наступным чынам:
Другі этап гэтага крэсла, CSS або каскадныя табліцы стыляў, гэта тое, што мы глядзім на сёння. У прыватнасці, мы хочам звярнуцца да 3-х відаў стыляў, якія можна дадаць у дакумент.
- убудаваныя стылі
- убудаваныя стылі
- знешнія стылі
Кожны з гэтых відаў стыляў CSS мае свае перавагі і недахопы, таму давайце больш глыбокі погляд на кожным з іх паасобку.
убудаваныя стылі
Убудаваныя стылі стылі, якія напісаны непасрэдна ў тэгу ў HTML-дакуменце. Убудаваныя стылі ўплываюць толькі на канкрэтны тэг яны прымяняюцца да. Вось прыклад ўнутранага стылю, які ўжываецца да стандартнай спасылцы, або якару, тэг:
Гэтае правіла CSS ператворыць стандартнае падкрэсліванне тэкст ўпрыгажэнні ад гэтай адной спасылкі. Гэта не было б, аднак, змяніць любую іншую спасылку на гэтай старонцы. Гэта адна з абмежаванняў ўбудаваных стыляў. Так як яны змяняюцца толькі па канкрэтным пунктам, вам трэба будзе засмечваць ваш HTML з гэтымі стылямі для дасягнення фактычнага дызайну старонкі. Гэта не лепшая практыка. На самай справе, гэта адзін крок выдаляецца з дзён тэгаў «шрыфт» і сумесь структуры і стылю ў вэб-старонках.
Убудаваныя стылі таксама маюць вельмі высокую спецыфічнасць.
Гэта робіць іх вельмі цяжка перапісаць з іншымі, без убудаваных стыляў. Напрыклад, калі вы хочаце зрабіць сайт спагадным і змяніць , як элемент выглядае ў вызначаныя кропкі супыну з дапамогай медыя запытаў , убудаваныя стылі на элемент будзе зрабіць гэта вельмі цяжка зрабіць.
У канчатковым рахунку, убудаваныя стылі сапраўды прызначаныя толькі пры выкарыстанні вельмі эканомна.
На самай справе, я рэдка калі-небудзь выкарыстоўваць убудаваныя стылі на сваіх вэб-старонках.
убудаваныя стылі
Убудаваныя стылі стылі, якія ўбудаваныя ў загалоўку дакумента. Убудаваныя стылі ўплываюць толькі тэгі на старонцы, яны ўбудоўваюцца ст. Зноў жа, такі падыход зводзіць на нішто адзін з моцных бакоў CSS. Паколькі кожная старонка будзе мець стылі ў
, Калі вы хочаце зрабіць змены па ўсім сайце, як змяніць колер спасылак ад чырвонага да зялёнага, вам трэба будзе зрабіць гэта змяненне на кожнай старонцы, паколькі кожная старонка выкарыстоўвае убудаваную табліцу стыляў. Гэта лепш, чым убудаваныя стылі, але ўсё-ткі праблематычны, у многіх выпадках.
Stylesheets, якія дадаюцца да
дакумента таксама дадаць значную колькасць коды разметкі на гэтую старонку, якая таксама можа зрабіць старонку цяжэй кіраваць у будучыні.
Перавага ўбудаваных табліц стыляў з'яўляецца тое, што нагрузка непасрэдна з самай старонкай, замест таго, каб патрабаваць ад іншых знешніх файлаў для загрузкі. Гэта можа быць карысць ад хуткасці загрузкі і пункту гледжання прадукцыйнасці .
Знешнія табліцы стыляў
Большасць вэб-сайтаў сёння выкарыстоўваюць знешні стыль sheets.External стылі стылі, якія напісаны ў выглядзе асобнага дакумента, а затым далучаныя да розных вэб-дакументаў. Знешнія табліцы стыляў могуць паўплываць на любы дакумент , які яны звязаны, а гэта значыць , што калі ў вас ёсць вэб - сайт на 20 старонак , дзе кожная старонка выкарыстоўвае тую ж самую табліцу стыляў (гэта , як правіла , як гэта робіцца), вы можаце зрабіць візуальнае змена да кожнага з гэтых старонак, проста змяніўшы гэтую табліцу стыляў.
Гэта робіць доўгатэрміновае кіраванне сайтам значна прасцей.
Недахоп знешніх табліц стыляў з'яўляецца тое, што яны патрабуюць старонак для здабывання і загрузкі гэтых знешніх файлаў. Не кожная старонка будзе выкарыстоўваць кожны стыль у CSS ліста, таму многія старонкі будуць загружацца значна большую старонку CSS, чым на самай справе трэба.
Хоць гэта праўда, што ёсць падзенне прадукцыйнасці для знешніх CSS-файлаў, гэта, вядома, можа быць зведзена да мінімуму. Рэальна, CSS файлы проста тэкставыя файлы, так што яны, як правіла, не вельмі вялікія, каб пачаць з. Калі ўвесь ваш сайт выкарыстоўвае 1 CSS файл, вы таксама атрымліваеце перавага гэтага дакумента ў кэшы пасля таго, як першапачаткова загружаны.
Гэта азначае, што там можа быць невялікае падзенне прадукцыйнасці на першай старонцы некаторых наведвання, але наступныя старонкі будуць выкарыстоўваць кэшаваць файл CSS, так што любы ўдар будзе адмаўляецца. Знешнія файлы CSS з'яўляюцца як я пабудаваць усе мае вэб-старонак.