Vietinis CSS įdėjimas gali supaprastinti jūsų CSS kodą ir pagerinti bendrą kodavimo patirtį.
Istoriškai su CSS buvo sunku dirbti. CSS išankstiniai procesoriai palengvino darbą su CSS ir suteikė papildomų funkcijų, pvz., kilpų, mišinių ir kt. Bėgant metams CSS įgavo daugiau galimybių ir perėmė kai kurias funkcijas, kurias iš pradžių pristatė CSS pirminiai procesoriai. Viena iš tokių funkcijų yra „įdėtas stilius“.
Įdėtas stilius leidžia kūrėjams įterpti CSS taisykles viena į kitą, atspindinčią HTML struktūrą. Dėl to kodas yra labiau organizuotas ir skaitomas, nes ryšys tarp HTML elementų ir atitinkamų stilių yra vizualiai akivaizdus.
Įdėtas stilius: senasis būdas
Įdėtas stilius yra funkcija, pasiekiama daugelyje CSS pirminiai procesoriai, tokie kaip Sass, Stylus ir Mažiau CSS. Nors šių išankstinių procesorių sintaksė gali skirtis, pagrindinė koncepcija išlieka nuosekli. Jei norite stilizuoti visus h1 elementai a div su klasės pavadinimu konteineris, įprastu CSS, jūs rašote:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
CSS pirminiame procesoriuje, pvz., Mažiau CSS, įdėtas stilius įdiegiamas taip:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Aukščiau pateiktas kodo blokas pasiekia tokius pačius rezultatus kaip ir įprastas CSS diegimas, tačiau bet kuris kodą skaitantis kūrėjas gali lengvai suvokti, kas vyksta. Šis „hierarchijos“ jausmas buvo vienas didžiausių CSS pirminių procesorių pardavimo taškų.
Lizdą medį galima įdėti į bet kokį gylį be apribojimų, tačiau būtina būti atsargiems, nes per gilus lizdas gali sukelti kodo daugiažodiškumą.
Savasis įdėtas stilius CSS
Ne visos naršyklės palaiko savąjį įdėtą stilių. The Ar galiu naudoti... svetainė gali padėti patikrinti, ar jūsų tikslinė naršyklė palaiko šią funkciją.
Savasis įdėtas stilius CSS veikia panašiai kaip CSS išankstiniai procesoriai, tai reiškia, kad bet kurį parinkiklį galima įdėti į kitą. Tačiau yra vienas esminis skirtumas, į kurį turėtumėte atkreipti dėmesį. Pažvelkite į žemiau esantį kodų bloką:
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>
Aukščiau esančiame kodo bloke div su klasės pavadinimu konteineris turi raudoną fono spalvą. Stilius, skirtas h1 elementas slypi .konteineris blokas. Tai h1 elementas turi geltoną spalvą. Kai paleisite šį kodą naršyklėje, galite pastebėti kažką ne taip. Naršyklė teisingai taiko raudoną fono spalvą konteineris div, bet h1 neturi tinkamo stiliaus.
Taip yra todėl, kad įdėtas stilius veikia šiek tiek kitaip CSS, palyginti su CSS pirminiais procesoriais, tokiais kaip Less. Negalite tiesiogiai nurodyti HTML elemento įdėtame medyje. Norėdami tai išspręsti, turite naudoti ampersandą (&), kaip parodyta toliau:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Aukščiau esančiame kodo bloke & veikia kaip nuoroda į tėvų parinkiklį. Padėkite ampersandą prieš h1 elementas turėtų leisti naršyklei žinoti, kad taikote visiems vaikams h1 elementai ant konteineris div. Kai paleidžiate kodą naršyklėje, turėtumėte pamatyti šiuos dalykus:
Nuo & yra simbolis, naudojamas nuorodai į pirminį elementą, visiškai įmanoma nukreipti elemento pseudoklases ir pseudoelementus, pavyzdžiui:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Prieš įdiegdami CSS įdėtąjį stilių, jei siekėte stilius taikyti sąlygiškai, priklausomai nuo naršyklės pločio, turėjote naudoti tokį metodą, kaip šis:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Kai naršyklė pateikia puslapį, ji nustato jo spalvą p elementas pagal naršyklės plotį. Jei naršyklės plotis viršija 750 pikselių, ji naudoja pilką spalvą; kitu atveju taikoma numatytoji spalva (juoda).
Šis įgyvendinimas veikia gerai, tačiau, kaip galite įsivaizduoti, viskas gali greitai pasidaryti labai išsami, ypač kai reikia taikyti skirtingus stilius pagal tam tikras taisykles. Dabar galima sukti lizdus žiniasklaidos užklausos tiesiogiai elemento stiliaus bloke.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Šis kodo blokas iš esmės daro tą patį, kaip ir ankstesnis, tačiau jis turi pranašumą, nes jį lengva suprasti. Žvelgdami tik į medijos užklausą ir įdėjusį pirminį elementą, galite pasakyti, kaip naršyklė pritaikys atitinkamus stilius, kai bus įvykdytos nustatytos sąlygos.
Svetainės stiliaus kūrimas naudojant CSS įdėtuosius stilius
Atėjo laikas praktiškai pritaikyti viską, ko iki šiol išmokote sukurti paprastą svetainę ir CSS įdėto stiliaus funkcijos panaudojimas. Sukurkite aplanką ir pavadinkite jį taip, kaip norite. Tame aplanke sukurkite index.htm ir a stilius.css failą.
Viduje index.htm failą, pridėkite šį pagrindinį kodą:
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>
Aukščiau pateiktas kodo blokas apibrėžia netikros naujienų svetainės žymėjimą. Tada atidarykite stilius.css failą ir pridėkite šį kodą:
.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;
}
}
Aukščiau pateiktas kodo blokas sukuria svetainės stilių naudojant CSS įdėtą stilių. The .konteineris parinkiklis veikia kaip šaknies gylis. Galite nurodyti šį parinkiklį naudodami & simbolis. Kai paleidžiate kodą naršyklėje, turėtumėte pamatyti šiuos dalykus:
Ar jums vis dar reikia CSS išankstinio procesoriaus?
Įdėjus įdėtuosius stilius į savąjį CSS, CSS išankstiniai procesoriai gali pasirodyti nereikalingi. Tačiau labai svarbu nepamiršti, kad CSS pirminiai procesoriai siūlo ne tik įdėtą stilių. Jie teikia tokias funkcijas kaip kilpos, miksai, funkcijos ir kt. Galiausiai, ar naudoti CSS išankstinį procesorių, ar ne, priklauso nuo konkretaus naudojimo atvejo ir asmeninių pageidavimų.
