Share
Vi har bygget en komplett guide for å hjelpe deg med å lære CSS, enten du er bare i gang med det grunnleggende eller du vil utforske mer avansert CSS.
Så du lærte basen id, klasse, og kommer selektorer - og så kalte det en dag? I så fall savner du et enormt fleksibilitetsnivå. Mens mange av seleksjonene nevnt i denne artikkelen er en del av CSS3-spesifikasjonen, og derfor bare er tilgjengelige i moderne nettlesere, skylder du det til deg selv å begå disse til minne.
Og forresten, hvis du har problemer med CSS og vil at en pro skal se over det og fikse eventuelle feil, kan du finne noen kvalifiserte frilansere på Envato Studio.
* margin: 0; polstring: 0;
La oss slå de åpenbare ut, for nybegynnere, før vi går videre til de mer avanserte velgene.
Stjernesymbolet vil målrette mot hvert eneste element på siden. Mange utviklere vil bruke dette trikset til å nullstille margins og padding. Selv om dette sikkert er bra for raske tester, vil jeg anbefale deg å aldri bruke dette i produksjonskode. Det legger for mye vekt på nettleseren, og er unødvendig.
De * kan også brukes med barnevalg.
#container * border: 1px solid black;
Dette vil målrette mot hvert enkelt element som er et barn av #container div. Igjen, prøv å ikke bruke denne teknikken veldig mye, om noensinne.
Se demo
#container width: 960px; margin: auto;
Ved å prefikse hash-symbolet til en velger, kan vi målrette mot id. Dette er lett den vanligste bruken, men vær forsiktig når du bruker id velgere.
Spør deg selv: trenger jeg absolutt å søke en
idtil dette elementet for å målrette mot det?
id selektorer er stive og tillater ikke gjenbruk. Hvis det er mulig, prøv å bruke et tagnavn, et av de nye HTML5-elementene, eller til og med en pseudoklasse.
Se demo
.feil farge: rød;
Dette er en klasse velgeren. Forskjellen mellom ids og klasseDet er med den sistnevnte at du kan målrette mot flere elementer. Bruk klassees når du vil at stylingen skal gjelde for en gruppe elementer. Alternativt, bruk ids for å finne en nålehøvel, og stil bare det bestemte elementet.
Se demo
li en tekst-dekorasjon: ingen;
Neste kommentarsvelger er den kommer velgeren. Når du trenger å være mer spesifikk med seleksjonene dine, bruker du disse. For eksempel, hva om, i stedet for å målrette alle ankeretiketter, trenger du bare å målrette ankrene som ligger innenfor en uordnet liste? Dette er spesielt når du bruker en etterkommerevelger.
Pro-tips - Hvis din velger ser ut
X Y Z A B.error, du gjør det feil. Spør alltid deg selv om det er helt nødvendig å bruke alt dette vekt.
Se demo
en farge: rød; ul margin-left: 0;
Hva om du vil målrette alle elementene på en side, i henhold til deres type, heller enn en id eller klasseNavn? Hold det enkelt, og bruk en typeväljare. Hvis du må målrette mot alle uordnede lister, bruk ul .
Se demo
a: link color: red; a: visted farge: lilla;
Vi bruker : link pseudo-klasse for å målrette mot alle ankorsetiketter som ennå ikke er klikket på.
Alternativt har vi også : besøkt pseudoklasse, som, som du hadde forventet, tillater oss å bruke spesifikk styling til bare ankeretiketter på siden som ha blitt klikket på, eller besøkt.
Se demo
ul + p farge: rød;
Dette kalles en tilgrensende velger. Det vil velge bare elementet som umiddelbart føres av det tidligere elementet. I dette tilfellet er det bare første avsnitt etter hver ul vil ha rød tekst.
Se demo
div # container> ul border: 1px solid black;
Forskjellen mellom standarden X Y og X> Y er at den sistnevnte bare vil velge direkte barn. For eksempel, vurder følgende oppføring.
- Listepost
- Barn
- Listepost
- Listepost
- Listepost
En selector av #container> ul vil bare målrette mot uls som er direkte barn av div med en id av container. Det vil ikke målrette mot, for eksempel ul det er et barn av den første li.
Av denne grunn er det fordeler ved å bruke barnkombinatoren. Faktisk anbefales det spesielt når du arbeider med JavaScript-baserte CSS-valgmotorer.
Se demo
ul ~ p farge: rød;
Denne søskenkombinatoren ligner på X + Y, Det er imidlertid mindre strenge. Mens en tilstøtende velger (ul + p) vil bare velge det første elementet som er umiddelbart forutgående av den tidligere velgeren, er denne mer generalisert. Det vil velge, med henvisning til vårt eksempel ovenfor, noen p elementer, så lenge de følger a ul.
Se demo
en [tittel] farge: grønn;
Betegnet som en attributtervelger, i vårt eksempel ovenfor, vil dette bare velge ankerkoder som har en tittel Egenskap. Ankeretiketter som ikke vil motta denne stilen. Men hva om du trenger å være mer spesifikk? Vi vil?
Se demo
en [href = "http://net.tutsplus.com"] farge: # 1f6053; / * nettgrønn * /
Utsnittet ovenfor vil stile alle anker-koder som kobler til http://net.tutsplus.com; de vil motta vår merkede grønn farge. Alle andre ankeretiketter forblir upåvirket.
Vær oppmerksom på at vi pakker inn verdien i anførselstegn. Husk å også gjøre dette når du bruker en JavaScript CSS-valgmotor. Når det er mulig, bruk alltid CSS3 selectors over uoffisielle metoder.
Dette fungerer bra, men det er litt stivt. Hva om linken faktisk fører til Nettuts +, men, kanskje, banen er nettuts.com snarere enn full url? I disse tilfellene kan vi bruke litt av syntaksen med vanlig uttrykk.
Se demo
a [href * = "tuts"] farge: # 1f6053; / * nettgrønn * /
Der går vi; det er det vi trenger. Stjernen angir at fremgangsverdien må vises et sted i attributtens verdi. På den måten dekker dette nettuts.com, net.tutsplus.com, Til og med tutsplus.com.
Husk at dette er et bredt utsagn. Hva om ankermerket knyttet til noen ikke-Envato-steder med strengen Tuts i url? Når du trenger å være mer spesifikk, bruk ^ og $, for å referere til begynnelsen og slutten av en streng, henholdsvis.
Se demo
a [href ^ = "http"] bakgrunn: url (sti / til / ekstern / icon.png) no-repeat; polstring-venstre: 10px;
Noen gang lurt på hvordan noen nettsteder kan vise et lite ikon ved siden av koblingene som er eksterne? Jeg er sikker på at du har sett disse før; de er gode påminnelser om at linken vil lede deg til et helt annet nettsted.
Dette er en cinch med karat symbolet. Den brukes mest i vanlige uttrykk for å betegne begynnelsen på en streng. Hvis vi ønsker å målrette mot alle ankerkoder som har en href som begynner med http, vi kunne bruke en velger som ligner på utsnittet som er vist ovenfor.
Legg merke til at vi ikke søker etter
http: //; Det er unødvendig, og tar ikke hensyn til nettadressene som begynner medhttps: //.
Nå, hva om vi ønsket å istedenfor stil alle ankere som lenker til, si et bilde? I slike tilfeller, la oss søke etter slutt av strengen.
Se demo
a [href $ = ". jpg"] farge: rød;
Igjen bruker vi et vanlig uttrykkssymbol, $, å referere til enden av en streng. I dette tilfellet søker vi etter alle ankre som kobler til et bilde - eller i det minste en URL som slutter med .jpg. Husk at dette sikkert ikke vil fungere for gifs og PNG.
Se demo
a [data-filetype = "image"] farge: rød;
Gå tilbake til nummer åtte; hvordan kompenserer vi for alle de ulike bildetyper: png, jpeg,jpg, gif? Vel, vi kunne skape flere selektorer, for eksempel:
en [href $ = ". jpg"], en [href $ = ".jpeg"], en [href $ = ".png"], en [href $ = ".gif"] farge: rød;
Men det er en smerte i rumpa, og er ineffektiv. En annen mulig løsning er å bruke egendefinerte attributter. Hva om vi lagt til vår egen data-file Tilordne hvert anker som kobler til et bilde?
Bildelink
Så med det krok på plass, kan vi bruke en standard attributtervelger for å målrette bare de ankre.
a [data-filetype = "image"] farge: rød;
Se demo
en [data-info ~ = "ekstern"] farge: rød; en [data-info ~ = "image"] border: 1px solid black;
Her er en spesiell som vil imponere vennene dine. Ikke for mange mennesker vet om dette trikset. Tildaen (~) -symbolet tillater oss å målrette mot et attributt som har en avstandsseparert liste over verdier.
Går sammen med vår egendefinerte attributt fra nummer femten over, kan vi opprette en data-info attributt, som kan motta en romavskilt liste over alt vi trenger å notere. I dette tilfellet legger vi merke til eksterne koblinger og koblinger til bilder - bare for eksemplet.
"Klikk meg, lure
Med denne merkingen på plass, kan vi nå målrette mot noen koder som har en av disse verdiene, ved å bruke ~ attributter selector trick.
/ * Måldata-info attr som inneholder verdien "ekstern" * / a [data-info ~ = "ekstern"] farge: rød; / * Og som inneholder verdien "image" * / a [data-info ~ = "image"] border: 1px solid black;
Ganske greit, ay?
Se demo
input [type = radio]: merket border: 1px solid black;
Denne pseudoklassen vil kun målrette mot et brukergrensesnittelement som har vært sjekket - som en radioknapp eller avkrysningsboks. Det er så enkelt.
Se demo
De før og etter pseudoklasser sparkestopp. Hver dag ser det ut til at folk finner nye og kreative måter å bruke dem effektivt på. De genererer bare innhold rundt det valgte elementet.
Mange ble først introdusert til disse klassene da de oppdaget den klare løsningen.
.clearfix: etter innhold: ""; skjerm: blokk; klare: begge; synlighet: skjult; skriftstørrelse: 0; høyde: 0; .clearfix * display: inline-block; _ Høyde: 1%;
Dette hack bruker :etter pseudoklasse for å legge til et mellomrom etter elementet, og deretter fjerne det. Det er et utmerket triks å ha i verktøykassen din, spesielt i tilfeller der overløp: skjult; metoden er ikke mulig.
For en annen kreativ bruk av dette, se min hurtige tips om å skape skygger.
I henhold til CSS3 Selectors-spesifikasjonen, bør du teknisk bruke pseudo-elementsyntaxen til to kolonner
::. For å forbli kompatibel vil brukeragenten imidlertid akseptere en enkelt kolonbruk også. Faktisk, på dette punktet er det smartere å bruke single-colon-versjonen i prosjektene dine.
div: hover bakgrunn: # e3e3e3;
Åh, kom igjen. Du kjenner denne. Den offisielle sikt for dette er bruker handling pseudoklasse. Det høres forvirrende ut, men det er det egentlig ikke. Ønsker du å bruke spesifikk styling når en bruker svinger over et element? Dette vil få jobben gjort!
Husk at eldre versjon av Internet Explorer ikke svarer når
:svevepseudoklassen er brukt på noe annet enn en ankermerke.
Du bruker oftest denne velgeren når du søker, for eksempel a nedre kant å ankre koder når du svinger over.
a: svever border-bottom: 1px solid black;
Pro-tips -
border-bottom: 1px solid svart;ser bedre ut enntekst-dekorasjon: understreke;.
div: ikke (#container) farge: blå;
De negasjon pseudoklassen er spesielt nyttig. La oss si at jeg vil velge alle divs, bortsett fra den som har en id av container. Utsnittet ovenfor vil håndtere oppgaven perfekt.
Eller, hvis jeg ønsket å velge hvert enkelt element (ikke anbefalt) bortsett fra avsnittetiketter, kunne vi gjøre:
*: ikke (p) farge: grønn;
Se demo
p :: første linje font-weight: bold; fontstørrelse: 1.2em;
Vi kan bruke pseudoelementer (utpekt av ::) å style fragmenter av et element, for eksempel første linje eller første bokstav. Husk at disse må brukes til å blokkere nivåelementer for å få effekt.
Et pseudo-element består av to kolonner:
::
p :: første bokstav float: left; skriftstørrelse: 2em; font-weight: bold; font-family: cursive; polstring-høyre: 2px;
Denne brikken er en abstraksjon som finner alle avsnittene på siden, og sub-mål bare den første bokstaven til det elementet.
Dette brukes oftest til å lage avislignende styling til første bokstav i en artikkel.
p :: første linje font-weight: bold; fontstørrelse: 1.2em;
På samme måte, ::første linje pseudoelementet vil, som forventet, bare formatere den første linjen av elementet.
"For kompatibilitet med eksisterende stilark, må brukeragenter også akseptere den forrige en-kolonnotasjonen for pseudoelementer introdusert i CSS nivå 1 og 2 (nemlig: første linje,: første bokstav,: før og etter). Denne kompatibiliteten er ikke tillatt for de nye pseudoelementene som er introdusert i denne spesifikasjonen. " - Kilde
Se demo
li: nth-child (3) farge: rød;
Husker dagene da vi ikke hadde mulighet til å målrette mot bestemte elementer i en stabel? De NTH-barn pseudoklassen løser det!
Vær oppmerksom på at NTH-barn aksepterer et heltall som en parameter, men dette er ikke null-basert. Hvis du ønsker å målrette mot det andre listeelementet, bruk li: n'te barn (2).
Vi kan til og med bruke dette til å velge et variabelt sett med barn. For eksempel kan vi gjøre li: n'te barn (4n) for å velge hvert fjerde listepost.
Se demo
li: n-siste-barn (2) farge: rød;
Hva om du hadde en stor liste over varer i en ul, og bare trengte å få tilgang til, si, den tredje til det siste elementet? Snarere enn å gjøre li: n'te barn (397), du kan i stedet bruke NTH-siste-barn pseudoklasse.
Denne teknikken fungerer nesten identisk fra tallet seksten over, men forskjellen er at den begynner på slutten av samlingen, og går tilbake.
Se demo
ul: nth-of-type (3) border: 1px solid black;
Det blir tider når, i stedet for å velge en barn, du må i stedet velge i henhold til type av elementet.
Tenk på oppslag som inneholder fem uordnede lister. Hvis du ønsket å style bare den tredje ul, og hadde ikke en unik id å koble til, kan du bruke n'te-av-type (n) pseudoklasse. I utsnittet ovenfor, bare den tredje ul vil ha en kant rundt den.
Se demo
ul: n-siste-av-type (3) border: 1px solid black;
Og ja, for å forbli konsistent, kan vi også bruke NTH-siste-of-type å begynne på slutten av seleksjonslisten, og arbeid oss tilbake for å målrette mot ønsket element.
ul li: første barn border-top: none;
Denne strukturelle pseudoklassen tillater oss å målrette mot det første barnet til elementets foreldre. Du bruker ofte dette til å fjerne grenser fra de første og siste listepostene.
For eksempel, la oss si at du har en liste over rader, og hver har en border-top og a nedre kant. Vel, med det arrangementet, vil det første og siste elementet i det settet se litt rart ut.
Mange designere bruker klasser av først og siste for å kompensere for dette. I stedet kan du bruke disse pseudoklassene.
Se demo
ul> li: siste barn farge: grønn;
Det motsatte av første barn, siste barn vil målrette mot det siste elementet i elementets foreldre.
La oss bygge et enkelt eksempel for å demonstrere en mulig bruk av disse klassene. Vi lager et stilig listerobjekt.
Ikke noe spesielt her; bare en enkel liste.
ul bredde: 200px; bakgrunn: # 292929; farge: hvit; listestil: none; polstring-venstre: 0; li polstring: 10px; border-bottom: 1px solid svart; border-top: 1px solid # 3c3c3c;
Denne stylingen vil sette en bakgrunn, fjern nettleserens standardpolstring på ul, og søk grenser til hver li å gi litt dybde.
For å legge til dybde i lister, bruk en
nedre kanttil hverlidet er en nyanse eller to mørkere ennliBakgrunnsfargen. Deretter gjelder enborder-topsom er et par nyanser lighter.
Det eneste problemet, som vist i bildet ovenfor, er at en kantlinje vil bli brukt øverst og nederst på den uordnede listen - som ser merkelig ut. La oss bruke :første barn og :siste barn pseudoklasser for å fikse dette.
li: første barn border-top: none; li: siste barn border-bottom: none;
Der går vi; som løser det!
Se demo
Yep - IE8 støttes :første barn, men ikke :siste barn. Gå figur.
div p: only-child color: red;
Sannferdig, vil du sannsynligvis ikke finne deg selv ved hjelp av enebarn pseudoklasse for ofte. Likevel er det tilgjengelig, bør du trenge det.
Det lar deg målrette elementer som er bare barn av foreldrene. For eksempel, refererer koden ovenfor, bare avsnittet som er det eneste barnet i div vil bli farget, rødt.
La oss anta følgende oppføring.
Mitt avsnitt her.
To avsnitt totalt.
To avsnitt totalt.
I dette tilfellet, den andre divparagrafene vil ikke bli målrettet; bare den første div. Så snart du bruker mer enn ett barn til et element, vil enebarn pseudoklassen slutter å tre i kraft.
Se demo
li: bare-of-type font-weight: bold;
Denne strukturelle pseudoklassen kan brukes på noen smarte måter. Det vil målrette elementer som ikke har noen søsken i sin foreldrebeholder. Som et eksempel, la oss målrette alt uls, som bare har 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 ville være målrettet alle liste elementer. Den eneste løsningen er å bruke bare-av-typen.
ul> li: bare-of-type font-weight: bold;
Se demo
De første-av-typen pseudoklassen lar deg velge de første søsken av sin type.
For å bedre forstå dette, la oss få en test. Kopier følgende markering i kodeditoren din:
Mitt avsnitt her.
- Liste 1
- Liste 2
- Liste 3
- Liste 4
Nå, uten å lese videre, prøv å finne ut hvordan du målretter bare "Listepost 2". Når du har funnet ut det (eller gitt opp), les videre.
Det finnes en rekke måter å løse denne testen på. Vi vurderer en håndfull av dem. La oss begynne med å bruke første-av-typen.
ul: first-of-type> li: nth-child (2) font-weight: bold;
Denne koden sier i hovedsak, "finn den første uordnede listen på siden, og finn bare de nærmeste barna, som er listeposter. Neste, filtrer det ned til bare det andre listeposten i det settet.
Et annet alternativ er å bruke tilgrensende velger.
p + ul li: siste barn font-weight: bold;
I dette scenariet finner vi ul som straks fortsetter p tag, og finn det aller siste barnet av elementet.
Vi kan være så motbydelige eller så lekfulle som vi vil ha med disse velgerne.
ul: første-av-type li: nte-siste-barn (1) font-weight: bold;
Denne gangen tar vi den første ul på siden, og finn det aller første listeposten, men starter fra bunnen! :)
Se demo
Hvis du kompenserer for eldre nettlesere, som Internet Explorer 6, må du likevel være forsiktig når du bruker disse nyere velgerne. Men vær så snill, ikke la det avskrekke deg fra å lære disse. Du vil gjøre en stor disservice til deg selv. Husk å referere her for en liste over kompatibilitet med nettleseren. Alternativt kan du bruke Dean Edwards utmerkede IE9.js-skript for å få støtte for disse valgene til eldre nettlesere.
For det andre, når du arbeider med JavaScript-biblioteker, som den populære jQuery, må du alltid prøve å bruke disse innfødte CSS3-seleksjonene over bibliotekets tilpassede metoder / selektorer, når det er mulig. Det vil gjøre koden din raskere, da selektormotoren kan bruke nettleserens opprinnelige analyse, i stedet for sin egen.
Det er flott at du bruker tid på å lære grunnleggende for webdesign, men hvis du trenger en rask løsning, kan en av våre brukervennlige CSS-maler være et godt alternativ. Vi har også noen premium CSS-elementer for å vurdere:
Her er en håndfull klar-til-bruk-CSS-koden itemsяon Envato Market som du kan finne nyttig.
Denne Mega Drop Down-menyen er en fleksibel og enkel å integrere løsning for å bygge dine tilpassede menyer. Drop down er bare avhengig av CSS / XHTML og leveres med et fullstendig kontaktskjema.
CSS3 Mega Drop Down-menyenCSS3 Responsive Web Pricing Tables Grids er en pakke med rene CSS3, responsive og retina ready Pricing Tables. Malen leveres med 2 tabellstiler, 20 forhåndsdefinerte fargeskinn, animerte hover-stater, mulighet til å angi en eller flere kolonner som aktiv (poppet opp) som standard, CSS3-bånd, CSS3-verktøytips, 20 skriftbaserte ja / nei ikoner.
Denne versjonen er dedikert til alle tilpassede CMS-baserte nettsteder, så vel som for ikke-CMS-nettsteder, og vil fungere med rett HTML- eller PHP-baserte nettsteder.
CSS3 Responsive Web Pricing Tables GridsTooltip er en stilig, moderne gentleman som vises når det er showtime. Funksjonene inkluderer:
TooltipMegaNavbar er en ren HTML5 / CSS3 navigasjonskomponent, som bruker standard navbar-oppgradering og væskenett-systemklassene fra Bootstrap 3. Den fungerer for faste og responsive layouter, og har muligheten til å inkludere andre Bootstrap-komponenter. MegaNavbar er kompatibel med mobile enheter og moderne nettlesere.
MegaNavbar (v 2.2.0). Avansert Mega Meny for Bootstrap 3.0+Denne pakken med CSS3 Pricing Tablesjiis er en komplett løsning for å bygge fantastiske bord på noen minutter. Den leveres med 6 fargevarianter, samt 2 bordvarianter (lys eller mørk).
Responsive CSS3 prisbord
Accentsconagua