CSS 实例
CSS valitsimet
CSS käyttö
CSS värit
CSS tausta
CSS reunat
- Aseta neljän reunan leveys
- Aseta yläpuolisen reunan leveys
- Aseta alapuolisen reunan leveys
- Aseta vasemman reunan leveys
- Aseta oikean reunan leveys
- Aseta neljän reunan tyyli
- Aseta yläpuolisen reunan tyyli
- Aseta alapuolisen reunan tyyli
- Aseta vasemman reunan tyyli
- Aseta oikean reunan tyyli
- Aseta neljän reunan väri
- Aseta yläpuolisen reunan väri
- Aseta alapuolisen reunan väri
- Aseta vasemman reunan väri
- Aseta oikean reunan väri
- Kaikki reunaväliominaisuudet yhdessä lauseessa
- Lisää kulmat elementtiin
- Aseta eri reunaväliominaisuudet jokaiselle reunalle
- Kaikki yläpuoliset reunaväliominaisuudet yhdessä lauseessa
- Kaikki alapuoliset reunaväliominaisuudet yhdessä lauseessa
- Kaikki vasemmat reunaväliominaisuudet yhdessä lauseessa
- Kaikki oikeat reunaväliominaisuudet yhdessä lauseessa
CSS ulkoreunat
- Määritä eri ulkopuoliset tilat elementin jokaiselle sivulle
- Käytä neljän arvon lyhennettyä margin-ominaisuutta
- Käytä kolmen arvon lyhennettyä margin-ominaisuutta
- Käytä kahden arvon lyhennettyä margin-ominaisuutta
- Käytä yhden arvon lyhennettyä margin-ominaisuutta
- Aseta ulkopuolinen tila auto, keskusta elementtiä sisällä olevassa kontissa
- Periisi elementin vasen ulkopuolinen tila isäelementille
- Ulkopuolisen tilan yhdistäminen
CSS sisäreunat
- Määritä eri sisätilat elementin jokaiselle sivulle
- Käytä neljän arvon lyhennettyä sisätilaa
- Käytä kolmen arvon lyhennettyä sisätilaa
- Käytä kahden arvon lyhennettyä sisätilaa
- Käytä yhden arvon lyhennettyä sisätilaa
- Sisätila ja elementin leveys (ei aseta box-sizing)
- Sisätila ja elementin leveys (aseta box-sizing)
- Aseta elementin vasen sisätila
- Aseta elementin oikea sisätila
- Aseta elementin yläpuolinen sisätila
- Aseta elementin alapuolinen sisätila
CSS korkeus/leveys
CSS laatikkomalli
CSS reunanvarjo
CSS teksti
- Aseta eri elementtien tekstiväri
- Tasaa teksti
- Poista hyperlinkin alapuolinen viiva
- Decoraatio tekstissä
- Kontrolloi kirjainten ison ja pienen kirjaimen käyttö tekstissä
- Indenta teksti
- Määritä merkkiväli
- Määritä riviväli
- Aseta elementin tekstin suunta
- Lisää kirjasinkäyritys
- Määritä elementin tekstin varjo
- Estä tekstin riveittymä elementissä
- Aseta kuvan sijoitus tekstissä pystysuunnassa
CSS fontti
CSS linkit
CSS luettelot
CSS taulukot
- Määritä table-, th- ja td-elementtien mustat reunat
- Käytä border-collapse
- Ympäröi taulukon yksi reunaväli
- Määritä taulukon leveys ja korkeus
- Aseta sisällön horisontaalinen tasaus (text-align)
- Aseta sisällön pystysuuntainen tasaus (vertical-align)
- Määritä th- ja td-elementtien sisäpuolinen reunaväli
- Horisontaalinen erotin
- Vaihtuva taulukko
- Balkkitaulukko
- Määritä taulukon reunan väri
- Aseta taulukon otsikon sijainti
- Vastausvälinen taulukko
- Luo kaunis taulukko
CSS-näyttö
CSS-sijoitus
- Sijoita elementti suhteessa selaimen ikkunaa
- Sijoita elementti suhteessa elementin normaaliseen sijaintiin
- Aseta elementti absoluuttisella sijoituksella
- Liimautuva sijoitus
- Peittävä elementti
- Aseta elementin muoto
- Aseta kuvan yläreuna kuvapisteiden arvon avulla
- Aseta kuvan alareuna kuvapisteiden arvon avulla
- Aseta kuvan vasen reunaväli pikseleillä
- Aseta kuvan oikea reunaväli pikseleillä
- Sijoita kuvat ja teksti (vasen yläkulma)
- Sijoita kuvat ja teksti (yläkulma)
- Sijoita kuvat ja teksti (vasen alakulma)
- Sijoita kuvat ja teksti (oikea alakulma)
- Sijoita kuvat ja teksti (keskitetty)
CSS-ylitys
- Käytä overflow: visible - Sisältöä ei ole leikattu. Se piirretään elementin ulkopuolelle.
- Käytä overflow: hidden - Sisältöä on leikattu, mutta loput sisältö piilotetaan.
- Käytä overflow: scroll - Sisältöä on leikattu, mutta lisätty roolipalkki nähdäksesi loput sisällöstä.
- Käytä overflow: auto - Jos sisältöä on leikattu, lisää roolipalkki nähdäksesi loput sisällöstä.
- Käytä overflow-x ja overflow-y
CSS-floataus
- Floatausominaisuuksien yksinkertainen käyttö
- Reunaviivallinen ja ulkoneva kuva liukuvaksi kappaleen oikealle
- Otsikollinen kuva oikealle liukuvaksi
- Keskitä kappaleen ensimmäinen kirjain vasemmalle
- Sulje liukuvuus (käytä clear-ominaisuutta)
- Sulje liukuvuus (käytä clearfix-hakua)
- Luo liukuvat laatikot
- Luo rinnakkaiset kuvat
- Luo yhtä korkeat laatikot (flexboxin avulla)
- Luo horisontaalinen valikko
- Luo web-rakennelmaesimerkki
CSS Inline-block
CSS-tasauselementit
- Keskitä ulkopuolisin marginein
- Keskitä teksti
- Keskitä kuva
- Vasemmalta oleva ja oikealta oleva tasaus position-ominaisuuksilla
- Vasemmalta oleva ja oikealta oleva tasaus position-ominaisuuksilla - yliversio
- Vasemmalta oleva ja oikealta oleva tasaus float-ominaisuuksilla
- Vasemmalta oleva ja oikealta oleva tasaus float-ominaisuuksilla - yliversio
- Horisontaalinen keskitys padding-ominaisuudella
- Horisontaalinen ja vertikaalinen keskitys
- Horisontaalinen keskitys line-height-ominaisuudella
- Horisontaalinen ja vertikaalinen keskitys position-ominaisuuksilla
CSS-yhdistäjä
CSS pseudolinkit
CSS pseudoelementit
CSS sisältögenerointi
CSS läpinäkyvyys
CSS navigointirivi
- Täysin tyylitelty pystysuuntainen navigointipalkki
- Täysin tyylitelty vaakainen navigointipalkki
- Kiinnitetty täyskorkeus laskettu pystysuuntainen navigointipalkki
- Kiinnitetty vaakainen navigointipalkki
- Kiinnitetty navigointipalkki (ei toimi IE:ssä tai Edge 15 ja aikaisemmissa versioissa)
- Vastauskykyinen ylätunniste
- Vastauskykyinen sivupalkki
CSS pudotuslista
CSS kuvasprite
CSS ominaisuusvalitsimet
- Valitse kaikki <a>-elementit, joilla on target-ominaisuus
- Valitse kaikki <a>-elementit, joilla on target="_blank" ominaisuus
- Valitse kaikki elementit, joilla on title-ominaisuus, jossa title-ominaisuus sisältää sanalistan, jossa yksi sana on "flower"
- Valitse kaikki elementit, joilla on class-ominaisuus, joka alkaa "top" (tulee olla koko sana)
- Valitse kaikki elementit, joilla on class-ominaisuus, joka alkaa "top" (ei voi olla koko sana)
- Valitse kaikki elementit, joilla on class-ominaisuus, joka päättyy "test"
- Valitse kaikki elementit, joilla on sisältö "te" class-ominaisuudella
CSS lomakkeet
- Täysleveä syöttökenttä
- Täytetty syöttökenttä
- Reunalla oleva syöttökenttä
- Alareunalla oleva syöttökenttä
- Väritetty syöttökenttä
- Fokusta saanut syöttökenttä
- Fokusta saanut syöttökenttä 2
- Ikoneilla varustettu syöttökenttä
- Animaatiolla varustettu hakukenttä
- Aseta tekstikentän tyyli
- Aseta valitsimen tyyli
- Aseta painikkeen tyyli
- Vastauskykyinen lomake
CSS laskuri
CSS verkkosivuston asettelu
CSS pyöristetyt kulmat
CSS reunakuvat
CSS tausta
- Lisää useita taustakuvia elementtiin
- Määritä taustakuvan koko
- Käytä "contain" ja "cover"-avainsanoja taustakuvan skaalaamiseen
- Määritä taustakuvan koko
- Täysikokoiset taustakuvat (peittää koko sisältöalueen)
- Käytä background-origin:ää määrittääksesi taustakuvan sijoituksen
- Käytä background-clip:ää määrittääksesi taustan piirtämisen alueen
CSS aaltosuunta
- Lineaarinen sävytys - ylhäältä alaspäin
- Lineaarinen sävytys - vasemmalta oikealle
- Lineaarinen sävytys - kulmien suuntaan
- Lineaarinen sävytys - tiettyssä kulmassa
- Lineaarinen sävytys - useita väriasteikkoja
- Lineaarinen sävytys - regattakilpailun värit + teksti
- Lineaarinen sävytys - läpinäkyvyys
- Lineaarinen sävytys - toistuva lineaarinen sävytys
- Radiaalinen sävytys - tasaisesti jakautuvat väriasteikot
- Radiaalinen sävytys - eri etäisyyksillä olevat väriasteikot
- Radiaalinen sävytys - määrittää muodon
- Radiaalinen sävytys - eri mittakaavakysymykset
- Radiaalinen sävytys - toistuva radiaalinen sävytys
CSS-veiväheite
- Yksinkertainen varjoefekti
- Lisää väri varjoon
- Lisää hämärtä varjoon
- Valkoinen teksti mustalla varjolla
- Punainen neonvalo varjo
- Punainen ja sininen neonvalo varjo
- Valkoinen teksti mustalla, sinisellä ja syvällä sinisellä varjolla
- Lisää yksinkertainen box-shadow elementtiin
- Lisää väri box-shadowiin
- Lisää väri ja hämärtä box-shadowiin
- Luo paperikorttimainen (teksti)
- Luo paperikorttimainen (Polaroid-kuvia)
CSS tekstieffektit
CSS-verkkokirjasin
CSS 2D 转换
- translate() - Poistaa elementin nykyisestä sijainnista
- rotate() - Elementin kelloinen pyörittäminen
- rotate() - Elementin vastakka-antikelloinen pyörittäminen
- scale() - suurentaa elementtiä
- scale() - pienennä elementtiä
- skewX() - kierrä elementtiä X-akselin suhteen
- skewY() - kierrä elementtiä Y-akselin suhteen
- skew() - kierrä elementtiä X ja Y-akselin suhteen
- matrix() - kierrä,缩放、移动和倾斜元素
CSS 3D 转换
CSS 过渡
CSS 动画
- Liitä animaatio elementtiin
- Animaatio - muuttaa elementin taustaväriä
- Animaatio - muuttaa elementin taustaväriä ja sijaintia
- Viivytetty animaatio
- Toistettu animaatio kolme kertaa ennen loppua
- Ei lopetettava animaatio
- Toistettu animaatio
- Vaihteleva animaatio
- Animaation nopeuskaaret
- Animaation lyhenteet
CSS 工具提示
CSS-tyylikkäät kuvat
- Kulmikas kuvat
- Kierrekuvat
- Esikatselu
- Linkkinä toimiva esikatselu
- 响应式图像
- Kuvateksti (ylareuna vasemmalla)
- Kuvateksti (ylareuna oikealla)
- Kuvateksti (vasen alareuna)
- Kuvateksti (ylareuna oikealla)
- Kuvateksti (keskitetty)
- Polaroid-kuvat
- Harmaasävyinen kuvafiltteri
- Edistynyt - kuvamodaali CSS:n ja JavaScriptin avulla
CSS Object-fit
CSS 按钮
- Perus-CSS-painike
- Painikkeen väri
- Painikkeen koko
- Kulmikas painike
- Väripainikkeen reunaviivat
- Silityksessä oleva painike
- Varjostettu painike
- Pois käytöstä oleva painike
- Painikkeen leveys
- Painikeryhmä
- Reunaviivoilla varustettu painikeryhmä
- Animaatioon perustuva painike (hiiren osoitinefekti)
- Animaatioon perustuva painike (näppäilyefekti)
- Animaatioon perustuva painike (aaltoefekti)
CSS 分页
CSS 多列
- Luo monikolonnaisuus
- Määritä sarakkeiden välisen tilan leveys
- Määritä sarakkeiden välisen reunan tyyli
- Määritä sarakkeiden välisen reunan leveys
- Määritä sarakkeiden välisen reunan väri
- Määritä sarakkeiden välisen reunan leveys, tyyli ja väri
- Määritä, kuinka monta saraketta elementti tulisi kattamaan
- Määritä suositeltava paras leveys sarakkeille
CSS 用户界面
CSS 变量
CSS Box Sizing
CSS joustavuuslaatikko
- Kolmen joustavuuskomponentin sisältävä joustavuuslaatikko
- Kolmen joustavuuskomponentin sisältävä joustavuuslaatikko - rtl suunta
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Joustavuuskomponenttien järjestys
- Margin-right:auto;
- Margin:auto; = täydellinen keskitys
- Aseta align-self joustavuuskomponentille
- Määritä joustavuuskomponentin pituus suhteessa muihin joustavuuskomponentteihin
- Luo joustavuuslaatikko vastaukselliseen kuvakokoelmaan
- Luo joustavuuslaatikko vastaukselliseen verkkosivustoon
