Marketing okhutira

Kodi Cascading Style Sheets (CSS) Ndi Chiyani?

Werengani pansipa kuti mumve zambiri za momwe ma cascading stylesheets amagwirira ntchito. Timawonetsa mapulogalamu athu pamwamba pa tsamba kuti zikhale zosavuta kupeza ndi kugwiritsa ntchito. Ngati mukuwerenga nkhaniyi kudzera pa imelo kapena chakudya, dinani kuti compress CSS wanu.

Compress CSS Chotsani CSS Koperani Zotsatira

Pokhapokha ngati mukupanga masamba, mwina simungamvetse bwino mapepala amtundu wa cascading (CSS). CSS ndi chinenero cha stylesheet chomwe chimagwiritsidwa ntchito kufotokoza maonekedwe ndi maonekedwe a chikalata cholembedwa HTML or XML. CSS ingagwiritsidwe ntchito kutchula masitayelo azinthu zosiyanasiyana monga font, mtundu, masitayilo, ndi masanjidwe. CSS imakulolani kuti mulekanitse ulaliki wa chikalata chanu cha HTML ndi zomwe zili, kupangitsa kukhala kosavuta kusunga ndikusintha mawonekedwe atsamba lanu.

Kapangidwe ka Chiyankhulo cha CSS

The chosankha ndiye chinthu cha HTML chomwe mukufuna kupanga, ndi katundu ndi mtengo fotokozani masitayelo omwe mukufuna kugwiritsa ntchito pa chinthucho:

selector {
  property: value;
}

Mwachitsanzo, CSS yotsatira ipanga zonse <h1> Zinthu patsamba zili ndi mtundu wofiira komanso kukula kwa 32px:

CSS

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

linanena bungwe

wakuti

Mutha kufotokozeranso CSS pa ID yapadera pa chinthu:

CSS

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

linanena bungwe

tsamba loyambilira

Kapena gwiritsani ntchito kalasi pazinthu zingapo:

CSS

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

linanena bungwe

ndikufuna ku yosangalatsa mawu mu span tag.

Mutha kuphatikiza CSS muzolemba zanu za HTML m'njira zitatu:

  1. Inline CSS, pogwiritsa ntchito style mawonekedwe pa chinthu cha HTML
  2. Internal CSS, pogwiritsa ntchito a <style> element mu <head> za chikalata chanu cha HTML
  3. CSS Yakunja, pogwiritsa ntchito fayilo yosiyana ya .css yolumikizidwa ndi chikalata chanu cha HTML pogwiritsa ntchito <link> element mu <head> za chikalata chanu cha HTML

Kuyankha CSS

CSS ndi yosinthika modabwitsa ndipo itha kugwiritsidwa ntchito kusintha mawonedwe a zinthu kutengera mawonekedwe a skrini, kuti mutha kukhala ndi HTML yemweyo koma mumange. uthe mpaka kukonza kwa chipangizochi:

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

Kusintha kwa CSS

Mutha kuwona m'chitsanzo pamwambapa kuti pali ndemanga, funso lazama TV, ndi masitaelo angapo omwe amagwiritsa ntchito mipata ndi ma feed a mzere kukonza mawonekedwe a CSS. Ndichizoloŵezi chabwino kwambiri chochepetsera kapena kukakamiza CSS yanu pa tsamba lanu kuti muchepetse kukula kwa mafayilo, kenako, nthawi yomwe imafunika kuti mupemphe ndikupangira makongoletsedwe anu. Si ndalama zochepa… mutha kuwona ndalama zopitilira 50% pazitsanzo zina pamwambapa.

Zosintha zambiri za seva zimapereka zida zomwe zimangokakamiza CSS pa ntchentche ndikusunga fayilo ya minified kuti musamachite pamanja.

SCSS ndi chiyani?

Sassy CSS (Zamgululi) ndi CSS preprocessor yomwe imawonjezera magwiridwe antchito ndi ma syntax kuchilankhulo cha CSS. Imakulitsa luso la CSS polola kugwiritsa ntchito zosinthika, zosakaniza, ntchito, ndi zina zomwe sizipezeka mu CSS wamba.

Ubwino wa SCSS

  • Kusamalitsa bwino: Pogwiritsa ntchito zosinthika, mutha kusunga zinthu pamalo amodzi ndikuzigwiritsanso ntchito papepala lanu lonse, kupangitsa kukhala kosavuta kukonza ndikusintha masitayelo anu.
  • Kukonzekera bwino: Ndi zosakaniza, mutha kupanga magulu ndikugwiritsanso ntchito masitayelo, kupangitsa kuti masitayelo anu akhale okonzeka komanso osavuta kuwerenga.
  • Kuwonjezeka kwa magwiridwe antchito: SCSS imaphatikizapo zinthu zambiri zomwe sizipezeka mu CSS wamba, monga magwiridwe antchito, mawonekedwe owongolera (monga ngati/mwina), ndi magwiridwe antchito a masamu. Izi zimapangitsa kuti pakhale makongoletsedwe amphamvu komanso omveka bwino.
  • Kuchita bwino: Mafayilo a SCSS amasanjidwa kukhala CSS, yomwe imatha kusintha magwiridwe antchito pochepetsa kuchuluka kwa ma code omwe amayenera kugawidwa ndi osatsegula.

Zoyipa za SCSS

  • Mpindi yophunzirira: SCSS ili ndi kalembedwe kosiyana ndi CSS wamba, ndipo muyenera kuphunzira kalembedwe katsopano kameneka musanagwiritse ntchito bwino.
  • Kuvuta kowonjezera: Ngakhale SCSS imatha kupanga masitayelo anu kukhala okonzeka bwino komanso osavuta kuwasamalira, atha kuyambitsanso zovuta zina mu codebase yanu, makamaka ngati simukudziwa zatsopano ndi mawu.
  • Zida: Kuti mugwiritse ntchito SCSS, mufunika compiler kuti mumasulire khodi yanu ya SCSS mu CSS. Izi zimafuna kukhazikitsidwa kowonjezera ndi zida, zomwe zitha kukhala cholepheretsa kulowa kwa ena opanga.

Muchitsanzo chomwe chili pansipa, nambala ya SCSS imagwiritsa ntchito zosintha kuti zisungidwe ($primary-color ndi $font-size) zomwe zitha kugwiritsidwanso ntchito patsamba lonse. Khodi ya CSS yomwe imapangidwa kuchokera ku code iyi ya SCSS ndiyofanana, koma siyiphatikiza zosinthika. M'malo mwake, zikhalidwe za zosinthazo zimagwiritsidwa ntchito mwachindunji mu CSS.

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

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

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

Chinthu chinanso cha SCSS chomwe chawonetsedwa pachitsanzo ichi ndi masitaelo a nested. Mu code ya SCSS, ndi h1 masitayelo amapangidwa mkati body masitayilo, zomwe sizingatheke mu CSS yokhazikika. Khodi ya SCSS ikapangidwa, masitayelo omwe amakhala nawo amakulitsidwa kukhala masitayelo osiyana mu kachidindo ka CSS.

Ponseponse, SCSS imapereka zabwino zambiri kuposa CSS yokhazikika, koma ndikofunikira kuganizira zamalonda ndikusankha chida choyenera cha polojekiti yanu kutengera zosowa zanu ndi zopinga zanu.

Douglas Karr

Douglas Karr ndi CMO OpenINSIGHTS ndi woyambitsa wa Martech Zone. Douglas wathandizira oyambitsa ambiri opambana a MarTech, wathandizira kulimbikira kopitilira $ 5 bil pakugula ndi kuyika kwa Martech, ndipo akupitiliza kuthandiza makampani kukhazikitsa ndikusintha njira zawo zogulitsa ndi zotsatsa. Douglas ndi katswiri wodziwika padziko lonse lapansi wosinthira digito komanso katswiri komanso wokamba nkhani wa MarTech. Douglas ndi mlembi wofalitsidwa wa kalozera wa Dummie komanso buku la utsogoleri wabizinesi.

Nkhani

Bwererani pamwamba
Close

Adblock yapezeka

Martech Zone imatha kukupatsirani izi popanda mtengo chifukwa timapanga ndalama patsamba lathu kudzera muzotsatsa, maulalo ogwirizana, komanso kuthandizira. Tingayamikire ngati mungachotse choletsa ad mukamawona tsamba lathu.