Noudata näitä vaiheita tullaksesi CSS Superstariksi

CSS (Cascading Style Sheets) on yksi ydintekniikoista, joita käytetään verkkosivujen rakentamisessa. Koska selaimet voivat ymmärtää VAIN tyylisivun kieltä, on tärkeää oppia CSS perusteellisesti hallitsemaan web-kehitystä.

CSS: n käytön aloittaminen on erittäin helppoa. Muutamalla tunnilla koulutuksella voit helposti muotoilla tekstiä, elementtejä ja asetteluja. Siitä tulee kuitenkin jatkuvasti vaikeaa ja pian tulet tilanteeseen, jossa koodisi alkaa tulla melko sotkuinen. Komponentit, jotka toimivat ennen kuin aloitat rikkoutumisen, sinä googletat ja löydät korjauksen, joka korjaa elementin, mutta rikkoa viittä muuta elementtiä, koska google-palvelun löytämä ratkaisu muutti näytön tai sijainnin

Miksi CSS: n oikea oppiminen on tärkeää

Jos sinulla ei ole syvempää ymmärrystä perusteista, CSS: stä tulee enemmän kuin erehdysmenetelmä. Yrität kokeilla erilaisia ​​arvoja eri ominaisuuksille ja pidät lopuksi sitä, minkä tyyppinen teos on lähellä haluamaasi, ymmärtämättä sen toimintaa.

Alat googleida perusasioita, kuten “kuinka keskittää kaksi jakoa” tai “kuinka kohdistaa div ja kaksi tekstiä pystysuunnassa”, ja kopioi liitä koodi StackOverflow tai codePen joka kerta. Tuolloin, kun flexbox ei ollut niin suosittu, ”miten kohdistat sivun pystysuoraan ja vaakasuoraan?” Oli klassinen CSS-haastattelua koskeva kysymys. Monet aloittelijat pystyivät saamaan vaakasuoran osan oikealle, mutta vain harvat saivat pystysuoran osan oikealle.

Etenemissuunnitelma

1. Perusteet

Jos olet vasta aloittamassa web-kehitystä, oppia HTML-perusteita ennen CSS: n aloittamista. Lue CSS: ssä ensin teoria siitä, mikä CSS on, kuinka se toimii selaimessa, ja sen perussintaksista ja käytöstä.

Opi käytettävissä olevista tyylisivuista, niiden eroista, valitsimista ja perustyyleistä, kuten fonttikoko, leveys, korkeus jne.

Voit aloittaa käymällä läpi oppaita MDN: ssä.

2. CSS-laatikkomalli

luotto: https://developer.mozilla.org

Ymmärtää CSS - laatikkomallin perusteet ja siihen liittyvät ominaisuudet, kuten reunus, reunus, pehmustus jne

3. Kuvat ja tausta

Kuvat herättävät verkkosivun eläväksi. On olemassa monia tapoja lisätä kuva, kuten kuvatunnisteet, lisäämällä taustavärejä / kaltevuuksia ja taustakuvia muihin tunnisteisiin. Voit myös soveltaa aiemmin opittua, kuten asettaa rajoille kuvia tai käyttää useita kuvia ja kehittää yksinkertaisen gallerian.


.kuva {
   taustakuva: url (../ images / wallpaper.jpg);
}

4. Näyttö ja sijainti

Nämä kaksi ovat CSS: n tuotuimpia ominaisuuksia, joissa sinun on kiinnitettävä huomiota ymmärtääksesi niitä oikein. Näiden kahden ominaisuuden tunteminen voi tehdä CSS-matkasi paljon sujuvammaksi.

 näyttö: lohko | inline | sisäinen lohko | taulukko | jne

Ymmärrä, kuinka näitä näytön ominaisuuksia käytetään. Alat huomata, että jotkut HTML-elementit, kuten

tai

käyttäytyvät kuten näyttö: estä, ja jotkut elementit, kuten , käyttäytyvät kuten näyttö: rivillä.

asema: staattinen | ehdoton | suhteellinen | kiinteä | tahmea

Tämä on yksi ominaisuuksista, joissa jopa kokeneet ohjelmoijat tekevät virheitä. Opi kuinka kukin heistä toimii, kuinka yhden elementin sijainti vaikuttaa sisaruksiinsa tai vanhempiinsa, missä tilanteissa käytät niitä jne.

Tämä vaihe on niin tärkeä, että voit toistaa sen uudestaan ​​ja uudestaan, kunnes ymmärrät!

kellua: vasen | oikea

Vaikka kelluvat asettelut ovat vähän vanha koulu, on olemassa monia vanhoja verkkosivustoja, jotka käyttävät edelleen kelluvia asetteluita.

5. Värit, kirjasimet, luettelot ja taulukot

Ymmärrä erilaisia ​​värimuotoja, kuten HEX-koodi, rgb, rgba, hsl, hsla, läpinäkyvä jne.

väri valkoinen;
väri: #fff;
väri: rgb (255, 255, 255);
väri: rgba (255, 255, 255, 1);
väri: hsl (0, 100%, 100%);
väri: hsla (0, 100%, 100%, 1);
väri: läpinäkyvä;

Opi käyttämään erilaisia ​​fontteja. Jotkut fontit eivät ole käytettävissä kaikissa selaimissa, joten sinun on opittava lisäämään fontteja manuaalisesti woff- tai ttf-tiedostoilla tai tuoda google-fontteja.

CSS voi muuttaa järjestämättömän perusluettelon

    kauniiksi navigointipalkiksi! Vuosia sitten taulukoita käytettiin näytön asettelujen luomiseen, kiitos hyvää, ettemme enää tee sitä!

    6. Pseudo-luokat ja yhdistäjät

    CSS-pseudoluokka on valitsimeen lisätty avainsana, joka määrittelee valitun elementin erityistilan. Sidosluokka voi olla yhtä yksinkertainen kuin: hover tai: vieraili tai jotain monimutkaista, kuten: n-tyyppinen viimeinen (pariton)

    Yhdistimet auttavat meitä soveltamaan tyylejä lapsielementteihin tai sisaruksiin helposti, joutumatta luomaan jokaiselle uusia luokkia.

    / * kaikkien säilytysastian kappaleelementtien väri on punainen * /
    .kontti> p {
      väri: keltainen;
    }

    7. Debugging and Dev -työkalut

    CSS ei heitä virheitä. Se rikkoo hiljaisesti käyttöliittymää, jos et saa tyylejä oikein , joten Dev-työkalujen käytön oppiminen on erittäin tärkeää.

    Chrome Dev -työkalut ovat hämmästyttävä työkalu verkkokehittäjille. Se on varustettu paljon hienoja ominaisuuksia verkkosivujen virheenkorjaukseen reaaliajassa, ja siinä on myös suorituskyvyn tarkistustyökaluja, kuten siihen sisäänrakennettu majakka.

    8. Harjoittele harjoitteluharjoittelu

    Kuva David Rangel on Unsplash

    Yllä oppimasi sisältö riittää perussivuston kehittämiseen, joten tässä vaiheessa sinun tulisi aloittaa harjoittelu kehittämällä pieniä verkkosivustoja. Voit kohdata monia haasteita, kun rakennat todellisen sovelluksen. Harjoitteluasi varten voit kehittää yksinkertaisen verkkosivuston lomakohteelle tai rakentaa kuvagalleria tai blogin tai myös rakentaa muutaman perusominaisuuden suosikki sosiaalisesta mediastasi, kuten Facebook tai Instagram.

    9. Responsiivinen web-suunnittelu

    luotto: Wikipedia

    Kun olet oppinut tietokoneiden verkkokehityksen, on olemassa paljon muita laitteita, joiden kautta verkkosivustoja käytetään. Näiden laitteiden tukeminen on yhtä tärkeää. Ennen kuin responsiivinen suunnittelu tuli suosituksi, kehittäjät suunnittelivat erillisen verkkosivuston matkapuhelimille, erillisen verkkosivuston kosketusominaisuuksilla varustetuille laitteille jne. Muistatko m.facebook.com ja touch.facebook.com?

    Responsiivisessa web-suunnittelussa on 3 tärkeää asiaa:

    Nesteen asettelut:

    Pikselillä asetettua leveyttä ei skaalata selainikkunan perusteella. Jotta elementit voidaan skaalata selaimen koon perusteella, meidän on luotava juoksevat asettelut asettamalla koot% tai rem yksikköinä.

    Mediakyselyt:

    Mediakysely on tekniikka sisällyttää CSS-ominaisuuksien lohko vain, jos tietty ehto on totta. Asetamme havaintokohdat suunnittelumme perusteella ja muutamme CSS: ää selaimen leveyden mukaan.

    Vain @media-näyttö ja (enimmäisleveys: 600 kuvapistettä) {
      vartalo {
        taustaväri: vaaleansininen;
      }
    }

    Reagoivat kuvat:

    Kuvat pienenevät, kun selainikkunan leveys pienenee tai jos verkkosivustoa katsotaan mobiililaitteissa. Joskus olisi vaikea keskittyä tietyn kuvan tärkeisiin yksityiskohtiin, joten meidän on käytettävä erilaisia ​​kuvia eri näytöissä.

    10. Flexbox ja ruudukko

    On kulunut noin 10 vuotta (!) Siitä, kun Flexbox esiteltiin ensimmäisen kerran, mutta se otettiin käyttöön vasta hiljattain vuonna 2015. - lähde

    Flexbox ja Grid ovat tyylejä, joita käytetään joustavien asettelujen luomiseen, ja ne helpottavat elämäämme! Tämä on yksi parhaista asioista, mitä CSS: lle on koskaan tapahtunut.

    Alla esitetty asettelu olisi ottanut yli 300 riviä CSS-koodia ilman Flexboxia tai Ruudukkoa.

    11. Muutokset, siirtymät ja animaatiot

    Perusmuutosten ja siirtymien oppiminen on hyödyllistä, jos haluat luoda vuorovaikutteisen verkkosivun, jossa on liikkuvia osia hiiren tapahtumista tai näppäimistötapahtumista, kuten hiiri tai napsautus.

    Ennen CSS3: ta animaatiot tehtiin lähinnä jQuery - JavaScript-kirjaston avulla. Nyt CSS: stä on tullut niin voimakas, että voimme tehdä monimutkaisia ​​animaatioita ilman JavaScriptiä.

    12. Esiprosessorit

    CSS-prosessorit ovat skriptikieliä, jotka laajentavat CSS: n oletusominaisuuksia. Niiden avulla voimme käyttää logiikkaa CSS-koodissamme, kuten muuttujat, pesäys, periminen, sekoitukset, funktiot ja matemaattiset toiminnot. Jotkut suosituimmista ovat SASS, LESS, STYLUS ja POSTCSS.

    SASS: n SCSS-muotoa käytetään laajemmin, joten on hyvä aloittaa SASS: n kehittäminen.

    POSTCSS: n automaattisen korjauslisäosan avulla CSS-säännöt ovat yhteensopivia eri selainten kanssa lisäämällä ylimääräisiä sääntöjä, kuten -moz- ja-webkit-.

    13. Kehykset

    Oppimiskehykset, kuten Bootstrap, Semantic-UI tai Materialize, ovat valinnaisia, mutta erittäin hyödyllisiä nopeampaan kehitykseen, koska ne tarjoavat paljon tyylejä ja asetteluita laatikosta.

    Nämä kehykset testataan useilla selaimilla, joten niiden käyttäminen välttää joitain yhteensopivuusongelmia. Suurin osa kehyksistä noudattaa reagoivaa suunnittelumallia, ja paljon ilmaisia ​​kolmannen osapuolen malleja on saatavana aloittamiseen nopeasti.

    14. Erityisyys

    "Yrittää muokata käynnistyslokerojen painityyliä, mutta epäonnistuu, googles ratkaisulle, käyttää! Tärkeää, saa kaiken innostuneen ajattelun, joka on oikea ratkaisu kaikkiin ongelmiin!" Ja niin te tuomitsitte projektisi! Jos ymmärrät erityisyyden käsitteen oikein, päällekkäisten sääntöjen ongelmat useissa tyylitaulukoissa vähenevät huomattavasti.

    Spesifisyys on tiettyyn CSS-ilmoitukseen sovellettava paino, joka määritetään vastaavan valitsimen kunkin valitsintyypin lukumäärän perusteella. Jokaisella valitsimella on eri paino, ja useiden valitsimien käyttö voi muuttaa spesifisyyttä. Jos yleiset spesifisyydet ovat yhtä suuret, niin järjestys otetaan huomioon. Katso alla oleva esimerkki: