Devenia Opi / Sanasto
Ymmärrä CSS-tyylit
CSS määrittää, miltä HTML-sisältö näyttää: typografian, värit, välit, asettelun ja responsiivisen toiminnan. Tässä oppaassa opit, mitä tyyleillä voi muuttaa ja mitä ne eivät voi korjata.
Aloita sähköpostilla. Lähetä sivu tai kysymyksesi, niin vastaamme selkeästi.
Käytä CSS:ää esityskerroksena.
Kahvilan ruokalistassa HTML tunnistaa otsikon, annokset ja hinnat. CSS määrittää fontit, välit ja kohdistuksen. Leveällä näytöllä CSS voi sijoittaa kaksi ruokalistan saraketta vierekkäin ja pinota ne puhelimessa, vaikka annokset ja hinnat pysyvät samoina.
Mitkä asiat tyylit voivat muuttaa
Suurempi otsikko ei voi korvata puuttuvaa aukioloaikaa tai selittää epäselvää tarjousta. Korjaa sanat ensin ja käytä tyylejä vasta sitten, jotta ne on helppo löytää. Katso ensimmäinen koodiesimerkki MDN:n CSS-esittelystä.
Miksi yksi tyyli ohittaa toisen
Samaan elementtiin voi kohdistua useita sääntöjä. Kaskadi ratkaisee, mitä arvoa selain käyttää, kun säännöt ovat ristiriidassa. Esimerkiksi koko sivuston linkkiväri ja navigointilinkkien erillinen väri voivat molemmat koskea valikon linkkiä.
Jos värimuutos ei näy, tarkista elementti selaimen kehittäjätyökaluissa. Styles-paneeli näyttää täsmäävät säännöt ja yliviivatut määritykset. Tarkista, mikä sääntö voittaa, ennen kuin lisäät uuden ylikirjoituksen.
Tarkista, että ihmiset voivat käyttää sivua
Testaa sivu aidolla sisällöllä tyylimuutoksen jälkeen. Pitkät otsikot, valikot ja hinnat voivat paljastaa ongelmia, jotka lyhyt paikkamerkkiteksti peittää.
Hyvä tyylittely auttaa kävijöitä lukemaan ja toimimaan. Se ei takaa parempia sijoituksia hakutuloksissa. Googlen sivukokemusta koskeva ohje tekee selväksi, että hyvä käyttökokemus yksin ei takaa kärkisijaa.
CSS: usein kysyttyä
Takaisin sanastoon.
Mistä CSS on lyhenne?
CSS on lyhenne sanoista Cascading Style Sheets. Se määrittää, miltä HTML-elementit näyttävät: typografian, värit, välit ja asettelun.
Mikä ero on HTML:llä ja CSS:llä?
HTML tarjoaa rakenteen ja merkityksen, kuten otsikot, kappaleet ja luettelot. CSS tarjoaa esitystavan eli sen, miltä nämä elementit näyttävät.
Pitääkö minun opetella CSS:ää verkkosivuston rakentamista varten?
Ei. Teema tai visuaalinen editori voi tarjota värien, typografian ja asettelun säätimet. Käytä niitä ensin, jotta toisiinsa liittyvät sivut pysyvät yhtenäisinä. Opettele CSS:ää, kun sinun on ymmärrettävä tai muutettava esityssääntöä, jota käytettävissä olevat säätimet eivät kata.
Mitä responsiivinen suunnittelu tarkoittaa?
Responsiivinen suunnittelu tarkoittaa, että verkkosivusto mukautuu eri näyttökokoihin. CSS muuttaa puhelimien, tablettien ja tietokoneiden asettelua ja välejä.
Vaikuttaako CSS hakukoneoptimointiin?
CSS voi vaikuttaa siihen, miten sivu näkyy ja latautuu, mutta värien tai välien muuttaminen ei yksin paranna sijoituksia. Pidä hyödyllinen sisältö käytettävissä ja tarkista mobiiliasettelu sekä latauskäyttäytyminen, kun muutat tyylejä.
Onko sinulla käytännön kysymys CSS:stä?
Lähetä sivun osoite, väärältä näyttävä elementti ja näytön koko, jossa näet ongelman. Kerro myös, mitä odotit näkeväsi, jotta voimme tunnistaa tarvittavan tyylimuutoksen.