Alkuperäinen CSS-säkkäys voi yksinkertaistaa CSS-koodiasi ja parantaa yleistä koodauskokemustasi.
Historiallisesti CSS on ollut vaikea kieli työskennellä. CSS-esiprosessorit helpottivat työskentelyä CSS: n kanssa ja tarjosivat myös lisäominaisuuksia, kuten silmukoita, mixinejä ja paljon muuta. Vuosien varrella CSS on kehittynyt tehokkaammaksi ja omaksunut joitain CSS-esiprosessorien alun perin käyttöön ottamia ominaisuuksia. Yksi tällainen ominaisuus on sisäkkäinen tyyli.
Sisäkkäisen tyylin avulla kehittäjät voivat upottaa CSS-sääntöjä toisiinsa HTML-rakenteen mukaisesti. Tämä johtaa järjestetympään ja luettavampaan koodiin, koska HTML-elementtien ja niitä vastaavien tyylien välinen suhde on visuaalisesti ilmeinen.
Sisäkkäinen tyyli: The Old Way
Nested Styling on ominaisuus, joka on saatavilla monissa CSS-esiprosessorit, kuten Sass, Stylus ja Vähemmän CSS: ää. Vaikka syntaksi saattaa vaihdella näiden esiprosessorien välillä, taustalla oleva konsepti pysyy johdonmukaisena. Jos haluat tyylittää kaikki
h1 elementit kohdassa a div luokan nimellä kontti, tavallisessa CSS: ssä kirjoittaisit:.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
CSS-esiprosessorissa, kuten Less CSS, käytät sisäkkäistä tyyliä seuraavasti:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Yllä oleva koodilohko saavuttaa samat tulokset kuin tavallinen CSS-toteutus, mutta sen avulla koodia lukevien kehittäjien on helppo ymmärtää, mitä tapahtuu. Tämä "hierarkian" tunne oli yksi CSS-esiprosessorien suurimmista myyntivalteista.
Pesäpuun voi sisäistää mihin tahansa syvyyteen ilman rajoituksia, mutta on tärkeää olla varovainen, sillä liian syvä pesimäisyys voi johtaa koodin monimuotoisuuteen.
Natiivi sisäkkäinen tyyli CSS: ssä
Kaikki selaimet eivät tue natiivia sisäkkäistä tyyliä. The Voinko käyttää... verkkosivusto voi auttaa sinua tarkistamaan, tukeeko kohdeselaimesi tätä ominaisuutta.
CSS: n natiivi sisäkkäinen tyyli toimii samalla tavalla kuin CSS-esiprosessorit, mikä tarkoittaa, että mikä tahansa valitsin voidaan sijoittaa toisen sisään. Mutta on yksi keskeinen ero, joka sinun tulee huomioida. Katso alla olevaa koodilohkoa:
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>
Yllä olevassa koodilohkossa div luokan nimellä kontti on punainen taustaväri. Tyyliä varten h1 elementti sijaitsee .container lohko. Tämä h1 elementin väri on keltainen. Kun suoritat tämän koodin selaimessa, saatat huomata jotain vialla. Selain käyttää punaista taustaväriä oikein kontti div, mutta h1 ei ole sopivaa tyyliä.
Tämä johtuu siitä, että sisäkkäiset tyylit toimivat hieman eri tavalla CSS: ssä verrattuna CSS-esiprosessoreihin, kuten Less. Et voi suoraan viitata sisäkkäisen puun HTML-elementtiin. Voit korjata tämän käyttämällä et-merkkiä (&) alla olevan kuvan mukaisesti:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Yllä olevassa koodilohkossa & toimii viittauksena ylävalitsimeen. Laita et-merkki ennen h1 elementin pitäisi kertoa selaimelle, että kohdistat kaikkiin lapsiin h1 elementtejä kontti div. Kun suoritat koodin selaimessa, sinun pitäisi nähdä seuraava:
Siitä asti kun & on symboli, jota käytetään viittaamaan pääelementtiin, on täysin mahdollista kohdistaa elementin pseudo-luokkiin ja pseudoelementteihin seuraavasti:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Jos halusit käyttää tyylejä ehdollisesti, selaimen leveydestä riippuen, jouduit turvautumaan seuraavan kaltaiseen menetelmään ennen CSS-sisättyjen tyylien käyttöönottoa:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Kun selain hahmontaa sivun, se määrittää sen värin s elementti selaimen leveyden perusteella. Jos selaimen leveys ylittää 750 pikseliä, se käyttää harmaata väriä; muussa tapauksessa se käyttää oletusväriä (musta).
Tämä toteutus toimii hienosti, mutta kuten voit kuvitella, asiat voivat muuttua melko sanalliseksi nopeasti, varsinkin kun sinun on käytettävä erilaisia tyylejä tiettyjen sääntöjen perusteella. Nyt on mahdollista pestä mediakyselyt suoraan elementin tyylilohkoon.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Tämä koodilohko tekee periaatteessa saman asian kuin edellinen, mutta sen etuna on helppo ymmärtää. Pelkästään mediakyselyä ja sisäkkäistä pääelementtiä tarkastelemalla voit kertoa, kuinka selain käyttää sopivia tyylejä, kun määritetyt ehdot täyttyvät.
Web-sivuston muotoilu CSS-sisäkkäisillä tyyleillä
On aika laittaa kaikki tähän mennessä oppimasi käytäntöön yksinkertaisen verkkosivuston rakentaminen ja CSS: n sisäkkäisen muotoiluominaisuuden hyödyntäminen. Luo kansio ja nimeä se haluamallasi tavalla. Luo kyseiseen kansioon index.htm ja a tyyli.css tiedosto.
Vuonna index.htm tiedosto, lisää seuraava yleiskoodi:
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>
Yllä oleva koodilohko määrittää valeuutisten verkkosivuston merkinnät. Avaa seuraavaksi tyyli.css tiedosto ja lisää seuraava koodi:
.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;
}
}
Yllä oleva koodilohko tyylittelee verkkosivuston kokonaan CSS-sisätetyllä tyylillä. The .container valitsin toimii juurisyvyytenä. Voit viitata tähän valitsimeen käyttämällä & symboli. Kun suoritat koodin selaimessa, sinun pitäisi nähdä seuraava:
Tarvitsetko vielä CSS-esiprosessorin?
Sisäkkäisten tyylien käyttöönoton myötä alkuperäiseen CSS: ään CSS-esikäsittelijät saattavat vaikuttaa tarpeettomilta. On kuitenkin tärkeää pitää mielessä, että CSS-esiprosessorit tarjoavat enemmän kuin vain sisäkkäisen tyylin. Ne tarjoavat ominaisuuksia, kuten silmukoita, sekoituksia, toimintoja ja paljon muuta. Viime kädessä CSS-esiprosessorin käyttäminen vai ei, riippuu käyttötapauksestasi ja henkilökohtaisista mieltymyksistäsi.