Изворно ЦСС угнежђење може да поједностави ваш ЦСС код и побољша ваше целокупно искуство кодирања.
Историјски гледано, ЦСС је био тежак језик за рад. ЦСС претпроцесори су олакшали рад са ЦСС-ом и такође су обезбедили додатне функције као што су петље, миксини и још много тога. Током година, ЦСС је постао способнији и усвојио неке од карактеристика које су првобитно увели ЦСС претпроцесори. Једна таква карактеристика је „угнежђени стил“.
Угнежђени стил омогућава програмерима да угнезде ЦСС правила једно у друго, одражавајући ХТМЛ структуру. Ово резултира организованијим и читљивијим кодом, пошто је однос између ХТМЛ елемената и њихових одговарајућих стилова визуелно очигледан.
Угнежђени стил: стари начин
Нестед Стилинг је функција доступна у многим ЦСС претпроцесори као што је Сасс, писаљком и мање ЦСС-а. Иако се синтакса може разликовати међу овим предпроцесорима, основни концепт остаје доследан. Ако желите да стилизујете све х1 елементи у а див са именом класе контејнер, у обичном ЦСС-у бисте написали:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
У ЦСС претпроцесору као што је Лесс ЦСС, имплементирате угнежђени стил овако:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Горњи блок кода постиже исте резултате као обична имплементација ЦСС-а, али олакшава сваком програмеру који чита код да схвати шта се дешава. Овај осећај "хијерархије" био је једна од највећих продајних тачака ЦСС претпроцесора.
Стабло за гнежђење може бити угнежђено на било којој дубини без ограничења, али је неопходно бити опрезан, јер претерано дубоко угнежђење може довести до вишеструкости кода.
Изворни угнежђени стил у ЦСС-у
Не укључују сви претраживачи подршку за изворни угнежђени стил. Тхе Могу ли да користим... веб-сајт може да вам помогне да проверите да ли ваш циљни претраживач подржава ову функцију.
Нативни угнежђени стил у ЦСС-у функционише слично као и ЦСС претпроцесори, што значи да је могуће угнездити било који селектор унутар другог. Али постоји једна кључна разлика коју треба да приметите. Погледајте блок кода испод:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="container">
<h1>Hello from the children of planet Earth!h1>
div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
style>
body>
html>
У блоку кода изнад, див са именом класе контејнер има црвену боју позадине. Стајлинг за х1 елемент лежи у .контејнер блокирати. Ово х1 елемент има жуту боју. Када покренете овај код у прегледачу, можда ћете приметити да нешто није у реду. Прегледач исправно примењује црвену боју позадине на контејнер див, али тхе х1 нема одговарајући стил.
То је зато што угнежђени стилови раде мало другачије у ЦСС-у у поређењу са ЦСС претпроцесорима као што је Лесс. Не можете директно референцирати ХТМЛ елемент у угнежђеном стаблу. Да бисте ово поправили, морате да користите амперсанд (&) као што је илустровано у наставку:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
У блоку кода изнад, & делује као референца на родитељски селектор. Стављање амперсанда испред х1 елемент треба да обавести претраживач да циљате сво дете х1 елементи на контејнер див. Када покренете код у претраживачу, требало би да видите следеће:
Од & је симбол који се користи за упућивање на родитељски елемент, сасвим је могуће циљати псеудо-класе и псеудо-елементе елемента овако:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Пре имплементације ЦСС угнежђеног стила, ако сте желели да примените стилове условно, у зависности од ширине претраживача, морали сте да прибегнете методу попут следећег:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Када прегледач прикаже страницу, он одређује боју стр елемент на основу ширине претраживача. Ако ширина претраживача прелази 750 пиксела, користи се сива боја; у супротном, примењује подразумевану боју (црна).
Ова имплементација добро функционише, али као што можете замислити, ствари могу брзо постати прилично опширне, посебно када треба да примените различите стилове на основу одређених правила. Сада је могуће гнездити се медијски упити директно у блоку стила елемента.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Овај блок кода ради у основи исту ствар као и претходни, али има предност што је лак за разумевање. Само гледањем у медијски упит и родитељски елемент који се угнежђује, можете рећи како ће претраживач применити одговарајуће стилове када се испуне дефинисани услови.
Стилизирање веб странице помоћу ЦСС угнежђених стилова
Време је да све што сте до сада научили примените у пракси прављење једноставне веб странице и коришћење функције угнежђеног стила у ЦСС-у. Направите фасциклу и назовите је како желите. У том фолдеру креирајте датотеку индек.хтм и а стиле.цсс фајл.
У индек.хтм датотеку, додајте следећи шаблонски код:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
div>
div>
<divclass="sidebar">
<h2>Trending Articlesh2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!h4>
div>
div>
body>
html>
Блок кода изнад дефинише ознаке за лажну веб локацију за вести. Затим отворите стиле.цсс датотеку и додајте следећи код:
.container {
display: flex;
gap: 25px;@media(max-width: 750px) {
flex-direction: column;
}.article{
width:90%;
}& div:nth-child(3) {
text-align: justify;
}& span {
color: rgb(67, 66, 66);&:nth-child(1)::before {
font-style: italic;
content: "Writtenby ";
}&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Блок кода изнад стилизује веб локацију у потпуности са ЦСС угнежђеним стилом. Тхе .контејнер селектор делује као дубина корена. Можете упутити на овај селектор користећи & симбол. Када покренете код у претраживачу, требало би да видите следеће:
Да ли вам је и даље потребан ЦСС препроцесор?
Са увођењем угнежђених стилова у изворни ЦСС, ЦСС претпроцесори могу изгледати као непотребни. Међутим, кључно је имати на уму да ЦСС претпроцесори нуде више од само угнежђеног стила. Они пружају функције као што су петље, миксини, функције и још много тога. На крају крајева, да ли ћете користити ЦСС препроцесор или не зависи од вашег специфичног случаја употребе и личних преференција.
