finn ut CSS: The Complete Guide

Vi har bygget en komplett guide til å hjelpe deg å lære CSS, enten du er bare komme i gang med det grunnleggende, eller du ønsker å utforske mer avansert CSS.

CSS-Velgere

Så du lært base id, class, og descendant velgere—og så ringte det en dag? Hvis så, er du mangler ut på en enorm grad av fleksibilitet. Du skylder det til deg selv å begå disse avansert CSS og CSS3-velgere til å minne.

Grunnleggende-Velgere

1., *

* { margin: 0; padding: 0;}

La oss slå det opplagte ut, for nybegynnere, før vi går videre til de mer avanserte velgere.

star-symbolet vil målrette hvert enkelt element på siden. Mange utviklere vil bruke dette trikset til null ut margins og padding. Mens dette er sikkert fint for rask tester, vil jeg råde deg aldri til å bruke denne i produksjon kode. Det legger for mye vekt på nettleseren, og er unødvendig.

* kan også brukes med barn velgere.,

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

Dette vil målrette hvert enkelt element som er et barn av #container div. Igjen, prøv ikke å bruke denne teknikken veldig mye, om noen gang.

2. #X

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

Prefixing hash-symbol til velgeren gjør det mulig for oss å målrette av id. Dette er lett den mest utbredte bruken, men vær forsiktig når du bruker id velgere.,

Spør deg selv: kan jeg absolutt må bruke en id til dette elementet for å målrette det?

id velgere er stive og ikke tillate for gjenbruk. Hvis det er mulig, bør du først prøve å bruke en tag-navn, en av de nye HTML5-elementer, eller enda en pseudo-klasse.

3. .X

.error { color: red;}

Dette er en class velgeren. Forskjellen mellom ids og classes er at, med sistnevnte, kan du målrette mot flere elementer., Bruk classes når du ønsker din styling til å gjelde for en gruppe av elementer. Alternativt kan du bruke ids for å finne en nål i en høystakk, og stil bare som spesifikt element.

4. X

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

Hva hvis du ønsker å målrette mot alle elementer på en side, i henhold til deres type snarere enn en id eller classnavn? Hold det enkelt, og du bruker en type-velgeren. Hvis du har behov for å målrette mot alle sorterte lister, bruk ul {}.,

Live Demo av Grunnleggende Velgere

Combinator Velgere

5. X-Y

li a { text-decoration: none;}

Den neste mest vanlige selector er descendant velgeren. Når du trenger å være mer konkret med dine velgere, kan du bruke disse. For eksempel, hva om, snarere enn som er rettet mot alle anchor tags, trenger du bare å målrette ankere som er i en usortert liste? Dette er spesielt når du vil bruke en etterkommer velgeren.

Pro-tips: Hvis velgeren ser ut som X Y Z A B.error, du gjør det galt., Spør deg selv om det er absolutt nødvendig å bruke alle som vekt.

6. X + Y

ul + p { color: red;}

Dette er referert til som en tilstøtende velgeren. Det vil bare velge elementet som ligger umiddelbart forut for den tidligere element. I dette tilfellet, vil bare det første avsnittet etter hvert ul vil ha rød tekst.

7., X > Y

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

forskjellen mellom standard X Y og X > Y er at sistnevnte vil bare velg direkte barn. For eksempel, tenk deg følgende koder.

 <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>

En velger av #container > ul vil bare målrette uls, som er direkte, og barn div med id av container., Det vil ikke mål, for eksempel ul som er et barn av den første li.

på grunn av dette, det er ytelse fordelene ved å bruke barnet combinator. Faktisk, det anbefales spesielt når du arbeider med JavaScript-baserte CSS-selector-motorer.

8. X-Y

ul ~ p { color: red;}

Denne søsken combinator er lik X + Y, men det er mindre strenge., Mens en tilstøtende selector (ul + p) vil bare velg det første elementet som ligger umiddelbart forut for den tidligere selector, dette er mer generalisert. Det vil merke, med henvisning til vårt eksempel ovenfor, noen p – elementer, så lenge de følger en ul.

Live Demo av Combinator Velgere

– Attributtet Velgere

9. X

a { color: green;}

Referert til som en attributter selector, i vårt eksempel ovenfor, vil dette bare velg anker-koder som har en title attributtet., Anchor tags som ikke vil ikke motta denne spesielle styling. Men hva hvis du trenger å være mer spesifikk? Sjekk ut neste eksempel!

10. X

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

tekstutdraget ovenfor stil alle anker-koder som linker til https://code.tutsplus.com; de vil motta våre merket med grønn farge. Alle andre anchor tags vil forbli upåvirket.

Merk at vi innpakning verdien i anførselstegn. Husk å også gjøre dette når du bruker en JavaScript CSS selector motor. Når det er mulig, bør du alltid bruke CSS3-velgere over uoffisielle metoder.,

Dette fungerer godt, selv om det er litt stivt. Hva hvis kobling er faktisk direkte til Envato Tuts+, men kanskje banen er code.tutsplus.com snarere enn full URL? I slike tilfeller kan vi bruke en bit av den regulære uttrykk syntaks.

11. X

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

Det vi går; det er hva vi trenger. Stjernen angir at du fortsetter verdi må dukke opp et sted i attributt-verdi. På den måten, dette dekker tutsplus.com, code.tutsplus.com og selv webdesign.tutsplus.com.

husk at dette er en bred uttalelse., Hva hvis anchor tag knyttet til noen ikke-Envato side med streng tutsplus i URL? Når du trenger å være mer spesifikk, bruk ^ og $, for å referere til begynnelsen og slutten av en streng, henholdsvis.

12. X

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

noen Gang lurt på hvordan noen nettsteder er i stand til å vise et lite ikon ved siden av lenkene er eksterne? Jeg er sikker på at du har sett disse før, og de er fine påminnelser om at lenken vil føre deg til et helt annet nettsted.

Dette er en lek med carat symbolet., Det er mest brukt i vanlige uttrykk til å angi begynnelsen av en streng. Hvis vi ønsker å målrette mot alle anker-koder som har en href som begynner med http, kunne vi bruke en selector lik kodebiten vises ovenfor.

legg Merke til at vi ikke søker etter ; og det er unødvendig, og ikke konto for Nettadresser som begynner med

Nå, hva om vi ville i stedet stil alle ankere som har en kobling til, si, et bilde?, I disse tilfellene, la oss søke etter slutten av strengen.

13. X

a { color: red;}

Igjen, vil vi bruke et regeluttrykk symbol, $, for å se til slutten av en streng. I dette tilfellet, kan vi søker etter alle festene som har en kobling til et bilde—eller i det minste en URL som avsluttes med .jpg. Husk at dette ikke vil fange opp GIF-og PNG-bilder.

14. X

a { color: red;}

Hvordan kan vi kompensere for alle de ulike bildeformater?, Vel, vi kan lage flere velgere, for eksempel:

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

Men det er en smerte, og det er ineffektivt. En annen mulig løsning er å bruke tilpassede attributter. Hva hvis vi lagt våre egne data-filetype attributtet til hver anker som linker til et bilde?

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

Så, med det kroken på plass, kan vi bruke en standard attributter-velgeren for å målrette bare mot disse ankrene.

a { color: red;}

15. X

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

Her er en spesiell en som vil imponere din venner. Ikke så mange vet om dette trikset., Tilde (~) symbol tillater oss å målrette et attributt som har en plass-separert liste av verdier.

du Går sammen med våre egendefinert attributt fra nummer 15, over, kunne vi lage en data-info attributt, som kan få en plass-separert liste over alt vi trenger å gjøre oppmerksom på. I dette tilfellet vil vi gjøre oppmerksom på eksterne lenker og lenker til bilder—bare for eksempel.,

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

Med at markup på plass, nå kan vi målrette eventuelle koder som har en av disse verdiene, ved å bruke ~ attributter selector lure.

Ganske kjekk, ikke sant?

Live Demo av Attributt-Velgere

Pseudo-Velgere

16. X:besøkt og X:link

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

Vi bruke :link pseudo-klasse for å målrette mot alle anchor tags som har ennå å bli klikket på.,

Alternativt kan vi også ha :visited pseudo-klasse, som er, som du ville forvente, og gir oss mulighet til å anvende bestemte styling til bare anker-koder på den side som har blitt klikket på, eller «besøkt».

17. X:kontrollert

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

Denne pseudo-klasse vil bare målrette mot et element i brukergrensesnittet som har blitt sjekket ut som en radio-knappen eller-boksen. Det er så enkelt som det.

18. X:etter

before og after pseudo klasser er store., Hver dag, det virker, folk er å finne nye og kreative måter å bruke dem effektivt. De generer innhold rundt det valgte elementet.

Mange ble først introdusert til disse klassene når de møtte den klare-fix hack.

Dette hack bruker :after pseudo-klassen for å legge til et mellomrom etter elementet, og deretter fjerne det. Det er en utmerket lure å ha i verktøy bag, særlig i de tilfeller da overflow: hidden; metoden er ikke mulig.

For en annen kreativ bruk av dette, se min raske tips på lager skygger.,

Ifølge CSS3 Velgere spesifikasjon, bør du bruke teknisk pseudo element syntaks av to kolon ::. Imidlertid, for å være kompatible, user-agent vil godta en enkelt kolon bruk som godt.

19. X:hold

div:hover { background: #e3e3e3;}

Oh come on. Du vet dette. Den offisielle betegnelsen for dette er «brukeraktivitet pseudo-klassen». Det høres forvirrende ut, men det er det egentlig ikke. Ønsker å bruke bestemte styling når en bruker svever over et element? Dette vil få jobben gjort!,

husk at eldre versjoner av Internet Explorer som ikke svarer når :hover pseudo-klassen brukes til noe annet enn et anker tag.

vil Du som oftest bruke denne dialogen når du søker, for eksempel, en border-bottom for å anchor tags, når svevde over.

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

Pro-tips: border-bottom: 1px solid black; ser bedre enn text-decoration: underline;.

20., X:ikke(selector)

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

negasjon Av pseudo-klassen er spesielt nyttig. La oss si at jeg ønsker å velge alle divs, bortsett fra en som har en id av container. Tekstutdraget ovenfor vil håndtere denne oppgaven perfekt.

Eller, hvis jeg ønsket å velge hvert enkelt element (ikke anbefalt) bortsett fra avsnitt koder, kunne vi gjøre:

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

21., X::pseudoElement

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

Vi kan bruke pseudo-elementer (som er utpekt av ::) til stil fragmenter av et element, for eksempel den første linjen eller den første bokstaven. Husk at disse må brukes til blokk-nivå elementene for å ta effekt.,

En pseudo-element er sammensatt av to kolon: ::

Mål den Første Bokstaven i et Avsnitt

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

Denne kodebiten er en abstraksjon som finner alle avsnitt på siden, og da sub-målet bare den første bokstaven i elementet.

Dette er som oftest brukt til å lage avis-som styling for den første bokstaven i en artikkel.,

Målet i den Første Linjen i et Avsnitt

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

på samme måte, ::first-line pseudo-elementet, som forventet, stil den første linjen av elementet bare.

«For kompatibilitet med eksisterende stilark, bruker agenter må også godta den forrige-kolon-notasjon for pseudo-elementer ble introdusert i CSS nivå 1 og 2 (nemlig, :first-line, :first-letter, :before og :after). Dette kompatibilitet er ikke tillatt for den nye pseudo-elementer introdusert i denne spesifikasjonen.,»—W3C-Velgere Spesifikasjoner

Live Demo av Pseudo-Velgere

Nth Barn og Type Velgere

22. X:nth-child(n)

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

Husker dagene da vi hadde ingen måte å målrette bestemte elementer i en stabel? nth-child pseudo klasse løser det!

Vær oppmerksom på at nth-child aksepterer et heltall som parameter, men dette er ikke null-basert. Hvis du ønsker å målrette den andre listen element, kan du bruke li:nth-child(2).

Vi kan også bruke dette til å velge en variabel satt av barn., For eksempel, kunne vi gjøre li:nth-child(4n) for å velge hver fjerde elementet.

23. X:nth-siste-barn(n)

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

Hva om du hadde en stor liste over elementer i en ul, og du bare nødvendig for å få tilgang til, si, det tredje til det siste elementet? Heller enn å gjøre li:nth-child(397), kan du i stedet bruke nth-last-child pseudo klasse.

Denne teknikken fungerer nesten identisk til nummer 16 ovenfor. Forskjellen er at det begynner på slutten av samlingen, og jobber seg tilbake.

24., X:nth-of-type(n)

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

Det vil være ganger da, heller enn å velge en child, kan du i stedet må velge i henhold til type av elementet.

Tenk deg markup som inneholder fem sorterte lister. Hvis du ønsker å style bare den tredje ul, og ikke har en unik id for å koble inn, kan du bruke nth-of-type(n) pseudo klasse. I tekstutdraget ovenfor, bare den tredje ul vil ha en ramme rundt det.

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

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

Og ja, å være konsekvent, kan vi også bruke nth-last-of-type for å begynne på slutten av velgere liste og arbeide vei tilbake til mål ønsket element.

26. X:for det første-barn

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

Denne strukturelle pseudo klasse tillater oss å målrette bare mot det første barnet av elementets overordnede. Du vil ofte bruke dette til å fjerne grensene fra den første og den siste listen elementer.

For eksempel, la oss si at du har en liste over rader, og hver og en har en border-top og border-bottom., Vel, med denne ordningen, er det første og siste elementet i det settet vil se litt rart.

Mange designere gjelder klasser av first og last for å kompensere for dette. I stedet kan du bruke disse pseudo-klasser.

27. X:siste-barn

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

Det motsatte av first-child, last-child vil målrette den siste objekt av elementets overordnede.

last-child Velgeren for Eksempel

La oss bygge et enkelt eksempel for å vise en mulig bruk av disse klassene., Vi skal lage en stil i listen.

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

For markeringen, det er ikke noe spesielt: det er bare en enkel liste.

Her er CSS:

Denne styling vil angi en bakgrunn, fjerne nettleseren standard polstring på ul, og gjelder grenser til hver li for å gi litt dybde.

for Å legge til dybde til lister, legge til en border-bottom til hver li som er en nyanse eller to mørkere enn li‘s bakgrunnsfarge., Neste, gjelder en border-top som er et par nyanser lysere.

Det eneste problemet, som vist i bildet over, er at et grensen vil bli brukt til toppen og bunnen av usortert liste—som ser merkelig. La oss bruke :first-child og :last-child pseudo-klasser for å fikse dette.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Det går vi, at fikser det!

28., X:bare-barn

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

Sannferdig, har du sannsynligvis ikke vil finne deg selv å bruke only-child pseudo klasse for ofte. Likevel, det er tilgjengelig, bør du trenger det.

Det kan du målrette mot elementer som er eneste barn av sine foreldre. For eksempel refererer tekstutdraget ovenfor, bare de avsnitt som er eneste barn av div vil være farget rød.

La oss anta følgende koder.,

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

I dette tilfellet, den andre div‘s avsnitt vil ikke være rettet; det er bare den første div. Så snart du har installert flere enn ett barn til et element, only-child pseudo klasse opphører å gjelde.

29. X:bare-of-type

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

Denne strukturelle pseudo-klassen kan brukes i noen smarte måter. Det vil målrette elementer som ikke har noen søsken innenfor den overordnede container. Som et eksempel, la oss målrette mot alle uls, som har bare en enkelt liste element.,

Først, spør deg selv hvordan du vil utføre denne oppgaven. Du kan gjøre ul li, men dette vil målrette mot alle listeelementer. Den eneste løsningen er å bruke only-of-type.

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

30. X:for det første-of-type

first-of-type pseudo-klassen gir deg mulighet til å velge det første søsken av sin type.

Test

for Å bedre forstå dette, la oss ta en test. Kopier følgende markup inn koden din redaktør:

<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>

Nå, uten å lese videre, kan du prøve å finne ut hvordan å målrette bare mot «Liste Punkt 2»., Når du har funnet det ut (eller gitt opp), les videre.

Løsning 1

Det finnes en rekke måter å løse denne testen. Vi vil gjennomgå en håndfull av dem. La oss begynne ved å bruke first-of-type.

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

Denne kodebiten egentlig sier, for å finne den første unummerert liste på siden, og deretter finner bare den umiddelbare barn, som er listen elementer. Neste, filter som ned til bare den andre listen element i det stille.

Løsning 2

et Annet alternativ er å bruke den tilstøtende velgeren.,

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

I dette scenariet, kan vi finne ul som fortsetter umiddelbart p – koden, og deretter finner du det aller siste barn av elementet.

Løsning 3

Vi kan være så ubehagelige eller så leken som vi vil med disse velgere.

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

Denne tiden, kan vi ta den første ul på siden, og deretter finner du den aller første elementet, men starter fra bunnen!,

Live Demo av Nth Barn og Type Velgere

Konklusjon

Hvis du er for å kompensere for eldre nettlesere, som Internet Explorer 6, kan du fortsatt trenger å være forsiktig når du bruker disse nye velgere. Men vennligst ikke la det hindre deg fra å lære disse. Vil du være med å gjøre en stor bjørnetjeneste for deg selv. Sørg for å se her for en nettleser-kompatibilitet listen. Alternativt, kan du bruke Dean Edward er utmerket IE9.js skript for å gi støtte til disse velgere til eldre nettlesere.,

for det Andre, når du arbeider med JavaScript-biblioteker, slik som den populære jQuery, prøver alltid å bruke disse native CSS3-velgere over bibliotekets tilpassede metoder/velgere, når det er mulig. Det vil gjøre koden din raskere, som i denne motoren kan du bruke nettleserens innfødt parsing, snarere enn sin egen.

Det er flott at du bruker tid på å lære webdesign grunnleggende, men hvis du trenger en rask løsning, en av våre klar-til-bruk CSS-maler kan være et godt alternativ. Vi har også noen få premium CSS elementer for deg å vurdere.,

• CSS3
  12 Elegante CSS Priser Bord Nyeste Web-Prosjektet
  Monty Shokeen
• Bootstrap 4
  18 Beste Bootstrap 4 Plugins
  Monty Shokeen

Gratis Tilgang til Envato Elementer for 1 Måned

til Slutt, her er en veldig spesialtilbud til å hjelpe deg med å lage profesjonelle nettsteder og apper. Så vel som å bruke disse CSS-velgere, hvorfor ikke dra nytte av høy kvalitet lager bilder, videoopptak, premium skrifttyper, grafikk, illustrasjoner og mer?,

Vanligvis, du ville ha til å betale for ressurser som det. Men akkurat nå, kan du få tilgang til millioner av kreative ressurser for koding prosjekter for en hel måned, helt gratis. Og hva er mer, får du ubegrenset nedlastinger, slik at du kan ta så mye som du ønsker i løpet av denne måneden, og du betaler kun hvis du bestemmer deg for å fortsette!,

for Å dra nytte av dette tilbudet, klikk på denne spesielle registrering link eller skriv inn koden nedenfor på registreringssiden:

elements_cont_tuts-freemonth1-4bwkbp

ikke vent for lenge—tilbudet er kun gyldig for en begrenset tid!