20 viktige CSS triks hver designer burde vite
Denne er for de absolutte nybegynnere. Når du har lært hvordan boksemodellen fungerer, og hvordan du flyter disse boksene, er det på tide å bli seriøs om CSS. For det formål har vi samlet en massiv liste med tips, triks, teknikker og sporadisk skitten hack for å hjelpe deg med å bygge designet du ønsker.
CSS kan bli vanskelig, og du bør også. Og nå, i ingen bestemt rekkefølge, (nesten) alt du trenger å vite:
1. Absolutt posisjonering
Hvis du vil ha kontroll over hvor et element bor hele tiden på vår nettside, er absolutt posisjonering nøkkelen til at dette skjer. Hvis du tenker på nettleseren din som en stor begrensingsboks, kan absolutt posisjonering du kontrollere nøyaktig hvor i en boks et element vil forbli. Bruk topp, høyre, bunn og venstre, ledsaget av en pikselverdi for å kontrollere hvor et element forblir.
position:absolute;top:20px;right:20pxCSS ovenfor angir posisjonen til et element for å holde 20px fra toppen og høyre kantene av nettleseren din. Du kan også bruke absolutt posisjonering inne i en div.
2. * + velger
Med * kan du velge alle elementer i en bestemt velger. Hvis du for eksempel brukte * p og deretter lagt til CSS-stiler til det, ville det gjøre det for alle elementene i dokumentet ditt med en
stikkord. Dette gjør det enkelt å målrette deler av nettstedet ditt globalt.
3. Overstyrer alle stiler
Dette bør brukes sparsomt, fordi hvis du gjør dette for alt, kommer du til å finne deg selv i trøbbel i det lange løp. Men hvis du vil overstyre en annen CSS-stil for et bestemt element, bruk ! Viktig etter stilen i css. Hvis jeg for eksempel ville ha H2-overskriftene i en bestemt del av nettstedet mitt for å være rødt i stedet for blå, ville jeg bruke følgende CSS:
.section h2 { color:red !important; }4. Sentering
Sentering er vanskelig, fordi det avhenger av hva du prøver å sitte på. La oss ta en titt på CSS av elementer som skal sentrere, basert på innhold.
Tekst
Tekst er sentrert ved hjelp av tekst-align: center; . Hvis du vil ha det til hver side, bruk venstre eller høyre i stedet for sentrum.
Innhold
En div (eller et annet element) kan senteres ved å legge til blokkegenskapen til den, og deretter bruke automatiske marginer. CSS vil se slik ut:
#div1 {display: block;margin: auto;width: anything under 100%}Grunnen til at jeg legger "noe under 100%" for bredde er fordi hvis det var 100% bredt, så hvis ville være full bredde og ikke ville trenge sentrering. Det er best å ha en fast bredde, som 60% eller 550px, etc.
5. Vertikal justering (for en linje med tekst)
Du vil bruke dette i en CSS navigasjonsmeny, jeg kan nesten garantere det. Nøkkelen er å gjøre høyden på menyen og linjens høyde på samme måte. Jeg ser denne teknikken mye når jeg går tilbake og rediger eksisterende nettsteder for klienter. Her er et eksempel:
.nav li{line-height:50px;height:50px;}6. Bøyeeffekter
Dette brukes til knapper, tekstkoblinger, bock-seksjoner på nettstedet ditt, ikoner og mer. Hvis du vil ha noe å bytte farger når noen svinger musen over det, bruker du samme CSS, men legg til : svev den og endre stylingen. Her er et eksempel:
.entry h2{font-size:36px;color:#000;font-weight:800;}.entry h2:hover{color:#f00;}Hva dette gjør er at det endrer fargen på h2-koden fra svart til rødt når noen svinger over det. Det gode ved å bruke: hover er at du ikke må deklarere skriftstørrelsen eller vekten igjen, hvis den ikke endres. Det endrer bare det du angir.
Overgang
For sveveeffekter, som med menyer eller bilder på nettstedet ditt, vil du ikke ha fargene som knekker for fort til sluttresultatet. Du vil helst lette forandringen i gradvis, som er hvor overgangseiendommen kommer inn i spill.
.entry h2:hover{color:#f00;transition: all 0.3s ease;}Dette gjør at endringen skjer over .3 sekunder, i stedet for å bare øyeblikkelig snappe til rødt. Dette gjør hover-effekten mer behagelig for øyet og mindre glidende.
7. Link stater
Disse stilene blir savnet av mange designere, og det forårsaker virkelig bruksproblemer med de besøkende. Den : link pseudoklassen styrer alle koblinger som ikke har blitt klikket på enda. Den besøkte pseudoklassen håndterer utformingen av alle linkene du allerede har besøkt. Dette forteller nettsted besøkende der de allerede har vært på nettstedet ditt, og hvor de ennå ikke har funnet ut.
a:link { color: blue; }a:visited { color: purple; }8. Juster størrelsen på bildene slik at de passer
Noen ganger får du en klemme hvor bildene må passe en viss bredde, mens skalering er proporsjonalt. En enkel måte å gjøre dette på er å bruke maksimal bredde for å håndtere dette. Her er et eksempel:
img {max-width:100%;height:auto;}Dette betyr at det største bildet muligens kan være 100%, og høyden beregnes automatisk, basert på bildebredden. I noen tilfeller må du kanskje også spesifisere bredden ved 100%.
9. Kontroller elementene i en seksjon
Bruk bildeteksempelet ovenfor, hvis du bare vil målrette mot bildene av en bestemt seksjon, som bloggen din, bruker du en klasse for bloggdelen, og kombinerer den med den aktuelle velgeren. Dette gjør at du bare kan velge bildene av bloggdelen, og ikke andre bilder, for eksempel logoen din, eller sosiale meia-ikoner eller bilder i andre deler av nettstedet ditt, som sidefeltet. Slik ser CSS ut:
.blog img{max-width:100%;height:auto;}10. Direkte barn
Jeg skulle ønske jeg visste dette da jeg først begynte å bruke CSS. Dette ville ha frelst meg så mye tid! Bruk > til å velge de direkte barna til et element. For eksempel:
#footer > aDette vil velge og stil alle aktive koblingselementene som er umiddelbart under Footer-IDen. Det vil ikke velge noe forbi det aktive elementet, eller noe annet som finnes i bunnteksten, som vanlig tekst. Dette fungerer også bra med navigasjonselementer på toppnivå.
Spesifikke barnelementer
Tro meg, dette er praktisk når du er styling lister. Du trenger bare å telle hvor mange elementer ned elementet er som du vil stil og deretter bruke den stilen.
li:nth-child(2) {font-weight:800;color: blue;text-style:underline;}CSS ovenfor retter seg mot det andre elementet i listen og gjør det fet, understreket og blått. Legg til en "n" etter tallet i parentes, og du kan målrette mot hvert andre listepost. Tenk deg å kunne style hver annen linje i en tabellformatoppsett for enkel lesing. CSS ville være:
li:nth-child(2)11. Bruk CSS til flere klasser eller velgere
La oss si at du ønsket å legge til en identisk ramme rundt alle bilder, bloggsnittet og sidebjelken. Du trenger ikke å skrive ut samme eksakte CSS 3 ganger. Bare oppfør disse elementene, adskilt av kommaer. Her er et eksempel:
.blog, img, .sidebar {border: 1px solid #000;}Enten du har vært webdesigner i mange år, eller du bare har begynt, lærer du å bygge nettsteder på riktig måte kan det virke som en steinete, uendelig reise. Når du har innsnevret hvilke språk du vil lære, må du lære og forbedre dine ferdigheter.
Uansett hva du lærer, er CSS en av de essensielle, men skremmende ferdighetene du må mestre. Det trenger ikke å være så vanskelig, men spesielt hvis du vet noen praktiske og mindre kjente CSS teknikker for å få jobben gjort.
12. boks størrelse: border-box;
Dette er en favoritt blant mange webdesignere, fordi det løser problemet med utfylling og layoutproblemer. I utgangspunktet, når du setter en boks til en bestemt bredde, og legger til polstring, legger polstringene til størrelsen på boksen. Men med boks størrelse: grense-boksen; , dette er negert, og bokser holder størrelsen de er ment å være.
13.: før
Denne CSS er en selector som lar deg velge et CSS-element og sette inn innhold før hvert element med en bestemt klasse som er brukt på den. La oss si at du hadde et nettsted der du ønsket spesifikk tekst før hver H2-tag. Du ville oss dette oppsettet:
h2:before {content: "Read: "; color: #F00;}Dette er ekstremt praktisk, spesielt hvis du bruker en ikonfont. Du kan plassere ikoner før enkelte elementer, og bruke det globalt.
14. etter
Som forselgeren, kan du bruke: etter å sette inn innhold globalt på bestemte elementer. En praktisk bruk ville være å legge til "les mer" etter hvert utdrag på en blogg. Slik gjør du det.
p:after{content: " -Read more… ";color:#f00;}
15. innhold
innhold er en CSS-egenskap som kommer til nytte når du må sette inn et element som du vil kunne kontrollere. Den vanligste bruken jeg har sett på dette er å sette inn et ikon fra en ikonfont i et bestemt sted. I eksemplene ovenfor kan du se at du må pakke inn teksten du vil legge inn i anførselstegn.
16. CSS tilbakestille
Ulike nettlesere har standard CSS-innstillinger, så det er et must for å tilbakestille dem, slik at du har et jevnt, konsistent spillfelt. Tenk på det som å bygge et hus, og om du bygger på siden av et fjell, på en sandstrand eller i midten av et skogkledd område, vil du ha grunnlaget for å være nivå.
Denne CSS reset-metoden setter en standardbase for alle dine nettsteder, noe som gir dem konsistens i deres CSS-startpunkt. Det fjerner uønskede grenser, forhåndsdefinerte marginer, polstring, linjer høyder, stiler på lister, etc. Eric Meyer opprettet en som fungerer bra .
17. Drop caps
Alle elsker drop caps. Det minner oss om den tradisjonelle trykte boken, og er en fin måte å starte en innholdsside på. Det første, store bokstaver tar virkelig oppmerksomheten din. Det er en enkel måte å lage en dråpehett i css, og det er ved å bruke pseudoelementet:: første bokstav. Her er et eksempel:
p:first-letter{display:block;float:left;margin:3px;color:#f00;font-size:300%;}Hva dette gjør er å sette brevet til 3x størrelsen på de andre bokstavene. Den setter 3px plass rundt brevet for å hindre overlapping, og setter fargen på brevet til rødt.
18. Tvinge tekst til å være alle kapsler, alle små bokstaver eller kapitaliserte
Det ville være absurd å skrive en hel del i alle caps. Tenk deg å måtte gå tilbake og fikse det senere når formatet på nettstedet endres, eller det blir oppdatert. I stedet bruker du følgende css-stiler for å tvinge tekst til en bestemt formatering. Denne cssen er rettet mot h2-tittel-taggen.
- h2 {tekst-transform: store bokstaver; } - alle caps
- h2 {tekst-transform: små bokstaver; } - alt små bokstaver
- h2 {text-transform: kapitalisere; } - kapitaliserer 1 st bokstav i hvert ord.
19. Vertikal skjermhøyde
Noen ganger vil du ha en seksjon for å fylle hele skjermen, uansett hva skjermstørrelsen er. Du kan kontrollere dette med vh, eller se høyde. Tallet før det er en prosentandel, så hvis du vil at den skal fylle 100% av nettleseren, vil du sette den til 100. Du kan sette den til en verdi som 85% for å imøtekomme en fast navigeringsmeny.
Opprett en klasse for beholderen og bruk mengden vh du vil ha den. En ting du kan trenge å finjustere er spørringsverdien for media for bestemte skjermbilder eller orienteringer som telefoner i stående modus. Tenk deg å strekke et landskapsbilde for å passe portrettmodus. Det ville bare ikke se bra ut.
.fullheight { height: 85vh; }20. stil telefonkoblinger
Hvis du har en lenke som kaller et telefonnummer når en bruker tapper den på telefonen, kan det hende du har problemer med å stylere den med den tradisjonelle aktive lenkevelgeren. I stedet bruker du følgende CSS:
a[href^=tel] { color: #FFF; text-decoration: none;}