Nilalaman Marketing

Ano ang Cascading Style Sheets (CSS)?

Magbasa sa ibaba para sa buong paliwanag kung paano gumagana ang mga cascading stylesheet. Ipinapakita namin ang aming mga app sa itaas ng page upang madali itong mahanap at magamit. Kung binabasa mo ang artikulong ito sa pamamagitan ng email o feed, mag-click hanggang sa i-compress ang iyong CSS.

Maliban kung talagang gumagawa ka ng mga site, maaaring hindi mo lubos na mauunawaan ang mga cascading style sheet (CSS). Ang CSS ay isang stylesheet na wika na ginagamit upang ilarawan ang hitsura at pag-format ng isang dokumentong nakasulat HTML or XML. Maaaring gamitin ang CSS upang tukuyin ang mga istilo para sa iba't ibang elemento tulad ng font, kulay, espasyo, at layout. Binibigyang-daan ka ng CSS na paghiwalayin ang presentasyon ng iyong HTML na dokumento mula sa nilalaman nito, na ginagawang mas madali ang pagpapanatili at pag-update ng visual na istilo ng iyong website.

Istraktura ng Wika ng CSS

Ang tagapili ay ang HTML na elemento na gusto mong i-istilo, at ang ari-arian at halaga tukuyin ang mga istilo na gusto mong ilapat sa elementong iyon:

selector {
  property: value;
}

Halimbawa, gagawin ng sumusunod na CSS ang lahat <h1> ang mga elemento sa isang pahina ay may pulang kulay at laki ng font na 32px:

CSS

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

Pagbubuhos

Pamagat

Maaari mo ring tukuyin ang CSS para sa isang natatanging ID sa isang elemento:

CSS

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

Pagbubuhos

Intro

O maglapat ng klase sa maraming elemento:

CSS

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

Pagbubuhos

Gusto kong mag- highlight isang salita sa span tag.

Maaari mong isama ang CSS sa iyong HTML na dokumento sa tatlong paraan:

  1. Inline na CSS, gamit ang style attribute sa isang HTML element
  2. Panloob na CSS, gamit ang a <style> elemento sa <head> ng iyong HTML na dokumento
  3. Panlabas na CSS, gamit ang isang hiwalay na .css file na naka-link sa iyong HTML na dokumento gamit ang <link> elemento sa <head> ng iyong HTML na dokumento

Tumutugon CSS

Ang CSS ay hindi kapani-paniwalang nababaluktot at maaaring gamitin upang ayusin ang pagpapakita ng mga elemento batay sa resolution ng screen, para magkaroon ka ng parehong HTML ngunit buuin ito nakikiramay sa resolution ng device:

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

Compression ng CSS

Makikita mo sa halimbawa sa itaas na mayroong komento, isang query sa media, at maraming istilo na gumagamit ng mga puwang at line feed upang ayusin ang view ng CSS. Ito ay isang mahusay na kasanayan upang maliitin o i-compress ang iyong CSS sa iyong site upang bawasan ang mga laki ng file at, pagkatapos, ang oras na kinakailangan upang hilingin at i-render ang iyong estilo. Ito ay hindi maliit na halaga… makakakita ka ng higit sa 50% na matitipid sa ilan sa mga halimbawa sa itaas.

Maraming mga configuration ng server ang nag-aalok ng mga tool na awtomatikong i-compress ang CSS sa mabilisang at i-cache ang pinaliit na file nang sa gayon ay hindi mo na kailangang gawin ito nang manu-mano.

Ano ang SCSS?

Sassy CSS (SCSS) ay isang CSS preprocessor na nagdaragdag ng karagdagang functionality at syntax sa CSS language. Pinapalawak nito ang mga kakayahan ng CSS sa pamamagitan ng pagpapahintulot sa paggamit ng mga variable, mixin, function, at iba pang feature na hindi available sa karaniwang CSS.

Mga Bentahe ng SCSS

  • Pinahusay na pagpapanatili: Sa paggamit ng mga variable, maaari kang mag-imbak ng mga halaga sa isang lugar at muling gamitin ang mga ito sa kabuuan ng iyong stylesheet, na ginagawang mas madali ang pagpapanatili at pag-update ng iyong mga estilo.
  • Mas mahusay na organisasyon: Sa mga mixin, maaari kang magpangkat at muling gumamit ng mga hanay ng mga istilo, na ginagawang mas organisado at mas madaling basahin ang iyong stylesheet.
  • Nadagdagang functionality: Kasama sa SCSS ang maraming feature na hindi available sa karaniwang CSS, gaya ng mga function, control structures (hal. if/else), at arithmetic operations. Nagbibigay-daan ito para sa mas dynamic at nagpapahayag na pag-istilo.
  • Mas mahusay na pagganap: Ang mga SCSS file ay pinagsama-sama sa CSS, na maaaring mapabuti ang pagganap sa pamamagitan ng pagbawas sa dami ng code na kailangang i-parse ng browser.

Mga Disadvantage ng SCSS

  • Learning curve: Ang SCSS ay may ibang syntax mula sa karaniwang CSS, at kakailanganin mong matutunan ang bagong syntax na ito bago mo ito magamit nang epektibo.
  • Karagdagang kumplikado: Bagama't maaaring gawing mas organisado at mas madaling mapanatili ng SCSS ang iyong stylesheet, maaari rin itong magpasok ng karagdagang pagiging kumplikado sa iyong codebase, lalo na kung hindi ka pamilyar sa mga bagong feature at syntax.
  • Tooling: Upang magamit ang SCSS, kakailanganin mo ng compiler para isalin ang iyong SCSS code sa CSS. Nangangailangan ito ng karagdagang setup at tooling, na maaaring maging hadlang sa pagpasok para sa ilang developer.

Sa halimbawang ito sa ibaba, ang SCSS code ay gumagamit ng mga variable upang mag-imbak ng mga halaga ($primary-color at $font-size) na maaaring magamit muli sa buong stylesheet. Ang CSS code na nabuo mula sa SCSS code na ito ay katumbas, ngunit hindi kasama dito ang mga variable. Sa halip, ang mga halaga ng mga variable ay direktang ginagamit sa CSS.

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

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

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

Ang isa pang tampok ng SCSS na ipinakita sa halimbawang ito ay mga nested na istilo. Sa SCSS code, ang h1 ang mga istilo ay nakapugad sa loob ng body mga estilo, na hindi posible sa karaniwang CSS. Kapag ang SCSS code ay pinagsama-sama, ang mga nested na estilo ay pinalawak sa magkakahiwalay na mga estilo sa CSS code.

Sa pangkalahatan, ang SCSS ay nagbibigay ng maraming pakinabang sa karaniwang CSS, ngunit mahalagang isaalang-alang ang mga trade-off at piliin ang tamang tool para sa iyong proyekto batay sa iyong mga pangangailangan at mga hadlang.

Douglas Karr

Douglas Karr ay CMO ng OpenINSIGHTS at ang nagtatag ng Martech Zone. Nakatulong si Douglas sa dose-dosenang matagumpay na mga startup ng MarTech, tumulong sa angkop na pagsusumikap ng higit sa $5 bil sa mga pagkuha at pamumuhunan ng Martech, at patuloy na tinutulungan ang mga kumpanya sa pagpapatupad at pag-automate ng kanilang mga diskarte sa pagbebenta at marketing. Si Douglas ay isang kinikilalang internasyonal na digital na pagbabago at eksperto at tagapagsalita ng MarTech. Si Douglas ay isa ring nai-publish na may-akda ng isang Dummie's guide at isang business leadership book.

Kaugnay na Artikulo

Bumalik sa tuktok na pindutan
Pagsasara

Natukoy ang Adblock

Martech Zone ay kayang ibigay sa iyo ang nilalamang ito nang walang bayad dahil pinagkakakitaan namin ang aming site sa pamamagitan ng kita ng ad, mga link na kaakibat, at mga sponsorship. Ikinalulugod namin kung aalisin mo ang iyong ad blocker habang tinitingnan mo ang aming site.