Прачытайце ніжэй поўнае тлумачэнне таго, як працуюць каскадныя табліцы стыляў. Мы паказваем нашы прыкладанні ў верхняй частцы старонкі, каб іх было лёгка знайсці і выкарыстоўваць. Калі вы чытаеце гэты артыкул па электроннай пошце або ў стужцы, націсніце на сціснуць ваш 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 трыма спосабамі:
- Убудаваны CSS з выкарыстаннем
styleатрыбут элемента HTML - Унутраны CSS з выкарыстаннем a
<style>элемент у ст<head>вашага дакумента HTML - Знешні 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, але важна ўлічваць кампрамісы і выбіраць правільны інструмент для вашага праекта з улікам вашых патрэбаў і абмежаванняў.
роднасны Martech Zone змест
