Sisältö Markkinointi

Mitä ovat CSS (Cascading Style Sheets)?

Lue alta täydellinen selitys peräkkäisten tyylitaulukoiden toiminnasta. Näytämme sovelluksemme sivun yläreunassa, jotta ne on helppo löytää ja käyttää. Jos luet tätä artikkelia sähköpostitse tai syötteen kautta, napsauta painiketta pakkaa CSS.

Ellet todella kehitä sivustoja, et ehkä täysin ymmärrä peräkkäisiä tyylisivuja (CSS). CSS on tyylitaulukkokieli, jota käytetään kuvaamaan kirjoitetun asiakirjan ulkoasua ja muotoilua HTML or XML. CSS:n avulla voidaan määrittää eri elementtien tyylejä, kuten fontti, väri, välit ja asettelu. CSS:n avulla voit erottaa HTML-dokumentin esityksen sen sisällöstä, mikä helpottaa verkkosivustosi visuaalisen tyylin ylläpitämistä ja päivittämistä.

CSS-kielirakenne

- valitsin on HTML-elementti, jonka haluat muokata, ja omaisuus ja arvo määritä tyylit, joita haluat käyttää kyseiseen elementtiin:

selector {
  property: value;
}

Esimerkiksi seuraava CSS tekee kaiken <h1> sivun elementtien väri on punainen ja fonttikoko 32 kuvapistettä:

CSS

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

ulostulo

Otsikko

Voit myös määrittää elementin yksilöllisen tunnuksen CSS:n:

CSS

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

ulostulo

Intro

Tai käytä luokkaa useissa elementeissä:

CSS

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

ulostulo

Haluan korostaa sana span tagissa.

Voit sisällyttää CSS:n HTML-asiakirjaasi kolmella tavalla:

  1. Sisäinen CSS käyttämällä style attribuutti HTML-elementissä
  2. Sisäinen CSS, jossa käytetään a <style> elementti <head> HTML-dokumentistasi
  3. Ulkoinen CSS, jossa käytetään erillistä .css-tiedostoa, joka on linkitetty HTML-dokumenttiin käyttämällä <link> elementti <head> HTML-dokumentistasi

Responsiivinen CSS

CSS on uskomattoman joustava ja sitä voidaan käyttää elementtien näytön säätämiseen näytön resoluution perusteella, joten voit käyttää samaa HTML-koodia, mutta rakentaa sen herkkä laitteen resoluutioon:

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

CSS-pakkaus

Yllä olevasta esimerkistä näet, että siinä on kommentti, mediakysely ja useita tyylejä, jotka käyttävät välilyöntejä ja rivinsyötteitä CSS-näkymän järjestämiseen. On hyvä käytäntö pienentää tai pakata CSS sivustollasi tiedostokoon pienentämiseksi ja sen jälkeen tyylisi pyytämiseen ja hahmontamiseen kuluvan ajan pienentämiseksi. Se ei ole pieni summa… voit nähdä yli 50 % säästöjä joissakin yllä olevissa esimerkeissä.

Monet palvelinkokoonpanot tarjoavat työkaluja, jotka pakkaavat CSS:n automaattisesti lennossa ja tallentavat pienennetyn tiedoston välimuistiin, jotta sinun ei tarvitse tehdä sitä manuaalisesti.

Mikä on SCSS?

Sassy CSS (SCSS) on CSS-esiprosessori, joka lisää toimintoja ja syntaksia CSS-kieleen. Se laajentaa CSS:n ominaisuuksia sallimalla muuttujien, sekoitusten, funktioiden ja muiden ominaisuuksien käytön, joita ei ole saatavana tavallisessa CSS:ssä.

SCSS:n edut

  • Parempi ylläpidettävyys: Muuttujien avulla voit tallentaa arvot yhteen paikkaan ja käyttää niitä uudelleen koko tyylitaulukossasi, mikä helpottaa tyylien ylläpitoa ja päivittämistä.
  • Parempi organisointi: Mixinien avulla voit ryhmitellä ja käyttää uudelleen tyylejä, mikä tekee tyylitaulukosta organisoidumman ja helpompi lukea.
  • Lisääntynyt toiminnallisuus: SCSS sisältää monia ominaisuuksia, joita ei ole saatavilla standardissa CSS:ssä, kuten funktioita, ohjausrakenteita (esim. if/else) ja aritmeettisia operaatioita. Tämä mahdollistaa dynaamisemman ja ilmeikkäämmän muotoilun.
  • Parempi suorituskyky: SCSS-tiedostot käännetään CSS:ksi, mikä voi parantaa suorituskykyä vähentämällä selaimen jäsentävän koodin määrää.

SCSS:n haitat

  • Oppimiskäyrä: SCSS:llä on eri syntaksi kuin tavallisella CSS:llä, ja sinun on opittava tämä uusi syntaksi ennen kuin voit käyttää sitä tehokkaasti.
  • Lisää monimutkaisuutta: Vaikka SCSS voi tehdä tyylitaulukostasi organisoidumman ja helpompi ylläpitää, se voi myös lisätä koodikantaasi monimutkaisuutta, varsinkin jos et tunne uusia ominaisuuksia ja syntaksia.
  • Työkalu: Jotta voit käyttää SCSS:ää, tarvitset kääntäjän, joka kääntää SCSS-koodisi CSS:ksi. Tämä vaatii lisäasetuksia ja työkaluja, mikä voi olla esteenä joillekin kehittäjille.

Tässä alla olevassa esimerkissä SCSS-koodi käyttää muuttujia arvojen tallentamiseen ($primary-color ja $font-size), jota voidaan käyttää uudelleen koko tyylitaulukossa. Tästä SCSS-koodista luotu CSS-koodi on vastaava, mutta se ei sisällä muuttujia. Sen sijaan muuttujien arvoja käytetään suoraan CSS:ssä.

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

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

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

Toinen tässä esimerkissä esitetty SCSS:n ominaisuus ovat sisäkkäiset tyylit. SCSS-koodissa h1 tyylit ovat sisäkkäin body tyylejä, mikä ei ole mahdollista tavallisessa CSS:ssä. Kun SCSS-koodi käännetään, sisäkkäiset tyylit laajennetaan erillisiksi tyyleiksi CSS-koodissa.

Kaiken kaikkiaan SCSS tarjoaa monia etuja tavalliseen CSS:ään verrattuna, mutta on tärkeää harkita kompromisseja ja valita oikea työkalu tarpeidesi ja rajoitusten mukaan.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja perustaja Martech Zone. Douglas on auttanut kymmeniä menestyneitä MarTech-startuppeja, auttanut yli 5 miljardin dollarin due diligence -tarkastuksessa Martechin hankinnoissa ja investoinneissa ja avustaa edelleen yrityksiä niiden myynti- ja markkinointistrategioiden toteuttamisessa ja automatisoinnissa. Douglas on kansainvälisesti tunnustettu digitaalisen transformaation ja MarTechin asiantuntija ja puhuja. Douglas on myös julkaissut Dummie's-oppaan ja yritysjohtajuuskirjan.

Aiheeseen liittyvät artikkelit

Takaisin alkuun -painiketta
lähellä

Adblock havaittu

Martech Zone pystyy tarjoamaan sinulle tämän sisällön veloituksetta, koska ansaitsemme sivustomme mainostulojen, kumppanilinkkien ja sponsoroinnin kautta. Olisimme kiitollisia, jos poistaisit mainosten esto-ohjelman, kun katselet sivustoamme.