Змест маркетынгу

Што такое каскадныя табліцы стыляў (CSS)?

Прачытайце ніжэй поўнае тлумачэнне таго, як працуюць каскадныя табліцы стыляў. Мы паказваем нашы прыкладанні ў верхняй частцы старонкі, каб іх было лёгка знайсці і выкарыстоўваць. Калі вы чытаеце гэты артыкул па электроннай пошце або ў стужцы, націсніце на сціснуць ваш CSS.

Калі вы сапраўды не распрацоўваеце сайты, вы можаце не цалкам зразумець каскадныя табліцы стыляў (CSS). CSS - гэта мова табліц стыляў, якая выкарыстоўваецца для апісання выгляду і фарматавання дакумента, напісанага ў HTML or XML. CSS можна выкарыстоўваць для ўказання стыляў для розных элементаў, такіх як шрыфт, колер, інтэрвал і макет. CSS дазваляе аддзяліць прэзентацыю вашага HTML-дакумента ад яго змесціва, палягчаючы падтрыманне і абнаўленне візуальнага стылю вашага сайта.

Структура мовы CSS

,en селектар гэта элемент HTML, які вы хочаце стылізаваць, і ўласнасць і значэнне вызначце стылі, якія вы хочаце прымяніць да гэтага элемента:

selector {
  property: value;
}

Напрыклад, наступны CSS зробіць усё <h1> элементы на старонцы маюць чырвоны колер і памер шрыфта 32 пікселяў:

CSS

h1 {
  color: red;
  font-size: 32px;
}

выхад

Загаловак

Вы таксама можаце ўказаць CSS для ўнікальнага ідэнтыфікатара элемента:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

выхад

Увядзенне

Або прымяніць клас да некалькіх элементаў:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

выхад

я хачу вылучыць слова ў тэгу span.

Вы можаце ўключыць CSS у свой дакумент HTML трыма спосабамі:

  1. Убудаваны CSS з выкарыстаннем style атрыбут элемента HTML
  2. Унутраны CSS з выкарыстаннем a <style> элемент у ст <head> вашага дакумента HTML
  3. Знешні CSS з выкарыстаннем асобнага файла .css, звязанага з вашым дакументам HTML з дапамогай <link> элемент у ст <head> вашага дакумента HTML

Спагадны CSS

CSS неверагодна гнуткі і можа выкарыстоўвацца для карэкціроўкі адлюстравання элементаў у залежнасці ад дазволу экрана, так што вы можаце мець той жа HTML, але ствараць яго спагадны да дазволу прылады:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

Сціск CSS

Вы бачыце ў прыведзеным вышэй прыкладзе, што ёсць каментар, медыя-запыт і некалькі стыляў, якія выкарыстоўваюць прабелы і пераводы радкоў для арганізацыі выгляду CSS. Гэта выдатная практыка - мінімізаваць або сціскаць CSS на вашым сайце, каб паменшыць памеры файлаў і, адпаведна, час, неабходны для запыту і адлюстравання вашага стылю. Гэта не малая сума… вы можаце зэканоміць больш за 50% на некаторых з прыведзеных вышэй прыкладаў.

Многія канфігурацыі сервераў прапануюць інструменты, якія аўтаматычна сціскаюць CSS на хаду і кэшуюць мініфікаваны файл, так што вам не трэба рабіць гэта ўручную.

Што такое SCSS?

Нахабны CSS (СКСС) - гэта прэпрацэсар CSS, які дадае дадатковую функцыянальнасць і сінтаксіс мове CSS. Ён пашырае магчымасці CSS, дазваляючы выкарыстоўваць зменныя, міксіны, функцыі і іншыя функцыі, недаступныя ў стандартным CSS.

Перавагі SCSS

  • Палепшаная зручнасць абслугоўвання: з выкарыстаннем зменных вы можаце захоўваць значэнні ў адным месцы і паўторна выкарыстоўваць іх ва ўсёй табліцы стыляў, палягчаючы абслугоўванне і абнаўленне стыляў.
  • Лепшая арганізацыя: з дапамогай міксінаў вы можаце групаваць і паўторна выкарыстоўваць наборы стыляў, робячы вашу табліцу стыляў больш арганізаванай і лёгкай для чытання.
  • Павялічаная функцыянальнасць: SCSS уключае мноства функцый, недаступных у стандартным CSS, такіх як функцыі, структуры кіравання (напрыклад, if/else) і арыфметычныя аперацыі. Гэта дазваляе зрабіць стыль больш дынамічным і выразным.
  • Павышаная прадукцыйнасць: файлы SCSS кампілююцца ў CSS, што можа павысіць прадукцыйнасць за кошт памяншэння колькасці кода, які трэба аналізаваць браўзеру.

Недахопы SCSS

  • Крывая навучання: SCSS мае сінтаксіс, які адрозніваецца ад стандартнага CSS, і вам трэба будзе вывучыць гэты новы сінтаксіс, перш чым вы зможаце ім эфектыўна карыстацца.
  • Дадатковая складанасць: хаця SCSS можа зрабіць вашу табліцу стыляў больш арганізаванай і прасцейшай у абслугоўванні, яна таксама можа ўнесці дадатковую складанасць у вашу кодавую базу, асабліва калі вы не знаёмыя з новымі функцыямі і сінтаксісам.
  • Інструменты: каб выкарыстоўваць SCSS, вам спатрэбіцца кампілятар для перакладу вашага кода SCSS у CSS. Гэта патрабуе дадатковых налад і інструментаў, што можа стаць перашкодай для ўваходу ў сістэму для некаторых распрацоўшчыкаў.

У гэтым прыкладзе ніжэй код SCSS выкарыстоўвае зменныя для захоўвання значэнняў ($primary-color і $font-size), якія можна паўторна выкарыстоўваць ва ўсёй табліцы стыляў. Код CSS, які ствараецца з гэтага кода SCSS, эквівалентны, але ён не ўключае зменныя. Замест гэтага значэнні зменных выкарыстоўваюцца непасрэдна ў CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Яшчэ адна асаблівасць SCSS, якая дэманструецца ў гэтым прыкладзе, - гэта ўкладзеныя стылі. У кодзе SCSS, h1 стылі ўкладзеныя ў body стылі, што немагчыма ў стандартным CSS. Калі код SCSS кампілюецца, укладзеныя стылі пашыраюцца ў асобныя стылі ў кодзе CSS.

У цэлым SCSS дае шмат пераваг у параўнанні са стандартным CSS, але важна ўлічваць кампрамісы і выбіраць правільны інструмент для вашага праекта з улікам вашых патрэбаў і абмежаванняў.

Douglas Karr

Douglas Karr з'яўляецца CMO кампаніі OpenINSIGHTS і заснавальнік ст Martech Zone. Дуглас дапамог дзясяткам паспяховых стартапаў MarTech, аказаў дапамогу ў належнай абачлівасці больш чым на 5 мільярдаў долараў у набыцці і інвестыцыях Martech і працягвае дапамагаць кампаніям у рэалізацыі і аўтаматызацыі іх продажаў і маркетынгавых стратэгій. Дуглас - міжнародна прызнаны эксперт і дакладчык па лічбавай трансфармацыі і MarTech. Дуглас таксама з'яўляецца апублікаваным аўтарам даведніка па манекенах і кнігі па бізнес-кіраўніцтву.

Артыкулы па Тэме

Вярнуцца да пачатку кнопкі
блізка

Выяўлена блакіроўка рэкламы

Martech Zone можа даць вам гэты кантэнт бясплатна, таму што мы манетызуем наш сайт за кошт даходаў ад рэкламы, партнёрскіх спасылак і спонсарства. Мы былі б удзячныя, калі б вы выдалілі блакіроўшчык рэкламы пры праглядзе нашага сайта.