20 Essential CSS-vinkkejä Jokaisen suunnittelijan tulisi tietää
Tämä on ehdoton aloittelijoille. Kun olet oppinut, miten laatimalli toimii, ja kuinka kellua nämä laatikot, on aika saada vakavia tietoja CSS: stä. Tätä tarkoitusta varten olemme koonneet massiivisen vinkkejä, temppuja, tekniikoita ja satunnaista likaista hakata, jonka avulla voit rakentaa haluamaasi muotoilua.
CSS voi olla hankala, ja sinun pitäisi myös. Ja nyt, mikään erityinen järjestys (lähes) kaiken mitä sinun tarvitsee tietää:
1. Absolute positioning
Jos haluat hallita missä elementti elää aina verkkosivuillamme, absoluuttinen sijainti on avain tämän tekemiseen. Jos ajattelet selaimesi yhtä suurta rajoitusruutua, absoluuttinen paikannus mahdollistaa tarkan tarkistuksen siitä, missä kohdassa elementti pysyy. Käytä ylhäältä, oikealta, alhaalta ja vasemmalta, sekä pikseliarvon, jolla hallitaan, missä elementti pysyy.
position:absolute;top:20px;right:20pxYllä oleva CSS asettaa elementin sijainnin pysyäkseen 20px: ssä selaimen ylä- ja oikean reunan päällä. Voit käyttää absoluuttista sijoitusta myös div: n sisällä.
2. * + valitsin
* * -Toiminnon avulla voit valita tietyn valitsimen kaikki elementit. Jos esimerkiksi käytit * p: n ja sitten lisäät CSS-tyylit tähän, se tekisi sen kaikille asiakirjan elementeille
tag. Tämä helpottaa sivustosi osia maailmanlaajuisesti.
3. Ohita kaikki tyylit
Tätä olisi käytettävä säästeliäästi, sillä jos teet kaiken, löydät itsesi vaikeuksissa pitkällä aikavälillä. Jos kuitenkin haluat ohittaa toisen CSS-tyylin tietylle elementille, käytä ! Tärkeää tyyliäsi css-tyylissäsi. Jos haluan esimerkiksi, että H2-otsikot ovat sivustoni tietyssä osassa punaisen sijasta punaisena, käytän seuraavaa CSS: tä:
.section h2 { color:red !important; }4. Keskittäminen
Keskittäminen on hankalaa, koska se riippuu siitä, mitä yrität keskittää. Katsotaanpa keskitetyistä kohteista CSS, joka perustuu sisältöön.
Teksti
Teksti keskittyy teksti-align: center; . Jos haluat sen molemmille puolille, käytä sitä vasemmalla tai oikealla keskipisteen sijasta.
pitoisuus
Div (tai mikä tahansa muu elementti) voidaan keskittää lisäämällä siihen blokkiominaisuus ja sitten käyttämällä automaattisia marginaaleja. CSS näyttää tältä:
#div1 {display: block;margin: auto;width: anything under 100%}Syy, miksi laitoin "jotain alle 100%" leveydelle, on se, että jos se olisi 100% leveä, niin jos olisi koko leveä eikä tarvitsisi keskittyä. On parasta pitää kiinteä leveys, kuten 60% tai 550px, jne.
5. Pystysuuntainen linjaus (yhdelle tekstiriville)
Käytät tätä CSS-navigointivalikossa, voin melkein taata sen. Avain on, että valikon korkeus ja tekstin viivan korkeus ovat samat. Näen tämän tekniikan paljon, kun menen takaisin ja muokataan olemassa olevia verkkosivustoja asiakkaille. Tässä on esimerkki:
.nav li{line-height:50px;height:50px;}6. Hover-vaikutukset
Tätä käytetään painikkeissa, tekstilinkissä, sivustosi bock-osissa, kuvakkeissa ja muissa. Jos haluat jotain värin muuttamista, kun joku liikuttaa hiirtä sen päälle, käytä samaa CSS: ää, mutta lisää : siirrä hiiren osoitin siihen ja muuta muotoilua. Tässä on esimerkki:
.entry h2{font-size:36px;color:#000;font-weight:800;}.entry h2:hover{color:#f00;}Mitä tämä tekee, se muuttaa h2-tagin värejä mustasta punaiseen, kun joku lyö sen yli. Hyvää käyttämistä: hover on, että sinun ei tarvitse ilmoittaa fonttikokoa tai painoa uudelleen, jos se ei muutu. Se muuttaa vain määrittämäsi asetuksia.
Siirtyminen
Hover-tehosteiden, kuten valikkojen tai verkkosivustosi kuvien kanssa, et halua, että värit tulevat liian nopeasti lopputulokseen. Haluat mieluiten helpottaa muutosta vähitellen, jolloin siirtymäominaisuus tulee esiin.
.entry h2:hover{color:#f00;transition: all 0.3s ease;}Tämä tekee muutoksesta yli 0,3 sekuntia sen sijaan, että se hetkessä nappasi punaista. Tämä tekee hover-vaikutuksesta miellyttävämmän silmän ja vähemmän jarringin.
7. Linkkivaltiot
Nämä tyylit jäävät paljon suunnittelijoilta, ja se aiheuttaa todella käytettävyysongelmia kävijöidesi kanssa. Näennäisluokan linkki ohjaa kaikkia linkkejä, joita ei vielä ole napsauttanut. Näkyvä pseudo-luokka käsittelee kaikkien jo vierailemiesi linkkien tyylin. Tämä kertoo sivuston kävijöille, että he ovat jo olleet sivustossasi ja missä he eivät ole vielä tutustuneet.
a:link { color: blue; }a:visited { color: purple; }8. Voit helposti muuttaa kuvia sopivaksi
Joskus pääset hyppysiksi, jos kuvien täytyy sopia tiettyyn leveyteen, kun ne skaalautuvat suhteellisesti. Helppo tapa tehdä tämä on käyttää max leveys käsitellä tätä. Tässä on esimerkki:
img {max-width:100%;height:auto;}Tämä tarkoittaa sitä, että suurin kuva voi koskaan olla 100%, ja korkeus lasketaan automaattisesti kuvan leveyden perusteella. Joissakin tapauksissa saatat joutua myös määrittämään leveys 100 prosentilla.
9. Ohjaa osan elementtejä
Jos käytät vain kuvan esimerkkiä, jos haluat kohdistaa tietyn osan osiin, kuten blogisi, käytä luokan blogiosastoa ja yhdistä se todellisen valitsimen kanssa. Tämän avulla voit valita vain blogin osion kuvat eikä muita kuvia, kuten logoasi tai sosiaalisia meia -kuvakkeita tai kuvia sivustosi muissa osissa, kuten sivupalkissa. Näin CSS näyttää:
.blog img{max-width:100%;height:auto;}10. Suorat lapset
Toivon, että olisin tiennyt tämän, kun aloin ensin käyttää CSS: ää. Tämä olisi säästänyt minulle niin paljon aikaa! Käytä > valitaksesi elementin suorat lapset. Esimerkiksi:
#footer > aTämä valitsee ja luo kaikki aktiiviset linkkielementit, jotka ovat välittömästi alatunnisteen tunnuksen alla. Se ei valitse mitään aktiivisen elementin ohi tai jotain muuta alatunnisteen sisältämää, kuten pelkkää tekstiä. Tämä toimii myös huipputason navigointielementeillä.
Erityiset lapsielementit
Uskokaa minua, tämä on kätevä, kun teet listoja. Sinun tarvitsee vain laskea, kuinka monta kohdetta alas elementti on, että haluat tyylin ja sitten soveltaa tätä tyyliä.
li:nth-child(2) {font-weight:800;color: blue;text-style:underline;}Edellä oleva CSS kohdistaa luettelon toisen kohteen ja tekee sen lihavoituna, alleviivattuna ja sinisenä. Lisää "n" sulkeissa olevan numeron jälkeen ja voit kohdistaa jokaisen toisen listan kohteen. Kuvittele, että pystyt muokkaamaan joka toisen rivin taulukkotyylisessä asettelussa helposti lukemalla. CSS olisi:
li:nth-child(2)11. Käytä CSS: tä useisiin luokkiin tai valitsimiin
Oletetaan, että haluat lisätä identtisen reunan kaikkiin kuviin, blogikohtaan ja sivupalkkiin. Sinun ei tarvitse kirjoittaa samaa CSS: ää 3 kertaa. Vain luettelo ne erät, erotettu pilkulla. Tässä on esimerkki:
.blog, img, .sidebar {border: 1px solid #000;}Olitpa ollut web-suunnittelija jo vuosia, tai olet vasta aloittamassa, oppiminen rakentaa verkkosivustoja oikealla tavalla voi tuntua kallioiselta, loputtomalta matkalta. Kun olet kaventanut kieliä, jonka haluat oppia, sinun on opittava ja parannettava taitojasi.
Ei ole väliä mitä opit, CSS on yksi niistä olennaisista, mutta pelottavista taidoista, joita sinun on hallittava. Sen ei tarvitse olla niin vaikeaa, varsinkin jos tiedät muutamia käteviä ja vähemmän tunnettuja CSS-tekniikoita työn tekemiseen.
12. laatikkokoko: raja-laatikko;
Tämä on suosikki monien web-suunnittelijoiden keskuudessa, koska se ratkaisee pehmusteiden ja asetteluongelmien ongelmat. Pohjimmiltaan, kun asetat laatikon tiettyyn leveyteen ja lisäät siihen pehmusteita, pehmuste lisää laatikon koon. Kuitenkin laatikoko: raja-box; , tämä on hylätty ja laatikot pysyvät koolla, jonka on tarkoitus olla.
13.: aikaisemmin
Tämä CSS on valitsin, jonka avulla voit valita CSS-elementin ja lisätä sisältöä ennen jokaista elementtiä, jolla on tietty luokka. Oletetaan, että sinulla oli verkkosivusto, jossa halusit erityistä tekstiä ennen jokaista H2-tunnistetta. Sinä haluaisitte tämän asennuksen:
h2:before {content: "Read: "; color: #F00;}Tämä on erittäin kätevä, varsinkin jos käytät kuvakkeen fonttia. Voit asettaa kuvakkeita ennen tiettyjä elementtejä ja soveltaa sitä maailmanlaajuisesti.
14.: jälkeen
Kuten: ennen valitsinta, voit käyttää: jälkeen lisätäksesi sisältöä maailmanlaajuisesti tiettyihin elementteihin. Käytännöllinen käyttö lisää "lue lisää" blogin jokaisen osion jälkeen. Näin voit tehdä sen.
p:after{content: " -Read more… ";color:#f00;}
15. sisältö
sisältö on CSS-ominaisuus, joka on kätevä, kun haluat lisätä elementin, jonka haluat hallita. Yleisin käyttö, jonka olen nähnyt tähän, on lisätä kuvake kuvakkeen fontista tietyssä paikassa. Yllä olevissa esimerkeissä näet, että sinun on käärittävä teksti, jonka haluat lisätä lainausmerkkeihin.
16. CSS-nollaus
Eri selaimilla on CSS-oletusasetukset, joten niiden palauttaminen on välttämätöntä, joten sinulla on tasainen, yhtenäinen pelikenttä. Ajattele sitä talon rakentamisena ja rakentaako se vuoren puolelle, hiekkarannalle vai metsäalueen keskelle, haluat, että säätiö on tasainen.
Tämä CSS-nollaustekniikka asettaa kaikille verkkosivustoilleen standardipohjan, mikä antaa niiden johdonmukaisuuden CSS-lähtökohdassa. Se poistaa ei-toivottuja rajoja, esiasetettuja marginaaleja, pehmusteita, linjojen korkeuksia, listojen tyyliä jne. Eric Meyer loi joka toimii hyvin .
17. Pudota korkit
Jokainen rakastaa pudotuslistoja. Se muistuttaa perinteistä painettua kirjaa, ja se on loistava tapa aloittaa sisällön sivu. Tämä 1. krs suuri kirjain todella tarttuu huomionne. On helppo tapa luoda pudotuskansi css: ssä, ja se on pseudoelementillä:: first letter. Tässä on esimerkki:
p:first-letter{display:block;float:left;margin:3px;color:#f00;font-size:300%;}Tämä tarkoittaa, että kirjain asetetaan kolme kertaa muiden kirjainten kokoon. Se asettaa kirjaimen ympärille 3px välilyönnin estämiseksi ja asettaa kirjaimen värin punaiseksi.
18. Pakota tekstin olevan kaikki caps, kaikki pienet kirjaimet tai capitalized
Olisi järjetöntä kirjoittaa kokonainen osa kaikissa korkkeissa. Kuvittele, että sinun on palattava ja korjattava myöhemmin, kun sivuston muoto muuttuu tai se päivitetään. Sen sijaan käytä seuraavia css-tyyliä pakottaaksesi tekstiä tiettyyn muotoiluun. Tämä css kohdistaa h2-otsikkokoodin.
- h2 {teksti-muunnos: suuret; } - kaikki korkit
- h2 {tekstimuunnos: pienet kirjaimet; } - kaikki pienet kirjaimet
- h2 {teksti-muunnos: hyödyntää; } - aktivoi jokaisen sanan 1. kirjaimen.
19. Pystysuora näytön korkeus
Joskus haluat, että osio täyttää koko näytön, riippumatta siitä, mikä näytön koko on. Voit hallita tätä vh: llä tai korkeudella. Ennen sitä on prosenttiosuus, joten jos haluat täyttää 100% selaimesta, asetat sen 100: een. Voit asettaa sen arvoon, joka on 85% kiinteän navigointivalikon.
Luo luokan säiliöön ja käytä sitä vh: n määrää, jonka haluat sen olevan. Yksi asia, jota saatat joutua muokkaamaan, on media-kyselyn arvo tietyille näytöille tai suuntaviivoille, kuten puhelimille pystyasennossa. Kuvittele maisemakuvan venyttämistä pystyasentoon. Se ei näyttäisi hyvältä.
.fullheight { height: 85vh; }20. tyylisiä puhelinyhteyksiä
Jos sinulla on linkki, joka soittaa puhelinnumeron, kun käyttäjä napauttaa sen puhelimeen, saatat joutua vaikeuksiin muotoilemalla sitä perinteisellä aktiivisella linkinvalitsimella. Käytä sen sijaan seuraavaa CSS: tä:
a[href^=tel] { color: #FFF; text-decoration: none;}