Denne er til de absolutte begyndere. Når du først har lært, hvordan boxmodellen fungerer, og hvordan du flyder disse bokse, er det tid til at blive seriøs over din CSS. Til dette formål har vi samlet en massiv liste over tips, tricks, teknikker og lejlighedsvis snavset hack for at hjælpe dig med at opbygge det design, du ønsker.

CSS kan blive vanskelig, og det skal du også. Og nu, i intet bestemt rækkefølge, (næsten) alt hvad du behøver at vide:

1. Absolut positionering

Hvis du vil have kontrol over, hvor et element lever på vores hjemmeside til enhver tid, er absolut positionering nøglen til at gøre dette ske. Hvis du tænker på din browser som en stor afgrænsningskasse, giver absolut positionering dig mulighed for at kontrollere præcis, hvor i det pågældende felt et element vil forblive. Brug top, højre, bund og venstre, ledsaget af en pixelværdi til at styre, hvor et element forbliver.

position:absolute;top:20px;right:20px

CSS ovenfor angiver placeringen af ​​et element for at forblive 20px fra top og højre kant af din browser. Du kan også bruge absolut positionering inde i en div.

2. * + vælger

Med * kan du vælge alle elementer i en bestemt vælger. Hvis du for eksempel brugte * p og derefter tilføjede CSS-stilarter til det, ville det gøre det for alle elementer i dit dokument med en

tag. Dette gør det nemt at målrette dele af dit websted globalt.

3. Overstyring af alle stilarter

Dette skal bruges sparsomt, for hvis du gør det til alt, vil du finde dig i problemer i det lange løb. Men hvis du vil tilsidesætte en anden CSS-stil til et bestemt element, skal du bruge ! Vigtigt efter stilen i din css. Hvis jeg for eksempel ville have H2-overskrifterne i en bestemt sektion på mit websted for at være rød i stedet for blå, ville jeg bruge følgende CSS:

.section h2 { color:red !important; }

4. Centrering

Centrering er vanskelig, fordi det afhænger af, hvad du forsøger at centrere. Lad os tage et kig på CSS af elementer, der skal centreres, baseret på indhold.

Tekst

Tekst er centreret ved hjælp af tekst-align: center; . Hvis du vil have det til begge sider, skal du bruge venstre eller højre i stedet for at centrere.

Indhold

En div (eller et hvilket som helst andet element) kan centreres ved at tilføje blokegenskaben til det og derefter bruge automatiske margener. CSS'en vil se sådan ud:

#div1 {display: block;margin: auto;width: anything under 100%}

Grunden til, at jeg sætter "noget under 100%" for bredden, er, at hvis det var 100% bredt, så hvis det ville være fuld bredde og ikke ville have brug for centrering. Det er bedst at have en fast bredde, som 60% eller 550px mv.

5. Lodret justering (for en linje tekst)

Du vil bruge dette i en CSS navigationsmenu, jeg kan næsten garantere det. Nøglen er at gøre højden på menuen og linjens højde på samme måde. Jeg ser denne teknik meget, når jeg går tilbage og redigerer eksisterende websites til kunder. Her er et eksempel:

.nav li{line-height:50px;height:50px;}

6. Hover effekter

Dette bruges til knapper, tekst links, bock sektioner af dit websted, ikoner og meget mere. Hvis du vil have noget til at ændre farver, når nogen svæver musen over det, skal du bruge det samme CSS, men tilføj : svæv til det og ændre stylingen. Her er et eksempel:

.entry h2{font-size:36px;color:#000;font-weight:800;}.entry h2:hover{color:#f00;}

Hvad det gør er det ændrer farven på dit h2-tag fra sort til rødt, når nogen svæver over det. Den store ting ved at bruge: hover er, at du ikke er nødt til at erklære skriftstørrelsen eller vægten igen, hvis den ikke ændrer sig. Det ændrer kun det, du angiver.

Overgang

For svæveffekter, ligesom med menuer eller billeder på dit website, vil du ikke have, at farver snapper for hurtigt til slutresultatet. Du vil helst lette forandringen i gradvis, hvilket er, hvor overgangsejendommen kommer i spil.

.entry h2:hover{color:#f00;transition: all 0.3s ease;}

Dette gør ændringen ske over .3 sekunder, i stedet for at straks snappe til rødt. Dette gør svæveffekten mere behagelig for øjet og mindre krumning.

7. Link stater

Disse stilarter savnes af mange designere, og det forårsager virkelig brugervenlighedsproblemer med dine besøgende. Den : link pseudoklasse styrer alle links, der endnu ikke er klikket på. Den besøgte pseudoklasse håndterer stylingen af ​​alle de links, du allerede har besøgt. Dette fortæller besøgende på hjemmesiden, hvor de allerede har været på dit websted, og hvor de endnu ikke skal udforske.

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

8. Nemt ændre størrelsen på billederne for at passe

Nogle gange kommer du i klemme, hvor billederne skal passe til en vis bredde, mens skalering proportionelt. En nem måde at gøre dette på er at bruge maksimal bredde til at håndtere dette. Her er et eksempel:

img {max-width:100%;height:auto;}

Det betyder, at det største billede, der nogensinde kan være, er 100%, og højden beregnes automatisk, baseret på billedbredden. I nogle tilfælde skal du muligvis også angive bredden ved 100%.

9. Kontroller elementerne i et afsnit

Brug billedeksemplet ovenfor, hvis du kun vil målrette billederne af et bestemt afsnit, f.eks. Din blog, skal du bruge en klasse til bloggruppen og kombinere den med den faktiske vælger. Dette gør det muligt for dig at vælge kun billederne i bloggruppen og ikke andre billeder, f.eks. Dit logo eller sociale meia-ikoner eller billeder i andre dele af dit websted, som sidebjælken. Sådan ser CSS ud:

.blog img{max-width:100%;height:auto;}

10. Direkte børn

Jeg ville ønske, at jeg havde kendt dette, da jeg først begyndte at bruge CSS. Dette ville have frelst mig så meget tid! Brug > til at vælge de direkte børn i et element. For eksempel:

#footer > a

Dette vil vælge og stile alle de aktive linkelementer, der straks er under footer-id'et. Det vil ikke vælge noget forbi det aktive element, eller noget andet indeholdt i footer, som almindelig tekst. Dette fungerer også godt med navigationselementer på topniveau.

Specifikke Børneelementer

Tro mig, dette er praktisk, når du er styling lister. Du skal bare tælle, hvor mange elementer ned elementet er, at du vil style og derefter anvende den stil.

li:nth-child(2) {font-weight:800;color: blue;text-style:underline;}

CSS ovenfor retter sig mod det andet element i listen og gør det fed, understreget og blåt. Tilføj et "n" efter tallet inden parentes, og du kan målrette mod hver anden liste element. Forestil dig at kunne style hver anden linje i et bordformatlayout for nem læsning. CSS ville være:

li:nth-child(2)

11. Anvend CSS til flere klasser eller vælgere

Lad os sige, at du ville tilføje en ensartet grænse omkring alle billeder, blogsektionen og sidebjælken. Du behøver ikke at skrive den samme præcise CSS 3 gange. Læg kun disse emner ud, adskilt af kommaer. Her er et eksempel:

.blog, img, .sidebar {border: 1px solid #000;}

Uanset om du har været webdesigner i årevis, eller hvis du lige er begyndt at lære at bygge hjemmesider, kan den rigtige vej virke som en stenig, uendelig rejse. Når du har indsnævret hvilke sprog du vil lære, skal du lære og forbedre dine færdigheder.

Ligegyldigt hvad du lærer, er CSS en af ​​de væsentlige, men skræmmende færdigheder, du skal beherske. Det behøver dog ikke være så svært, især hvis du kender et par praktiske og mindre kendte CSS teknikker til at få arbejdet gjort.

12. box-dimensionering: border-box;

Dette er en favorit blandt mange webdesignere, fordi det løser problemet med polstring og layoutproblemer. Dybest set, når du sætter en boks til en bestemt bredde og tilføjer padding til den, tilføjer polstringens størrelse på boksen. Men med boks størrelse: grænse kasse; , dette er negeret, og bokse forbliver den størrelse, de er ment til at være.

box-dimensionering

13.: før

Denne CSS er en vælger, der giver dig mulighed for at vælge et CSS element og indsætte indhold før hvert element med en bestemt klasse, der er anvendt på den. Lad os sige, at du havde en hjemmeside, hvor du ønskede specifik tekst før hver H2-tag. Du ville os denne opsætning:

h2:before {content: "Read: ";    color: #F00;}

Dette er yderst praktisk, især hvis du bruger en ikon skrifttype. Du kan placere ikoner inden bestemte elementer og anvende det globalt.

Før

14. efter

Ligesom: før vælgeren kan du bruge: efter at indsætte indhold globalt på bestemte elementer. En praktisk brug ville tilføje "læs mere" efter hvert uddrag på en blog. Sådan gør du det.

p:after{content: " -Read more… ";color:#f00;}
efter

15. indhold

indhold er en CSS-egenskab, der er praktisk, når du skal indsætte et element, som du vil kunne styre. Den mest almindelige brug, jeg har set for dette, er at indsætte et ikon fra en ikon skrifttype på et bestemt sted. I eksemplerne ovenfor kan du se, at du skal pakke den tekst, du vil indsætte i anførselstegn.

16. CSS nulstilles

Forskellige browsere har standard CSS-indstillinger, så det er et must at nulstille dem, så du har et jævnt og ensartet spillerum. Tænk på det som at bygge et hus, og om du bygger på siden af ​​et bjerg, på en sandstrand eller i midten af ​​et skovområde, vil du have det fundament at være niveau.

Denne CSS-nulstillingsmetode sætter en standardbase for alle dine hjemmesider, hvilket giver dem konsistens i deres CSS-startpunkt. Det fjerner uønskede grænser, forudindstillede margener, polstring, linjer højder, stilarter på lister osv. Eric Meyer oprettet en der fungerer godt .

17. Drop caps

Alle elsker drop caps. Det minder os om den traditionelle trykte bog, og det er en fantastisk måde at starte en indholdsside på. Det 1 st store bogstav tager virkelig din opmærksomhed. Der er en nem måde at oprette en drop cap på css, og det er ved at bruge pseudoelementet:: første bogstav. Her er et eksempel:

p:first-letter{display:block;float:left;margin:3px;color:#f00;font-size:300%;}

Hvad dette gør er brevet til 3x størrelsen af ​​de andre bogstaver. Den sætter 3px plads omkring brevet for at forhindre overlapning og sætter farven på brevet til rødt.

dropcap

18. Tvinge tekst til at være alle caps, alle små bogstaver eller kapitaliserede

Det ville være absurt at skrive en hel sektion i alle caps. Forestil dig at skulle gå tilbage og rette det senere, når formatet på hjemmesiden ændres, eller det bliver opdateret. Brug i stedet følgende css-stilarter til at tvinge tekst til en bestemt formatering. Denne css er rettet mod h2-titelmærket.

  • h2 {tekst-transform: store bogstaver; } - alle caps
  • h2 {tekst-transform: små bogstaver; } - alt små bogstaver
  • h2 {text-transform: kapitalisere; } - aktiverer det første bogstav i hvert ord.
sag

19. Lodret skærmhøjde

Nogle gange vil du have et afsnit for at udfylde hele skærmen, uanset hvad skærmstørrelsen er. Du kan styre dette med vh eller se højde. Nummeret før det er en procentdel, så hvis du vil have det til at fylde 100% af browseren, vil du sætte det til 100. Du kan sætte det til en værdi som 85% for at rumme en fast navigeringsmenu.

Opret en klasse for beholderen og anvend mængden af ​​vh du vil have den. En ting du måske skal tilpasse er medieforespørgselsværdien for bestemte skærmbilleder eller orienteringer som telefoner i portrættilstand. Forestil dig at strække et landskabsbillede for at passe portrætstilstand. Det ville bare ikke se godt ud.

.fullheight { height: 85vh; }

20. Style telefonforbindelser

Hvis du har et link, der kalder et telefonnummer, når en bruger tapper det på deres telefon, kan du have problemer med at stylere det med den traditionelle aktive linkvælger. Brug i stedet følgende CSS:

a[href^=tel] {    color: #FFF;    text-decoration: none;}