Lær CSS: Den Komplette Guide

Vi har bygget en komplet guide til at hjælpe dig med at lære CSS, om du er lige ved at komme i gang med det grundlæggende, eller du ønsker at udforske en mere avanceret CSS.

CSS Selektorer

Så du lært base id class og descendant selectors—og så kaldes det en dag? I så fald går du glip af et enormt fleksibilitetsniveau. Du skylder dig selv at forpligte disse avancerede CSS-og CSS3-vælgere til hukommelsen.

grundlæggende selektorer

1., *

* { margin: 0; padding: 0;}

Lad os banke den åbenlyse ud, for begyndere, før vi går videre til de mere avancerede selectors.

stjernesymbolet vil målrette mod hvert enkelt element på siden. Mange udviklere vil bruge dette trick til at nulstille margins og padding. Selvom dette bestemt er fint til hurtige test, vil jeg råde dig til aldrig at bruge dette i produktionskode. Det tilføjer for meget vægt på bro .seren, og er unødvendig.

* kan også bruges sammen med børnevalgere.,

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

Dette vil målrette hver enkelt element, der er barn af #container div. Igen, prøv ikke at bruge denne teknik meget, hvis nogensinde.

2. #

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

præfiksering af hash-symbolet til en vælger giver os mulighed for at målrette med id. Dette er let den mest almindelige brug; vær dog forsigtig, når du bruger id selektorer.,

spørg dig selv: skal jeg absolut anvende en id til dette element for at målrette det?

id selektorer er stive og tillader ikke genbrug. Hvis det er muligt, skal du først prøve at bruge et tagnavn, et af de nye HTML5-elementer eller endda en pseudoklasse.

3. .

.error { color: red;}

Dette er en class selector. Forskellen mellem ids og classes er, at du med sidstnævnte kan målrette mod flere elementer., Brug classes, når du ønsker, at din styling skal gælde for en gruppe elementer. Alternativt kan du bruge id s til at finde en nål i en høstak og kun style det specifikke element.

4. X

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

Hvad nu, hvis du ønsker at målrette alle elementer på en side, i henhold til deres type, snarere end en id eller classnavn? Hold det enkelt, og brug en typevælger. Hvis du har brug for at målrette mod alle uordnede lister, skal du bruge ul {}.,

Live Demo af Basic Selectors

Combinator Selectors

5. X Y

li a { text-decoration: none;}

Den næste mest almindelige, er gearvælgeren descendant selector. Når du skal være mere specifik med dine vælgere, bruger du disse. For eksempel, hvad hvis, snarere end at målrette alle anker tags, du behøver kun at målrette de ankre, der er inden for en uordnet liste? Dette er specifikt, når du vil bruge en efterkommer selector.

Pro-tip: Hvis din selector ligner X Y Z A B.error, så gør du det forkert., Spørg altid dig selv, om det er absolut nødvendigt at anvende al den vægt.

6. This + y

ul + p { color: red;}

dette kaldes en tilstødende vælger. Det vælger kun det element, der umiddelbart går forud for det tidligere element. I dette tilfælde vil kun det første afsnit efter hver ul have rød tekst.

7., X > Y

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

forskellen mellem standard X Y og X > Y er, at sidstnævnte kun vil vælge direkte børn. Overvej for eksempel følgende markering.

 <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 selector af #container > ul kun vil målrette uls, der er direkte børn af div med id af container., Ikke målrette mod ul, der er et barn af den første li.

af denne grund er der præstationsfordele ved brug af børnekombinatoren. Faktisk, det anbefales især når du arbejder med JavaScript-baserede CSS selector motorer.

8. ~ ~ Y

ul ~ p { color: red;}

denne søskendekombinator ligner X + Y, men det er mindre strengt., Mens en tilstødende vælger (ul + p) kun vælger det første element, der umiddelbart går forud for den tidligere vælger, er denne mere generaliseret. Den vælger, med henvisning til vores eksempel ovenfor, allep elementer, så længe de følger enul.

Live Demo af Combinator selektorer

attribut selektorer

9. X

a { color: green;}

der er Nævnt som et attributter selector, i vores eksempel ovenfor, vil dette kun vælge det anker, tags, der har en title attribut., Anker tags, som ikke vil ikke modtage denne særlige styling. Men hvad nu hvis du skal være mere specifik? Tjek det næste eksempel!

10. Above

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

uddraget ovenfor vil style alle ankermærker, der linker til https://code.tutsplus.com; de modtager vores brandede grønne farve. Alle andre ankermærker forbliver upåvirkede.

Bemærk, at vi indpakker værdien i citater. Husk også at gøre dette, når du bruger en JavaScript CSS selector motor. Når det er muligt, skal du altid bruge CSS3-vælgere over uofficielle metoder.,

Dette fungerer godt, selvom det er lidt stift. Hvad hvis linket faktisk direkte til Envato Tuts+ , men måske er stien code.tutsplus.com snarere end den fulde URL? I disse tilfælde kan vi bruge en smule af de regulære udtryk syntaks.

11.

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

der går vi; det er hvad vi har brug for. Stjernen angiver, at procedureværdien skal vises et sted i attributens værdi. På den måde dækker dette tutsplus.com, code.tutsplus.com, og endda webdesign.tutsplus.com.

Husk, at dette er en bred erklæring., Hvad hvis ankeret tag knyttet til nogle ikke-Envato site med strengen tutsplus i URL ‘ en? Når du skal være mere specifik, skal du bruge ^ og $ for at henvise til henholdsvis begyndelsen og slutningen af en streng.

12. Ever

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

nogensinde spekulerer på, hvordan nogle hjemmesider er i stand til at vise et lille ikon ved siden af de links, der er eksterne? Jeg er sikker på, at du har set disse før; de er dejlige påmindelser om, at linket vil lede dig til et helt andet websiteebsted.

Dette er en cinch med karat symbolet., Det er mest almindeligt anvendt i regulære udtryk til at betegne begyndelsen af en streng. Hvis vi ønsker at målrette alle anchor-tags, der har en href, der begynder med http, kunne vi bruge en selector svarende til de uddrag, der vises ovenfor.

Bemærk, at vi ikke søger efter ;, det er unødvendigt, og tager ikke højde for de Webadresser, der starter med

hvad Nu hvis vi ville i stedet stil alle ankre som link til et foto?, I disse tilfælde skal vi søge efter slutningen af strengen.

13. Again

a { color: red;}

igen bruger vi et regulært udtryk symbol, $, for at henvise til slutningen af en streng. I dette tilfælde søger vi efter alle ankre, der linker til et billede—eller i det mindste en URL, der slutter med .jpg. Husk, at dette ikke vil fange GIF-og PNG-billeder.

14.

a { color: red;}

hvordan kompenserer vi for alle de forskellige billedtyper?, Nå, vi kunne oprette flere selektorer, såsom:

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

men det er en smerte, og det er ineffektivt. En anden mulig løsning er at bruge brugerdefinerede attributter. Hvad hvis vi tilføjede vores egendata-filetype attribut til hvert anker, der linker til et billede?

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

derefter kan vi med den krog på plads bruge en standardattributvælger til kun at målrette disse ankre.

a { color: red;}

15.

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

Her er en speciel, der vil imponere dine venner. Ikke for mange mennesker ved om dette trick., Symbolet tilde (~) giver os mulighed for at målrette mod en attribut, der har en mellemrumssepareret liste over værdier.hvis vi går sammen med vores brugerdefinerede attribut fra nummer 15 ovenfor, kunne vi oprette en data-info attribut, som kan modtage en rumsepareret liste over alt, hvad vi har brug for at notere. I dette tilfælde noterer vi Eksterne links og links til billeder—bare for eksempel.,

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

Når denne markering er på plads, kan vi nu målrette mod alle tags, der har en af disse værdier, ved at bruge ~ attributter selector trick.

temmelig nifty, huh?

Live Demo af attribut selektorer

Pseudo selektorer

16. Visited: besøgt og pseud: link

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

Vi bruger :link pseudoklasse til at målrette alle ankerkoder, som endnu ikke er klikket på.,

Alternativt kan vi også har :visited pseudo klasse, der, som du ville forvente, giver os mulighed for at anvende specifikke styling til kun anchor-tags på den side, som er blevet klikket på, eller “besøgte”.

17. Checked: markeret

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

denne pseudoklasse vil kun målrette mod et brugergrænsefladeelement, der er markeret—som en radioknap eller afkrydsningsfelt. Så simpelt er det.

18. X:efter

before og after pseudo-klasser er store., Hver dag ser det ud til, at folk finder nye og kreative måder at bruge dem effektivt på. De genererer simpelthen indhold omkring det valgte element.mange blev først introduceret til disse klasser, da de stødte på clear-Fi.hack.

dette hack bruger :after pseudoklasse for at tilføje et mellemrum efter elementet og derefter rydde det. Det er et fremragende trick at have i din værktøjstaske, især i de tilfælde, hvor overflow: hidden; – metoden ikke er mulig.

for en anden kreativ brug af dette, se mit hurtige tip til oprettelse af skygger.,

Ifølge CSS3 Selektorer specifikation, bør du teknisk bruge pseudo element syntaks i to koloner ::. Men, at forblive kompatible, bruger-agent vil acceptere en enkelt kolon forbrug samt.

19. H: hover

div:hover { background: #e3e3e3;}

Oh come on. Du kender den her. Den officielle betegnelse for dette er”brugerhandling pseudoklasse”. Det lyder forvirrende, men det er det virkelig ikke. vil du anvende specifik styling, når en bruger svæver over et element? Dette vil få arbejdet gjort!,

husk, at ældre versioner af Internet Explorer ikke svarer, når de :hover pseudo klasse er anvendt til noget andet end et anker tag.

du bruger oftest denne vælger, når du f.eks. anvender en border-bottom til at forankre tags, når de svinges over.

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

Pro-tip: border-bottom: 1px solid black; ser bedre ud end text-decoration: underline;.

20., Ikke(selector)

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

pseudoklassen negation er særlig nyttig. Lad os sige, at jeg vil vælge alle divs, bortset fra den, der har et id på container. Uddraget ovenfor håndterer denne opgave perfekt.

eller, hvis jeg ønskede at vælge hvert enkelt element (ikke rådgivet) bortset fra afsnit tags, vi kunne gøre:

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

21., X::pseudoElement

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

Vi kan bruge pseudo elementer (udpeget af ::) til at style fragmenter af et element, som den første linje eller første bogstav. Husk, at disse skal anvendes på blokniveau elementer for at kunne træde i kraft.,

En pseudo-element består af to kolon: ::

Mål det Første Bogstav i et Afsnit

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

Dette uddrag er en abstraktion, der vil finde alle afsnit på den side, og derefter delmål kun det første bogstav af det pågældende element.

Dette bruges oftest til at oprette avislignende styling til det første bogstav i en artikel.,

Målrette den Første Linje af et Afsnit

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

Tilsvarende ::first-line pseudo-elementet, som forventet, stil den første linje af elementet kun.

“For kompatibilitet med eksisterende style sheets, bruger agenter skal også acceptere den forrige-kolon notation for pseudo-elementer, der indføres i CSS niveau 1 og 2 (nemlig :first-line :first-letter :before og :after). Denne kompatibilitet er ikke tilladt for de nye pseudoelementer, der er introduceret i denne specifikation.,”—W3C Selektorer Specs

Live Demo af Pseudo-Selektorer

n ‘ te Barn og Type Selektorer

22. Remember: nth-child(n)

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

Husk de dage, hvor vi ikke havde nogen måde at målrette mod specifikke elementer i en stak? nth-child pseudoklasse løser det!

Bemærk, at nth-child accepterer et heltal som en parameter, men dette er ikke nulbaseret. Hvis du ønsker at målrette mod det andet listeelement, skal du bruge li:nth-child(2).

Vi kan endda bruge dette til at vælge et variabelt sæt børn., For eksempel kunne vi gøre li:nth-child(4n) for at vælge hvert fjerde listeelement.

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

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

Hvad hvis du havde en enorm liste af elementer i en ul, og du kun nødvendig for at få adgang til, siger, den tredje til sidste punkt på dagsordenen? Snarere end at gøre li:nth-child(397), kan du i stedet bruge nth-last-child pseudo klasse.

denne teknik virker næsten identisk med nummer 16 ovenfor. Forskellen er, at det begynder i slutningen af samlingen, og arbejder sig tilbage.

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

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

Der vil være tidspunkter, hvor i stedet for at vælge en child, kan du i stedet nødt til at vælge i henhold til type element.

Forestil dig markup, der indeholder fem uordnede lister. Hvis du ønsker at style den tredje ul, og ikke har en enestående id for at tilslutte til, kan du bruge nth-of-type(n) pseudo klasse. I uddraget ovenfor vil kun den tredje ul have en kant omkring den.

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

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

Og ja, for at være konsekvent, kan vi også bruge nth-last-of-type for at starte ved slutningen af selektorer liste og arbejde vores vej tilbage til mål på det ønskede element.

26. Første barn

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

denne strukturelle pseudoklasse giver os mulighed for kun at målrette mod det første barn af elementets forælder. Du bruger ofte dette til at fjerne grænser fra de første og sidste listeposter.

For eksempel, lad os sige, at du har en liste over rækker, og hver har en border-top og border-bottom., Nå, med det arrangement vil det første og sidste element i det sæt se lidt underligt ud.

Mange designere anvender klasser af first og last for at kompensere for dette. I stedet kan du bruge disse pseudoklasser.

27. Last-child

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

det modsatte af first-child, last-child vil målrette mod det sidste element i elementets forælder.

last-child Selector eksempel

lad os bygge et simpelt eksempel for at demonstrere en mulig anvendelse af disse klasser., Vi opretter en stylet listepost.

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

for markeringen er der ikke noget særligt: bare en simpel liste.

Her er CSS:

Denne styling vil vælge en baggrund, skal du fjerne browser default polstring på ul, og der gælder grænser for hvert li for at give en smule dybde.

for At tilføje dybde til dine lister, gælder en border-bottom for hver li, der er en nuance eller to mørkere end li‘s baggrundsfarve., Anvend derefter en border-top som er et par nuancer lysere.

det eneste problem, som vist på billedet ovenfor, er, at en kant vil blive anvendt helt øverst og nederst på den uordnede liste—hvilket ser underligt ud. Lad os bruge :first-child og :last-child pseudoklasser for at løse dette.

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

der går vi; det løser det!

28., Only: kun-barn

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

sandfærdigt vil du sandsynligvis ikke finde dig selv ved at bruge only-child pseudoklasse for ofte. Ikke desto mindre, det er let tilgængelige, hvis du har brug for det.

det giver dig mulighed for at målrette elementer, som er det eneste barn af sin forælder. For eksempel, der henviser til uddraget ovenfor, vil kun det afsnit, der er det eneste barn i div blive farvet rødt.

lad os antage følgende markering.,

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

I dette tilfælde, det andet div‘s afsnit vil ikke blive rettet; kun det første div. Så snart du anvender mere end et barn på et element, ophører only-child pseudoklasse med at træde i kraft.

29. Only-of-type

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

denne strukturelle pseudoklasse kan bruges på nogle smarte måder. Det vil målrette elementer, der ikke har nogen søskende i sin forælder container. Som et eksempel, lad os målrette alle uls, som kun har et enkelt listeelement.,først skal du spørge dig selv, hvordan du ville udføre denne opgave. Du kunne gøre ul li, men dette ville målrette alle listeposter. Den eneste løsning er at bruge only-of-type.

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

30. Pseud: første type

first-of-type pseudoklasse giver dig mulighed for at vælge de første søskende af sin type.

en Test

for bedre at forstå dette, lad os få en test. Kopier følgende markering i din kodeditor:

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

prøv nu uden at læse videre at finde ud af, hvordan du kun målretter mod “List Item 2”., Når du har fundet ud af det (eller givet op), læs videre.

løsning 1

Der er forskellige måder at løse denne test på. Vi gennemgår en håndfuld af dem. Lad os begynde med at bruge first-of-type.

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

dette uddrag siger i det væsentlige, for at finde den første uordnede liste på siden, så find kun de nærmeste børn, som er listeposter. Dernæst filtrer det ned til kun det andet listeelement i det sæt.

løsning 2

en anden mulighed er at bruge den tilstødende vælger.,

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

I dette scenario, vi finder ul, der umiddelbart provenu p tag, og derefter finde den allersidste barn af element.

løsning 3

Vi kan være så modbydelige eller så legende, som vi vil med disse vælgere.

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

denne gang griber vi den første ul på siden, og find derefter det allerførste listeelement, men startende fra bunden!,

Live Demo af n ‘ te Barn og Type Selektorer

Konklusion

Hvis du er kompensere for ældre browsere, såsom Internet Explorer 6, kan du stadig nødt til at være forsigtig, når du bruger disse nyere selectors. Men lad det ikke afskrække dig fra at lære disse. Du ville gøre dig selv en stor bjørnetjeneste. Sørg for at henvise her til en bro .ser-kompatibilitet liste. Alternativt kan du bruge Dean Ed Edwardards fremragende IE9.js script til at bringe støtte til disse vælgere til ældre bro .sere.,

for det andet, når du arbejder med JavaScript-biblioteker, ligesom den populære j .uery, altid forsøge at bruge disse indfødte CSS3 selektorer over bibliotekets brugerdefinerede metoder / selektorer, når det er muligt. Det vil gøre din kode hurtigere, da vælgermotoren kan bruge bro .serens oprindelige parsing, snarere end sin egen.

det er godt, at du bruger tid på at lære grundlæggende fundamentebdesign, men hvis du har brug for en hurtig løsning, kan en af vores brugsklare CSS-skabeloner være en god mulighed. Vi har også et par premium CSS elementer for dig at overveje.,

• CSS3
  12 Elegante CSS pris Tabeller for Din Seneste Web-Projekt
  Monty Shokeen
• Bootstrap 4
  18 Bedste Bootstrap 4 Plugins
  Monty Shokeen

Gratis Adgang til Envato Elementer for 1 Måned

Endelig, her er en meget speciel tilbud til at hjælpe dig med at opbygge et professionelt udseende websteder og apps. Ud over at bruge disse CSS-vælgere, hvorfor ikke drage fordel af lagerbilleder af høj kvalitet, videooptagelser, premium skrifttyper, grafik, illustrationer og mere?,

normalt skal du betale for sådanne ressourcer. Men lige nu Kan du få adgang til millioner af kreative aktiver til dine kodningsprojekter i en hel måned, helt gratis. Og hvad mere er, du får ubegrænset do !nloads, så du kan få fat i så meget som du ønsker i løbet af denne måned, og kun betale, hvis du beslutter at fortsætte!,

for At drage fordel af dette tilbud, kan du klikke på denne særlige signup link eller ved at angive koden nedenfor på registrering side:

elements_cont_tuts-freemonth1-4bwkbp

vent ikke for længe—tilbuddet gælder kun i en begrænset tid!