CSS (каскадныя табліцы стыляў) - гэта мова табліц стыляў, якая выкарыстоўваецца для апісання прадстаўлення дакумента, напісанага на мове разметкі. Ён выкарыстоўваецца для кіравання макетам, шрыфтамі, колерамі і іншымі візуальнымі аспектамі вэб-старонак.
CSS, або каскадныя табліцы стыляў, - гэта мова кадавання, якая выкарыстоўваецца для стылізацыі і фарматавання вэб-старонак. Гэта дазваляе вэб-дызайнерам кантраляваць знешні выгляд тэксту, малюнкаў і іншых элементаў на сайце, уключаючы іх памер, колер і становішча на старонцы. Прасцей кажучы, CSS робіць вэб-сайты прыгожымі і арганізаванымі.
CSS, або каскадныя табліцы стыляў, - гэта мова праграмавання, якая выкарыстоўваецца для апісання прадстаўлення дакумента, напісанага ў HTML або XML. CSS выкарыстоўваецца для вызначэння стылю вэб-сайта разам з HTML і з'яўляецца заснаванай на правілах мовай, якая дазваляе вам вызначаць правілы, вызначаючы групы стыляў, якія павінны прымяняцца да пэўных элементаў або груп элементаў на вашай вэб-старонцы.
CSS - гэта магутны інструмент, які можа кантраляваць макет некалькіх вэб-старонак адначасова, зэканоміўшы шмат працы. Ён можа маніпуляваць колерамі тэксту, рамкамі і іншымі элементамі для стварэння прыгожых і функцыянальных вэб-сайтаў. CSS апісвае, як элементы павінны адлюстроўвацца на экране, на паперы, у маўленні або на іншых носьбітах, што робіць яго важнай часткай вэб-распрацоўкі.
Незалежна ад таго, пачатковец вы ці дасведчаны вэб-распрацоўшчык, разуменне CSS мае вырашальнае значэнне для стварэння візуальна прывабнага і зручнага вэб-сайта. У гэтым артыкуле мы больш падрабязна разбярэмся ў тым, што такое CSS, як ён працуе і якія розныя тыпы CSS. Мы таксама вывучым некаторыя лепшыя практыкі выкарыстання CSS для стварэння цудоўных вэб-сайтаў, якія адначасова з'яўляюцца функцыянальнымі і візуальна прывабнымі.
Што такое CSS?
CSS або Cascading Style Sheets - гэта мова праграмавання, якая выкарыстоўваецца для апісання прадстаўлення дакумента, напісанага ў HTML або XML. Ён выкарыстоўваецца для стылізацыі элементаў HTML і кіравання макетам некалькіх вэб-старонак адначасова.
Вызначэнне
CSS - гэта заснаваная на правілах мова, якая вызначае правілы адлюстравання элементаў на экране, паперы, у маўленні або на іншых носьбітах. Гэта дазваляе распрацоўшчыкам аддзяліць прэзентацыю вэб-старонкі ад яе змесціва, палягчаючы абслугоўванне і абнаўленне вэб-сайта.
гісторыя
CSS быў упершыню прадстаўлены ў 1996 годзе і з тых часоў зведаў некалькі абнаўленняў і пераглядаў. Ён быў распрацаваны, каб ліквідаваць абмежаванні HTML з пункту гледжання стылю і макета. Да з'яўлення CSS HTML выкарыстоўваўся для вызначэння структуры вэб-старонкі і яе прадстаўлення. Аднак гэта ўскладніла ўнясенне змяненняў у макет або дызайн вэб-сайта.
Значэнне
CSS адыгрывае вырашальную ролю ў вэб-распрацоўцы, паколькі дазваляе распрацоўшчыкам ствараць візуальна прывабныя і адаптыўныя вэб-сайты. Гэта забяспечвае большы кантроль над прадстаўленнем вэб-сайта і дазваляе распрацоўшчыкам ствараць аднастайны выгляд на некалькіх вэб-старонках.
У заключэнне, CSS з'яўляецца важным інструментам для вэб-распрацоўшчыкаў для стварэння візуальна прывабных і адаптыўных вэб-сайтаў. Ён аддзяляе прэзентацыю вэб-сайта ад яго змесціва і дазваляе распрацоўшчыкам ствараць аднастайны выгляд і адчуванне на некалькіх вэб-старонках.
Асновы CSS
CSS - гэта магутная мова стыляў, якую можна выкарыстоўваць для фарматавання макета вэб-старонкі. У гэтым раздзеле мы разгледзім некаторыя асноўныя паняцці CSS, уключаючы сінтаксіс, селектары, уласцівасці і значэнні.
сінтаксіс
CSS - гэта заснаваная на правілах мова, якая выкарыстоўвае набор правілаў, каб вызначыць, як элементы HTML павінны адлюстроўвацца на вэб-старонцы. Правіла CSS складаецца з селектара і блока дэкларацыі. Селектар паказвае на элемент HTML, які трэба стылізаваць, у той час як блок дэкларацыі змяшчае адну або некалькі дэкларацый, падзеленых кропкай з коскай. Кожная дэкларацыя ўключае назву ўласцівасці CSS і значэнне, падзеленыя двукроп'ем.
Селектары
Селектары выкарыстоўваюцца для арыентацыі на пэўныя элементы HTML на вэб-старонцы. Існуе некалькі тыпаў селектараў, у тым ліку селектары элементаў, селектары класаў, селектары ID і селектары атрыбутаў. Селектары элементаў накіраваны на пэўныя элементы HTML, а селектары класаў - на элементы з пэўным атрыбутам класа. Селектары ідэнтыфікатара арыентуюцца на элементы з пэўным атрыбутам ідэнтыфікатара, а селектары атрыбутаў - на элементы з пэўным атрыбутам.
Ўласцівасці
Уласцівасці CSS выкарыстоўваюцца для кіравання візуальным выглядам элементаў HTML на вэб-старонцы. Ёсць шмат даступных уласцівасцяў CSS, у тым ліку колер, памер шрыфта, колер фону і поля, сярод іншых. Уласцівасцям CSS можна задаць пэўныя значэнні, такія як колер або памер шрыфта, каб кантраляваць, як элемент адлюстроўваецца.
каштоўнасці
Значэнні выкарыстоўваюцца для ўстаноўкі пэўных значэнняў уласцівасцей CSS. Напрыклад, для ўласцівасці колеру можна задаць пэўнае значэнне колеру, напрыклад, чырвоны, зялёны або сіні. Для іншых уласцівасцей, такіх як памер шрыфта, можна задаць пэўныя значэнні, напрыклад 12 або 16 пікселяў.
Правілы і прыярытэт
Правілы CSS выкарыстоўваюцца для ўстаноўкі стылю для пэўных элементаў HTML на вэб-старонцы. Калі некалькі правіл прымяняюцца да аднаго і таго ж элемента, прыярытэт будзе мець правіла з найбольшай спецыфічнасцю і самае апошняе. У некаторых выпадках можа спатрэбіцца выкарыстоўваць ключавое слова !important, каб перавызначыць іншыя правілы і забяспечыць прымяненне пэўнага стылю.
У заключэнне, CSS - гэта магутная мова стыляў, якую можна выкарыстоўваць для фарматавання макета вэб-старонкі. Разумеючы асновы сінтаксісу, селектараў, уласцівасцей і значэнняў CSS, вы можаце ствараць прыгожыя і адаптыўныя вэб-старонкі, простыя ў навігацыі і прывабныя візуальна.
Версіі CSS
CSS развіваўся на працягу многіх гадоў, з'яўляючыся новымі версіямі, каб задаволіць зменлівыя патрэбы вэб-распрацоўшчыкаў. У цяперашні час існуе чатыры асноўныя версіі CSS: CSS1, CSS2.1, CSS3 і CSS4.
CSS1
CSS1 быў першай версіяй CSS, выпушчанай у 1996 годзе. Ён забяспечваў асноўныя параметры стылю, такія як колер, памер і стыль шрыфта. Гэта таксама дазволіла ствараць простыя макеты, вызначаючы становішча элементаў на старонцы. CSS1 быў значным паляпшэннем у параўнанні з папярэднімі метадамі стылізацыі вэб-старонак, якія прадугледжвалі выкарыстанне тэгаў HTML для вызначэння знешняга выгляду элементаў.
CSS2.1
CSS2.1 быў выпушчаны ў 1998 годзе і дадаў некалькі новых функцый, у тым ліку падтрымку тыпаў носьбітаў, такіх як друк і экран, а таксама магчымасць вызначаць парадак, у якім павінны адлюстроўвацца элементы. Ён таксама прадставіў канцэпцыю селектараў, якія дазволілі распрацоўшчыкам арыентавацца на пэўныя элементы на старонцы і прымяняць да іх стылі.
CSS3
CSS3 быў прадстаўлены ў 1999 годзе і з'яўляецца апошняй версіяй CSS. Ён дадаў шырокі спектр новых функцый, уключаючы падтрымку анімацыі, пераходаў і градыентаў. CSS3 таксама прадставіў новыя параметры макета, такія як flexbox і grid, якія дазваляюць ствараць больш складаныя макеты з меншым кодам. CSS3 шырока выкарыстоўваецца і сёння і стаў стандартам сучаснай вэб-распрацоўкі.
CSS4
CSS4 зараз знаходзіцца ў распрацоўцы і, як чакаецца, будзе выпушчаны ў найбліжэйшай будучыні. Ён прадставіць некалькі новых функцый, у тым ліку падтрымку зменных, якія дазволяць распрацоўшчыкам вызначаць і паўторна выкарыстоўваць значэнні ў сваіх табліцах стыляў. CSS4 таксама будзе ўключаць новыя параметры макета, такія як запыты кантэйнераў, якія дазволяць распрацоўшчыкам ствараць адаптыўныя дызайны, якія адаптуюцца да памеру кантэйнера, у які яны змешчаны.
У заключэнне можна сказаць, што CSS прайшоў доўгі шлях з моманту свайго стварэння, з'яўляючыся новымі версіямі, каб задаволіць зменлівыя патрэбы вэб-распрацоўшчыкаў. Кожная версія дадала новыя функцыі і магчымасці, што палягчае стварэнне складаных макетаў і стыляў. З выхадам CSS4 на гарызонце будучыня вэб-распрацоўкі выглядае яркай з яшчэ больш магутнымі інструментамі і опцыямі, даступнымі для распрацоўшчыкаў.
CSS і HTML
CSS і HTML - гэта дзве розныя мовы, якія выкарыстоўваюцца для стварэння вэб-старонак. HTML - гэта мова разметкі, якая выкарыстоўваецца для структуравання кантэнту на вэб-старонцы, у той час як CSS выкарыстоўваецца для стылізацыі і фарматавання кантэнту. У гэтым раздзеле мы вывучым, як CSS і HTML працуюць разам для стварэння візуальна прывабных вэб-старонак.
Элементы HTML
Элементы HTML з'яўляюцца будаўнічымі блокамі вэб-старонкі. Гэта тэгі, якія вызначаюць структуру і змест вэб-старонкі. Элементы HTML можна выкарыстоўваць для стварэння загалоўкаў, абзацаў, спісаў, малюнкаў і іншага. Кожны элемент HTML мае свой уласны набор уласцівасцяў, якія можна стылізаваць з дапамогай CSS.
Мова разметкі
HTML - гэта мова разметкі, якая выкарыстоўвае тэгі для вызначэння структуры вэб-старонкі. Тэгі выкарыстоўваюцца, каб уключыць змест і надаць яму сэнс. Напрыклад, <h1> тэг выкарыстоўваецца для вызначэння загалоўка верхняга ўзроўню, а тэг <p> тэг выкарыстоўваецца для вызначэння абзаца. HTML - гэта магутная мова, якую можна выкарыстоўваць для стварэння складаных вэб-старонак.
сувязі
Спасылкі з'яўляюцца важнай часткай любой вэб-старонкі. Яны дазваляюць карыстальнікам перамяшчацца паміж старонкамі і атрымліваць доступ да знешніх рэсурсаў. Спасылкі ствараюцца з дапамогай <a> і можа быць стылізаваны з дапамогай CSS. Спасылкі таксама можна выкарыстоўваць для стварэння закладак на вэб-старонцы, што дазваляе карыстальнікам хутка пераходзіць да пэўных раздзелаў старонкі.
У цэлым, CSS і HTML працуюць разам, каб ствараць візуальна прывабныя вэб-старонкі. HTML вызначае структуру і змест вэб-старонкі, а CSS выкарыстоўваецца для стылю і фарматавання гэтага змесціва. Выкарыстоўваючы разам HTML і CSS, вэб-распрацоўшчыкі могуць ствараць прыгожыя і функцыянальныя сайты, простыя ў выкарыстанні і навігацыі.
CSS і вэб-дызайн
CSS гуляе вырашальную ролю ў вэб-дызайне. Гэта дазваляе распрацоўшчыкам кантраляваць візуальны выгляд вэб-старонак і забяспечваць узгодненасць некалькіх старонак. У гэтым раздзеле мы вывучым, як CSS уплывае на розныя аспекты вэб-дызайну, уключаючы макет, тыпаграфіку, колер і выявы.
Размяшчэнне
CSS дазваляе вэб-распрацоўшчыкам кантраляваць макет вэб-старонак. Выкарыстоўваючы CSS, распрацоўшчыкі могуць размяшчаць розныя элементы на вэб-старонцы, кантраляваць памер гэтых элементаў і забяспечваць іх аднолькавае адлюстраванне на розных прыладах. CSS таксама дазваляе распрацоўшчыкам ствараць адаптыўны дызайн, які адаптуецца да розных памераў экрана, гарантуючы, што вэб-старонкі будуць даступныя на ўсіх прыладах.
Кнігадрукаванне
CSS дае распрацоўнікам шырокі спектр магчымасцей для кіравання тыпаграфікай вэб-старонак. З дапамогай CSS распрацоўшчыкі могуць кантраляваць сямейства шрыфтоў, памер шрыфта, вышыню радка і інтэрвал паміж літарамі тэксту на вэб-старонцы. Яны таксама могуць кіраваць выраўноўваннем тэксту і інтэрвалам паміж рознымі элементамі вэб-старонкі.
колер
CSS дазваляе распрацоўшчыкам кантраляваць колеры, якія выкарыстоўваюцца на вэб-старонцы. З дапамогай CSS распрацоўшчыкі могуць усталёўваць колер фону вэб-старонкі, змяняць колер тэксту і кіраваць колерам розных элементаў вэб-старонкі. CSS таксама дае распрацоўшчыкам магчымасць ствараць градыенты і іншыя складаныя каляровыя эфекты.
малюнкаў
CSS дазваляе распрацоўшчыкам кіраваць адлюстраваннем малюнкаў на вэб-старонцы. З дапамогай CSS распрацоўшчыкі могуць кантраляваць памер малюнкаў, усталёўваць становішча малюнкаў на вэб-старонцы і кантраляваць непразрыстасць малюнкаў. CSS таксама дае распрацоўшчыкам магчымасць ствараць складаныя эфекты выявы, такія як цені і межы.
У заключэнне, CSS з'яўляецца важным інструментам для вэб-дызайну. Гэта дазваляе распрацоўшчыкам кіраваць макетам, тыпаграфікай, колерам і выявамі, якія выкарыстоўваюцца на вэб-старонцы, гарантуючы, што вэб-старонкі будуць візуальна прывабнымі і даступнымі на ўсіх прыладах.
CSS і вэб-распрацоўка
CSS, або каскадныя табліцы стыляў, з'яўляецца важным інструментам для вэб-распрацоўшчыкаў. Гэта дазваляе ім кантраляваць прадстаўленне дакументаў HTML і XML, уключаючы макет, колеры, шрыфты і многае іншае.
Знешні CSS
Знешні CSS - гэта асобны файл, які змяшчае ўсе стылі, якія выкарыстоўваюцца вэб-сайтам. Гэты файл звязаны з дакументам HTML з дапамогай тэг. Знешні CSS - выдатны спосаб трымаць прэзентацыю асобна ад змесціва, палягчаючы абслугоўванне і абнаўленне вэб-сайта. Гэта таксама забяспечвае ўзгодненасць на некалькіх старонках вэб-сайта.
Унутраны CSS
Унутраны CSS вызначаецца ў дакуменце HTML з дапамогай tag. It is useful when you want to apply styles to a single page or a specific section of a website. However, it can make the HTML document cluttered and harder to read.
Убудаваны CSS
Убудаваны CSS вызначаецца ў элеменце HTML з дапамогай атрыбуту style. Гэта карысна, калі вы хочаце прымяніць стылі да пэўнага элемента. Аднак гэта можа зрабіць HTML-дакумент бязладзічным і цяжэйшым для чытання. Не рэкамендуецца выкарыстоўваць убудаваны CSS для буйнамаштабнага стылю.
Запыты ў СМІ
Медыя-запыты выкарыстоўваюцца для прымянення розных стыляў у залежнасці ад памеру экрана прылады. Гэта дазваляе вэб-сайту быць спагадным і адаптавацца да розных прылад, такіх як тэлефоны, планшэты і працоўныя сталы. Медыя-запыты можна вызначыць у знешнім файле CSS або ў дакуменце HTML.
У заключэнне, CSS з'яўляецца важным інструментам для вэб-распрацоўшчыкаў. Гэта дазваляе падзяліць прэзентацыю і змест, палягчаючы абслугоўванне і абнаўленне вэб-сайта. Знешні CSS рэкамендуецца для буйнамаштабнага стылю, а ўнутраны і ўбудаваны CSS карысны для меншага стылю. Медыя-запыты дазваляюць вэб-сайту рэагаваць і адаптавацца да розных прылад.
Перавагі CSS
CSS - гэта магутны інструмент, які дазваляе вэб-распрацоўшчыкам ствараць візуальна прывабныя і паслядоўныя вэб-старонкі. Вось некаторыя з пераваг выкарыстання CSS:
Хуткасць
Адным з галоўных пераваг CSS з'яўляецца яго хуткасць. CSS дазваляе распрацоўнікам аддзяліць дызайн і макет вэб-старонкі ад яе зместу. Такі падзел можа істотна скараціць час загрузкі вэб-старонкі, бо браўзеру не трэба спампоўваць некалькі табліц стыляў для кожнай старонкі. Замест гэтага браўзер кэшуе табліцу стыляў, якую можна выкарыстоўваць на некалькіх старонках, што прыводзіць да больш хуткай загрузкі старонкі.
Ўзгодненасць
CSS дапамагае распрацоўшчыкам ствараць узгодненыя дызайны на некалькіх вэб-старонках. Выкарыстоўваючы адзіную табліцу стыляў, распрацоўшчыкі могуць гарантаваць, што ўсе старонкі вэб-сайта будуць мець адзіны выгляд. Такая ўзгодненасць можа дапамагчы палепшыць карыстацкі досвед, так як карыстальнікі змогуць лягчэй перамяшчацца па вэб-сайце і хутка знаходзіць патрэбную інфармацыю.
тэхнічнае абслугоўванне
CSS палягчае абслугоўванне і абнаўленне вэб-сайта. Аддзяляючы дызайн і вёрстку вэб-сайта ад яго кантэнту, распрацоўшчыкі могуць уносіць змены ў дызайн, не закранаючы змест. Гэта азначае, што калі трэба ўнесці змены ў дызайн вэб-сайта, гэта можна зрабіць хутка і лёгка, без неабходнасці перапісваць увесь вэб-сайт.
CSS таксама палягчае ўнясенне змяненняў у макет вэб-сайта. Выкарыстоўваючы CSS, распрацоўшчыкі могуць ствараць шматразовыя стылі, якія можна ўжываць да некалькіх элементаў вэб-старонкі. Гэта азначае, што калі неабходна ўнесці змены ў макет вэб-старонкі, гэта можна зрабіць хутка і лёгка, абнавіўшы табліцу стыляў CSS.
У заключэнне, CSS з'яўляецца магутным інструментам, які прапануе шмат пераваг вэб-распрацоўшчыкам. Выкарыстоўваючы CSS, распрацоўшчыкі могуць ствараць візуальна прывабныя і паслядоўныя вэб-старонкі, якія хутка загружаюцца і простыя ў абслугоўванні і абнаўленні.
Спасылкі на CSS
Пры працы з CSS вельмі важна мець надзейную спасылку, да якой можна звярнуцца, калі вы сутыкнецеся з незнаёмымі ўласцівасцямі або сінтаксісам. На шчасце, ёсць шмат даступных рэсурсаў, якія дапамогуць вам зразумець і эфектыўна выкарыстоўваць CSS.
W3C
World Wide Web Consortium (W3C) з'яўляецца асноўнай арганізацыяй, якая адказвае за распрацоўку і падтрымку вэб-стандартаў, уключаючы CSS. Іх вэб-сайт прапануе поўны даведнік па CSS, які ахоплівае ўсе аспекты мовы, ад базавага сінтаксісу да прасунутых метадаў кампаноўкі. Спасылка арганізавана па ўласцівасцях і змяшчае прыклады выкарыстання кожнай з іх.
У дадатак да спасылкі, вэб-сайт W3C таксама змяшчае мноства іншых рэсурсаў для вывучэння і выкарыстання CSS, у тым ліку падручнікі, спецыфікацыі і лепшыя практыкі. Калі вы сур'ёзна ставіцеся да валодання CSS, вэб-сайт W3C з'яўляецца важным рэсурсам.
Модулі
CSS - гэта модульная мова, што азначае, што яна складаецца з асобных модуляў, якія можна аб'яднаць для стварэння поўнай табліцы стыляў. Кожны модуль сканцэнтраваны на пэўнай вобласці CSS, такой як макет, тыпаграфіка або колер. Калі разбіць CSS на модулі, яго лягчэй зразумець і эфектыўна выкарыстоўваць.
Вэб-сайт W3C змяшчае спіс усіх модуляў CSS разам са спасылкамі на іх спецыфікацыі. Некаторыя з найбольш важных модуляў ўключаюць:
- Селектары CSS: вызначае сінтаксіс для выбару элементаў у дакуменце.
- Мадэль CSS Box: апісвае, як элементы размешчаны на старонцы.
- CSS Grid Layout: забяспечвае магутную сістэму для стварэння складаных макетаў.
- CSS Transforms: Дазваляе трансфармаваць форму, памер і становішча элементаў.
- CSS-анімацыя: дазваляе ствараць анімацыю і пераходы з дапамогай CSS.
Азнаёміўшыся з рознымі модулямі CSS, вы можаце стаць больш дасведчаным распрацоўшчыкам CSS і ствараць больш прасунутыя і дасканалыя праекты.
У заключэнне, наяўнасць надзейнай спасылкі на CSS мае вырашальнае значэнне для любога распрацоўшчыка, які працуе з CSS. Вэб-сайт W3C змяшчае шырокую даведку, а таксама шмат іншых рэсурсаў, якія дапамогуць вам асвоіць CSS. Акрамя таго, разуменне розных модуляў CSS можа дапамагчы вам ствараць больш прасунутыя і складаныя дызайны.
Css анімацыі
CSS Animations - гэта магутны інструмент, які дазваляе распрацоўшчыкам ствараць дынамічныя і прывабныя ўражанні ад карыстальнікаў на сваіх сайтах. Анімацыю можна выкарыстоўваць, каб прыцягнуць увагу да пэўных элементаў на старонцы, забяспечыць зваротную сувязь з карыстальнікамі або проста дадаць візуальны інтарэс.
Каб стварыць анімацыю CSS, вам спачатку трэба выбраць элемент, які вы хочаце аніміраваць, а потым вызначыць анімацыю з дапамогай уласцівасцей CSS. The animation уласцівасць выкарыстоўваецца для вызначэння анімацыі і мае некалькі падуласцівасцей, якія дазваляюць кантраляваць час, працягласць і іншыя дэталі анімацыі.
Адна важная рэч, якую варта адзначыць, - гэта тое, што анімацыя можа патрабаваць рэсурсаў, таму важна выкарыстоўваць яе эканомна і асцярожна. Анімацыя павінна паляпшаць карыстацкі досвед, а не пагаршаць яго, таму важна старанна праверыць іх і разгледзець, як яны паўплываюць на агульную прадукцыйнасць вашага сайта.
Вось некаторыя асноўныя ўласцівасці CSS, якія можна выкарыстоўваць для стварэння анімацыі:
імя анімацыі
Гэта ўласцівасць вызначае назву анімацыі, якую вы хочаце прымяніць да элемента. Вы можаце вызначыць некалькі анімацый і прымяніць іх да розных элементаў на вашай старонцы.
анімацыя працягласць
Гэта ўласцівасць вызначае час, які спатрэбіцца для завяршэння анімацыі. Вы можаце вызначыць працягласць у секундах або мілісекундах.
анімацыя-функцыя часу
Гэта ўласцівасць вызначае функцыю сінхранізацыі, якая будзе выкарыстоўвацца для кіравання хуткасцю анімацыі. Ёсць некалькі загадзя вызначаных функцый сінхранізацыі, якія вы можаце выкарыстоўваць, напрыклад linear, ease-in, і ease-out, або вы можаце стварыць свае ўласныя функцыі адліку часу.
анімацыя-затрымка
Гэта ўласцівасць вызначае прамежак часу, які пройдзе да пачатку анімацыі. Гэта можа быць карысна, калі вы жадаеце змяніць час некалькіх анімацый на старонцы.
анімацыя-ітэрацыя-колькасць
Гэта ўласцівасць вызначае колькасць паўтораў анімацыі. Вы можаце задаць пэўную колькасць ітэрацый або выкарыстоўваць значэнне infinite каб стварыць анімацыю, якая паўтараецца бясконца доўга.
анімацыя-рэжысура
Гэта ўласцівасць вызначае кірунак, у якім будзе прайгравацца анімацыя. Вы можаце ўказаць normal для анімацыі наперад, reverse для зваротнай анімацыі, або alternate для пераключэння анімацыі наперад і назад.
рэжым запаўнення анімацыі
Гэта ўласцівасць вызначае, як элемент, які аніміруецца, павінен быць стылізаваны да і пасля анімацыі. Вы можаце ўдакладніць none каб пакінуць стыль элемента нязменным, forwards каб захаваць стыль элемента ў канцы анімацыі, або backwards каб прымяніць стыль элемента ў пачатку анімацыі.
анімацыя-прайграванне-стан
Гэта ўласцівасць вызначае, прайграваецца ці прыпынена анімацыя. Вы можаце выкарыстоўваць значэнне paused каб прыпыніць анімацыю, або running каб пачаць або аднавіць яго.
У заключэнне, анімацыя CSS - гэта магутны інструмент, які можна выкарыстоўваць для стварэння дынамічнага і прывабнага карыстальніцкага досведу на вашым сайце. Аднак важна выкарыстоўваць іх эканомна і асцярожна, бо яны могуць патрабаваць рэсурсаў і паўплываць на агульную прадукцыйнасць вашага сайта. Разумеючы ключавыя ўласцівасці CSS, якія выкарыстоўваюцца для стварэння анімацыі, вы можаце ствараць анімацыі, якія паляпшаюць карыстацкі досвед і дадаюць візуальнай цікавасці вашаму сайту.
Больш чытання
CSS (каскадныя табліцы стыляў) - гэта мова, якая выкарыстоўваецца для апісання прадстаўлення моў разметкі, такіх як HTML і XML. Ён выкарыстоўваецца для стылізацыі і кампаноўкі вэб-старонак шляхам змены шрыфта, колеру, памеру і інтэрвалу змесціва, падзелу яго на некалькі слупкоў або дадання анімацыі і іншых дэкаратыўных функцый. CSS эканоміць шмат працы і можа кіраваць макетам некалькіх вэб-старонак адначасова. (крыніца: Вэб-дакументы MDN, W3Schools)
Звязаныя ўмовы распрацоўкі вэб-сайтаў