Lue CSS: Täydellinen Opas

Olemme rakentaneet täydellinen opas auttaa sinua oppimaan, CSS, onko olet juuri aloittanut perusteet tai haluat tutkia kehittyneempiä CSS.

CSS Valitsimet

Niin olet oppinut pohja id, class ja descendant valitsimet—ja sitten kutsua sitä päivä? Jos näin on, sinulta puuttuu valtava joustavuus. Olet sen velkaa itsellesi sitoutua nämä kehittyneet CSS ja CSS3 valitsimet muistiin.

Perusvalitsimet

1., *

* { margin: 0; padding: 0;}

katsotaanpa lyödä selvää niistä ulos, aloittelijoille, ennen kuin voimme siirtyä enemmän kehittyneitä valitsimet.

tähtisymboli kohdistuu jokaiseen sivun elementtiin. Monet kehittäjät käyttävät tätä temppua nolla pois margin: n ja padding. Vaikka tämä sopii varmasti pikatesteihin, neuvoisin olemaan käyttämättä tätä tuotantokoodissa. Se lisää liikaa painoa selaimeen ja on tarpeeton.

* voidaan käyttää myös yhdessä lapsen valitsimet.,

#container * { border: 1px solid black;}

Tämä on tavoite jokaisen elementin, että on lapsi #container div. Jälleen, yritä olla käyttämättä tätä tekniikkaa hyvin paljon, jos koskaan.

2. #X

#container { width: 960px; margin: auto;}

Prefixing hash symboli valitsimen avulla voimme tavoite id. Tämä on helposti yleisin käyttö; kuitenkin olla varovainen käytettäessä id valitsimet.,

Kysy itseltäsi: onko minun ehdottomasti täytyy hakea id tämä elementti, jotta voidaan kohdistaa se?

id valitsimet ovat jäykkiä ja eivät salli uudelleenkäyttöä varten. Jos mahdollista, yritä ensin käyttää tagin nimi, yksi uusista HTML5 elementtejä, tai jopa pseudo-luokan.

3. .X

.error { color: red;}

Tämä on class valitsinta. Ero id: n ja classes on, että jälkimmäinen, voit kohdistaa useita elementtejä., Käyttää classes, kun haluat muotoilutuotteet sovelletaan ryhmä-elementtejä. Vaihtoehtoisesti voit käyttää ids löytää neulaa heinäsuovasta, ja tyyli vain, että erityisten elementti.

4. X

a { color: red; }ul { margin-left: 0; }

Mitä jos haluat kohdistaa kaikkia elementtejä sivulla, mukaan niiden type sijasta id tai classnimi? Pidä se yksinkertaisena ja käytä tyyppivalitsinta. Jos sinun on kohdistettava kohde kaikkiin estämättömiin luetteloihin, käytä ul {}.,

Live-Demo Valitsimet

Combinator Valitsimet

5. X-Y

li a { text-decoration: none;}

seuraavaksi yleisimpiä valitsin on descendant valitsinta. Kun sinun on tarkennettava valintojasi, käytä näitä. Entä jos kaikkien ankkuritunnisteiden kohdentamisen sijaan tarvitsee vain kohdistaa ankkurit, jotka ovat esteetön lista? Juuri silloin käyttäisit jälkeläisvalitsinta.

Pro-tip: Jos valitsin näyttää X Y Z A B.error, teet sen väärin., Kysy aina itseltäsi, onko ehdottomasti tarpeen soveltaa kaikki se paino.

6. X + Y

ul + p { color: red;}

tästä käytetään nimitystä viereinen valitsin. Se valitsee vain elementin, jota edeltää välittömästi entinen Elementti. Tällöin vain ensimmäisessä kappaleessa jokaisen ul jälkeen on punainen teksti.

7., X > Y

div#container > ul { border: 1px solid black;}

eroa standardi X Y ja X > Y on, että jälkimmäinen on vain valita suoraan lapsille. Harkitsehan esimerkiksi seuraavaa merkintää.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

– valitsin on #container > ul vain tavoite uls jotka ovat suoraan lasten div, jossa id ja container., Se ei ole tavoite, esimerkiksi ul, joka on lapsen ensimmäisen li.

tästä syystä, on suorituskyky etuja käyttämällä lapsi combinator. Itse asiassa, se on suositeltavaa erityisesti työskenneltäessä JavaScript-pohjainen CSS valitsin moottorit.

8. X ~ Y

ul ~ p { color: red;}

Tämä sisarus combinator on samanlainen X + Y, mutta se on vähemmän tiukka., Kun vieressä on valitsin (ul + p) tulee valita vain ensimmäinen elementti, joka edeltää välittömästi entinen valitsin, tämä yksi on yleistynyt. Se valitsee, viitaten esimerkissä, kaikki p – elementtejä, kunhan ne noudattavat ul.

Combinator-valitsimien Live-Demo

Attribuuttivalitsimet

9. X

a { color: green;}

Kutsutaan määritteitä valitsin, tässä esimerkissä edellä, tämä vain valitse ankkuri tunnisteita, jotka ovat title attribuutti., Ankkuri tunnisteet, jotka eivät saa tätä erityistä muotoilua. Mutta entä jos pitää olla tarkempi? Katso seuraava esimerkki!

10. X

a { color: #83b348; /* Envato green */}

– koodinpätkän edellä tyyli ankkuri tunnisteita, joista on linkki https://code.tutsplus.com; he saavat meidän merkkituotteiden vihreä väri. Kaikki muut ankkuritunnisteet pysyvät ennallaan.

huomaa, että käärimme arvon lainausmerkkeihin. Muista myös tehdä tämä, Kun käytät JavaScript CSS valitsin Moottori. Jos mahdollista, käytä aina CSS3-valitsimia epävirallisten menetelmien yli.,

Tämä toimii hyvin, vaikka se on hieman jäykkä. Mitä jos linkki todella suoraan Envato Turs+, mutta ehkä polku on code.tutsplus.com eikä koko URL? Niissä tapauksissa voimme käyttää hieman säännöllisiä lausekkeita syntaksi.

11. X

a { color: #83b348; /* Envato green */}

Siellä mennään, se on mitä me tarvitsemme. Tähti tarkoittaa, että menettely arvon täytyy näkyä jossain attribuutin arvo. Niin, tämä kattaa tutsplus.com, code.tutsplus.com, ja jopa webdesign.tutsplus.com.

Pidä mielessä, että tämä on laaja selvitys., Mitä jos ankkuri tag liittyy johonkin Ei-Envato sivusto merkkijono tutsplus URL? Kun sinun täytyy olla tarkempi, käytä ^ ja $, viittaus alussa ja lopussa merkkijono, vastaavasti.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Oletko koskaan ihmetellyt, miten jotkut sivustot pystyvät näyttämään pientä kuvaketta ulkoisten linkkien vieressä? Olen varma, että olet nähnyt näitä ennenkin; ne ovat hyviä muistutuksia siitä, että linkki ohjaa sinut täysin eri verkkosivuilla.

Tämä on cinch, jossa on carat-tunnus., Sitä käytetään yleisimmin säännöllisissä lausekkeissa tarkoittamaan merkkijonon alkua. Jos haluamme kohdistaa kaikki ankkuri tunnisteita, jotka ovat href joka alkaa http voisimme käyttää valitsin samanlainen pätkä yllä.

Huomaa, että emme ole etsimässä ; se on turhaa, ja ei tili Url-osoitteista, jotka alkavat merkkijonolla

Nyt, mitä jos me halusimme sen sijaan tyyli kaikki ankkurit, jotka yhdistävät vaikkapa valokuva?, Noissa tapauksissa etsitään narun päätyä.

13. X

a { color: red;}

Jälleen, emme käytä säännöllisiä lausekkeita symboli, $ viitata loppuun merkkijono. Tässä tapauksessa, etsimme kaikki ankkurit, jotka linkki kuva—tai ainakin URL-osoite, joka päättyy .jpg. Muista, että tämä ei kaapata GIF ja PNG kuvia.

14. X

a { color: red;}

Miten voimme korvata kaikki eri kuvatyypit?, Voimme luoda useita valitsimia, kuten:

a,a,a,a { color: red;}

Mutta se on kipua, ja se on tehoton. Toinen mahdollinen ratkaisu on käyttää mukautettuja attribuutteja. Mitä jos lisäämme jokaiseen kuvaan linkittyvään ankkuriin Oman data-filetype – attribuutin?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Sitten, että koukku paikallaan, voimme käyttää standardin ominaisuuksia valitsin kohdistaa vain ne ankkurit.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Tässä on erityinen yksi, joka tekee vaikutuksen ystäväsi. Harva tietää tempusta., Tilde-merkki (~) symboli antaa meille mahdollisuuden target-attribuutti, joka on space-eroteltu lista arvoista.

Menossa mukana mukautetun määritteen numero 15, edellä, voimme luoda data-info ominaisuus, joka voi saada space-eroteltu lista mitä meidän täytyy tehdä muistiin. Tällöin otamme huomioon Ulkoiset linkit ja linkit kuviin—esimerkiksi.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Kanssa, että markup paikka, nyt voimme kohdistaa kaikki tunnisteet, jotka ovat joko niitä arvoja, käyttämällä ~ määritteet valitsin temppu.

Pretty nifty, häh?

Live-Demo attribuuttivalitsimien

Pseudo Valitsimet

16. X:vieraili ja X:linkki

a:link { color: red; }a:visited { color: purple; }

käytämme :link pseudo-luokan kohdistaa kaikki ankkuri tunnisteita, joita ei ole vielä napsautettu.,

Vaihtoehtoisesti, meillä on myös :visited pseudo-luokka, joka, kuten voit odottaa, antaa meille mahdollisuuden soveltaa erityinen tyyli vain ankkuri tagit-sivu, joka on napsautettu, tai ”vieraili”.

17. X:tarkastetaan

input:checked { border: 1px solid black;}

Tämä pseudo-luokan ainoa tavoite on käyttöliittymän elementti, joka on tarkastettu—kuin radio-painiketta tai-valintaruutu. Niin yksinkertaista se on.

18. X:jälkeen

before ja after pseudo-luokat ovat suuria., Näyttää siltä, että ihmiset löytävät joka päivä uusia ja luovia tapoja käyttää niitä tehokkaasti. Ne yksinkertaisesti tuottavat sisältöä valitun elementin ympärille.

monet tutustuivat näihin luokkiin ensimmäisen kerran kohdatessaan clear-fix-hakkeroinnin.

Tämä hack käyttää:after pseudo-luokkaa liittääkseen tilan elementin jälkeen ja tyhjentääkseen sen. Se on erinomainen temppu on työkalu, laukku, erityisesti tapauksissa, kun overflow: hidden; menetelmä ei ole mahdollista.

tähän muuhun luovaan käyttöön, Katso nopea vinkkini varjojen luomisesta.,

Mukaan CSS3 Valitsimet erittely, sinun pitäisi teknisesti käyttää pseudo-elementin syntaksi kaksi pilkkua ::. Pysyäkseen kuitenkin yhteensopivana käyttäjäagentti hyväksyy myös yhden kaksoispisteen käytön.

19. X:hover

div:hover { background: #e3e3e3;}

– Älä viitsi. Tiedät tämän. Virallinen termi tälle on ”user action pseudo class”. Se kuulostaa hämmentävältä, mutta se ei todellakaan ole. haluatko soveltaa erityistä muotoilua, kun käyttäjä häilyy elementin yli? Näin homma hoituu!,

Pidä mielessä, että vanhemmat versiot Internet Explorer ei vastaa, kun :hover pseudo-luokka on sovellettu muuta kuin ankkuri tag.

Voit useimmiten käyttää tätä valitsinta, kun soveltamalla, esimerkiksi border-bottom ankkuri tagit, kun pysytellyt yli.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; näyttää paremmalta kuin text-decoration: underline;.

20., X:ei(valitsin)

div:not(#container) { color: blue;}

negaatio pseudo-luokka on erityisen hyödyllinen. Sanotaan, että haluan valita kaikki divs, paitsi yksi, joka on id container. Yllä oleva pätkä hoitaa tämän tehtävän täydellisesti.

Tai, jos halusin valita jokainen elementti (ei suositeltavaa), lukuun ottamatta kohdassa luokka, voimme tehdä:

*:not(p) { color: green;}

21., X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

Voimme käyttää pseudo-elementtejä (nimeämät ::) tyyli palasia elementti, kuten ensimmäinen rivi tai ensimmäinen kirjain. On muistettava, että niitä on sovellettava lohkotasoisiin elementteihin, jotta ne voivat tulla voimaan.,

pseudo-elementti koostuu kahdesta kaksoispisteellä: ::

Kohteen Ensimmäinen Kirjain on Kohdassa

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Tämä pätkä on abstraktio, joka löytää kaikki kohdat sivulla, ja sitten osa-kohde vain ensimmäinen kirjain, että elementti.

Tätä käytetään useimmiten sanomalehtimäisen stailauksen luomiseen artikkelin ensimmäiselle kirjaimelle.,

Tavoite Ensimmäinen Rivi Kappaleen

p::first-line { font-weight: bold; font-size: 1.2em;}

Vastaavasti ::first-line pseudo-elementti on, kuten odotettua, tyyli ensimmäinen rivi elementti vain.

”yhteensopivuus nykyisten style sheets, user agents, on myös hyväksyttävä edellinen-paksusuolen merkintätapa pseudo-elementtejä käyttöön CSS-tasoilla 1 ja 2 (eli :first-line, :first-letter, :before ja :after). Tämä yhteensopivuus ei ole sallittua tässä eritelmässä käyttöön otetuille uusille pseudoelementeille.,”- W3C-valitsimet Specs

Live Demo Pseudo-valitsimista

Nth Child ja Type-valitsimet

22. X: nth-child(n)

li:nth-child(3) { color: red;}

muista päivät, jolloin emme voineet kohdistaa tiettyjä elementtejä pinoon? nth-child pseudoluokka ratkaisee sen!

huomaa, että nth-child hyväksyy kokonaisluku parametrina, mutta tämä ei ole nolla-pohjainen. Jos haluat kohdistaa toisen listan kohteen, Käytä li:nth-child(2).

voimme jopa käyttää tätä valitaksemme vaihtelevan joukon lapsia., Voisimme esimerkiksi tehdä li:nth-child(4n) valitaksemme joka neljännen listan kohteen.

23. X:nth-last-child(n)

li:nth-last-child(2) { color: red;}

Mitä jos sinulla olisi valtava luettelo kohteita ul, ja sinun tarvitsee vain käyttää vaikkapa kolmas-viimeinen erä? Eikä tee li:nth-child(397), voit sen sijaan käyttää nth-last-child pseudo-luokka.

Tämä tekniikka toimii lähes identtisesti numero 16 edellä. Ero on siinä, että se alkaa kokoelman lopusta ja toimii takaisin.

24., X:nnen-of-tyyppi(n)

ul:nth-of-type(3) { border: 1px solid black;}

On aikoja, jolloin, sen sijaan valitsemalla child, sinun sen sijaan täytyy valita mukaan type elementti.

Kuvittele markup, joka sisältää viisi esteetöntä listaa. Jos halusit tyyliin vasta kolmas ul, ja ei ole ainutlaatuinen id koukku osaksi, et voisi käyttää nth-of-type(n) pseudo-luokka. Yllä olevassa pätkässä vain kolmannella ul on raja sen ympärillä.

25., X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

Ja kyllä, edelleen johdonmukaisia, voimme myös käyttää nth-last-of-type alkaa lopussa valitsimet lista ja siitä kohdistaa haluttu elementti.

26. X: first-child

ul li:first-child { border-top: none;}

tämän rakenteellisen pseudoluokan avulla voidaan kohdistaa vain alkuaineen vanhemman ensimmäinen lapsi. Voit usein käyttää tätä poistaa rajoja ensimmäisestä ja viimeisestä luettelosta kohteita.

esimerkiksi, oletetaan, että sinulla on luettelon riviä, ja jokaisella on border-top ja border-bottom., No, sillä järjestelyllä, ensimmäinen ja viimeinen erä tuossa sarjassa näyttää hieman oudolta.

Monet suunnittelijat soveltaa luokat first ja last kompensoimaan tätä. Sen sijaan, voit käyttää näitä pseudo luokat.

27. X:last-child

ul > li:last-child { color: green;}

vastakohta first-child, last-child kohdistaa viimeinen erä elementti on vanhempi.

last-child Valitsin Esimerkki

katsotaanpa rakentaa yksinkertainen esimerkki osoittaa yksi mahdollista käyttää näitä luokkia., Luomme listan.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

markup, ei ole mitään erityistä: vain yksinkertainen luettelo.

Tässä on CSS:

Tämä muotoilu asettaa tausta, poista selaimen oletuksena pehmusteet ul, ja soveltaa rajat jokaiselle li antamaan hieman syvyyttä.

lisää syvyyttä luettelot, sovelletaan border-bottom kunkin li, joka on varjossa tai kaksi tummempi kuin li’s taustaväri., Levitä seuraavaksi border-top, joka on pari sävyä vaaleampi.

ainoa ongelma, kuten näkyy kuva yllä, on se, että raja on sovellettu hyvin ylä-ja alareunassa järjestämätön lista—joka näyttää oudolta. Katsotaanpa käyttää :first-child ja :last-child pseudo-luokat korjata tämä.

There we go; that fixes it!

28., X:ainoa lapsi

div p:only-child { color: red;}

Totta puhuen, olet luultavasti löydä itsesi käyttämällä only-child pseudo-luokka liian usein. Kuitenkin, se on saatavilla, jos tarvitset sitä.

sen avulla voit kohdistaa elementtejä, jotka ovat sen vanhemman ainoa lapsi. Esimerkiksi vertailemalla pätkä edellä, ainoa kappale, joka on ainoa lapsi div tulee olla väriltään punainen.

oletetaan seuraavaa merkintää.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

tässä tapauksessa, toinen div’s kappaleissa ei ole kohdennettua, vain ensimmäinen div. only-child pseudoluokka lakkaa olemasta voimassa heti, kun olet käyttänyt useampaa kuin yhtä lasta elementtiin.

29. X:vasta-of-tyyppi

li:only-of-type { font-weight: bold;}

Tämä rakenteellinen pseudo-luokka voidaan käyttää joitakin ovela tapoja. Se kohdistuu elementteihin, joilla ei ole sisaruksia emoastiassaan. Esimerkiksi Let ’s target all uls, joilla on vain yksi listaerä.,

kysy ensin itseltäsi, miten onnistuisit tässä tehtävässä. Voit tehdä ul li, mutta tämä olisi kohdistaa kaikki luettelon kohteet. Ainoa liuos on käyttää only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X:ensimmäinen-of-tyyppi

first-of-type pseudo-luokan avulla voit valita ensimmäisen sisarukset sen tyyppi.

Testi

ymmärtää paremmin tämän, katsotaanpa testi. Kopioi seuraavat markup osaksi koodi editor:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Nyt, lukematta edelleen, yrittää selvittää, miten kohdistaa vain ”Listan Kohde 2”., Kun olet tajunnut sen (tai luopunut), lue eteenpäin.

liuos 1

on olemassa erilaisia tapoja ratkaista tämä testi. Käydään niitä läpi kourallinen. Aloitetaan käyttämällä first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Tämä pätkä pohjimmiltaan sanoo, löytää ensimmäinen järjestämätön lista sivulla, sitten löytää vain välitöntä lapset, jotka ovat luettelossa kohteita. Seuraava, suodattaa, että alas vain toisen luettelon kohde, että joukko.

liuos 2

toinen vaihtoehto on käyttää viereistä valitsinta.,

p + ul li:last-child { font-weight: bold;}

tässä skenaariossa, löydämme ul että heti etenee p tag, ja sitten löytää viimeinen lapsi elementti.

Ratkaisu 3

voimme olla näillä valitsimilla niin vastenmielisiä tai leikkisiä kuin haluamme.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Tällä kertaa, me napata ensimmäinen ul sivulla, ja sitten löytää ensimmäinen listan kohde, mutta alkaa alhaalta!,

Live-Demo Nnen Lapsen ja Valitsimia

Johtopäätös

Jos olet kompensoida vanhemmat selaimet, kuten Internet Explorer 6, sinun täytyy silti olla varovainen, kun käytät näitä uudempia valitsimet. Mutta älä anna sen estää sinua oppimasta näitä. Tekisit suuren karhunpalveluksen itsellesi. Katso tästä selainyhteensopivuuslista. Vaihtoehtoisesti voit käyttää Dean Edwardin erinomaista IE9: ää.JS script tuoda tukea näitä valitsimia vanhemmille selaimille.,

toiseksi, kun työskentelet JavaScript-kirjastojen kanssa, kuten suosittu jQuery, yritä aina käyttää näitä natiiveja CSS3-valitsimia kirjaston mukautettujen menetelmien / valitsimien yli, kun mahdollista. Se tekee koodin nopeammin, koska valitsin moottori voi käyttää selaimen natiivi jäsennys, eikä oma.

Se on hienoa, että olet viettää aikaa oppia web design fundamentals, mutta jos tarvitset nopean ratkaisun, yksi ready-to-use CSS malleja voisi olla hyvä vaihtoehto. Meillä on myös muutamia premium CSS kohteita voit harkita.,

• CSS3
  12 Tyylikäs CSS Hinnoittelu Taulukot Uusimmat Web-Hanke
  Monty Shokeen
• Bootstrap 4
  18 Paras Bootstrap 4 Plugins
  Monty Shokeen

Vapaa Pääsy Envato Tekijät 1 Kuukausi

Lopuksi, tässä on erityinen tarjous auttaa sinua rakentamaan ammattimaisia sivustoja ja sovelluksia. Sekä käyttämällä nämä CSS-valitsimet, miksi ei hyödyntää laadukkaita kuvia, videokuvaa, palkkio fontteja, grafiikkaa, kuvia, ja enemmän?,

normaalisti tuollaisista resursseista pitäisi maksaa. Mutta nyt, voit käyttää miljoonia luovia resursseja oman koodaus hankkeita koko kuukauden, täysin ilmaiseksi. Ja mikä on enemmän, saat rajoittamaton lataukset, joten voit napata niin paljon kuin haluat tuona kuukautena, ja vain maksaa, jos päätät jatkaa!,

hyödyntää tämän tarjouksen, klikkaa tätä erityistä kirjautumisen linkkiä tai anna koodi alla rekisteröinti-sivulla:

elements_cont_tuts-freemonth1-4bwkbp

Älä odota liian kauan—tarjous on voimassa vain rajoitetun ajan!